/* Gondena — phone fixes for the top bar.
   Added 2026-08-07. Every page builds its own top bar inline, and on a
   360px phone the items wrapped onto two or three lines in BOTH English
   and Spanish. This file is the one shared place that fixes it.

   It only applies below 430px, so desktop and tablet are untouched.
   !important is needed because most pages set these values inline. */

@media (max-width: 430px) {

  nav,
  nav.topbar,
  header.topbar {
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    flex-wrap: nowrap !important;
  }

  /* index.html groups its links in a .links wrapper that wraps to a
     second row on its own. Tighten it so the bar stays one row. */
  nav .links {
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  /* Stop a two-word label breaking in half. */
  nav a,
  nav button,
  header.topbar a,
  header.topbar button {
    white-space: nowrap !important;
  }

  nav a,
  header.topbar a {
    font-size: 12px !important;
  }

  nav button,
  header.topbar button {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  /* The wordmark is the one thing that may shrink furthest. */
  nav .brand,
  nav .brand-small,
  header.topbar .brand {
    font-size: 13px !important;
  }

  nav .brand img {
    height: 22px !important;
  }

  /* --- Tap targets, added 2026-08-08. -------------------------------
     Every header link and button was 17-29px tall. A fingertip covers
     about 44px; Apple asks 44, Google 48. The text size does NOT change
     here - only the touchable area around it grows, so the bar looks
     almost the same and is far easier to hit.

     min-height rather than height, so nothing is forced to shrink.
     inline-flex + align-items:center keeps the label vertically centred
     inside the taller box. The nav's own vertical padding is trimmed so
     the bar does not get tall on screen. */
  nav,
  nav.topbar,
  header.topbar {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    align-items: center !important;
  }

  nav a,
  nav button,
  header.topbar a,
  header.topbar button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* FOOTER LINK ROW — added 2026-08-08.
     index.html's footer has a row of standalone links (Terms, Privacy, Log in,
     Pro login, Apply) that behave like buttons but were only 22px tall. Same
     treatment as the header: the text size does not change, only the touchable
     area around it.

     Deliberately NOT applied to links sitting inside a sentence, such as the
     "Need help? Email support@gondena.com" line. That one is 17px and stays
     that way: a 44px inline link tears a paragraph apart, and the guidance is
     about standalone controls, not words inside prose. If it needs to be easier
     to hit, the answer is to pull it out of the sentence, not to pad it. */
  footer .links a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  footer .links {
    gap: 14px !important;
  }

  /* NO extra side padding here. Tried it on 2026-08-08 and it broke
     index.html: that page has the most header links, and 8px each side
     on every one pushed the bar to 464px inside a 345px space. Height is
     what a fingertip actually misses; the labels are already wide enough
     to hit. Left as a warning so it is not "tidied" back in. */
}

/* ───────── Show-password toggle (added 2026-08-09) ─────────
   Shared with assets/show-pw.js. Pattern copied from reset-password.html,
   which had the only copy until today.
   Outside the media query on purpose — desktop needs it too.
   min-height 44px is the tap-target rule for a standalone control. */
.show-pw {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  /* No margin. Pages using a flex/grid column gap set their own spacing. */
}
.show-pw input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-width: 1px;
  flex: none;
  cursor: pointer;
  accent-color: #0f172a;
}