/* 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.
 */

@media (max-width: 760px) {

  /* ---- 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); }
}

/* 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. */
@media (max-width: 400px) {
  html, body { overflow-x: hidden; }
}