/* ==========================================================================
   Readability and navigation fixes, loaded last.
   Type sizes were rescaled in the other stylesheets (49% of declarations were
   under 12px). This handles the consequences plus the mobile menu, which the
   original hid entirely below 850px with nothing in its place.
   ========================================================================== */

/* ---------- Rhythm ---------- */
body { line-height: 1.65; }
p, li, dd, .feature p, .split-card li, .method-row > dd, .faq details > p { line-height: 1.75; }
h1, h2, h3 { line-height: 1.12; }

/* Comfortable reading measure. */
.sec-head > p, .faq details > p, .method-row > dd,
.feature p, .disclaimer, .footer-brand p { max-width: 72ch; }

/* ---------- Containers sized around the old smaller text ---------- */
.topbar { height: auto; min-height: 78px; padding-block: 12px; }
.fields textarea { height: auto; min-height: 88px; }
[id] { scroll-margin-top: 96px; }

/* ---------- Tap targets ---------- */
.primary-btn, .next-btn, .back-btn, .ghost-btn, .share-btn,
.faq summary, .goal-card { min-height: 44px; }

/* ---------- Mobile navigation ----------
   The header nav was `display:none` below 850px with no replacement, so on a
   phone the menu simply did not exist. It now wraps onto its own row instead. */
@media (max-width: 850px) {
  .topbar { flex-wrap: wrap; row-gap: 12px; }
  nav {
    display: flex; order: 3; width: 100%;
    flex-wrap: wrap; gap: 10px 20px; padding-top: 4px;
    border-top: 1px solid var(--line);
  }
  nav a { padding: 8px 0; font-size: 14px; }
}
@media (max-width: 560px) {
  .sec-head > p, .faq details > p { max-width: none; }
  nav { gap: 8px 16px; }
  nav a { font-size: 13.5px; }
}

/* The hero proof block previously held an unverifiable rating. It now carries a
   factual statement instead, so it no longer needs the avatar row layout. */
.proof > div > strong { font-size: 15px; }
.proof > div > small { display: block; margin-top: 4px; }

/* ---------- Motion ----------
   Smooth in-page scrolling for menu and anchor links, disabled for anyone who
   has asked their system to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Brand lockup. "PHASEBUILT" is 50px wider than the old "PHASE3" mark, which
   overflowed the topbar on 320px screens. Step it down on narrow viewports so
   the brand and the call to action stay on one line. */
@media (max-width: 430px) {
  .brand      { font-size: 17px; letter-spacing: 1px; gap: 8px; }
  .brand-mark { width: 31px; height: 31px; font-size: 13px; }
}

/* ==========================================================================
   Mobile fixes, verified in headless Chromium at 320 / 375 / 430px.
   ========================================================================== */

/* The page scrolled sideways on every phone width: 470px of content in a 375px
   viewport. Cause was .stats-strip. Its `1fr` tracks are really `minmax(auto,1fr)`,
   so each cell was floored at its min-content width, and the cells are flex rows
   holding a 43px number beside an unwrapped uppercase label. min-width:0 lets the
   tracks shrink to the real column width and flex-wrap lets the label drop below
   the number instead of forcing the track wider.
   This also fixed the intake modal: it is position:fixed, so it was sizing to the
   overflowing 470px containing block and its right edge, including the close
   button, sat off screen. */
@media (max-width: 850px) {
  .stats-strip > div,
  .stats-strip > p        { min-width: 0; flex-wrap: wrap; }
  .stats-strip > div > *,
  .stats-strip > p > *    { min-width: 0; }
}

/* A toast wider than the screen would reintroduce the same sideways scroll. */
.toast { max-width: calc(100vw - 44px); }

/* The intake panel used height:100vh. On a phone 100vh is the address-bar-less
   height, so the panel ran past the bottom of the visual viewport and the
   Continue button sat below the fold. dvh tracks the actual visible height.
   The 100vh in styles.css stays as the fallback for browsers without dvh. */
@media (max-width: 560px) {
  .modal-panel { height: 100dvh; max-height: 100dvh; }
}

/* Tap targets. The existing 44px rule covered buttons and cards but missed every
   link: menu items and footer links measured 38px, "See a sample plan" 26px. */
@media (max-width: 850px) {
  nav a,
  .footer-col a,
  .hero-actions a   { display: flex; align-items: center; min-height: 44px; }
  .hero-actions a   { display: inline-flex; }
  .brand            { min-height: 44px; }
  .close            { min-width: 44px; min-height: 44px; }
}

/* Hides the intake once a plan is generated. This used to be
   form.style.display='none' in script.js, which silently did nothing: the intake
   contains <select name="style">, and a form control's name shadows the form's
   own properties, so form.style was that select rather than a CSSStyleDeclaration.
   The result rendered 1650px below a still-visible form, which on a phone looked
   like the Generate button had done nothing. */
#planForm.form-complete { display: none; }