/* generated by hig-web-engine v1.0.6 · theme obd · bb4e7458915a · light
   DO NOT EDIT — edit themes/obd.theme.json or the engine. */

:root {
  /* font (theme) */
  --ds-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* type scale (engine sizes x theme font) */
  --ds-type-display: 700 clamp(2.625rem, 8vw, 4.25rem)/1.05 var(--ds-font);
  --ds-type-display-tracking: -0.02em;
  --ds-type-large-title: 700 clamp(1.75rem, 4vw, 2.125rem)/1.2 var(--ds-font);
  --ds-type-large-title-tracking: -0.02em;
  --ds-type-title2: 700 clamp(1.3rem, 3vw, 1.5rem)/1.25 var(--ds-font);
  --ds-type-title2-tracking: -0.01em;
  --ds-type-title3: 600 1.25rem/1.3 var(--ds-font);
  --ds-type-headline: 600 1.0625rem/1.35 var(--ds-font);
  --ds-type-body: 400 clamp(0.95rem, 2.6vw, 1.0625rem)/1.47 var(--ds-font);
  --ds-type-callout: 400 1rem/1.4 var(--ds-font);
  --ds-type-subhead: 400 0.9375rem/1.4 var(--ds-font);
  --ds-type-footnote: 500 0.8125rem/1.35 var(--ds-font);
  --ds-type-caption: 500 0.75rem/1.3 var(--ds-font);
  /* text sizes (bare, derived from the type scale) */
  --ds-text-display: clamp(2.625rem, 8vw, 4.25rem);
  --ds-text-large-title: clamp(1.75rem, 4vw, 2.125rem);
  --ds-text-title2: clamp(1.3rem, 3vw, 1.5rem);
  --ds-text-title3: 1.25rem;
  --ds-text-headline: 1.0625rem;
  --ds-text-body: clamp(0.95rem, 2.6vw, 1.0625rem);
  --ds-text-callout: 1rem;
  --ds-text-subhead: 0.9375rem;
  --ds-text-footnote: 0.8125rem;
  --ds-text-caption: 0.75rem;
  /* spacing · radius · size (engine) */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-margin: clamp(16px, 4.5vw, 20px);
  --ds-radius-card: 18px;
  --ds-radius-row: 12px;
  --ds-radius-btn: 12px;
  --ds-radius-popover: 20px;
  --ds-radius-pill: 999px;
  --ds-hit: 44px;
  --ds-icon-sm: 18px;
  --ds-icon-md: 22px;
  --ds-icon-lg: 28px;
  --ds-glass-blur: blur(26px) saturate(180%);
  /* color (theme) */
  --ds-surface-page: #F2F2F7;
  --ds-surface-card: #FFFFFF;
  --ds-surface-chrome: #FFFFFF;
  --ds-label-1: #000000;
  --ds-label-2: #3C3C43;
  --ds-label-3: #C7C7CC;
  --ds-accent: #058582;
  --ds-accent-contrast: #FFFFFF;
  --ds-separator: rgba(60, 60, 67, 0.29);
  --ds-shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 0 rgba(60,60,67,0.14);
  --ds-glass-bg: rgba(255, 255, 255, 0.62);
  --ds-glass-hairline: rgba(60, 60, 67, 0.14);
  --ds-glass-fallback: #f7f7faf2;
  --ds-state-pass: #34C759;
  --ds-state-pass-bg: rgba(52, 199, 89, 0.12);
  --ds-state-warn: #FFCC00;
  --ds-state-warn-bg: rgba(255, 204, 0, 0.14);
  --ds-state-fail: #FF3B30;
  --ds-state-fail-bg: rgba(255, 59, 48, 0.12);
  --ds-state-info: #8E8E93;
  --ds-state-info-bg: rgba(142, 142, 147, 0.12);
  /* ext — domain semantics (theme) */
  --ds-ext-verdict-problem: #FF3B30;
  --ds-ext-verdict-problem-bg: rgba(255, 59, 48, 0.12);
  --ds-ext-verdict-watch: #FFCC00;
  --ds-ext-verdict-watch-bg: rgba(255, 204, 0, 0.14);
  --ds-ext-verdict-clean: #34C759;
  --ds-ext-verdict-clean-bg: rgba(52, 199, 89, 0.12);
  --ds-ext-verdict-unknown: #8E8E93;
  --ds-ext-status-warning: #FF9500;
  --ds-ext-status-critical: #FF3B30;
  --ds-ext-frame-glow-teal: #2b6f6a;
  --ds-ext-frame-glow-blue: #2d3a66;
  --ds-ext-frame-base-hi: #11161b;
  --ds-ext-frame-base-lo: #0a0d10;
  --ds-ext-frame-bezel-inner: #0a0a0c;
  --ds-ext-frame-bezel-outer: #232327;
  --ds-ext-frame-box-shadow: 0 0 0 10px #0a0a0c, 0 0 0 12px #232327, 0 50px 90px -30px rgba(0,0,0,0.7), 0 20px 50px -20px rgba(0,0,0,0.55);
  /* icon discipline (stroke = theme, size = engine) */
  --ds-icon-stroke: 2;
}

