/* Pilot CHROME — the web-only presentation shell around engine content.
   Every color/size fact is a var(--ds-*) token (drift-lens clean); the engine's
   obd.ds.css is the SSOT. Two jobs:
     1. desktop device-frame (the phone-frame look, ≥768px) via ext frame tokens
     2. the site accountability footer (lives outside the frame on the backdrop)
   Content is authored with engine primitives (.ds-list/.ds-row/.ds-section/…);
   glass is chrome-only (.ds-glass) per the engine's honest-glass rule. */

/* screen-reader-only (engine has no a11y-hide primitive) */
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* mobile-first: plain grouped background (engine body already sets it) + column */
main {
  display: block;
}

/* ≥768px: the device frame. Backdrop + bezel are ext frame chrome tokens. */
@media (min-width: 768px) {
  body {
    min-height: 100vh;
    background:
      radial-gradient(
        80% 60% at 15% 8%,
        var(--ds-ext-frame-glow-teal) 0%,
        transparent 60%
      ),
      radial-gradient(
        70% 60% at 90% 92%,
        var(--ds-ext-frame-glow-blue) 0%,
        transparent 60%
      ),
      linear-gradient(
          160deg,
          var(--ds-ext-frame-base-hi),
          var(--ds-ext-frame-base-lo)
        )
        fixed;
  }

  main {
    width: 412px;
    max-width: calc(100vw - 48px);
    height: 88vh;
    max-height: 900px;
    margin: 5.5vh auto;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 46px;
    background: var(--ds-surface-page);
    box-shadow: var(--ds-ext-frame-box-shadow);
    scrollbar-width: none;
  }

  main::-webkit-scrollbar {
    display: none;
  }
}

/* the engine content column sits inside main (mobile: full-bleed; desktop: frame) */
.ds-screen {
  padding-top: var(--ds-space-5);
  padding-bottom: var(--ds-space-8);
}

/* site accountability footer — outside the frame, reads on BOTH the light
   mobile body and the dark desktop backdrop (HIG audit: footer must not be
   dark-on-dark). All colors are ds tokens. */
.siteFooter {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--ds-space-6) var(--ds-space-5) var(--ds-space-8);
  text-align: center;
  font: var(--ds-type-footnote);
  color: var(--ds-label-2);
}
.siteFooter a {
  color: var(--ds-accent);
  text-decoration: underline;
}
.siteFooter p {
  margin: var(--ds-space-2) 0 0;
  color: var(--ds-label-2);
}
@media (min-width: 768px) {
  .siteFooter {
    color: var(--ds-surface-card);
    opacity: 0.86;
  }
  .siteFooter a {
    color: var(--ds-accent-contrast);
    text-decoration: underline;
  }
}

/* Adaptive report shell: preserve the compact phone presentation below the
   iPad regular-width boundary, but let the shared report renderer use the
   available window on iPad. The route-scoped selector leaves legacy pages
   untouched and does not create a second page or component tree. */
@media (min-width: 768px) {
  body:has(main > [data-renderer="mobile-article-spine"]) {
    background: var(--ds-surface-page);
  }

  main:has(> [data-renderer="mobile-article-spine"]) {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    overflow: visible;
    border-radius: 0;
    background: var(--ds-surface-page);
    box-shadow: none;
  }

  main > [data-renderer="mobile-article-spine"] {
    width: min(100%, 760px);
    max-width: none;
    margin-inline: auto;
    padding-inline: clamp(var(--ds-space-5), 5vw, var(--ds-space-8));
  }

  body:has(main > [data-renderer="mobile-article-spine"]) .siteFooter {
    max-width: 760px;
    color: var(--ds-label-2);
    opacity: 1;
  }

  body:has(main > [data-renderer="mobile-article-spine"]) .siteFooter a {
    color: var(--ds-accent);
  }
}

