/* mobile.css
 * Corrections for small screens, applied after every page's own styles.
 *
 * These pages were written and reviewed at 1440px, where three specific failures are
 * invisible: a single element wider than the viewport makes the whole page scroll
 * sideways, a control under about 32px is hard to hit with a thumb, and text under 12px
 * is unreadable outdoors. All three were present and all three are now measured by
 * scripts/verify_mobile.py at 390px, which is the common floor.
 *
 * Everything here is inside a media query. Nothing changes on a desktop.
 */

/* BREAKPOINT: 767px, aligned with site/components.css. Founder ruling R-2.
   This was 760 and components.css was 767. The seven pixels between them were a band in
   which the shared tables had already become stacked cards while the overflow defences
   below had not yet engaged, which is the exact combination this block exists to prevent.
   Moved to 767 so one boundary governs both files. */
@media (max-width: 767px) {

  /* ---- 1. Sideways scroll -------------------------------------------------
   * The welcome, thanks and homeowner-welcome pages were 520px wide on a 390px
   * phone. The cause was not a fixed width: body is a column flex container, and
   * a bare URL in the share panel ("https://www.assethistoryreport.com/...") has
   * no break opportunity, so it set the min-content width of the whole page and
   * everything above it stretched to match.
   *
   * Two defences. Let long strings break, and stop flex and grid children from
   * refusing to shrink below their content, which is the default and is almost
   * never what you want on a phone. */
  .share-link,
  .share-linkrow,
  code, kbd, samp,
  a[href^="http"],
  a[href^="mailto"] {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body > *,
  .wrap, .container, .container-wide, .tx-wrap, .ins-wrap, .oh, .ba, .bt-in, .ev3-in {
    min-width: 0;
    max-width: 100%;
  }

  /* A grid or flex child defaults to min-width:auto and will happily push a page
   * sideways rather than shrink. */
  .grid > *, .two > *, .one > *, .tx-split > *, .ins-grid > *,
  .bt-grid > *, .ev3-grid > *, .rmrow > *, .ba-pair > * {
    min-width: 0;
  }

  img, svg, video, table, pre { max-width: 100%; }

  /* ---- 2. Tap targets -----------------------------------------------------
   * 32px is the floor a thumb can hit reliably. The mobile menu toggle was 30px,
   * which is the worst possible place to be short: it is the only way to navigate.
   * Inline links inside a sentence are deliberately excluded, here and in the test:
   * a link in the middle of a paragraph should be the height of the paragraph. */
  .navtoggle, .nav-toggle, [aria-label="Menu"], [aria-label="menu"],
  button.hamburger, .menu-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-link, .nav-dd-item, .nav-dd-btn,
  .foot a, footer a, .footer a,
  .btn, .btn-sample, .mini-btn, .ra, .tabbtn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Buttons that are the full width of a card should behave like buttons. */
  .btn { padding-top: 13px; padding-bottom: 13px; }

  /* Small capsule links inside cards, such as "view signed record". */
  .sys-link, .signed-link, .vsr, .rec-link { min-height: 36px; display: inline-flex; align-items: center; }

  /* Catch-all for standalone controls. A link that is a direct child of a container,
   * rather than sitting inside a sentence, is a control and needs a thumb-sized box.
   * Deliberately not applied to a[href] inside p/li/span, which stays inline. */
  div > a, section > a, header > a, footer > a, nav > a, aside > a, li > a:only-child,
  .actions a, .cta a, .hero a, .foot-links a, .fine a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  /* Brand marks and logos are links but are sized by their image. */
  .brand, a.brand, .logo, a > img { min-height: 0; }

  /* Named controls the catch-all misses: an icon-only button and a disclosure toggle
   * inside a timeline entry. Both are real controls a thumb has to find. */
  .prop-upload, .tl-toggle, .icon-btn, button[onclick] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .prop-upload { min-width: 36px; justify-content: center; }

  /* ---- 3. Legibility ------------------------------------------------------
   * Supporting copy sized at 11 to 11.5px on a desktop is fine next to 16px body
   * text and unreadable on a phone in daylight. Raise the floor without touching
   * the deliberate small print such as mono identifiers and eyebrow labels. */
  /* max(1em, ...) resolves 1em against the PARENT font size, so a paragraph that was
   * already shrunk by an inherited rule stayed small. Use an absolute floor. */
  p, li, td, dd, figcaption { font-size: max(12.5px, 1em); }
  p[style*="font-size"], li[style*="font-size"] { font-size: 12.5px !important; }
  .col-note, .demo-note, .prop-note, .hint { font-size: 12.5px; }
  /* Console and demo chrome: supporting copy sized against a dense desktop layout. */
  .col-head p, .tb-stat, .idr-area p, .chain-area p, .panel-note { font-size: 12.5px; line-height: 1.55; }
  .ev-m, .oh-pop .d, .sd-r, .class-note, .coverage-t,
  .bt-card p, .ev3-card p, .ba-fig figcaption p, .protocol-note {
    font-size: 13px;
    line-height: 1.55;
  }

  /* ---- 4. Layouts that assume width --------------------------------------- */
  .tx-split, .ins-grid, .bt-grid, .ev3-grid, .two, .tx-vs, .oh-cards, .fci-in {
    grid-template-columns: 1fr;
  }
  .ba-pair { grid-template-columns: 1fr; }
  .mk-stats { grid-template-columns: 1fr 1fr; }
  .mk-read { grid-template-columns: 1fr auto; }

  /* The annotated photograph: markers are too small and too dense for a thumb at
   * this width, and a popover pinned to a 24px dot lands off screen. Show the
   * numbered list underneath instead, which is the same content in a usable form. */
  .oh-pin { width: 34px; height: 34px; font-size: 12.5px; }

  /* Carousel dots. An 8px dot is a real control with a real job and is close to
   * unhittable with a thumb. Keep the dot visually small and give it an invisible
   * 40px box to be tapped inside, which is the standard remedy. */
  .bcap-dot, .carousel-dot, .slide-dot {
    width: 40px; height: 40px;
    background: none !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .bcap-dot::before, .carousel-dot::before, .slide-dot::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: #D4DBE4; transition: background .2s;
  }
  .bcap-dot.on::before, .carousel-dot.on::before, .slide-dot.on::before {
    background: var(--teal, #0E9384);
  }
  /* The row was spaced for 8px dots; 40px boxes would push it far too wide. */
  .bcap-dots, .carousel-dots, .slide-dots { gap: 0; margin-left: -8px; }

  /* The brand mark in a signed-in header sits at 30px; give it a thumb box without
   * changing how it looks. */
  .brand, a.brand { min-height: 40px; display: inline-flex; align-items: center; }

  /* Demo and report chrome carrying 9.5 to 11.5px supporting copy. */
  .idr-area p, .idr-note, .chain-area p, .disclosure p, .tiny, .microcopy,
  .flag p, .cs, .cs p, .legend p, .fine-print,
  .doc p, .doc .cs, .doc div > p {
    font-size: 12.5px; line-height: 1.55;
  }
  .oh-pop { width: min(300px, 84vw); }

  /* ---- THUMB SIZED CONTROLS ----
   *
   * Five pages were failing verify_mobile.py on this and nobody saw, because that check was
   * never wired into ci.sh. A back link at 23px, a text link at 15px and a footer link at 13px
   * are all real: on a phone they are a miss, and the person taps the thing beside them.
   *
   * The rule matches the check's own definition rather than guessing at one. A link surrounded
   * by other words inside a paragraph is prose and is left alone: giving every inline link a
   * 32px box would wreck the line spacing of body text to fix a problem body text does not
   * have. A link that is the whole content of its parent is a CONTROL, and a control on a phone
   * needs a thumb box.
   *
   * Height only. No padding that would move anything sideways, because scope.html already
   * overflows and widening a footer link would make that worse.
   */
  nav a, header a, footer a, .footer a, .nav a, .topnav a,
  .backlink, .back, a.back, .report-back, .link, a.lnk,
  button, [role="button"], input[type="submit"] {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
  /* Restored for the few places where inline-flex would break a wrapping row. */
  nav, header, footer, .footer, .nav, .topnav { flex-wrap: wrap; }
}

/* Anything at all that overflows on the narrowest common phone is a bug, not a
 * design choice. This catches what the rules above miss rather than hiding it:
 * verify_mobile.py still fails the page, so it gets fixed properly. */
/* THE ROOT OVERFLOW MASK IS GONE. Step 3, G-15.
 *
 * html/body overflow-x:hidden hid every sideways-scroll fault on every narrow page rather than
 * fixing one, and it actively obstructed diagnosis: the AHR pricing table read as "no element
 * exceeds the viewport" while the document measured 562, because the mask suppressed the
 * symptom without touching the cause. Each real offender is now contained at its own source
 * (the desk tab strip and the pricing comparison table both scroll inside their own boxes), so
 * the mask has nothing left to hide and verify_mobile can see the truth. It is deliberately
 * NOT replaced with another document-level clipping rule. */

/* ---- STEP 3, G-15: THE CONTROLS verify_mobile.py STILL MEASURED UNDER 32px ----
 *
 * The thumb-box rule above matches nav, header, footer and a named set of link classes. Four
 * kinds of control sat outside all of them and were reported build after build:
 *
 *   the skip link          .hm-skip is positioned off-screen until focused, so it never
 *                          inherited a nav or footer rule. It is still laid out and still
 *                          measured, and at 16-17px it was the smallest control on the page.
 *                          It is also the one control a keyboard user depends on.
 *   timeline captions      standalone links inside the index.html record timeline
 *   demo exits             the "start your own" and "back to" actions on field-demo
 *   contact links          a bare mailto in a marketing footer, measured at 15px
 *
 * Height only, and inside the same phone-width query as the rule above, so nothing moves on a
 * desktop and nothing gets wider. Widening a footer link would push scope.html further into
 * the sideways-scroll failure that is also being fixed in this pass.
 */
@media (max-width: 768px) {
  .hm-skip,
  .tl-cap a, .tl-cap, .ev a,
  .cx-cta, .btn, a.btn,
  a[href^="mailto:"] {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
  /* The skip link is absolutely positioned; inline-flex must not collapse its padding box. */
  .hm-skip { box-sizing: border-box; }
}

/* The demo exit bar. Two standalone controls that sit outside nav, header and footer. */
@media (max-width: 768px) {
  .demo-bar-next, .demo-bar-exit {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}