/* —— primitives —— */
/* ============================================================================
   hig-web-engine — PRIMITIVES (invariant). Consumes the emitted --ds-* vars.
   Static: no colors/sizes/fonts literals live here — everything is var(--ds-*),
   so a theme swap re-skins these with zero edits. Domain (ext-*) tones are NOT
   baked into named components — compose them in the consumer via var(--ds-ext-*).
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: var(--ds-type-body);
  color: var(--ds-label-1);
  background: var(--ds-surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* —— links (content default = accent; keep the underline for a11y so meaning
      never rests on color alone. Components/chrome override: .ds-badge kills it,
      chrome .siteFooter sets its own color). —— */
a {
  color: var(--ds-accent);
  text-underline-offset: 2px;
}

/* —— text roles (the HIG type scale) —— */
.ds-large-title { font: var(--ds-type-large-title); letter-spacing: var(--ds-type-large-title-tracking); }
.ds-title2      { font: var(--ds-type-title2); letter-spacing: var(--ds-type-title2-tracking); }
.ds-title3      { font: var(--ds-type-title3); }
.ds-headline    { font: var(--ds-type-headline); }
.ds-body        { font: var(--ds-type-body); }
.ds-callout     { font: var(--ds-type-callout); }
.ds-subhead     { font: var(--ds-type-subhead); color: var(--ds-label-2); }
.ds-footnote    { font: var(--ds-type-footnote); color: var(--ds-label-2); }
.ds-caption     { font: var(--ds-type-caption); color: var(--ds-label-3); }

/* —— page column —— */
.ds-screen {
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--ds-space-margin);
}

/* —— LAYOUT RHYTHM (the anti-orphan rule) ——
   On the grouped page background every top-level element is ONE of three roles:
   section header (.ds-section-header) · card (.ds-list / .ds-section) ·
   section footer (.ds-footer). Naked body text on the page bg is a defect.
   Rhythm is owned by the HEADER: 32 above / 8 below; footer binds 8 under its
   card; card→card without a header between = 12. At compact width sibling
   cards STACK — never a forced multi-column grid of cramped mini-cards. */
.ds-section-header {
  /* iOS 26: title-style capitalization — the uppercase idiom is SUPERSEDED
     (Liquid Glass adoption guide; owner-approved render spec 2026-07-02).
     Author content in Title Case; CSS transforms none. */
  font: var(--ds-type-footnote);
  color: var(--ds-label-2);
  margin: var(--ds-space-8) var(--ds-space-4) var(--ds-space-2);
}
.ds-footer {
  font: var(--ds-type-footnote);
  color: var(--ds-label-2);
  margin: var(--ds-space-2) var(--ds-space-4) 0;
}

/* —— inset grouped list (iOS Form/Settings idiom) —— */
.ds-list {
  background: var(--ds-surface-card);
  border-radius: var(--ds-radius-card);
  overflow: clip;
  box-shadow: var(--ds-shadow-card);
}
.ds-row {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  min-height: var(--ds-hit);
  padding: var(--ds-space-3) var(--ds-space-4);
  appearance: none;
  -webkit-appearance: none;
  border: 0; /* kill the UA button frame… */
  border-bottom: 0.5px solid var(--ds-separator); /* …then draw only the hairline */
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: start;
  color: inherit;
  font: inherit; /* buttons do not inherit font by default */
}
.ds-row:last-child { border-bottom: 0; }
.ds-row[aria-pressed="true"],
.ds-row[aria-selected="true"] { color: var(--ds-accent); }
.ds-row__text { flex: 1; font: var(--ds-type-callout); }
.ds-row__detail { font: var(--ds-type-footnote); color: var(--ds-label-2); }

