/* ==========================================================================
   The Measurement Lab — Responsive layer
   --------------------------------------------------------------------------
   The Claude Design output had NO media queries at all — it was mocked
   desktop-only. Everything below is net-new.

   Breakpoint is 768px per the build-spec addendum: single column throughout
   below it. A narrow tablet band (769–1023px) relaxes the widest desktop
   grids so they do not crush before the mobile layout takes over.

   MUST link AFTER every other stylesheet — these rules override desktop by
   source order, not by specificity inflation.
   ========================================================================== */

/* ==========================================================================
   TABLET (769–1023px) — relax the widest grids only
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1023px) {
  .tml-thesis-grid,
  .tml-proof-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  /* Four stage cards go 2x2 at tablet width. */
  .tml-stages-grid { grid-template-columns: 1fr 1fr; }
  /* The connector assumes the equal-column desktop layout; drop it here. */
  .tml-stages-connector { display: none; }
  .tml-seats { grid-template-columns: 1fr; }
  .tml-contact-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .tml-contact-copy { position: static; max-width: none; }
  .tml-product-detail-inner { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ==========================================================================
   MOBILE (≤768px)
   ========================================================================== */
@media (max-width: 768px) {

  /* ---- Global ---------------------------------------------------------- */
  :root {
    --gutter: var(--gutter-mobile);
    --nav-h: var(--nav-h-mobile);
  }

  html { scroll-padding-top: calc(var(--nav-h) + var(--progress-h) + var(--space-4)); }

  .tml-container { padding-inline: var(--gutter-mobile); }

  /* ---- Nav -------------------------------------------------------------
     Desktop nav is replaced wholesale by a hamburger + full-width panel.
     The progress bar persists beneath the collapsed bar, per the addendum. */
  .tml-nav { height: var(--nav-h-mobile); }

  .tml-lockup-text { font-size: var(--fs-xs); letter-spacing: 0.18em; }
  .tml-lockup svg { width: 30px; height: 24px; }

  .tml-nav-toggle { display: inline-flex; }

  /* The desktop link row becomes the slide-down panel. */
  .tml-nav-links {
    position: fixed;
    top: calc(var(--nav-h-mobile) + var(--progress-h));
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--nav-h-mobile) - var(--progress-h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--tml-white);
    border-bottom: 1px solid var(--ui-border-soft);
    box-shadow: var(--ui-shadow-menu);
    padding: var(--space-2) var(--gutter-mobile) var(--space-6);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  }
  .tml-nav-links[data-open="true"] {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  /* ≥44px tap targets throughout the panel. */
  .tml-nav-link {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-size: var(--fs-2xl);
    color: var(--tml-dark);
    border-bottom: 1px solid var(--ui-divider);
  }

  /* ---- Services group inside the panel ---------------------------------
     Collapses to an expandable group that still exposes all four section
     anchors — the addendum is explicit that they must not be hidden, since
     they are how a mobile visitor reaches a specific stage. */
  .tml-nav-svc { position: static; }

  .tml-nav-svc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    font-size: var(--fs-2xl);
    color: var(--tml-dark);
    border-bottom: 1px solid var(--ui-divider);
  }
  .tml-nav-svc-caret {
    font-size: var(--fs-lg);
    color: var(--tml-purple-mid);
    transition: transform 0.16s ease;
  }
  .tml-nav-svc-toggle[aria-expanded="true"] .tml-nav-svc-caret { transform: rotate(180deg); }

  .tml-nav-menu {
    position: static;
    display: none;
    width: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    background: var(--tml-grey);
  }
  /* On mobile the group is click-driven, not hover — hover has no meaning on
     touch, and the desktop :hover rule would fight the toggle. */
  .tml-nav-svc:hover .tml-nav-menu,
  .tml-nav-svc:focus-within .tml-nav-menu { display: none; }
  .tml-nav-menu[data-open="true"],
  .tml-nav-svc:hover .tml-nav-menu[data-open="true"] { display: block; }

  .tml-nav-menu a {
    min-height: 46px;
    display: flex;
    align-items: center;
    font-size: var(--fs-lg);
  }

  /* Page must not scroll behind an open nav panel. */
  body.tml-nav-open { overflow: hidden; }

  /* ---- Hero ------------------------------------------------------------ */
  .tml-hero { padding: calc(var(--nav-h-mobile) + 56px) 0 var(--hero-y-mobile); }
  .tml-hero-inner { max-width: none; }
  .tml-hero h1 { max-width: none; }
  .tml-hero-clarifier { font-size: var(--fs-2xl); max-width: none; }
  .tml-hero-eyebrow-text { font-size: var(--fs-2xs); letter-spacing: 0.16em; }

  /* CTAs stack: primary full-width, secondary as a text link beneath. */
  .tml-hero-ctas { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .tml-hero-ctas .tml-btn {
    justify-content: center;
    min-height: 52px;
  }
  .tml-hero-ctas .tml-link-arrow { justify-content: center; }

  /* ---- Sections -------------------------------------------------------- */
  .tml-thesis,
  .tml-stages,
  .tml-diagnostic,
  .tml-proof,
  .tml-close { padding: var(--section-y-mobile) 0; }

  .tml-thesis-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .tml-thesis-body p { font-size: var(--fs-lg); }

  /* ---- Three stages ----------------------------------------------------
     Stack in order Foundations -> Interpretation -> Decision Systems, accent
     colours and self-location lines preserved. The connector is a
     three-column device and has no meaning stacked. */
  .tml-stages-connector { display: none; }
  .tml-stages-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .tml-stages-intro { margin-bottom: var(--space-8); }
  .tml-stages-footnote { text-align: left; }

  /* ---- Diagnostic ------------------------------------------------------ */
  .tml-diagnostic .tml-container { max-width: none; }
  .tml-diag-card {
    padding: var(--space-6) var(--space-5);
    min-height: 0;
    border-radius: 14px;
  }
  .tml-diag-head { margin-bottom: var(--space-6); }
  .tml-diag-prompt { font-size: var(--fs-display-1); }

  /* Full-width stacked tap targets, ≥44px. */
  .tml-diag-option {
    min-height: 56px;
    font-size: var(--fs-md);
    padding: var(--space-4) var(--space-5);
  }
  .tml-diag-intro p { max-width: none; }
  .tml-diag-begin { width: 100%; justify-content: center; min-height: 52px; }

  /* Result: CTA stacks above the secondary explore link. */
  .tml-diag-actions { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .tml-diag-actions .tml-btn { justify-content: center; min-height: 52px; }
  .tml-diag-actions .tml-link-arrow { justify-content: center; }
  .tml-diag-blurb,
  .tml-diag-reroute { max-width: none; }
  .tml-diag-nav { flex-wrap: wrap; gap: var(--space-3); }
  .tml-diag-back { min-height: 44px; }
  .tml-diag-bail { min-height: 44px; display: inline-flex; align-items: center; }
  .tml-diag-restart { min-height: 44px; padding: 0 var(--space-4); }

  /* ---- Proof ----------------------------------------------------------- */
  .tml-proof-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .tml-proof-cards { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .tml-proof-card { padding: var(--space-5); }
  .tml-proof-card-name { font-size: var(--fs-lg); }
  .tml-reserved { padding: var(--space-6) var(--space-5); }
  .tml-insights-grid { grid-template-columns: 1fr; gap: var(--space-5); }

  /* ---- Close ----------------------------------------------------------- */
  .tml-close .tml-container { max-width: none; }
  .tml-close p { max-width: none; }
  .tml-close-cta { width: 100%; justify-content: center; min-height: 52px; }

  /* ---- Footer ---------------------------------------------------------- */
  .tml-footer { padding: var(--space-10) 0 var(--space-8); }
  .tml-footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .tml-footer-links { text-align: left; align-items: flex-start; }
  .tml-footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .tml-footer-descriptor { max-width: none; }

  /* ======================================================================
     SERVICES
     ====================================================================== */
  .tml-svc-intro { padding: calc(var(--nav-h-mobile) + 48px) 0 var(--space-8); }
  .tml-svc-intro-inner { max-width: none; }
  .tml-svc-intro p { font-size: var(--fs-lg); }
  .tml-svc-section { padding: var(--space-8) 0; }
  .tml-svc-section--last { padding-bottom: var(--space-16); }

  /* Numeral above the name rather than beside it — the inline pairing wraps
     badly at this width. */
  .tml-svc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-5);
  }
  .tml-svc-num { font-size: var(--fs-display-4); }
  .tml-svc-name { font-size: var(--fs-display-1); }
  .tml-svc-locator { font-size: var(--fs-base); }

  /* Whole product row tappable, ≥44px, chevron/state indicator preserved. */
  .tml-product-toggle {
    padding: var(--space-5);
    gap: var(--space-4);
    min-height: 64px;
    align-items: flex-start;
  }
  .tml-product-name { font-size: var(--fs-lg); }
  .tml-product-summary { font-size: var(--fs-sm); }
  .tml-product-meta { flex-direction: column; align-items: flex-end; gap: var(--space-1); }

  .tml-product-detail { padding: 0 var(--space-5) var(--space-5); }
  .tml-product-detail-inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .tml-product-body { font-size: var(--fs-base); }
  .tml-outcome { padding: var(--space-5); }

  /* Sub-analyses stack; the sample button drops below its description. */
  .tml-sub { flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-4); }
  .tml-sub .tml-sample { align-items: stretch; }
  .tml-sample-btn { justify-content: center; min-height: 48px; }

  /* ======================================================================
     SAMPLE-DELIVERABLE VIEWER — full screen on mobile
     The contained-modal pattern does not fit a phone (addendum §2).
     ====================================================================== */
  .tml-lb { padding: 0; }
  .tml-lb-panel {
    max-width: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .tml-lb-head { padding: var(--space-4) var(--space-5); }
  .tml-lb-title { font-size: var(--fs-lg); }
  .tml-lb-disclosure { font-size: var(--fs-xs); }
  .tml-lb-body {
    flex: 1;
    padding: var(--space-4);
    /* Swipe is the primary control on touch; arrows would eat width the
       image needs. js/services.js binds touchstart/touchend on the stage. */
    gap: 0;
  }
  .tml-lb-arrow { display: none; }
  .tml-lb-stage img { max-height: 70vh; }
  .tml-lb-foot { padding: var(--space-4) var(--space-5); }

  /* ======================================================================
     ABOUT & CONTACT
     ====================================================================== */
  .tml-page-head { padding: calc(var(--nav-h-mobile) + 48px) 0 0; }
  .tml-page-head h1 { max-width: none; }

  .tml-about-section { padding: var(--space-10) 0; }
  .tml-about-section--tight { padding: var(--space-6) 0 var(--space-10); }
  .tml-about-section h2 { max-width: none; }
  .tml-prose p { font-size: var(--fs-lg); }

  .tml-seats { grid-template-columns: 1fr; gap: var(--space-4); }
  .tml-seat { padding: var(--space-5); }
  .tml-seats-close { font-size: var(--fs-lg); margin-top: var(--space-6); }

  .tml-principle { padding-left: var(--space-4); }
  .tml-principle h4 { font-size: var(--fs-lg); }
  .tml-principle p { font-size: var(--fs-base); }

  .tml-breadth { padding: var(--space-10) 0; }
  .tml-breadth-list { gap: var(--space-2); }
  .tml-breadth-list li { font-size: var(--fs-sm); padding: var(--space-2) var(--space-4); }

  .tml-page-close { padding: var(--space-16) 0; }
  .tml-page-close h2 { font-size: var(--fs-display-4); }

  /* Resources: card stacks — description over a full-width download button. */
  .tml-resources { padding: var(--space-6) 0 var(--space-16); }
  .tml-resource {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-5);
    align-items: start;
  }
  .tml-resource-title { font-size: var(--fs-display-2); max-width: none; }
  .tml-resource-desc { font-size: var(--fs-base); }
  .tml-resource-action .tml-btn { width: 100%; justify-content: center; min-height: 52px; }

  /* Contact: single column, sticky released (nothing to stick beside). */
  .tml-contact { padding: var(--space-6) 0 var(--space-16); }
  .tml-contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .tml-contact-copy { position: static; max-width: none; }
  .tml-contact-lede { font-size: var(--fs-2xl); }

  .tml-form { padding: var(--space-5); }
  /* 16px minimum on inputs — anything smaller makes iOS Safari zoom the
     viewport on focus, which strands the visitor mid-form. */
  .tml-field input,
  .tml-field select,
  .tml-field textarea {
    font-size: 16px;
    min-height: 48px;
  }
  .tml-field textarea { min-height: 110px; }
  .tml-form .tml-btn { min-height: 52px; }
  .tml-form-success { padding: var(--space-8) var(--space-5); }
}

/* ==========================================================================
   TOUCH TARGETS (≤768px)
   --------------------------------------------------------------------------
   Inline text links inherit their height from the type size, which lands
   them around 18–26px — fine for a cursor, too small for a thumb. These are
   the site's arrow links and logo lockups; they get vertical padding so the
   hit area clears 44px without changing how they look.

   Applied last so it wins over the component rules above regardless of which
   file set the original height.
   ========================================================================== */
@media (max-width: 768px) {
  .tml-link-arrow,
  .tml-stage-explore,
  .tml-diag-actions .tml-link-arrow,
  .tml-footer-links a,
  .tml-contact-direct a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Logo lockups: pad the row rather than the text, so the mark and wordmark
     stay optically where they are. */
  .tml-lockup,
  .tml-footer-lockup { min-height: 44px; }

  .tml-skip { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ==========================================================================
   SMALL PHONES (≤380px) — the 375px reference width and below
   ========================================================================== */
@media (max-width: 380px) {
  .tml-lockup-text { font-size: var(--fs-3xs); letter-spacing: 0.14em; }
  .tml-proof-cards { grid-template-columns: 1fr; }
  .tml-breadth-list li { font-size: var(--fs-xs); }
}