@media (min-width: 1024px) {
  main > [data-renderer="mobile-article-spine"] {
    display: grid;
    grid-template-columns: minmax(0, 640px) minmax(260px, 300px);
    column-gap: clamp(var(--ds-space-6), 4vw, var(--ds-space-8));
    width: min(100%, 1040px);
    align-items: start;
  }

  main > [data-renderer="mobile-article-spine"] > * {
    grid-column: 1;
  }

  main > [data-renderer="mobile-article-spine"] > nav[data-block="scroll-navigation"] {
    grid-column: 2;
    grid-row: 2 / span 2;
    position: sticky;
    top: var(--ds-space-5);
  }

  main > [data-renderer="mobile-article-spine"] > nav[data-block="scroll-navigation"]
    .ds-section-header {
    margin-top: 0;
  }

  /* The navigation list is the useful side rail at regular widths; its
     compact-page title only duplicates the surrounding report context there.
     Keep it intact below this breakpoint so iPhone and Split View retain the
     current reading order and hierarchy. */
  main > [data-renderer="mobile-article-spine"] > nav[data-block="scroll-navigation"]
    .report-navigation-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Keep the rail useful at short iPad heights. The list owns its own scroll
     when the viewport cannot show every destination at once. */
  main > [data-renderer="mobile-article-spine"] > nav[data-block="scroll-navigation"]
    > .ds-list {
    max-height: calc(100vh - var(--ds-space-5) - var(--ds-space-5));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body:has(main > [data-renderer="mobile-article-spine"]) .siteFooter {
    max-width: 1040px;
  }
}

@media (min-width: 1024px) and (max-height: 859px) {
  /* Summaries are helpful in a tall regular window, but compete with the
     answer destinations in landscape/split-height layouts. */
  main > [data-renderer="mobile-article-spine"] > nav[data-block="scroll-navigation"]
    .ds-subhead {
    display: none;
  }
}

/* MIGRATION COMPAT — remove when glass.css/globals.css are deleted. The retired
   globals.css resets bare `a` to color:inherit + no-underline and loads AFTER the
   engine, so on pages already moved to primitives it strips prose-link affordance
   (link text becomes indistinguishable from body). Re-assert the engine's content
   link, scoped to the .ds-screen column and excluding pills, at a specificity that
   beats a bare `a{}` reset regardless of load order. Token-only (drift clean). */
.ds-screen a:not(.ds-badge) {
  color: var(--ds-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ——————————————————————————————————————————————————————————————————————
   PILOT CONTENT PRIMITIVES — the two content affordances the engine has no
   primitive for (same "engine has no X" precedent as .srOnly above). Token-only
   → drift-lens clean. Delete if/when the engine grows a row-level sub-fold + a
   copy-chip. —————————————————————————————————————————————————————————————— */

/* compact inline sub-fold: P3 depth INSIDE a notice / step / row (the engine's
   .ds-section is a full elevated card — too heavy for a row-level "why"). */
.miniFold {
  margin-top: var(--ds-space-2);
  border-top: 0.5px solid var(--ds-separator);
}
.miniFold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  min-height: var(--ds-hit); /* 44pt tap target (HIG) */
  padding: var(--ds-space-2) 0 var(--ds-space-1);
  font: var(--ds-type-footnote);
  color: var(--ds-accent);
}
.miniFold > summary::-webkit-details-marker { display: none; }
.miniFold > summary::before {
  content: "▸";
  font: var(--ds-type-caption);
  transition: transform 0.15s ease;
}
.miniFold[open] > summary::before { transform: rotate(90deg); }
.miniFold > div { padding: 0 0 var(--ds-space-2); }
.miniFold p { margin: 0; font: var(--ds-type-subhead); }

/* copy-№ chip on TSB rows (CopyChip.jsx). Quiet outline pill; a transparent
   ::before expands the hit region to 44pt without growing the visible pill. */
.copyChip {
  position: relative;
  border: 0.5px solid var(--ds-separator);
  background: transparent;
  border-radius: var(--ds-radius-row);
  font: var(--ds-type-caption);
  padding: var(--ds-space-1) var(--ds-space-2);
  cursor: pointer;
  color: var(--ds-accent);
  white-space: nowrap;
}
.copyChip::before {
  content: "";
  position: absolute;
  inset: -12px -8px;
}

/* ——————————————————————————————————————————————————————————————————————
   PROSE base — plain editorial/legal pages (about · contact · methodology ·
   privacy) are bare-tag HTML, not the role-based component grammar. The engine
   is role-based and has no prose primitive, so these pages wrap their content in
   `.ds-screen.ds-prose` and this styles the bare tags off the type scale. Scoped
   to .ds-prose (specificity beats the retired globals.css bare-tag base while it
   still loads for the legacy DiagnosticTool page). Token-only → drift clean.
   —————————————————————————————————————————————————————————————————————— */
.ds-prose { font: var(--ds-type-body); color: var(--ds-label-1); }
.ds-prose h1 {
  font: var(--ds-type-large-title);
  letter-spacing: var(--ds-type-large-title-tracking);
  margin: 0 0 var(--ds-space-4);
}
.ds-prose h2 {
  font: var(--ds-type-title2);
  letter-spacing: var(--ds-type-title2-tracking);
  margin: var(--ds-space-6) 0 var(--ds-space-2);
}
.ds-prose h3 { font: var(--ds-type-title3); margin: var(--ds-space-5) 0 var(--ds-space-1); }
.ds-prose p { margin: var(--ds-space-3) 0; }
.ds-prose ul,
.ds-prose ol { margin: var(--ds-space-3) 0; padding-inline-start: var(--ds-space-5); }
.ds-prose li { margin: var(--ds-space-1) 0; }
.ds-prose a {
  color: var(--ds-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ds-prose strong { font-weight: 600; }