/* —— multi-line cell —— a .ds-list item richer than the single-line .ds-row:
      stacks a header line + secondary text + evidence, on the same hairline
      rhythm. Use inside .ds-list when a row needs more than one line (a case
      with a quote + tags). .ds-cell__head is the top line; .ds-spacer pushes a
      trailing action (e.g. a verify link) to the end of that line. —— */
.ds-cell {
  display: block;
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 0.5px solid var(--ds-separator);
}
.ds-cell:last-child { border-bottom: 0; }
.ds-cell__head {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-2) var(--ds-space-3);
  flex-wrap: wrap;
}
.ds-spacer { margin-left: auto; }

/* —— evidence quote —— a verbatim excerpt: accent rule on the lead edge,
      quieter than body, so a raw quoted source reads as cited, not as prose. —— */
.ds-quote {
  margin: var(--ds-space-2) 0 0;
  padding-left: var(--ds-space-3);
  border-left: 2px solid var(--ds-accent);
  color: var(--ds-label-2);
  font: var(--ds-type-subhead);
  font-style: italic;
}

/* —— buttons (primary = filled accent, >=44pt) —— */
.ds-btn {
  min-height: 50px;
  padding: 0 var(--ds-space-5);
  border-radius: var(--ds-radius-btn);
  font: var(--ds-type-headline);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  text-decoration: none; /* a button never underlines its label, even as an <a> (cta) */
}
.ds-btn--primary { background: var(--ds-accent); color: var(--ds-accent-contrast); width: 100%; }
.ds-btn--plain   { background: transparent; color: var(--ds-accent); min-height: var(--ds-hit); }

/* —— badge base (generic; tone via a --ds-badge-ink/--ds-badge-bg the consumer sets,
      e.g. style="--ds-badge-ink:var(--ds-ext-verdict-problem)") —— */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ds-radius-pill);
  font: var(--ds-type-footnote);
  color: var(--ds-badge-ink, var(--ds-accent));
  background: var(--ds-badge-bg, transparent);
  text-decoration: none; /* a pill is never underlined, even as a link */
}

/* —— disclosure section —— */
.ds-section {
  background: var(--ds-surface-card);
  border-radius: var(--ds-radius-card);
  margin-block: var(--ds-space-3);
  box-shadow: var(--ds-shadow-card);
  overflow: clip;
}
.ds-section > summary::-webkit-details-marker {
  display: none; /* Safari; Chrome honors list-style below */
}
.ds-section > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--ds-hit);
  padding: var(--ds-space-4);
  font: var(--ds-type-title3);
  cursor: pointer;
}
.ds-section__body { padding: 0 var(--ds-space-4) var(--ds-space-4); font: var(--ds-type-body); }

/* —— icons: inherit color, sized off the scale —— */
.ds-icon    { width: var(--ds-icon-md); height: var(--ds-icon-md); color: currentColor; stroke-width: var(--ds-icon-stroke); }
.ds-icon--sm { width: var(--ds-icon-sm); height: var(--ds-icon-sm); }
.ds-icon--lg { width: var(--ds-icon-lg); height: var(--ds-icon-lg); }

/* ============================================================================
   BLOCK PRIMITIVES (v1.0.2) — the content-type layer. Each maps a registry
   type (engine/blocks.json) onto a layout pattern. CSS only, var(--ds-*) only
   — color-mix() OVER vars is allowed (no raw literal); no 10th font-size step.
   ========================================================================== */

/* —— notice: the tinted callout box (registry pattern `callout`). NOT
      .ds-callout — that selector is the live HIG Callout TEXT-role. Base (no
      modifier) = elevated neutral card (the cta prompt); --pass/--warn/--fail/
      --info = flat tinted box on the system state pair. Meaning never rests on
      color alone — the verdict LABEL slot is required (a11y). Title ink = label-1
      (WCAG AA); the state colour lives on the WASH, not the title text — the raw
      system hues fail 4.5:1 as text on their own 12-14% wash (measured). —— */
.ds-notice {
  display: grid;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4);
  border-radius: var(--ds-radius-card);
  background: var(--ds-notice-bg, var(--ds-surface-card));
  box-shadow: var(--ds-notice-shadow, var(--ds-shadow-card));
}
.ds-notice--pass,
.ds-notice--warn,
.ds-notice--fail,
.ds-notice--info { --ds-notice-shadow: none; } /* tinted = flat, no elevation */
.ds-notice--pass { --ds-notice-bg: var(--ds-state-pass-bg); }
.ds-notice--warn { --ds-notice-bg: var(--ds-state-warn-bg); }
.ds-notice--fail { --ds-notice-bg: var(--ds-state-fail-bg); }
.ds-notice--info { --ds-notice-bg: var(--ds-state-info-bg); }
.ds-notice__title { font: var(--ds-type-headline); color: var(--ds-label-1); margin: 0; }
.ds-notice__body  { font: var(--ds-type-callout); color: var(--ds-label-1); margin: 0; }

/* —— steps: ordered list + counter badge (registry `row-list + ordered`).
      Real <ol> (semantics/SEO); badge geometry off .ds-badge. —— */
.ds-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ds-step;
  background: var(--ds-surface-card);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
  overflow: clip;
}
.ds-steps > li {
  counter-increment: ds-step;
  display: flex;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 0.5px solid var(--ds-separator);
}
.ds-steps > li:last-child { border-bottom: 0; }
.ds-steps > li::before {
  content: counter(ds-step);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-icon-lg);
  height: var(--ds-icon-lg);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-accent);
  color: var(--ds-accent-contrast);
  font: var(--ds-type-footnote);
}
.ds-steps__title  { font: var(--ds-type-callout); margin: 0; }
.ds-steps__detail { font: var(--ds-type-footnote); color: var(--ds-label-2); margin: var(--ds-space-1) 0 0; }

/* —— disclosure chevron: faq reuses .ds-section (decision #2 — one class per
      job), this adds the rotating indicator FR-B2 asks for. —— */
/* the faq disclosure chevron RESTS pointing DOWN ▾ ("expandable content below")
   and flips UP ▴ when open — distinct from the link-row trailing navigation › */
.ds-section__chevron { flex: none; color: var(--ds-label-3); transition: transform 0.2s ease; }
.ds-section[open] > summary .ds-section__chevron { transform: rotate(180deg); }

/* —— data-table: adaptive (registry `data-table`). The compact/wide switch is
      a CONTAINER query on .ds-table-wrap (NOT a viewport @media) so BOTH states
      render + are machine-inspectable in one load. compact = stacked rows, each
      cell surfaces its data-label; wide = macOS bordered (alternating rows,
      subhead header, HORIZONTAL hairlines only — no vertical rules). —— */
.ds-table-wrap { container-type: inline-size; }
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--ds-type-subhead);
  background: var(--ds-surface-card);
  border-radius: var(--ds-radius-card);
  overflow: clip;
  box-shadow: var(--ds-shadow-card);
}
.ds-table caption {
  /* the caption plays the section-header role above the card → hold the same
     header→card rhythm the .ds-section-header uses (8 below), not 0 */
  font: var(--ds-type-footnote);
  color: var(--ds-label-2);
  text-align: start;
  padding: 0 var(--ds-space-4) var(--ds-space-2);
}
.ds-table thead { display: none; } /* compact: no header row */
.ds-table tbody tr {
  display: block;
  padding: var(--ds-space-2) var(--ds-space-4);
  border-bottom: 0.5px solid var(--ds-separator);
}
.ds-table tbody tr:last-child { border-bottom: 0; }
.ds-table td {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding: var(--ds-space-1) 0;
}
.ds-table td::before {
  content: attr(data-label);
  color: var(--ds-label-2);
  font: var(--ds-type-footnote);
}
@container (min-width: 34rem) {
  .ds-table thead { display: table-header-group; }
  .ds-table tbody tr { display: table-row; padding: 0; border-bottom: 0; }
  .ds-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--ds-separator) 12%, var(--ds-surface-card));
  }
  .ds-table th,
  .ds-table td {
    display: table-cell;
    text-align: start;
    padding: var(--ds-space-2) var(--ds-space-4);
    border-bottom: 0.5px solid var(--ds-separator);
  }
  .ds-table thead th { font: var(--ds-type-subhead); color: var(--ds-label-2); }
  .ds-table td::before { content: none; } /* wide: the header row carries labels */
}

/* —— link-row: a row that NAVIGATES (registry `row-list + link`). Real <a>,
      trailing chevron in the disclosure-indicator idiom. —— */
.ds-row--link {
  text-decoration: none;
  color: var(--ds-label-1);
  justify-content: space-between;
}
.ds-row--link .ds-row__detail { color: var(--ds-label-3); }

/* —— overline: a caption-SIZE eyebrow (uppercase, tracked, heavier). Uses the
      caption size — NO 10th font-size step. label-2 explicitly (label-3 caption
      is too faint for an eyebrow, inherited body too heavy). —— */
.ds-overline {
  font: var(--ds-type-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-label-2);
}

/* —— term help (INLINE primitive — NOT a registry block; no data-ds-block, no
      fixture, exempt from 1:1:1 + lens #8, like .ds-badge/.ds-btn). An inline
      glossary cue; the INTERACTION JS stays the consumer's (TermHelpClient).
      The popover surface (radius-popover + shadow + glass guards) is REUSED by
      composing .ds-popover.ds-glass in markup — no new shadow literal or token.
      The ordinary span remains wrappable on narrow translated layouts, while
      the shared wrapper owns the unviewed/open/viewed visual state. —— */
.ds-term-help-wrap {
  --ds-term-ink: color-mix(in srgb, var(--ds-accent) 86%, var(--ds-label-1));
  --ds-term-line: color-mix(in srgb, var(--ds-accent) 72%, transparent);
  --ds-term-line-style: dotted;
}
.ds-term-help-wrap[data-term-state="viewed"] {
  --ds-term-ink: var(--ds-label-2);
  --ds-term-line: color-mix(in srgb, var(--ds-label-3) 72%, transparent);
}
.ds-term-help-wrap[data-term-state="open"] {
  --ds-term-ink: var(--ds-accent);
  --ds-term-line: var(--ds-accent);
  --ds-term-line-style: solid;
}
.ds-term-label {
  color: var(--ds-term-ink);
  cursor: help;
}
.ds-term-copy {
  /* Keep the decoration box bounded to the final word.  The help button is
     an adjacent sibling inside .ds-term-no-orphan; leaving this span inline
     lets browser text-decoration painting visually continue beneath the
     circular control on some font/viewport combinations. */
  display: inline-block;
  vertical-align: baseline;
  text-decoration-line: underline;
  text-decoration-style: var(--ds-term-line-style);
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--ds-term-line);
  text-underline-offset: 0.16em;
}
.ds-term-help {
  position: relative;
  color: var(--ds-term-ink, var(--ds-accent));
  background: transparent;
  background-image: none;
  box-shadow: none;
  padding: 0;
  text-decoration: none;
  cursor: help;
}
.ds-term-mark {
  font: var(--ds-type-caption);
  vertical-align: super;
  margin-inline-start: 1px;
  background: transparent;
  background-image: none;
  box-shadow: none;
}
/* Expand the adjacent question-mark control to a 44×44 hit target without
   making the translated term itself an atomic, unbreakable native button. */
.ds-term-help::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: var(--ds-hit);
  height: var(--ds-hit);
  transform: translateY(-50%);
}
.ds-term-tip {
  /* body sizing/position only — the SURFACE comes from .ds-popover.ds-glass */
  position: absolute;
  z-index: 30;
  max-width: 260px;
  margin-top: var(--ds-space-1);
}

/* —— stat-distribution: proportional % bars (registry `stat-list`). Label +
      value on line 1, a proportional bar on line 2. The bar width is the ONLY
      per-item content the consumer sets (style="--ds-stat-pct: 48%") — a % is
      not a color/font fact, so no drift; Σ=100 is a consumer build-check. —— */
.ds-stat__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ds-space-1) var(--ds-space-3);
  align-items: baseline;
  padding: var(--ds-space-2) var(--ds-space-4);
  border-bottom: 0.5px solid var(--ds-separator);
}
.ds-stat__row:last-child { border-bottom: 0; }
.ds-stat__label { font: var(--ds-type-subhead); }
.ds-stat__value { font: var(--ds-type-subhead); color: var(--ds-label-2); font-variant-numeric: tabular-nums; }
.ds-stat__track {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: var(--ds-radius-pill);
  background: color-mix(in srgb, var(--ds-separator) 40%, transparent);
  overflow: clip;
}
.ds-stat__bar {
  height: 100%;
  width: var(--ds-stat-pct, 0%);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-accent);
}

/* —— outcome-list: "what fixed it / what didn't" rows (registry `row-list`).
      A leading ✓/⚠/✗ GLYPH colored by state (meaning never on color alone —
      the glyph + text carry it); counts, not percents. —— */
.ds-outcome__row {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-2) var(--ds-space-4);
  border-bottom: 0.5px solid var(--ds-separator);
}
.ds-outcome__row:last-child { border-bottom: 0; }
.ds-outcome__mark { flex: none; font: var(--ds-type-callout); color: var(--ds-outcome-ink, var(--ds-label-2)); }
.ds-outcome__row--pass { --ds-outcome-ink: var(--ds-state-pass); }
.ds-outcome__row--warn { --ds-outcome-ink: var(--ds-state-warn); }
.ds-outcome__row--fail { --ds-outcome-ink: var(--ds-state-fail); }
.ds-outcome__text { font: var(--ds-type-subhead); }
.ds-outcome__count { color: var(--ds-label-2); font-variant-numeric: tabular-nums; }

/* —— accent-callout: the ONE accent block per page (registry `callout + accent`
      — the EPA-warranty class of highlighted box). Faint accent wash + accent
      hairline; flat (no elevation). Title stays label-1 (AA) — accent identity
      rests on the wash + 35% hairline, not low-contrast title text (accent as
      title text = 4.04:1, under AA). Page law "≤1 per page" is enforced by
      drift-lens (block region). —— */
.ds-notice--accent {
  --ds-notice-bg: color-mix(in srgb, var(--ds-accent) 8%, var(--ds-surface-card));
  --ds-notice-shadow: none;
  border: 1px solid color-mix(in srgb, var(--ds-accent) 35%, transparent);
}

/* —— cite: an inline footnote chip ⁽ⁿ⁾ (INLINE primitive, not a block — like
      .ds-term-help/.ds-badge: no data-ds-block, no fixture, exempt from 1:1:1 +
      lens #8). A real <a> that anchor-jumps to the §6 Sources footer; the chip
      sits AT the claim (the consumer's E-E-A-T binding rule). —— */
.ds-cite {
  font: var(--ds-type-caption);
  vertical-align: super;
  line-height: 0;
  color: var(--ds-accent);
  text-decoration: none;
  margin-inline-start: 1px;
}
.ds-cite:hover { text-decoration: underline; }

/* —— a11y —— */
:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* —— honest glass —— */
/* ============================================================================
   hig-web-engine — HONEST GLASS (invariant recipe). Chrome-only by rule.
   Canonical Liquid Glass is a Metal runtime material and does NOT exist on the
   web — this is a tasteful frosted APPROXIMATION, never presented as canon.
   The 3 guards below are mandatory (a bare backdrop-filter is a drift finding).
   Apply .ds-glass ONLY to sticky chrome (top rail, bottom action bar, popovers)
   - never to content/data surfaces (.ds-list / .ds-section / cards).
   ========================================================================== */

.ds-glass {
  background: var(--ds-glass-bg);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  backdrop-filter: var(--ds-glass-blur);
  border-color: var(--ds-glass-hairline);
}

/* sticky top rail */
.ds-rail {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--ds-space-3) var(--ds-space-margin);
  border-bottom: 0.5px solid var(--ds-glass-hairline);
}

/* sticky bottom action bar — primary action always visible */
.ds-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: var(--ds-space-3) var(--ds-space-margin);
  padding-bottom: max(var(--ds-space-3), env(safe-area-inset-bottom));
  border-top: 0.5px solid var(--ds-glass-hairline);
  display: flex;
  gap: var(--ds-space-3);
  align-items: center;
}

.ds-popover {
  border-radius: var(--ds-radius-popover);
  padding: var(--ds-space-4);
  font: var(--ds-type-body);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* —— GUARD 1: no backdrop-filter support → solid —— */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ds-glass { background: var(--ds-glass-fallback); }
}
/* —— GUARD 2: user asked for reduced transparency → solid —— */
@media (prefers-reduced-transparency: reduce) {
  .ds-glass {
    background: var(--ds-glass-fallback) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
/* —— GUARD 3: high-contrast → solid + stronger hairline —— */
@media (prefers-contrast: more) {
  .ds-glass {
    background: var(--ds-glass-fallback);
    border-color: var(--ds-label-2);
  }
}