@layer reset, tokens, base, layout, components, utilities, overrides;

@layer tokens {
  :root {
    color-scheme: light;

    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-body: 1rem;
    --text-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
    --text-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
    --text-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);
    --text-h2: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
    --text-h1: clamp(1.875rem, 1.45rem + 1.5vw, 2.75rem);
    --leading-tight: 1.2;
    --leading-body: 1.55;
    --leading-loose: 1.7;
    --weight-normal: 400;
    --weight-medium: 550;
    --weight-bold: 700;

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-pill: 999rem;
    --border-thin: 1px;
    --border-strong: 2px;
    --measure-copy: 68ch;
    --measure-narrow: 48ch;
    --layout-wide: 80rem;
    --layout-full: 96rem;
    --target-default: 2.75rem;
    --target-minimum: 1.5rem;
    --control-block: 2.75rem;
    --focus-width: 0.1875rem;
    --focus-offset: 0.1875rem;

    --color-canvas: #f7f8fa;
    --color-surface: #ffffff;
    --color-surface-subtle: #edf2f7;
    --color-text: #17202a;
    --color-text-muted: #4b5563;
    --color-border: #b7c1cc;
    --color-border-control: #667085;
    --color-shadow: rgb(23 32 42 / 14%);
    --color-action: #075985;
    --color-action-hover: #0c4a6e;
    --color-on-action: #ffffff;
    --color-link: #075985;
    --color-focus: #1d4ed8;
    --color-selected-surface: #e0f2fe;
    --color-selected-border: #075985;
    --color-disabled-surface: #e5e7eb;
    --color-disabled-text: #4b5563;
    --color-success: #166534;
    --color-success-surface: #ecfdf3;
    --color-warning: #854d0e;
    --color-warning-surface: #fffaeb;
    --color-danger: #b42318;
    --color-danger-surface: #fef3f2;
    --color-info: #1e40af;
    --color-info-surface: #eff6ff;
    --shadow-raised: 0 0.25rem 1rem var(--color-shadow);
    --duration-fast: 120ms;
    --duration-normal: 180ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --z-header: 10;
    --z-sticky-actions: 20;
    --z-dialog: 40;
    --z-skip-link: 50;
  }
}

/* M4 deterministic semantic print center and preview */
@layer components {
  .print-builder {
    display: grid;
    gap: var(--space-5);
  }

  .print-builder form,
  .print-builder fieldset,
  .print-product-list,
  .print-preview {
    display: grid;
    gap: var(--space-4);
  }

  .print-builder fieldset {
    border: var(--border-thin) solid var(--color-border);
    padding: var(--space-4);
  }

  .print-product-option {
    border-block-end: var(--border-thin) solid var(--color-border);
    padding-block-end: var(--space-3);
  }

  .print-control-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }

  .print-control-grid label {
    display: grid;
    gap: var(--space-2);
  }

  .print-preview {
    background: var(--color-surface);
    color: var(--color-text);
    margin-inline: auto;
    max-inline-size: 60rem;
    padding: var(--space-6);
  }

  .print-preview-header,
  .print-section,
  .print-preview-actions {
    display: grid;
    gap: var(--space-4);
  }

  .print-manifest-summary {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }

  .print-manifest-summary > div {
    border: var(--border-thin) solid var(--color-border);
    padding: var(--space-3);
  }

  .print-manifest-summary dt { font-weight: var(--weight-bold); }
  .print-manifest-summary dd { margin: var(--space-1) 0 0; }

  .print-question-list,
  .print-option-list {
    display: grid;
    gap: var(--space-3);
  }

  .print-question,
  .print-explanation {
    border-block-end: var(--border-strong) solid currentColor;
    padding-block: var(--space-4);
  }

  .print-observation-list { margin-block: var(--space-3); padding-inline-start: 1.5rem; }
  .print-observation-list li + li { margin-block-start: var(--space-2); }
  .print-nonvisual-label { font-weight: var(--weight-bold); }

  .print-option-list { list-style: none; padding-inline-start: var(--space-2); }
  .print-option-list li::before { content: attr(data-option-label) ". "; font-weight: var(--weight-bold); }

  .print-preview table {
    border-collapse: collapse;
    inline-size: 100%;
  }

  .print-preview th,
  .print-preview td {
    border: var(--border-thin) solid currentColor;
    padding: var(--space-2);
    text-align: start;
  }

  .print-answer-sheet td { text-align: center; }
  .answer-mark { font-size: 1.5em; line-height: 1; }
  .print-grayscale .print-section { filter: grayscale(1); }
  .print-warning { border: var(--border-strong) dashed currentColor; padding: var(--space-3); }

  .print-family-card,
  .print-hazard-page {
    border-block-end: var(--border-strong) solid currentColor;
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-5);
  }

  .print-tool-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .print-tool-grid > section {
    border: var(--border-thin) solid currentColor;
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .print-tool-grid img,
  .print-hazard-page > img,
  .print-annotated-scene img {
    block-size: auto;
    inline-size: 100%;
    max-block-size: 6.5in;
    object-fit: contain;
  }

  .print-response-space {
    display: grid;
    gap: var(--space-4);
  }

  .print-response-space span {
    border-block-end: var(--border-thin) solid currentColor;
    min-block-size: 2.25rem;
  }

  .print-annotated-scene {
    margin: 0;
    position: relative;
  }

  .print-annotated-scene svg {
    block-size: 100%;
    fill: rgb(255 255 255 / 16%);
    inset: 0;
    position: absolute;
    stroke: #000;
    stroke-dasharray: 2 1;
    stroke-width: 0.8;
    inline-size: 100%;
  }

  .hazard-result-figure { margin: var(--space-4) 0; }
  .hazard-result-overlay { position: relative; }
  .hazard-result-overlay > img { block-size: auto; display: block; inline-size: 100%; }
  .hazard-result-regions { block-size: 100%; inset: 0; position: absolute; inline-size: 100%; }
  .hazard-result-region { fill: rgb(255 255 255 / 10%); stroke-width: 0.25rem; }
  .hazard-result-region--target { fill: rgb(180 35 24 / 18%); stroke: var(--color-danger); }
  .hazard-result-region--decoy { fill: rgb(30 64 175 / 12%); stroke: var(--color-info); stroke-dasharray: 0.75rem 0.5rem; }
  .hazard-result-marker {
    align-items: center;
    background: var(--color-text);
    border: var(--border-strong) solid var(--color-surface);
    border-radius: var(--radius-pill);
    color: var(--color-surface);
    display: inline-flex;
    font-weight: var(--weight-bold);
    justify-content: center;
    min-block-size: 1.75rem;
    min-inline-size: 1.75rem;
    z-index: 1;
  }
  .hazard-result-figure figcaption { margin-block-start: var(--space-2); }
}

@layer overrides {
  @page letter-standard { size: letter; margin: 0.5in; }
  @page letter-wide { size: letter; margin: 0.75in; }
  @page a4-standard { size: A4; margin: 12.7mm; }
  @page a4-wide { size: A4; margin: 19mm; }

  @media print {
    .screen-only,
    .print-preview-actions,
    [data-print-builder] { display: none !important; }

    .print-preview {
      background: #fff;
      color: #000;
      display: block;
      margin: 0;
      max-inline-size: none;
      padding: 0;
    }

    .print-us-letter.print-margin-standard { page: letter-standard; }
    .print-us-letter.print-margin-wide { page: letter-wide; }
    .print-a4.print-margin-standard { page: a4-standard; }
    .print-a4.print-margin-wide { page: a4-wide; }

    .print-size-normal { font-size: 12pt; line-height: 1.5; }
    /* Source versions and other receipt strings can exceed the paper width.
       Wrap them instead of triggering browser-wide shrink-to-fit pagination. */
    .print-preview { overflow-wrap: anywhere; }
    .print-size-large { font-size: 18pt; line-height: 1.55; }
    .print-size-large .answer-mark { font-size: 1.75em; }
    .print-size-large h1 { font-size: 1.5em; }
    .print-size-large h2 { font-size: 1.25em; }
    .print-size-large h3 { font-size: 1.125em; }
    .print-size-large h4 { font-size: 1em; }
    .print-size-large h5,
    .print-size-large h6 { font-size: 1em; }
    .print-preview-header > .eyebrow { display: none; }

    /* Nested grids can overlap later families after page fragmentation. */
    .print-section, .print-family-card, .print-question-list { display: block; }
    .print-section > * + *, .print-family-card > * + * { margin-block-start: var(--space-4); }
    .print-question + .print-question { margin-block-start: var(--space-3); }

    .print-question,
    .print-explanation,
    .print-tool-grid > section,
    .print-answer-sheet tr { break-inside: avoid; }
    .print-appended-section { break-before: page; }
    .print-hazard-page {
      display: block;
      break-before: page;
      border: 0;
      padding-block: 0;
    }
    .print-hazard-page > * + * { margin-block-start: var(--space-4); }
    .print-hazard-page > img,
    .print-annotated-scene,
    .print-response-space,
    .print-hazard-page li { break-inside: avoid; }
    .print-hazard-worksheet,
    .print-hazard-answers,
    .print-text-equivalent { break-before: page; }
    .print-size-normal .print-hazard-worksheet .print-hazard-page > img { max-block-size: 3.5in; }
    .print-hazard-page:first-of-type { break-before: auto; }
    .print-preview thead { display: table-header-group; }
    .print-preview :focus { outline: none; }
    .print-preview h2,
    .print-preview h3,
    .print-preview h4,
    .print-preview h5,
    .print-preview h6 { break-after: avoid; }
    .print-preview p { orphans: 3; widows: 3; }
    .print-preview details > summary { display: none; }
    .print-preview details:not([open]) > :not(summary) { display: block; }
    .print-preview .source-note dl > div { break-inside: avoid; }
    /* Filtering the whole packet rasterizes PDF text in Chromium. */
    .print-grayscale .print-section { filter: none; }
    .print-grayscale img { filter: grayscale(1); }
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, dl, dd { margin: var(--space-0); }
  button, input, select, textarea { font: inherit; }
}

@layer base {
  html[data-large-text] { font-size: 125%; }
  html { scroll-behavior: smooth; }
  html[data-reduce-motion] { scroll-behavior: auto; }
  html[data-reduce-motion] *,
  html[data-reduce-motion] *::before,
  html[data-reduce-motion] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  body {
    color: var(--color-text);
    background: var(--color-canvas);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }
  h1, h2, h3, h4 { line-height: var(--leading-tight); }
  h1 { font-size: var(--text-h1); }
  h2 { font-size: var(--text-h2); }
  h3 { font-size: var(--text-h3); }
  h4 { font-size: var(--text-h4); }
  a { color: var(--color-link); text-underline-offset: 0.18em; }
  a:hover { text-decoration-thickness: 0.15em; }
  button, label, summary { touch-action: manipulation; }
  code { font-family: var(--font-mono); overflow-wrap: anywhere; }
  :focus-visible {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }
}

@layer layout {
  .site-header-inner,
  .page-shell,
  .site-footer-inner {
    width: min(calc(100% - clamp(var(--space-6), 5vw, var(--space-9))), var(--layout-wide));
    margin-inline: auto;
  }
  .site-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    min-block-size: var(--space-8);
    padding-block: var(--space-3);
  }
  .site-nav,
  .question-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .page-shell { padding-block: clamp(var(--space-6), 6vw, var(--space-9)); }
  .hero { max-inline-size: var(--measure-copy); }
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-5);
    margin-block: var(--space-7);
  }
  .reference-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
  .tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-5);
    margin-block: var(--space-7);
  }
  .section-gap { margin-block-start: var(--space-7); }
}

@layer components {
  .skip-link {
    position: fixed;
    z-index: var(--z-skip-link);
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    translate: 0 -200%;
    opacity: 0;
    pointer-events: none;
    padding: var(--space-3) var(--space-4);
    color: var(--color-on-action);
    background: var(--color-action);
    font-weight: var(--weight-bold);
  }
  .skip-link:focus { translate: 0; opacity: 1; pointer-events: auto; }
  .connectivity-notice {
    display: none;
    margin: 0;
    padding: var(--space-3) max(var(--space-4), calc((100% - var(--layout-wide)) / 2));
    border-block-end: var(--border-thin) solid var(--color-border);
    color: var(--color-text);
    background: var(--color-warning-surface);
    font-weight: var(--weight-bold);
  }
  .connectivity-notice [data-connectivity-message] { display: none; }
  html[data-connectivity="offline"] .connectivity-notice,
  html[data-freshness="offline-stale"] .connectivity-notice { display: block; }
  html[data-connectivity="offline"] [data-connectivity-message="offline"],
  html[data-connectivity="online"][data-freshness="offline-stale"] [data-connectivity-message="stale-online"] { display: inline; }
  .network-only-status { display: none; }
  html[data-freshness="offline-stale"] .network-only-status { display: inline; }
  [data-network-unavailable] {
    color: var(--color-text-muted);
    cursor: not-allowed;
    text-decoration: line-through;
  }
  .site-header,
  .site-footer {
    border-block-end: var(--border-thin) solid var(--color-border);
    background: var(--color-surface);
  }
  .site-footer {
    border-block-start: var(--border-thin) solid var(--color-border);
    border-block-end: 0;
  }
  .site-footer-inner { padding-block: var(--space-5); color: var(--color-text-muted); }
  .brand { color: var(--color-text); font-weight: var(--weight-bold); text-decoration: none; }
  .site-nav { gap: var(--space-4); }
  .breadcrumbs { margin-block-end: var(--space-6); font-size: var(--text-sm); }
  .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-inline-start: var(--space-2);
    color: var(--color-text-muted);
  }
  .hero h1,
  .question-prompt h1 { letter-spacing: -0.025em; }
  .hero p,
  .question-prompt p {
    max-inline-size: var(--measure-copy);
    margin-block-start: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-lead);
  }
  .eyebrow {
    margin-block-end: var(--space-3);
    color: var(--color-action);
    font-size: var(--text-xs) !important;
    font-weight: var(--weight-bold);
    letter-spacing: normal;
    text-transform: none;
  }
  .card,
  .hazard-card,
  .question-card,
  .reference-card,
  .tool-card {
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);
  }
  .card, .reference-card { padding: var(--space-5); }
  .card > * + *, .reference-card > * + * { margin-block-start: var(--space-3); }
  .question-card {
    container-type: inline-size;
    max-inline-size: 50rem;
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    margin-inline: auto;
  }
  .hazard-card {
    max-inline-size: 68rem;
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    margin-inline: auto;
  }
  .tool-card { overflow: hidden; }
  .tool-card img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--color-surface-subtle);
  }
  .tool-card > div { padding: var(--space-5); }
  .tool-card > div > * + * { margin-block-start: var(--space-3); }
  .question-prompt { margin-block-end: var(--space-6); }
  .question-prompt h1 { font-size: var(--text-h1); }
  fieldset { border: 0; margin: 0; padding: 0; }
  .answer-list { display: grid; gap: var(--space-3); }
  .answer-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--target-default);
    padding: var(--space-4);
    border: var(--border-thin) solid var(--color-border-control);
    border-radius: var(--radius-md);
    cursor: pointer;
  }
  .answer-option:has(input:checked) {
    border-color: var(--color-selected-border);
    background: var(--color-selected-surface);
    box-shadow: inset 0 0 0 var(--border-thin) var(--color-selected-border);
  }
  .answer-option input {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    accent-color: var(--color-action);
  }
  .question-controls { margin-block-start: var(--space-6); }
  .button {
    display: inline-flex;
    min-block-size: var(--target-default);
    min-inline-size: var(--target-default);
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    border: var(--border-thin) solid transparent;
    border-radius: var(--radius-md);
    font-weight: var(--weight-bold);
    text-decoration: none;
    cursor: pointer;
  }
  .button:disabled {
    color: var(--color-disabled-text);
    background: var(--color-disabled-surface);
    cursor: not-allowed;
  }
  .button-primary { color: var(--color-on-action); background: var(--color-action); }
  .button-primary:hover { color: var(--color-on-action); background: var(--color-action-hover); }
  .button-secondary {
    color: var(--color-text);
    border-color: var(--color-border-control);
    background: var(--color-surface);
  }
  .feedback {
    margin-block-start: var(--space-6);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
  }
  .feedback > * + * { margin-block-start: var(--space-3); }
  .feedback-correct { color: var(--color-success); background: var(--color-success-surface); }
  .feedback-review { color: var(--color-warning); background: var(--color-warning-surface); }
  .feedback-error { color: var(--color-danger); background: var(--color-danger-surface); }
  .feedback-answer-summary {
    display: grid;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }
  .feedback-answer-summary dt,
  .rationale-list h4 { font-weight: var(--weight-bold); }
  .feedback-answer-summary dd { color: var(--color-text); }
  .feedback > .feedback-rationales,
  .feedback > .feedback-sources { margin-block-start: var(--space-5); }
  .rationale-list {
    display: grid;
    gap: var(--space-4);
    margin-block: var(--space-4) var(--space-0);
    padding-inline-start: var(--space-5);
  }
  .rationale-list p {
    margin-block-start: var(--space-2);
    color: var(--color-text);
  }
  .rationale-sources {
    display: grid;
    gap: var(--space-1);
    margin-block-start: var(--space-2);
    padding-inline-start: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
  .rationale-sources code { overflow-wrap: anywhere; }
  .claim-caveat {
    padding: var(--space-2) var(--space-3);
    border-inline-start: 0.25rem solid var(--color-warning);
    background: var(--color-warning-surface);
  }
  .source-receipt-list {
    display: grid;
    gap: var(--space-5);
    margin-block: var(--space-4) var(--space-0);
    padding-inline-start: var(--space-5);
  }
  .source-receipt-context {
    display: grid;
    gap: var(--space-2);
    margin-block: var(--space-3);
  }
  .source-receipt-context > div {
    display: grid;
    grid-template-columns: minmax(7rem, 0.25fr) minmax(0, 1fr);
    gap: var(--space-3);
  }
  .source-receipt-context dt { font-weight: var(--weight-bold); }
  .source-receipt-context code,
  .source-receipt-list > li > p code { overflow-wrap: anywhere; }
  .source-receipt-excerpt {
    margin: var(--space-3) var(--space-0);
    padding-inline-start: var(--space-4);
    border-inline-start: 0.25rem solid var(--color-border);
  }
  .source-receipt-excerpt p,
  .source-receipt-rights { color: var(--color-text-muted); }
  .tool-figure {
    max-inline-size: 38rem;
    margin: var(--space-6) var(--space-0);
  }
  .tool-figure picture { display: block; }
  .tool-figure img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .comparison-figure { max-inline-size: 58rem; }
  .comparison-figure img { aspect-ratio: 2 / 1; }
  .tool-figure figcaption {
    margin-block-start: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
  .scene-figure { margin: var(--space-6) 0; }
  .scene-figure img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
  }
  .scene-figure figcaption {
    margin-block-start: var(--space-3);
    color: var(--color-text-muted);
  }
  .lead-copy {
    max-inline-size: var(--measure-copy);
    margin-block-start: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-lead);
  }
  .fact-list dt { margin-block-start: var(--space-4); font-weight: var(--weight-bold); }
  .fact-list dd { color: var(--color-text-muted); }
  .source-note {
    max-inline-size: var(--measure-copy);
    margin-block-start: var(--space-5);
    border-inline-start: var(--space-1) solid var(--color-action);
    padding-inline-start: var(--space-4);
    color: var(--color-text-muted);
  }
  .link-list {
    display: grid;
    gap: var(--space-3);
    margin-block: var(--space-4) 0;
    padding-inline-start: var(--space-5);
  }
  .link-list span { display: block; color: var(--color-text-muted); }
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block: var(--space-4) 0;
    padding: 0;
    list-style: none;
  }
  .tag-list li {
    padding: var(--space-2) var(--space-3);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
  }
  .directional-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    max-inline-size: 68rem;
    margin: var(--space-6) auto 0;
  }
  .zone-list { display: grid; gap: var(--space-3); padding-inline-start: var(--space-6); }
  .zone-list span { display: block; color: var(--color-text-muted); }
  .source-record { max-inline-size: 52rem; margin-inline: auto; }
  .source-record blockquote { margin-inline: 0; }
  .fact-state {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border: var(--border-thin) solid currentColor;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: normal;
  }
  .fact-state-verified { color: var(--color-success); }
  .fact-state-not_published,
  .fact-state-not_applicable,
  .fact-state-unverified { color: var(--color-text-muted); }
  .fact-state-conflicting,
  .fact-state-superseded { color: var(--color-warning); }
  .comparison-table-wrap { margin-block-start: var(--space-6); overflow-x: auto; }
  .comparison-table { inline-size: 100%; border-collapse: collapse; background: var(--color-surface); }
  .comparison-table caption { padding: var(--space-3); font-weight: var(--weight-bold); text-align: start; }
  .comparison-table th,
  .comparison-table td {
    padding: var(--space-4);
    border: var(--border-thin) solid var(--color-border);
    text-align: start;
    vertical-align: top;
  }
  .comparison-table thead { background: var(--color-surface-subtle); }
  .review-state {
    max-inline-size: 68rem;
    margin-block-start: var(--space-7);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
  }
  .review-state > * + * { margin-block-start: var(--space-4); }
  .review-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .review-queue-list {
    display: grid;
    gap: var(--space-5);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
  }
  .review-item-card {
    padding: var(--space-5);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
  }
  .review-item-card > * + * { margin-block-start: var(--space-3); }
  .review-reason-list {
    display: grid;
    gap: var(--space-2);
    padding-inline-start: var(--space-5);
  }
  .review-error {
    border-color: var(--color-danger);
    background: var(--color-danger-surface);
  }
  .review-quarantine {
    padding: var(--space-5);
    border: var(--border-thin) solid var(--color-danger);
    border-radius: var(--radius-md);
    background: var(--color-danger-surface);
  }
  .review-quarantine > * + * { margin-block-start: var(--space-3); }
  .review-quarantine ul { display: grid; gap: var(--space-2); padding-inline-start: var(--space-5); }
  .review-empty { border-color: var(--color-border-control); }
  .local-data-stack {
    display: grid;
    gap: var(--space-6);
    max-inline-size: 58rem;
    margin-block-start: var(--space-7);
  }
  .local-data-form,
  .local-data-state,
  .local-data-error,
  .local-data-warning,
  .operation-preview {
    display: grid;
    gap: var(--space-4);
    max-inline-size: 58rem;
    padding: var(--space-5);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .local-data-form { margin-block-start: var(--space-6); }
  .local-data-error {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: var(--color-danger-surface);
  }
  .local-data-warning,
  .operation-preview {
    border-color: var(--color-warning);
    background: var(--color-warning-surface);
  }
  .form-field { display: grid; gap: var(--space-2); }
  .form-field-group {
    display: grid;
    gap: var(--space-4);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .form-field-group > legend {
    margin-block-end: var(--space-2);
    padding: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
  }
  .form-field > label,
  .affirmation-control { font-weight: var(--weight-bold); }
  .form-field input,
  .form-field select,
  .form-field textarea {
    inline-size: 100%;
    min-block-size: var(--control-block);
    padding: var(--space-3);
    border: var(--border-thin) solid var(--color-border-control);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--color-surface);
  }
  .form-field textarea { min-block-size: 10rem; resize: vertical; }
  .field-help { color: var(--color-text-muted); font-size: var(--text-sm); }
  .field-error { color: var(--color-danger); font-weight: var(--weight-bold); }
  .affirmation-control {
    display: flex;
    align-items: start;
    gap: var(--space-3);
    max-inline-size: var(--measure-copy);
  }
  .affirmation-control input {
    flex: 0 0 auto;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: var(--space-1);
    accent-color: var(--color-action);
  }
  .affirmation-control:has(input:disabled) { color: var(--color-disabled-text); }
  .pack-record-list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pack-record-list li {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
  }
  .pack-record-list .button { justify-self: start; }
}

@layer utilities {
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@layer overrides {
  @media (max-width: 46rem) {
    .reference-layout { grid-template-columns: 1fr; }
    .question-controls .button { inline-size: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  }

  @media (forced-colors: active) {
    .button,
    .answer-option,
    .card,
    .hazard-card,
    .question-card,
    .reference-card,
    .tool-card { border-color: CanvasText; box-shadow: none; }
    .answer-option:has(input:checked) { outline: var(--border-strong) solid Highlight; }
  }

  @media print {
    :root { color-scheme: light; }
    body { color: CanvasText; background: Canvas; }
    .site-header,
    .site-footer,
    .connectivity-notice,
    .question-controls,
    .skip-link { display: none; }
    .page-shell { width: 100%; padding: 0; }
    .card,
    .hazard-card,
    .question-card,
    .reference-card,
    .tool-card { box-shadow: none; break-inside: avoid; }
    a { color: CanvasText; text-decoration: none; }
    a[href]::after { content: " (" attr(href) ")"; font-size: var(--text-xs); }
    .print-preview a[href]::after { font-size: inherit; overflow-wrap: anywhere; }
  }
}

@layer components {
  @media screen {
    [data-print-preview] .status-panel, .print-builder .status-panel { display: grid; gap: var(--space-3); padding: var(--space-5); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-canvas); }
    [data-print-preview] .status-panel-warning { border-color: var(--color-warning); background: var(--color-warning-surface); }
    [data-print-preview] .status-panel-danger, .print-builder .status-panel-danger { border-color: var(--color-danger); background: var(--color-danger-surface); }
    [data-print-preview] .status-panel h2 { font-size: var(--text-h4); }
    [data-print-preview] .status-panel-warning h2 { color: var(--color-warning); }
    [data-print-preview] .status-panel-danger :is(h1, h2), .print-builder .status-panel-danger h2 { color: var(--color-danger); }
    .print-manifest-summary { grid-template-columns: minmax(0, 1fr); }
    .print-manifest-summary > div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; border: 0; border-block-start: var(--border-thin) solid var(--color-border); }
    .print-manifest-summary dt { color: var(--color-text-muted); font-weight: var(--weight-normal); }
    .print-manifest-summary dd { margin: 0; overflow-wrap: anywhere; }
    .print-preview-actions .affirmation-control { align-items: start; font-weight: var(--weight-normal); }
    .print-preview-actions .affirmation-control input { flex: 0 0 1.25rem; margin-block-start: var(--space-1); }
    .print-preview-actions .question-controls { margin-block-start: 0; }
  }
  @media screen and (max-width: 35rem) {
    .print-manifest-summary > div { grid-template-columns: minmax(0, 1fr); }
    .print-preview-actions .question-controls > button { inline-size: 100%; }
  }
}

/* Shared primitives adapted from the September 2026 design handoff. */
@layer layout {
  .home-page {
    inline-size: 100%;
    max-inline-size: none;
    padding: 0;
  }
  .home-page > .home-section {
    inline-size: min(calc(100% - clamp(var(--space-6), 5vw, var(--space-9))), var(--layout-wide));
    margin-inline: auto;
    margin-block: var(--space-7);
  }
  .home-content {
    display: grid;
    gap: var(--space-7);
    inline-size: min(calc(100% - clamp(var(--space-6), 5vw, var(--space-9))), var(--layout-wide));
    margin-inline: auto;
    padding-block: var(--space-7);
  }
  .home-page > .page-header-prominent {
    padding-inline: max(clamp(var(--space-4), 2.5vw, var(--space-7)), calc((100% - var(--layout-wide)) / 2));
    padding-block: clamp(var(--space-6), 4vw, var(--space-8)) var(--space-6);
  }
  .home-section { display: grid; gap: var(--space-5); }
  .home-hero-main { display: grid; gap: var(--space-5); }
  .home-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
}

@layer components {
  .site-header-inner { gap: var(--space-2) var(--space-7); min-block-size: var(--space-8); }
  .brand { display: inline-flex; align-items: center; min-block-size: var(--target-default); white-space: nowrap; }
  .nav-primary, .nav-utility { display: flex; align-items: center; gap: var(--space-1); }
  .nav-primary { margin-inline-end: auto; }
  :is(.nav-primary, .nav-utility) a,
  .site-nav-menu > summary {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    min-block-size: var(--target-default);
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    cursor: pointer;
  }
  :is(.nav-primary, .nav-utility) a:hover,
  .site-nav-menu > summary:hover,
  .site-nav-menu[open] > summary { background: var(--color-surface-subtle); }
  .nav-primary a[aria-current="page"],
  .site-nav-menu > .nav-active {
    background: var(--color-selected-surface);
    color: var(--color-action-hover);
    font-weight: var(--weight-bold);
  }
  .nav-utility .nav-icon { inline-size: 1.125rem; block-size: 1.125rem; flex: none; }
  .site-nav-menu { position: relative; }
  .site-nav-menu > summary { list-style: none; }
  .site-nav-menu > summary::-webkit-details-marker { display: none; }
  .site-nav-menu > summary::after { content: none; }
  .nav-chevron { flex: none; transition: transform 150ms ease; }
  .site-nav-menu[open] .nav-chevron { transform: rotate(180deg); }
  .nav-popover {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: var(--z-header);
    display: grid;
    gap: var(--space-1);
    inline-size: 20rem;
    padding: var(--space-2);
    border: var(--border-thin) solid var(--color-border-hairline);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);
  }
  .nav-popover a {
    display: grid;
    justify-content: start;
    gap: var(--space-1);
    padding: var(--space-3);
  }
  .nav-popover a strong { font-weight: var(--weight-medium); }
  .nav-popover a span { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-normal); line-height: var(--leading-body); }
  .lead { max-inline-size: var(--measure-copy); font-size: var(--text-lead); }
  .page-header-prominent .page-header-copy > p { color: var(--color-on-prominent); font-size: var(--text-lead); }
  .page-header-prominent .question-controls { margin-block-start: 0; }
  .page-header-prominent :focus-visible { outline-color: var(--color-surface); }
  .notice { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: var(--border-thin) solid currentColor; border-radius: var(--radius-md); }
  .notice > :not(.notice-title) { color: var(--color-text); }
  .notice-title { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); font-size: var(--text-body); }
  .notice-info { color: var(--color-info); background: var(--color-info-surface); }
  .notice-warning { color: var(--color-warning); background: var(--color-warning-surface); }
  .notice-danger { color: var(--color-danger); background: var(--color-danger-surface); }
  .notice-neutral { color: var(--color-text); border-color: var(--color-border-control); background: var(--color-canvas); }
  .home-scope-list { margin: 0; padding: 0; list-style: none; }
  .home-scope-list-framed {
    padding-inline: var(--space-5);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .home-scope-list-framed > :first-child { border-block-start: 0; }
  .home-scope-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: baseline;
    padding-block: var(--space-5);
    border-block-start: var(--border-thin) solid var(--color-border-hairline);
  }
  .home-scope-row h3 { font-size: var(--text-lg); }
  .home-scope-row p { max-inline-size: 62ch; margin-block-start: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
  .home-scope-row > span { color: var(--color-border-control); font-family: var(--font-mono); font-size: var(--text-h3); }
  .home-scope-row > a { font-size: var(--text-sm); font-weight: var(--weight-bold); }
  .task-cards.home-ways-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .task-cards.exam-ways-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .task-card:has(> .task-card-link) { display: grid; grid-template-rows: auto; padding: 0; }
  .task-card-link {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: var(--space-5);
    block-size: 100%;
    border-radius: inherit;
    color: var(--color-text);
    text-decoration: none;
  }
  .task-card-link > svg { inline-size: 1.75rem; block-size: 1.75rem; color: var(--color-action); }
  .task-card-link:hover { background: var(--color-surface-subtle); }
  .task-card-link:focus-visible { outline-offset: var(--focus-offset); }
  .task-card-compact-summary { display: none; }
  .task-card h3 { font-size: var(--text-lg); }
  .task-card .task-glyph svg { inline-size: 1.75rem; block-size: 1.75rem; }
  .task-card > svg { color: var(--color-action); inline-size: 1.75rem; block-size: 1.75rem; }
  .home-trust-list > div { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
  .atlas-browser, .exam-browser { display: grid; gap: var(--space-5); }
  .atlas-browser .tool-grid { margin-block: 0; }
  .atlas-count { color: var(--color-text-muted); font-size: var(--text-sm); }
  .atlas-filters { margin-block: var(--space-4); }
  .tool-card { box-shadow: none; }
  .tool-card img { background: var(--color-surface); border-block-end: var(--border-thin) solid var(--color-border-hairline); }
  .tool-card h2 { font-size: var(--text-lg); }
  .tool-card p { font-size: var(--text-sm); }
  .tool-card .eyebrow { margin: 0; }
  .exam-profile-panel { min-inline-size: 0; }
  .record-list .record-item {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
    inline-size: 100%;
    padding: var(--space-4);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
  }
  .record-list .record-item:hover { border-color: var(--color-action); }
  .record-list .record-item[aria-current="true"] { border-color: var(--color-action); background: var(--color-selected-surface); box-shadow: inset var(--space-1) 0 0 var(--color-action); }
  .record-detail-stack { display: grid; flex: 999 1 26rem; min-inline-size: 0; gap: var(--space-4); }
  .record-detail section { display: grid; gap: var(--space-4); }
  .record-detail .home-scope-row { grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-2); }
  .record-detail .home-scope-row > a { grid-column: 2; justify-self: start; }
  .record-detail .home-scope-row h3 { font-size: var(--text-sm); }
  .record-detail h3 { font-size: var(--text-h3); }
  .record-detail h4 { font-size: var(--text-lg); }
  .search-field > svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; color: var(--color-text-muted); }
  .search-field > input { min-block-size: var(--target-default); }
  .exam-profile-panel h2 { font-size: var(--text-h3); }
  .exam-profile-panel > * + * { margin-block-start: var(--space-4); }
  .technical-details { overflow-wrap: anywhere; }
  .technical-details > summary { list-style: none; }
  .technical-details > summary::before { content: "+"; margin-inline-end: var(--space-2); font-family: var(--font-mono); }
  .technical-details[open] > summary::before { content: "−"; }
  .technical-details > :not(summary) { padding-inline: var(--space-4); padding-block-end: var(--space-4); }
  .site-footer-prominent .site-footer-inner { inline-size: 100%; max-inline-size: var(--layout-wide); padding: 0; color: inherit; }
  .site-footer-prominent p a { text-decoration: underline; }

  /* Utility screens use the handoff's flat SettingsForm and pack records. */
  .utility-page .local-data-stack { margin-block-start: var(--space-6); gap: var(--space-5); }
  .utility-page :is(.reference-card, .local-data-form) {
    display: grid;
    gap: var(--space-4);
    box-shadow: none;
  }
  .utility-page .reference-card > * { margin-block: 0; }
  .utility-page :is(.reference-card, .local-data-state, .local-data-form) h2 { font-size: var(--text-h3); }
  .utility-page :is(.reference-card, .local-data-state) > p { max-inline-size: var(--measure-copy); font-size: var(--text-sm); }
  .utility-page .form-field { max-inline-size: 24rem; }
  .report-page .form-field:has(textarea) { max-inline-size: var(--measure-copy); }
  .report-page .report-draft-note { margin-block-start: var(--space-5); }
  .report-page .report-draft-note h2 { font-size: 1.125rem; }
  .utility-page :is(.form-field-group, .local-data-state, .reference-card) > .button { justify-self: start; }
  .utility-page .form-field-group > .button { margin-block-start: var(--space-2); }
  .utility-page .local-data-stack > [role="status"] { font-size: var(--text-sm); color: var(--color-text-muted); }
  .pack-record-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .pack-record-header > strong { font-size: 1.0625rem; }
  .pack-status {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--space-2);
    border: var(--border-thin) solid currentColor;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
  }
  .pack-status-active { color: var(--color-success); }
  .pack-status-quarantined { color: var(--color-danger); }
  .pack-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-4);
    margin: 0;
    font-size: var(--text-sm);
  }
  .pack-facts dt { font-weight: var(--weight-bold); }
  .pack-facts dd { margin: 0; color: var(--color-text-muted); }
  [data-offline-header] { grid-template-columns: minmax(0, 1fr); }
  .offline-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-5); padding-block-start: var(--space-5); border-block-start: var(--border-thin) solid var(--color-border-control); }
  .offline-summary dt { font-size: var(--text-sm); }
  .offline-summary dd { margin: 0; font-weight: var(--weight-bold); overflow-wrap: anywhere; }

  .pack-record-list li { padding: 1.25rem; background: var(--color-surface); }
  .pack-record-list li[data-pack-state="active"] { border-color: var(--color-success); }
  .pack-record-list li[data-pack-state="quarantined"] { border-color: var(--color-danger); background: var(--color-danger-surface); }
  .offline-pack-manager .pack-downloads { display: grid; gap: var(--space-4); }
  .offline-pack-manager .pack-downloads > h2 { font-size: var(--text-h3); }
  .offline-pack-manager .question-controls { margin: 0; }
  .offline-pack-manager .pack-help { color: var(--color-text-muted); font-size: var(--text-sm); }
}

@layer overrides {
  [hidden] { display: none !important; }
  @media (max-width: 60rem) {
    .task-cards.exam-ways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-scope-row { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
    .home-scope-row p, .home-scope-row > a { grid-column: 2; }
  }
  @media (max-width: 64rem) {
    .site-header-inner { gap: var(--space-2); }
    .site-header-inner > .nav-primary {
      position: relative;
      order: 3;
      flex: 1 0 100%;
      min-inline-size: 0;
      display: grid;
      grid-template-columns: auto auto minmax(0, 1fr);
      justify-content: space-between;
      border-block-start: var(--border-thin) solid var(--color-border-hairline);
      padding-block-start: var(--space-2);
      margin-inline-end: 0;
    }
    .site-header-inner > .nav-utility { margin-inline-start: auto; }
    .nav-primary > a, .site-nav-menu > summary { padding-inline: var(--space-2); }
    .site-nav-menu { position: static; }
    .nav-popover { inset-inline: 0; inline-size: auto; }
  }
  @media (max-width: 48rem) {
    .task-cards.home-ways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fact-table > div, .home-trust-list > div { grid-template-columns: minmax(0, 1fr); }
    .figure-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 30rem) {
    .site-header-inner > .brand { font-size: var(--text-sm); }
    .nav-utility a { gap: var(--space-1); padding-inline: var(--space-1); font-size: var(--text-xs); }
    .nav-utility a { min-inline-size: var(--target-default); }
    .nav-utility a span { display: none; }
    .nav-primary > a, .site-nav-menu > summary { padding-inline: var(--space-1); font-size: var(--text-xs); }
    .task-cards.home-ways-grid { grid-template-columns: minmax(0, 1fr); }
    .task-cards.exam-ways-grid { grid-template-columns: minmax(0, 1fr); }
    .technical-details dl > div { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 40rem) {
    .task-cards:is(.home-ways-grid, .exam-ways-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .task-card-link { grid-template-rows: auto auto; align-content: start; gap: var(--space-1); padding: 0.875rem; }
    .task-card-link > :is(svg, .task-card-description, .task-card-cta) { display: none; }
    .task-card-link .task-card-title { font-size: var(--text-sm); }
    .task-card-link .task-card-compact-summary { display: block; font-size: var(--text-xs); }
    .exam-browser .record-detail { padding: var(--space-4); }
    .record-detail .tabs { flex-wrap: nowrap; gap: var(--space-3); }
    .record-detail .tabs [role="tab"] { flex: 1 1 0; min-inline-size: 0; font-size: var(--text-xs); }
    .home-scope-list-framed { padding-inline: var(--space-4); }
    .home-scope-list-framed .home-scope-row { padding-block: var(--space-3); }
    .home-scope-list-framed .home-scope-row h3 { font-size: var(--text-sm); }
  }
  @media (forced-colors: active) {
    .nav-primary a[aria-current="page"] { outline: var(--border-thin) solid Highlight; }
    .notice { border-color: CanvasText; }
  }
  @media print {
    .site-nav-menu { display: none; }
    .page-header-prominent, .page-header-prominent .lead, .page-header-prominent .figure-strip dt { color: CanvasText; }
    .home-page > .home-section { inline-size: 100%; }
  }
}
@layer tokens {
  :root {
    --color-border-hairline: #e2e7ec;
    --color-on-prominent-muted: #9fb0c0;
    --color-on-prominent: #dbe3ea;
    --color-prominent-hover: rgb(255 255 255 / 8%);
    --color-prominent-selected: rgb(255 255 255 / 12%);
    --text-lg: 1.125rem;
    --shadow-card: var(--shadow-raised);
  }
}

@layer components {

  .eyebrow,
  .fact-status {
    text-transform: none;
    letter-spacing: normal;
  }

  .page-header-prominent {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-7) var(--space-6) var(--space-6);
    background: var(--color-text);
    color: var(--color-surface);
  }
  .page-header-prominent > * { max-inline-size: var(--layout-wide); }
  .page-header-prominent .page-header-copy { display: grid; gap: var(--space-4); max-inline-size: 46rem; }
  .page-header-prominent .lead { color: var(--color-on-prominent); }

  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0 0 0 calc(-1 * var(--space-3));
    padding: 0;
    list-style: none;
  }
  .breadcrumb li { display: flex; align-items: center; gap: var(--space-1); }
  .breadcrumb a,
  .breadcrumb [aria-current] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--target-default);
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium, 550);
    text-decoration: none;
  }
  .breadcrumb a { color: var(--color-action); }
  .breadcrumb a:hover { background: var(--color-surface-subtle); }
  .breadcrumb [aria-current] { background: var(--color-selected-surface); color: var(--color-action-hover); font-weight: var(--weight-bold); }
  .breadcrumb .breadcrumb-separator { color: var(--color-border-control); font-size: 1.25rem; line-height: 1; }
  .page-header-prominent .breadcrumb a { color: var(--color-on-prominent); }
  .page-header-prominent .breadcrumb a:hover { background: var(--color-prominent-hover); color: var(--color-surface); }
  .page-header-prominent .breadcrumb [aria-current] { background: var(--color-prominent-selected); color: var(--color-surface); }
  .page-header-prominent .breadcrumb .breadcrumb-separator { color: var(--color-border-control); }
  .page-header-prominent .button-primary {
    background: var(--color-surface);
    color: var(--color-action-hover);
    border-color: transparent;
  }
  .page-header-prominent .button-primary:hover { background: var(--color-selected-surface); }
  .page-header-prominent .button-secondary {
    background: transparent;
    color: var(--color-surface);
    border-color: var(--color-on-prominent-muted);
  }
  .page-header-prominent .button-secondary:hover { background: var(--color-prominent-hover); }

  .figure-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-4);
    margin: 0;
  }
  .figure-strip > div { display: grid; gap: 0.125rem; align-content: start; }
  .figure-strip dt { font-size: var(--text-xs); color: var(--color-text-muted); }
  .figure-strip dd { margin: 0; font-size: 1.25rem; font-weight: var(--weight-bold); line-height: 1.25; }
  .page-header-prominent .figure-strip {
    padding-block-start: var(--space-5);
    border-block-start: var(--border-thin) solid var(--color-text-muted);
  }
  .page-header-prominent .figure-strip dt { color: var(--color-on-prominent-muted); }
  .figure-strip-ruled > div {
    padding-inline: var(--space-4) var(--space-3);
    border-inline-start: var(--border-strong) solid var(--color-text);
  }
  .figure-strip-ruled dd { font-size: var(--text-lg); }

  .section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
  }
  .section-header > p {
    max-inline-size: 48ch;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .timeline > li {
    display: grid;
    gap: var(--space-1);
    align-content: start;
    padding: var(--space-4) var(--space-4);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .timeline-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
  .timeline-note { font-size: var(--text-sm); color: var(--color-text-muted); }
  .timeline > li.timeline-item-warning {
    border-color: var(--color-warning);
    background: var(--color-warning-surface);
  }
  .timeline-item-warning .timeline-date,
  .timeline-item-warning strong { color: var(--color-warning); }

  .status-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.125rem var(--space-2);
    border: var(--border-thin) solid currentColor;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
  }
  .status-chip-warning { color: var(--color-warning); background: var(--color-warning-surface); }
  .status-chip-info { color: var(--color-action-hover); background: var(--color-selected-surface); border-color: var(--color-action); }
  .status-chip-success { color: var(--color-success); background: var(--color-success-surface); }
  .status-chip-neutral { color: var(--color-text-muted); background: var(--color-canvas); border-color: var(--color-border); }

  .search-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 18rem;
    min-inline-size: 12rem;
    min-block-size: var(--target-default);
    padding-inline: var(--space-3);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .search-field input { flex: 1 1 auto; min-inline-size: 0; border: 0; background: transparent; font: inherit; }
  .search-field input:focus { outline: none; }
  .search-field:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }

  .filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .filter-group button {
    min-block-size: 2.25rem;
    padding-inline: var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
  }
  .filter-group button[aria-pressed="true"] { background: var(--color-text); color: var(--color-surface); }

  .record-board {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: start;
  }
  .record-list { flex: 1 1 20rem; min-inline-size: 0; display: grid; gap: var(--space-2); align-content: start; margin: 0; padding: 0; list-style: none; }
  .record-list button {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
    inline-size: 100%;
    padding: var(--space-4);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  .record-list button[aria-pressed="true"] {
    border-color: var(--color-action);
    background: var(--color-selected-surface);
    box-shadow: inset var(--space-1) 0 0 var(--color-action);
  }
  .record-list .record-kind { font-size: var(--text-sm); color: var(--color-text-muted); }
  .record-list .record-when { font-size: var(--text-xs); color: var(--color-text-muted); }
  .record-detail {
    flex: 999 1 26rem;
    min-inline-size: 0;
    display: grid;
    gap: var(--space-5);
    align-content: start;
    padding: var(--space-5);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .record-detail-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
    align-items: start;
  }
  .record-detail-header > :first-child { flex: 1 1 20rem; min-inline-size: 0; }
  .record-detail-actions { flex: 0 1 auto; display: grid; gap: var(--space-2); min-inline-size: 13rem; }
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    border-block-end: var(--border-thin) solid var(--color-border);
  }
  .tabs [role="tab"] {
    min-block-size: var(--target-default);
    margin-block-end: -1px;
    padding-inline: 0.125rem;
    border: 0;
    border-block-end: var(--border-strong) solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
  }
  .tabs [role="tab"][aria-selected="true"] { color: var(--color-action-hover); border-block-end-color: var(--color-action); }

  .fact-table { display: grid; margin: 0; }
  .fact-table > div {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    padding-block: var(--space-3);
    border-block-start: var(--border-thin) solid var(--color-border-hairline);
  }
  .fact-table dt { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); }
  .fact-table dd { margin: 0; font-size: var(--text-sm); }
  .fact-table dd .fact-status { margin-inline-start: var(--space-2); vertical-align: middle; }
  .fact-table-compact > div { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); }

  .source-line { font-size: var(--text-xs); color: var(--color-text-muted); }
  .source-line strong { color: var(--color-text); }
  .technical-details {
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .technical-details > summary { display: flex; align-items: center; min-block-size: var(--target-default); padding: var(--space-2) var(--space-4); cursor: pointer; font-weight: var(--weight-medium, 550); }
  .technical-details dl { display: grid; gap: var(--space-2); margin: 0; padding: 0 var(--space-4) var(--space-4); font-size: var(--text-xs); }
  .technical-details dl > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--space-3); }
  .technical-details dt { color: var(--color-text-muted); }
  .technical-details dd { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }

  .numbered-sections { display: grid; margin: 0; padding: 0; list-style: none; }
  .numbered-sections > li {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0 var(--space-3);
    padding-block: var(--space-4);
    border-block-start: var(--border-thin) solid var(--color-border);
  }
  .numbered-sections .numeral { font-family: var(--font-mono); font-size: 1.75rem; font-weight: var(--weight-bold); line-height: 1; color: var(--color-border); }
  .numbered-sections dl { display: grid; gap: var(--space-2); margin: 0; }
  .numbered-sections dl > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: 0.125rem var(--space-4); }
  .numbered-sections dt { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-action); }
  .numbered-sections dd { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

  .task-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .task-card {
    display: grid;

    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-content: stretch;
    padding: var(--space-4);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .task-card-primary { border-color: var(--color-action); }
  .task-card .task-glyph { color: var(--color-action); font-size: 1.75rem; line-height: 1; }
  .task-card p { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
  .task-card .button { justify-self: stretch; align-self: end; }

  .site-footer-prominent {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--color-text);
    color: var(--color-on-prominent);
  }
  .site-footer-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5) var(--space-6);
  }
  .site-footer-prominent nav { display: grid; gap: var(--space-2); align-content: start; }
  .site-footer-prominent nav > strong { color: var(--color-surface); font-size: var(--text-xs); }
  .site-footer-prominent a { color: var(--color-on-prominent); text-decoration: none; }
  .site-footer-prominent a:hover { color: var(--color-surface); text-decoration: underline; }
  .site-footer-prominent p { margin: 0; color: var(--color-on-prominent-muted); font-size: var(--text-xs); }
  .site-footer-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-thin) solid var(--color-text-muted);
    color: var(--color-on-prominent-muted);
    font-size: var(--text-xs);
  }
}

@layer overrides {
  @media (max-width: 60rem) {
    .site-footer-columns { grid-template-columns: minmax(0, 1fr); }
  }
  @media (forced-colors: active) {
    .status-chip, .timeline > li, .record-list button, .task-card, .fact-table > div { border-color: CanvasText; }
    .record-list button[aria-pressed="true"], .tabs [role="tab"][aria-selected="true"] { outline: var(--border-strong) solid Highlight; }
    .page-header-prominent, .site-footer-prominent { border: var(--border-thin) solid CanvasText; }
  }
  @media print {
    .filter-group, .search-field, .tabs { display: none; }
    .page-header-prominent, .site-footer-prominent { background: none; color: CanvasText; }
    .record-board { display: grid; grid-template-columns: minmax(0, 1fr); }
  }
}

@layer components {

  .empty-state {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
    padding: var(--space-5) var(--space-6);
    border: var(--border-thin) dashed var(--color-border-control);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .empty-state-heading {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
  }
  .empty-state-heading:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
  .empty-state > p {
    margin: 0;
    max-inline-size: var(--measure-copy, 62ch);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-wrap: pretty;
  }
  .empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-block-start: var(--space-2);
  }
  .empty-state-inline {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .empty-state-inline .empty-state-heading { font-size: var(--text-sm); }
  .empty-state-compact {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }
  .empty-state-compact .empty-state-heading { font-size: var(--text-sm); line-height: 1.35; }
  .empty-state-compact > p { font-size: var(--text-xs); }

  .history-list {
    display: grid;
    padding-inline: var(--space-6);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .history-list ul { display: grid; margin: 0; padding: 0; list-style: none; }
  .history-group-label {
    margin: 0;
    padding-block: var(--space-4) var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
  }
  .history-group-label + ul + .history-group-label { border-block-start: var(--border-thin) solid var(--color-border-hairline); }
  .history-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) 11rem auto;
    gap: 0 var(--space-5);
    align-items: baseline;
    padding-block: var(--space-3);
    border-block-start: var(--border-thin) solid var(--color-border-hairline);
  }
  .history-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
  .history-session { display: grid; gap: 0.125rem; min-inline-size: 0; }
  .history-session > strong { font-size: var(--text-sm); }
  .history-session > span { font-size: 0.875rem; color: var(--color-text-muted); }
  .history-outcome { font-size: var(--text-sm); }
  .history-row > a { font-size: 0.875rem; font-weight: var(--weight-bold); white-space: nowrap; }
  .history-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    padding-block: var(--space-4) var(--space-5);
    border-block-start: var(--border-thin) solid var(--color-border-hairline);
  }
  .history-foot p { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }
  .filter-count { font-weight: var(--weight-regular, 400); margin-inline-start: 0.375rem; }
  .tabs [role="tab"] .filter-count { color: var(--color-text-muted); }
  .filter-group button[aria-pressed="true"] .filter-count { color: var(--color-on-prominent); }
}

@layer overrides {
  @media (max-width: 46rem) {

    .history-list { padding-inline: var(--space-4); }
    .history-row { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 var(--space-2); padding-block: 0.625rem; }
    .history-session > span { display: none; }
    .history-outcome, .history-row > a { grid-column: 2; font-size: var(--text-xs); }
  }
  @media (forced-colors: active) {
    .empty-state { border-color: CanvasText; }
    .history-list, .history-row, .history-foot { border-color: CanvasText; }
  }
  @media print {
    .history-foot button { display: none; }
  }
}

@layer components {
  .utility-page .local-data-stack { gap: var(--space-8); }
  .settings-reading, .settings-data, .settings-unavailable, .pack-contents { display: grid; gap: var(--space-4); }
  .preference-list { margin: 0; padding: 0 var(--space-6); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); background: var(--color-surface); }
  .preference-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-6); padding-block: var(--space-5); }
  .preference-row + .preference-row { border-block-start: 1px solid var(--color-border-hairline); }
  .preference-row h3 { margin: 0; font-size: var(--text-lg); }
  .preference-row p { margin: var(--space-1) 0 0; max-inline-size: 66ch; color: var(--color-text-muted); font-size: var(--text-sm); }
  .preference-row input { inline-size: 1.5rem; block-size: 1.5rem; margin: var(--space-1); accent-color: var(--color-action); cursor: pointer; }
  .preference-row .preference-status { font-size: var(--text-xs); }
  .preference-status:empty { display: none; }
  .task-cards.settings-task-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .settings-task-cards .task-card { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .settings-task-cards .button { inline-size: 100%; padding-inline: var(--space-3); }
  .settings-card-action { display: grid; gap: var(--space-3); }
  .settings-export-contents { font-size: var(--text-sm); }
  .settings-export-contents summary { min-block-size: var(--target-default); padding-block: var(--space-2); color: var(--color-action); font-weight: var(--weight-bold); cursor: pointer; }

  .settings-card-action .affirmation-control { align-items: start; font-size: var(--text-xs); }
  .settings-card-action .affirmation-control input { flex: 0 0 auto; }
  .settings-data .task-card p { font-size: var(--text-sm); }
  .offline-pack-manager .pack-record-list { gap: 0; padding: 0 var(--space-6); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); background: var(--color-surface); }
  .offline-pack-manager .pack-record-list > li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); margin: 0; padding: var(--space-5) 0; border: 0; border-radius: 0; background: transparent; }
  .offline-pack-manager .pack-record-list > li + li { border-block-start: 1px solid var(--color-border-hairline); }
  .pack-record-copy { min-inline-size: 0; }
  .pack-record-header { justify-content: start; gap: var(--space-2); }
  .pack-record-header h3 { margin: 0; font-size: var(--text-lg); }
  .pack-record-copy p { margin-block: var(--space-2); }
  .pack-status { border: 0; background: var(--color-surface-subtle); }
  .pack-status-active { color: var(--color-action); background: var(--color-action-surface, #e0f2fe); }
  .pack-status-quarantined { color: var(--color-danger); background: var(--color-danger-surface); }
  .pack-record-list .question-controls { flex-direction: column; align-items: stretch; }
  .offline-pack-manager progress { max-inline-size: 100%; accent-color: var(--color-action); }
  .offline-pack-manager .operation-preview { display: grid; gap: var(--space-4); padding: var(--space-6); }
  .offline-pack-manager .operation-preview > :is(h2, p) { margin: 0; }
}

@layer overrides {
  @media (max-width: 68rem) {
    .task-cards.settings-task-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 40rem) {
    .task-cards.settings-task-cards { grid-template-columns: minmax(0, 1fr); }
    .preference-list { padding-inline: var(--space-4); }
    .preference-row { gap: var(--space-3); }
    .offline-pack-manager .pack-record-list { padding-inline: var(--space-4); }
    .offline-pack-manager .pack-record-list > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .pack-record-list .question-controls { flex-direction: row; flex-wrap: wrap; }
  }
  @media (forced-colors: active) {
    .pack-status { border: 1px solid CanvasText; }
    .preference-list, .preference-row, .offline-pack-manager .pack-record-list, .offline-pack-manager .pack-record-list > li { border-color: CanvasText; }
  }
}

@layer components {
  .nav-utility a[aria-current="page"] { background: var(--color-selected-surface); color: var(--color-action-hover); font-weight: var(--weight-bold); }
  .offline-how .numbered-sections { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .offline-how .numbered-sections > li { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-lg); background: var(--color-surface); }
  .offline-how .numbered-sections > li > span { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 1.5rem; }
  .offline-how h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
  .offline-how p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
  .offline-pack-manager .technical-details { border: 0; background: transparent; font-size: var(--text-xs); }
  .offline-pack-manager .technical-details > summary { display: list-item; min-block-size: var(--target-default); padding: var(--space-3) 0; color: var(--color-action); }
  .offline-pack-manager .technical-details dl { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); padding-inline: 0; }
}
@layer overrides {
  @media (max-width: 64rem) { .offline-how .numbered-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 40rem) { .offline-how .numbered-sections { grid-template-columns: minmax(0, 1fr); } }
}

@layer components {
  .utility-content .local-data-stack { max-inline-size: none; margin-block-start: 0; }
  .settings-task-cards .task-card .button { min-block-size: 3.25rem; }
}

@layer components {
  .utility-content .section-header h2 { font-size: 1.5rem; }
  .settings-data .task-card p { font-size: 0.875rem; }
}
@layer overrides {
  @media (max-width: 40rem) {
    .utility-content .section-header h2 { font-size: 1.125rem; }
    .settings-task-cards .task-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    .settings-task-cards .task-card > svg { display: none; }
    .settings-task-cards .task-card > :is(h3, p) { grid-column: 1; }
    .settings-task-cards .task-card > .button { grid-column: 1; inline-size: 100%; max-inline-size: none; }
    .settings-task-cards .settings-card-action { grid-column: 1 / -1; }
    .settings-task-cards .settings-card-action .button { inline-size: 100%; }
  }
}

/* Reconciled shared shell: one disclosure, adapted to a compact bottom sheet. */
@layer overrides {
  .site-header-inner { min-block-size: 3.5rem; padding-block: 0.375rem; gap: 1.25rem; }
  .nav-primary > a, .site-nav-menu > summary, .nav-utility a { color: var(--color-action); }
  .nav-popover { inline-size: 27rem; }
  .nav-popover a:last-child { border-block-start: 1px solid var(--color-border); }
  .section-header { display: grid; justify-items: start; gap: 0.375rem; }
  .section-header > p { max-inline-size: 74ch; font-size: 0.9375rem; }
  .home-intro-compact { display: none; }
  [data-route-id="home"] .home-hero { padding: 3.5rem max(2.5rem, calc((100% - 80rem) / 2)) 2.5rem; gap: 1.5rem; }
  .home-hero .page-header-copy { max-inline-size: 48rem; }
  .home-hero h1 { font-size: 2.875rem; line-height: 1.15; letter-spacing: -0.025em; }
  .home-hero .page-header-copy > p { font-size: 1.125rem; }
  [data-route-id="home"] .home-content { inline-size: min(calc(100% - 5rem), 80rem); padding-block: 2.25rem; gap: 2.25rem; }
  .home-section { gap: 1rem; }
  .home-section .section-header h2 { font-size: 1.5rem; }
  .home-scope-row h3, .task-card h3 { font-size: 1.0625rem; }
  :is([data-route-id="home"], [data-route-id="study-hub"], [data-route-id="review-queue"]) .site-footer-prominent { margin: 0 max(2.5rem, calc((100% - 80rem) / 2)) 2.75rem; border-radius: 0.5rem; }
  @media (max-width: 47.99rem) {
    html:has(.nav-primary) { scroll-padding-block-end: calc(4.75rem + env(safe-area-inset-bottom)); }
    body:has(.nav-primary) { padding-block-end: calc(3.75rem + env(safe-area-inset-bottom)); }
    .site-header-inner { min-block-size: 3.25rem; padding: 0; }
    .site-header-inner > .brand { font-size: 0.9375rem; }
    .site-header-inner > .nav-primary { position: fixed; inset: auto 25% 0 0; z-index: 40; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); inline-size: 75%; margin: 0; padding: 0 0 env(safe-area-inset-bottom); gap: 0; background: var(--color-surface); border-block-start: 1px solid var(--color-border); }
    .site-header-inner > .nav-utility { position: fixed; inset: auto 0 0 75%; z-index: 40; display: grid; inline-size: 25%; margin: 0; padding-block-end: env(safe-area-inset-bottom); background: var(--color-surface); border-block-start: 1px solid var(--color-border); }
    .nav-primary > a, .site-nav-menu > summary, .nav-utility a { display: flex; flex-direction: column; justify-content: center; gap: 0.125rem; min-block-size: 3.75rem; padding: 0.375rem 0.25rem; border-radius: 0; font-size: 0.6875rem; color: var(--color-text-muted); }
    .nav-primary .nav-icon, .nav-utility .nav-icon { inline-size: 2.75rem; block-size: 1.75rem; padding: 0.1875rem 0.6875rem; border-radius: 999rem; }
    .nav-primary a[aria-current="page"], .site-nav-menu > .nav-active, .nav-utility a[aria-current="page"] { background: var(--color-surface); color: var(--color-action-hover); }
    :is(.nav-primary, .nav-utility) [aria-current="page"] > .nav-icon, .nav-active > .nav-icon { background: var(--color-selected-surface); }
    .nav-utility a span { display: inline; }
    .nav-chevron { display: none; }
    .site-nav-menu { position: static; }
    .nav-popover { position: fixed; inset: auto 0 calc(3.75rem + env(safe-area-inset-bottom)); inline-size: 100%; max-block-size: calc(100dvh - 7rem); overflow-y: auto; border-radius: 0; box-shadow: 0 -0.75rem 2rem rgb(23 32 42 / 18%); }
    .nav-popover a { padding: 0.75rem; }
    .nav-popover a strong { font-size: 0.9375rem; }
    [data-route-id="home"] .home-hero { padding: 1.75rem 1.125rem 1.5rem; gap: 1rem; }
    .home-hero h1 { font-size: 1.625rem; line-height: 1.2; }
    .home-hero .page-header-copy > p { font-size: 0.9375rem; }
    .home-intro-ample, .ample-detail { display: none; }
    .home-intro-compact { display: inline; }
    .home-hero .question-controls, .study-hero .question-controls { display: grid; gap: 0.5rem; }
    .home-hero .figure-strip dd, .study-hero .figure-strip dd { font-size: 1rem; }
    [data-route-id="home"] .home-content { inline-size: calc(100% - 2rem); padding-block: 1rem; gap: 1.25rem; }
    .home-section .section-header h2 { font-size: 1.0625rem; }
    .home-scope-row p { display: none; }
    .home-scope-row > a { border: 0; padding: 0; min-block-size: 2.75rem; justify-self: start; }
    :is([data-route-id="home"], [data-route-id="study-hub"], [data-route-id="review-queue"]) .site-footer-prominent { margin: 0 1rem 1.5rem; }
  }
  @media print {
    .site-header-inner > :is(.nav-primary, .nav-utility) { display: none; }
    body:has(.nav-primary) { padding-block-end: 0; }
  }
}

@layer overrides {
  .home-hero h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.875rem); text-wrap: pretty; }
  .home-hero .page-header-copy > p { text-wrap: pretty; }
  .home-hero .page-header-copy { max-inline-size: 48rem; }
  .home-trust-list { border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.25rem 1.5rem; background: var(--color-surface); }
  .home-trust-list > div:first-child { border-block-start: 0; }
  .home-cycle-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
  .home-cycle-grid .notice { padding: 1.5rem; }
  .home-cycle-grid .notice h3 { font-size: 1.125rem; }
  .home-cycle-grid .notice p { font-size: 0.9375rem; color: var(--color-text-muted); }
  .home-cycle-grid .button { justify-self: start; color: var(--color-warning); border-color: var(--color-warning); }
  .home-cycle-dates { margin: 0; padding: 0 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.5rem; }
  .home-cycle-dates > div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; padding-block: 0.875rem; font-size: 0.8125rem; }
  .home-cycle-dates > div + div { border-block-start: 1px solid var(--color-border-hairline); }
  .home-cycle-dates dd { margin: 0; color: var(--color-text-muted); }
  .home-cycle-evidence { font-size: 0.8125rem; }
  .home-cycle-evidence summary { min-block-size: 2.75rem; display: flex; align-items: center; cursor: pointer; color: var(--color-action); }
  .home-cycle-evidence summary::before { content: '+ '; margin-inline-end: 0.5rem; }
  .home-cycle-evidence[open] summary::before { content: '− '; }
  @media (max-width: 47.99rem) {
    .home-hero h1 { font-size: 1.625rem; letter-spacing: -0.02em; }
    .home-cycle-grid { grid-template-columns: minmax(0, 1fr); }
    .home-cycle-dates { display: none; }
    .home-cycle-grid .notice { padding: 0.875rem 1rem; }
    .home-cycle-grid .notice :is(h3, p) { font-size: 0.8125rem; }
    .home-page:not(.exams-page) .home-section .section-header > p { font-size: 0.8125rem; }
    [data-route-id="home"] .home-section > .proof-line { font-size: 0.75rem; }
    [data-route-id="home"] .home-section > .technical-details { font-size: 0.75rem; }
    .home-trust-list { padding: 0.25rem 1rem; }
    .home-trust-list > div { gap: 0.125rem; padding-block: 0.625rem; }
    .home-trust-list :is(dt, dd) { font-size: 0.8125rem; }
    :is([data-route-id="home"], [data-route-id="study-hub"], [data-route-id="review-queue"]) .site-footer-columns { gap: 0.75rem; }
    :is([data-route-id="home"], [data-route-id="study-hub"], [data-route-id="review-queue"]) .site-footer-columns nav { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: 0.8125rem; }
    :is([data-route-id="home"], [data-route-id="study-hub"], [data-route-id="review-queue"]) .site-footer-columns nav > strong { display: none; }
    :is([data-route-id="home"], [data-route-id="study-hub"], [data-route-id="review-queue"]) .site-footer-meta { font-size: 0.75rem; }
  }
}

@layer overrides {
  .atlas-family-select { display: none; }
  .atlas-eligibility-note { font-size: 0.9375rem; color: var(--color-text-muted); max-inline-size: 80ch; }
  .atlas-browser { gap: 1rem; }
  .atlas-browser .tool-eligibility { font-size: 0.8125rem; color: var(--color-text-muted); }
  .atlas-browser .tool-card { border-radius: 0.5rem; }
  .atlas-browser .tool-card h2 { font-size: 1rem; }
  .atlas-browser .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 47.99rem) {
    .atlas-filters { display: none; }
    .atlas-family-select:not([hidden]) { display: grid; gap: 0.375rem; order: -1; }
    .atlas-family-select label { font-weight: 700; }
    .atlas-family-select select { inline-size: 100%; min-block-size: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border-control); border-radius: 0.5rem; background: var(--color-surface); color: var(--color-text); }
    .atlas-browser .tool-grid { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
    .atlas-browser .tool-card:not([hidden]) { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.75rem; }
    .atlas-browser .tool-card img { inline-size: 3.25rem; block-size: 3.25rem; border: 0; object-fit: contain; }
    .atlas-browser .tool-card > div { padding: 0; }
    .atlas-browser .tool-card .tool-family { display: none; }
    .atlas-browser .tool-card h2, .atlas-browser .tool-card p { margin: 0; }
    .atlas-browser .tool-card h2 a { display: inline-flex; min-block-size: 2.75rem; align-items: center; }
  }
}
@layer overrides {
  .atlas-browser [data-atlas-image-notice] { font-size: 0.8125rem; color: var(--color-text-muted); }

  @media (max-width: 47.99rem) {
    .atlas-browser .tool-card[data-image-unavailable] > div { grid-column: 1 / -1; }
  }
}

@layer overrides {
  .pack-removal-preview { background: var(--color-surface); border-color: var(--color-border); }
  .pack-removal-preview h2 { font-size: var(--text-h4); }
  .button-danger-outline { background: var(--color-surface); border-color: var(--color-danger); color: var(--color-danger); }
  .button-danger-outline:hover:not(:disabled) { background: var(--color-danger-surface); color: var(--color-danger); }
}

@layer overrides {
  .home-scope-caveat { display: none; }
  @media (max-width: 47.99rem) {
    .home-areas-section > .section-header > p { display: none; }
    .home-scope-caveat { display: block; font-size: 0.8125rem; color: var(--color-text-muted); }
  }
}

@layer overrides {
  @media (max-width: 47.99rem) {
    .home-areas-section .home-scope-row { grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0 1rem; }
    .home-areas-section .home-scope-row > a {
      color: var(--color-action);
      background: transparent;
      font-size: 0.8125rem;
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }
    .home-areas-section .home-scope-row > a::after { content: " →"; }
  }
}

@layer overrides {
  @media (max-width: 47.99rem) {
    .home-page .home-trust-list > .home-trust-ample { display: none; }
    .home-page section[aria-labelledby="home-trust"] .section-header > p,
    .home-page section[aria-labelledby="home-ways"] .section-header > p { display: none; }
  }
}

@layer overrides {
  .exam-card-coverage { display: none; }
  @media (max-width: 47.99rem) {
    .exams-page > .page-header-prominent .figure-strip { display: none; }
    .exams-page .record-list > li { border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
    .exams-page .record-list .record-item { border: 0; }
    .exam-card-coverage { display: grid; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
    .exam-card-coverage p { margin: 0; padding: var(--space-3); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-canvas); color: var(--color-text-muted); font-size: var(--text-xs); }
    .exam-card-coverage .button { font-size: var(--text-sm); }
  }
}

@layer overrides {
  .exams-page > .page-header-prominent h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.875rem); line-height: 1.15; letter-spacing: -0.025em; text-wrap: pretty; }
  @media (max-width: 47.99rem) {
    .exams-page > .page-header-prominent { padding: 1.75rem 1.125rem 1.5rem; gap: var(--space-4); }
    .exams-page > .page-header-prominent h1 { font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.02em; }
    .exams-page > .page-header-prominent .lead { font-size: 0.9375rem; }
  }
}

@layer overrides {
  .exams-cycle-compact { display: none; }
  .exams-cycle-ample { display: grid; gap: var(--space-3); }
  @media (max-width: 47.99rem) {
    .exams-cycle-compact { display: grid; gap: var(--space-3); }
    .exams-cycle-ample { display: none; }
    .exams-cycle-summary > .section-header > p { display: none; }
    .exams-cycle-summary .notice { padding: var(--space-4); }
    .exams-cycle-summary .notice h3 { font-size: var(--text-sm); }
    .exams-cycle-summary .notice p, .exams-cycle-summary .timeline-note { font-size: var(--text-xs); }
    .exams-cycle-summary .timeline { gap: var(--space-2); }
    .exams-cycle-summary .timeline > li { padding: var(--space-3); }
    .exams-cycle-summary .timeline strong { font-size: var(--text-xs); }
  }
}

@layer components {
  .question-illustration { margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--color-border); border-radius: .5rem; background: white; }
  .question-illustration picture { display: block; }
  .question-illustration img { display: block; width: 100%; max-height: 24rem; aspect-ratio: 1; object-fit: contain; }
}

@layer components { .print-question-image { display: block; width: 100%; max-width: 3.5in; max-height: 3.5in; object-fit: contain; margin-block: 1rem; break-inside: avoid; } }


@layer overrides {
  .exams-cycle-summary .timeline-compact { display: none; }
  @media (max-width: 47.99rem) {
    .exams-cycle-summary .timeline-ample,
    .exams-cycle-summary .timeline-note,
    .exams-cycle-summary .timeline > .timeline-item-opening { display: none; }
    .exams-cycle-summary .timeline-compact { display: inline; }
    .exams-cycle-summary .timeline > li { grid-template-columns: minmax(0, 1fr) max-content; align-items: baseline; gap: var(--space-3); }
    .exams-cycle-summary .timeline time { grid-column: 2; grid-row: 1; white-space: nowrap; }
    .exams-cycle-summary .timeline strong { grid-column: 1; grid-row: 1; font-size: var(--text-sm); }
  }
}

@layer overrides {
  @media (max-width: 47.99rem) {
    .exams-cycle-summary .exams-cycle-caveat { display: none; }
    .exams-cycle-summary .notice h3 { font-size: 0.9375rem; }
    .exams-cycle-summary .timeline > li { padding: 0.625rem 0.875rem; }
    .exams-cycle-summary .timeline strong { font-size: 0.875rem; font-weight: 400; }
    .exams-cycle-summary .timeline > .timeline-item-warning { background: var(--color-surface); }
    .exams-cycle-summary .timeline-item-warning time { font-weight: 700; }
  }
}


@layer overrides {
  .exam-search-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
  .exam-search-controls:not(:has(> :not([hidden]))) { display: none; }
  .exam-search-controls .filter-group { margin: 0; }
  .record-fact-sources { display: grid; gap: var(--space-5); }
  .record-fact-sources dt { font-weight: var(--weight-bold); }
  .record-fact-sources dd { margin: var(--space-2) 0 0; }
  @media (max-width: 47.99rem) {
    .exam-search-controls { grid-template-columns: minmax(0, 1fr); }
    .exams-page [data-exam-prompt] { display: none; }
  }
}

@layer overrides {
  .exam-format-facts { margin: 0; padding: 0.5rem 1rem; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  .exam-format-facts > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem; padding-block: 0.75rem; }
  .exam-format-facts > div + div { border-block-start: var(--border-thin) solid var(--color-border); }
  .exam-format-facts dt { font-weight: var(--weight-bold); color: var(--color-text-muted); }
  .exam-format-facts dd { margin: 0; }
  @media (max-width: 47.99rem) {
    .exams-page .home-content { padding-block: 1.25rem; gap: 1.5rem; }
    .exams-page #exams-board > .source-note { margin: 0; padding: 0; border: 0; font-size: 0.75rem; }
    .exams-page .home-section .section-header > p { font-size: 0.8125rem; }
    .exams-page .exam-format-facts { font-size: 0.8125rem; }
    .exams-page .exam-format-facts dt { font-size: 0.75rem; }
    [data-route-id="exam-selector"] .site-footer-columns { gap: 0.75rem; }
    [data-route-id="exam-selector"] .site-footer-columns nav { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: 0.8125rem; }
    [data-route-id="exam-selector"] .site-footer-columns nav > strong { display: none; }
    [data-route-id="exam-selector"] .site-footer-meta { font-size: 0.75rem; }
  }
}

@layer overrides {
  @media (max-width: 47.99rem) {
    .exams-page .record-item > .status-chip { order: -1; }
    .exams-page .record-item > strong { font-size: 1rem; }
    .exams-page .record-item > .record-kind { font-size: 0.8125rem; }
    .exam-card-subjects { border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-canvas); }
    .exam-card-subjects > summary { padding: 0.625rem 0.875rem; min-block-size: 2.75rem; font-size: 0.875rem; font-weight: var(--weight-medium); cursor: pointer; }
    .exam-card-subjects > ol { margin: 0; padding: 0 0.875rem 0.5rem 2rem; font-size: 0.8125rem; }
    .exam-card-subjects > ol > li + li { margin-block-start: 0.25rem; }
    .exam-card-coverage .exam-card-subjects > p { padding: 0 0.875rem 0.875rem; border: 0; font-size: 0.75rem; }
  }
}

@layer overrides {
  .exam-filter-disclosure > summary { display: none; }
  .exam-filter-disclosure > .source-note { margin-block: 0.75rem 0; }
  @media (max-width: 47.99rem) {
    .exam-filter-disclosure { border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
    .exam-filter-disclosure > summary { display: list-item; padding: 0.625rem 0.875rem; min-block-size: 2.75rem; font-size: 0.875rem; cursor: pointer; }
    .exam-filter-disclosure > .exam-search-controls { margin: 0 0.75rem; }
    .exam-filter-disclosure > .source-note { margin: 0.75rem; padding: 0; border: 0; font-size: 0.75rem; }
  }
}

@layer overrides {
  @media (min-width: 48rem) {
    .atlas-browser { padding: 1.25rem; border: var(--border-thin) solid var(--color-border); border-radius: 0.75rem; background: var(--color-surface); }
    .atlas-browser .tool-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 1rem; }
    .atlas-browser .tool-card > div { padding: 1rem; }
    .atlas-browser .tool-card > div > * + * { margin-block-start: 0.375rem; }
    .atlas-browser .tool-card h2 { font-size: 0.9375rem; line-height: 1.55; }
    .atlas-browser .tool-card .tool-family { font-size: 0.8125rem; color: var(--color-text-muted); }
    .atlas-browser .tool-eligibility-scored { display: none; }
    .atlas-browser .atlas-filters { margin: 0; gap: 0.75rem 1.25rem; }
  }
}

@layer overrides {
  .atlas-browser .tool-card h2 { overflow-wrap: anywhere; }
  .atlas-browser .tool-card h2 a { text-decoration: none; }
  .atlas-browser .tool-card h2 a:hover { text-decoration: underline; }
}

@layer overrides {
  .atlas-release-note { padding: 1rem 1.25rem; border: var(--border-thin) solid var(--color-border); border-radius: 0.5rem; background: var(--color-canvas); }
  .atlas-release-note h2, .atlas-image-recovery h2 { font-size: 0.9375rem; }
  .atlas-release-note p { max-inline-size: 74ch; margin-block-start: 0.375rem; font-size: 0.9375rem; color: var(--color-text-muted); }
  .atlas-release-note p:last-child { font-size: 0.875rem; }
  .atlas-release-details { font-size: 0.8125rem; color: var(--color-text-muted); }
  .atlas-release-details summary { padding-block: 0.625rem; min-block-size: 2.75rem; color: var(--color-action); font-weight: var(--weight-bold); cursor: pointer; }
  .atlas-release-details dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.375rem 0.75rem; }
  .atlas-release-details dd { margin: 0; overflow-wrap: anywhere; }
  .atlas-image-recovery p { font-size: 0.9375rem; }
  .atlas-image-recovery a { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-size: 0.875rem; font-weight: var(--weight-bold); }
}

@layer overrides {
  .question-illustration-interactive { display: grid; gap: 0.75rem; padding: 0; border: 0; background: transparent; }
  .question-image-viewport { overflow: auto; block-size: min(20rem, 70vw); border: var(--border-thin) solid var(--color-border); border-radius: 0.5rem; background: var(--color-surface); }
  .question-image-stage { min-inline-size: 100%; min-block-size: 100%; }
  .question-image-stage picture { inline-size: 100%; block-size: 100%; }
  .question-illustration .question-image-stage img { inline-size: 100%; block-size: 100%; max-block-size: none; aspect-ratio: auto; object-fit: contain; }
  .question-image-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
  .question-image-controls .button { min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0.5rem 0.875rem; font-size: 0.9375rem; }
  .question-image-controls [role="status"], .question-image-description { font-size: 0.875rem; color: var(--color-text-muted); }
  .question-image-description summary { padding-block: 0.625rem; min-block-size: 2.75rem; color: var(--color-action); cursor: pointer; }
  .question-image-description p { margin-block: 0.5rem 0; }
}

@layer overrides {
  .player-feedback .rationale-list { list-style: none; padding-inline-start: 0; }
  .player-action-bar .player-continue { margin-inline-start: auto; }
  .player-action-bar:has(.player-continue) .player-action-note { flex-basis: 100%; }
  @media (max-width: 47.99rem) {
    .player-action-bar .player-continue { margin-inline-start: 0; }
  }
}

@layer components {
  .study-player.question-card,
  .study-player.hazard-player {
    display: grid;
    gap: var(--space-5);
    inline-size: 100%;
    min-inline-size: 0;
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);
  }

  .study-player.hazard-player { max-inline-size: 68rem; margin-inline: auto; }
  .study-player .question-prompt { margin-block-end: 0; }
  .study-player .question-prompt h1,
  .study-player .hazard-player__prompt h1 { font-size: var(--text-h3); }
  .study-player .question-prompt > * + *,
  .study-player .hazard-player__prompt > * + * { margin-block-start: var(--space-3); }
  .study-player .question-prompt p,
  .study-player .hazard-player__prompt p { color: var(--color-text-muted); font-size: var(--text-body); line-height: var(--leading-body); }
  .study-player .hazard-player__prompt > .player-heading-row { margin-block-end: 0; align-items: baseline; }

  .player-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .player-position { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
  .player-mode-label {
    padding: var(--space-1) var(--space-3);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-canvas);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
  }
  .player-flag.button { gap: var(--space-2); padding-inline: var(--space-3); font-size: var(--text-sm); }
  .player-flag[aria-pressed="true"] { border-color: var(--color-action); background: var(--color-selected-surface); }
  .player-choice-legend { padding-block-end: var(--space-3); font-weight: var(--weight-bold); }
  .study-player .answer-option { align-items: center; border-color: var(--color-border-control); }
  .study-player .answer-option:has(input:checked) { border-color: var(--color-selected-border); }
  .study-player .answer-option input { flex: 0 0 auto; margin: 0; }
  .study-player .answer-option:has(input:disabled) { color: var(--color-text-muted); cursor: not-allowed; }
  .answer-letter { flex: 0 0 auto; color: var(--color-text-muted); font-family: var(--font-mono); font-weight: var(--weight-bold); }
  .player-selection-note {
    padding: var(--space-3) var(--space-4);
    border-inline-start: var(--space-1) solid var(--color-action);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
  .hazard-player .player-position { font-family: var(--font-sans); font-size: var(--text-sm); }
  .hazard-player .player-mode-label { padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--text-sm); font-weight: var(--weight-bold); }
  .study-player .hazard-player__prompt .player-selection-note { padding: 0; border: 0; background: none; font-size: var(--text-sm); }
  .study-player form > .player-selection-note { margin-block-start: var(--space-4); }
  .player-action-bar,
  .study-player .question-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .player-action-bar { padding-block: var(--space-4); background: var(--color-surface); }
  .study-player .player-action-bar { position: static; }
  .player-action-note { color: var(--color-text-muted); font-size: var(--text-sm); }
  .player-action-bar > .player-action-note { flex: 1 1 12rem; }
  .study-player .question-controls .source-note { margin: 0; }

  .feedback.player-feedback { padding: 0; margin-block-start: var(--space-3); background: transparent; color: var(--color-text); }
  .player-feedback .player-outcome { padding: calc(var(--space-4) + var(--space-1)); border: var(--border-thin) solid; border-radius: var(--radius-lg); }
  .feedback-correct .player-outcome { border-color: var(--color-success); background: var(--color-success-surface); }
  .feedback-review .player-outcome { border-color: var(--color-danger); background: var(--color-danger-surface); }
  .feedback-correct .player-outcome h2 { color: var(--color-success); }
  .feedback-review .player-outcome h2 { color: var(--color-danger); }
  .player-feedback .player-outcome h2 { font-size: var(--text-h4); }
  .player-outcome-icon { margin-inline-end: var(--space-1); }
  .player-feedback .feedback-answer-summary > div { display: grid; grid-template-columns: minmax(6rem, 0.35fr) minmax(0, 1fr); gap: var(--space-3); }
  .player-feedback .rationale-list { padding-inline-start: var(--space-5); }
  .player-feedback .rationale-list > li { padding-block-end: 0; }
  .player-feedback .rationale-heading-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .player-feedback .rationale-heading-row h4 { font-size: var(--text-body); }
  .player-feedback .rationale-verdict { padding: calc(var(--space-1) / 2) var(--space-2); border: var(--border-thin) solid currentColor; border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); }
  .player-feedback .rationale-verdict[data-verdict="correct"] { color: var(--color-success); }
  .player-feedback .rationale-verdict[data-verdict="incorrect"] { color: var(--color-danger); }
  .player-feedback .feedback-confusion { padding: var(--space-4); border: var(--border-thin) solid var(--color-info); border-radius: var(--radius-md); background: var(--color-info-surface); }
  .study-player .feedback-sources { padding: var(--space-3) var(--space-4); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas); color: var(--color-text); }
  .study-player .feedback-sources blockquote { margin-inline: 0; }
  .study-player .feedback-sources summary { min-block-size: var(--target-default); padding-block: var(--space-2); color: var(--color-action); font-weight: var(--weight-bold); cursor: pointer; }

  .hazard-player__workspace { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; gap: var(--space-5); min-inline-size: 0; }
  .hazard-player__response-panel { display: grid; align-content: start; gap: var(--space-4); min-inline-size: 0; }
  .hazard-player__visual { display: grid; gap: var(--space-3); min-inline-size: 0; }
  .hazard-player__visual h2,
  .hazard-player__markers h2,
  .hazard-player__commit h2 { font-size: 1.0625rem; }
  .hazard-player__viewport-controls,
  .hazard-player__marker-moves { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .hazard-player__viewport-controls .button { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
  .hazard-player__viewport-controls > span { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
  .hazard-player__visual > .button { justify-self: start; }
  .study-player .hazard-player__prompt > p { max-inline-size: 68ch; }
  .hazard-player__commit .player-action-bar { padding-block: 0; margin-block-start: var(--space-3); }
  .hazard-player__commit .player-action-note { flex: 0 1 auto; font-size: 0.875rem; }
  .hazard-player__visual > p { font-size: var(--text-sm); color: var(--color-text-muted); }
  .hazard-player__viewport { border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas); }
  .hazard-player__marker,
  .player-marker-number { display: inline-grid; place-items: center; min-inline-size: var(--space-6); min-block-size: var(--space-6); padding-inline: var(--space-1); border: var(--border-strong) solid var(--color-surface); border-radius: var(--radius-pill); background: var(--color-text); color: var(--color-surface); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); }
  .hazard-player__marker { pointer-events: none; box-shadow: var(--shadow-raised); }
  .hazard-player__markers { padding: var(--space-4); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas); }
  .hazard-player__markers > p { margin-block: var(--space-2) var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
  .hazard-player__marker-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .hazard-player__marker-list > li { padding: var(--space-3); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
  .hazard-player__marker-list p { margin-block-end: var(--space-3); font-size: var(--text-sm); }
  .hazard-player__marker-feedback p { margin-block-end: 0; }
  .hazard-player__marker-feedback.hazard-marker-hit { color: var(--color-danger); }
  .hazard-player__marker-feedback.hazard-marker-decoy_false_positive { color: var(--color-action); }
  .hazard-player__marker-moves button { min-inline-size: var(--target-default); min-block-size: var(--target-default); padding: var(--space-2); border: var(--border-thin) solid var(--color-border-control); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: var(--text-xs); cursor: pointer; }
  .hazard-player__marker-moves button:disabled { cursor: not-allowed; color: var(--color-disabled-text); background: var(--color-disabled-surface); }
  .hazard-player__zones { min-inline-size: 0; margin: 0; padding: var(--space-4); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); }
  .hazard-player__zones legend { font-size: var(--text-body); font-weight: var(--weight-bold); }
  .hazard-player__zones > p { margin-block: var(--space-3); color: var(--color-text-muted); }
  .hazard-player__zones ol { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
  .hazard-player__zones label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2) var(--space-3); padding-block: var(--space-2); border-block-end: var(--border-thin) solid var(--color-border); cursor: pointer; }
  .hazard-player__zones label:has(input:checked) { border-color: var(--color-action); background: var(--color-selected-surface); }
  .hazard-player__zones input { grid-row: span 2; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: var(--space-1); accent-color: var(--color-action); }
  .hazard-player__zones label > span { grid-column: 2; color: var(--color-text-muted); }
  .hazard-player__commit { padding: var(--space-4); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); }
  .hazard-player__commit > p { margin-block-start: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
  .hazard-player .feedback { padding: 1.25rem; border: var(--border-strong) solid currentColor; border-radius: var(--radius-md); }
  .hazard-player .feedback h2 { font-size: 1.0625rem; }
  .hazard-player .feedback > p { color: var(--color-text); font-size: var(--text-sm); }
  .hazard-player__zero-confirm { padding: var(--space-5); border: var(--border-strong) solid var(--color-border-control); border-radius: var(--radius-md); background: var(--color-canvas); }
  .hazard-player__zero-confirm > * + * { margin-block-start: var(--space-3); }
  .hazard-player__zero-confirm .button { margin-inline-end: var(--space-2); }
  .hazard-player__image-layer .hazard-result-figure { margin: 0; }
  .hazard-player__image-layer .hazard-result-figure figcaption { display: none; }
  .hazard-player__results { display: grid; gap: var(--space-5); }
  .hazard-player__results > h2 { font-size: var(--text-h3); }
  .hazard-player__results :is(ul, ol) { padding-inline-start: var(--space-5); }
  .hazard-player__results li { margin-block-start: var(--space-3); }
  .hazard-player__results section > * + * { margin-block-start: var(--space-3); }
  .hazard-player__results dt { font-weight: var(--weight-bold); }
  .hazard-player__results .hazard-condition-list { display: grid; gap: var(--space-3); padding: 0; list-style: none; }
  .hazard-player__results .hazard-condition { margin: 0; padding: var(--space-3) var(--space-4); border-inline-start: var(--space-1) solid var(--color-danger); background: var(--color-danger-surface); }
  .hazard-player__results .hazard-condition--safe { border-inline-start-style: dashed; border-inline-start-color: var(--color-info); background: var(--color-info-surface); }
  .hazard-player__results .hazard-condition > * + * { margin-block-start: var(--space-3); }
  .hazard-player__results .hazard-condition dl > * + * { margin-block-start: var(--space-3); }


  .simulation-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-block-start: var(--space-5); max-inline-size: 58rem; margin-inline: auto; }
  .simulation-main,
  .simulation-rail { display: grid; gap: var(--space-5); min-inline-size: 0; }
  .simulation-main .question-card { max-inline-size: 50rem; }
  .simulation-main .hazard-player > .question-controls > label { display: flex; align-items: start; gap: var(--space-2); min-block-size: var(--target-default); padding-block: var(--space-2); }
  .simulation-main .hazard-player > .question-controls > label input { flex: 0 0 1.25rem; inline-size: 1.25rem; block-size: 1.25rem; margin: var(--space-1) 0 0; accent-color: var(--color-action); }
  .simulation-step-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .simulation-navigator { padding: var(--space-5); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .simulation-navigator h2,
  .simulation-preview h2 { font-size: var(--text-h3); }
  .simulation-progress-label { display: block; margin-block-start: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
  .simulation-navigator progress { display: block; inline-size: 100%; block-size: var(--space-2); margin-block: var(--space-2) var(--space-5); border: 0; border-radius: var(--radius-pill); overflow: hidden; accent-color: var(--color-action); background: var(--color-surface-subtle); }
  .simulation-navigator progress::-webkit-progress-bar { background: var(--color-surface-subtle); }
  .simulation-navigator progress::-webkit-progress-value { background: var(--color-action); }
  .simulation-navigator progress::-moz-progress-bar { background: var(--color-action); }
  .simulation-item-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
  .simulation-item > :is(a, span) { position: relative; display: flex; gap: var(--space-1); align-items: center; justify-content: center; min-inline-size: var(--target-default); min-block-size: var(--target-default); padding-inline: var(--space-1); border: var(--border-thin) solid var(--color-border-control); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-family: var(--font-mono); font-weight: var(--weight-bold); text-decoration: none; }
  .simulation-item small { font-size: var(--text-xs); }
  .simulation-item[data-answered] > :is(a, span) { background: var(--color-action); color: var(--color-on-action); }
  .simulation-item[data-flagged] > :is(a, span) { border: var(--border-strong) solid var(--color-warning); }
  .simulation-item[data-flagged] small { position: absolute; inset-block-start: calc(-1 * var(--space-2)); inset-inline-end: calc(-1 * var(--space-1)); padding-inline: var(--space-1); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-warning); }
  .simulation-item[data-current] > :is(a, span) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
  .simulation-navigator-key { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block: var(--space-4); padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-text-muted); }
  .simulation-navigator-key li { display: flex; align-items: center; gap: var(--space-2); }
  .simulation-navigator-key li > span { inline-size: var(--space-4); block-size: var(--space-4); border: var(--border-thin) solid var(--color-border-control); border-radius: var(--radius-sm); background: var(--color-surface); }
  .simulation-navigator-key .simulation-key-recorded { background: var(--color-action); }
  .simulation-navigator-key .simulation-key-flagged { border: var(--border-strong) solid var(--color-warning); }
  .simulation-navigator-key .simulation-key-current { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--border-strong); }
  .simulation-navigator > .button { margin-block-start: var(--space-4); }
  .simulation-rail .reference-card { box-shadow: none; }
  .simulation-rail .simulation-timer time { display: block; margin-block-start: var(--space-2); color: var(--color-text); font-family: var(--font-mono); font-size: var(--text-h2); font-variant-numeric: tabular-nums; }
  .simulation-timer-toggle { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-default); font-size: var(--text-sm); }
  .simulation-timer-toggle input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--color-action); }
  .simulation-confirmation.reference-card { max-inline-size: 58rem; margin-inline: auto; border: var(--border-strong) solid var(--color-border-control); background: var(--color-canvas); box-shadow: none; }
  .simulation-confirmation h2 { font-size: var(--text-h4); }

  .simulation-setup-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; max-inline-size: 58rem; margin-inline: auto; padding: var(--space-5); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .simulation-settings.reference-card,
  .simulation-preview.reference-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .simulation-settings h2 { font-size: var(--text-h4); }
  .simulation-settings > fieldset { display: grid; gap: var(--space-3); margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: var(--border-thin) solid var(--color-border); }
  .simulation-settings legend { padding-inline-end: var(--space-3); font-size: var(--text-h4); font-weight: var(--weight-bold); }
  .simulation-settings fieldset > label:has(input:is([type="radio"], [type="checkbox"])) { display: flex; gap: var(--space-3); align-items: start; min-block-size: var(--target-default); padding: var(--space-3); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); }
  .simulation-settings fieldset > label:has(input:checked) { border-color: var(--color-action); background: var(--color-selected-surface); }
  .simulation-settings input:is([type="radio"], [type="checkbox"]) { flex: 0 0 auto; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: var(--space-1); accent-color: var(--color-action); }
  .simulation-setup-panel :is(select, input[type="number"], .text-input) { inline-size: 100%; min-inline-size: 0; min-block-size: var(--target-default); padding: var(--space-3); border: var(--border-thin) solid var(--color-border-control); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; }
  .simulation-settings > .field-label { display: block; margin-block-start: var(--space-5); font-weight: var(--weight-bold); }
  .simulation-settings .field-hint { color: var(--color-text-muted); font-size: var(--text-sm); }
  .simulation-preview .player-action-bar { margin-block-start: var(--space-5); }
  .simulation-preview.reference-card { box-shadow: none; }
  .simulation-preview-facts { display: grid; gap: var(--space-2); margin-block: var(--space-4); padding: var(--space-4); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas); font-size: var(--text-sm); }
  .simulation-preview-facts > div { display: grid; grid-template-columns: minmax(6rem, 0.3fr) minmax(0, 1fr); gap: var(--space-3); }
  .simulation-preview-facts dt { color: var(--color-text); font-weight: var(--weight-bold); }
  .simulation-preview-facts dd { color: var(--color-text-muted); }
  .simulation-practice-note { padding: var(--space-4); border: var(--border-thin) solid var(--color-warning); border-radius: var(--radius-md); color: var(--color-warning); background: var(--color-warning-surface); font-size: var(--text-sm); }
  .simulation-inclusions { font-size: var(--text-sm); }
  .simulation-inclusions summary { min-block-size: var(--target-default); padding-block: var(--space-3); font-weight: var(--weight-bold); color: var(--color-action); cursor: pointer; }
  .simulation-inclusions ul { padding-inline-start: var(--space-5); }
  .simulation-inclusions p { margin-block-start: var(--space-3); }

  @media (min-width: 48rem) {
    .simulation-settings .simulation-format-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .simulation-settings .simulation-mix-fields,
    .simulation-settings .simulation-length-fields .answer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .simulation-settings :is(.simulation-format-fields, .simulation-mix-fields) > :is(p, legend) { grid-column: 1 / -1; }
  }
  @media (max-width: 30rem) {
    .simulation-preview-facts > div { grid-template-columns: 1fr; gap: var(--space-1); }
  }

}

@layer overrides {
  @media (forced-colors: active) {
    .study-player .answer-option:has(input:checked),
    .hazard-player__zones label:has(input:checked),
    .simulation-settings label:has(input:checked) { outline: var(--border-strong) solid Highlight; }
    .simulation-item[data-current] > :is(a, span) { outline-color: Highlight; }
    .hazard-player__marker,
    .player-marker-number { border-color: Canvas; background: CanvasText; color: Canvas; forced-color-adjust: none; }
  }
  @media print {
    .study-player .player-action-bar,
    .player-heading-row .player-flag,
    .simulation-step-actions,
    .simulation-rail { display: none; }
    .simulation-workspace,
    .simulation-setup-panel,
    .hazard-player__workspace { display: block; }
    .study-player.question-card,
    .study-player.hazard-player { border: 0; box-shadow: none; padding: 0; }
  }
}

@layer overrides {
  .simulation-setup-panel { max-inline-size: 65.8125rem; padding: 1.5rem; gap: 1.5rem; border-radius: 0.5rem; }
  .setup-scope-note { padding: 1.25rem; margin-block-end: 1.5rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-canvas); }
  .setup-scope-note :is(h2, h3) { font-size: 1rem; }
  .setup-scope-note p { max-inline-size: 80ch; color: var(--color-text-muted); font-size: 0.9375rem; }
  .setup-scope-note a { font-weight: 700; }
  .simulation-settings > fieldset { padding: 0; border: 0; gap: 0; }
  .simulation-settings legend { margin-block-end: 0.75rem; font-size: 1rem; }
  .simulation-settings :is(.simulation-mix-fields, .simulation-format-fields),
  .simulation-settings .simulation-length-fields .answer-list { grid-template-columns: minmax(0, 1fr); }
  .simulation-settings fieldset > label:has(input:is([type="radio"], [type="checkbox"])),
  .simulation-settings .simulation-length-fields .answer-option { min-block-size: 3rem; padding: 0.875rem 0.5rem; border: 0; border-block-start: 1px solid var(--color-border-hairline); border-radius: 0; background: transparent; box-shadow: none; }
  .simulation-settings fieldset > label:has(input:checked), .simulation-settings .answer-option:has(input:checked) { background: var(--color-surface-subtle); }
  .simulation-settings .field-hint { margin-block: 0.75rem; }
  .simulation-settings .simulation-timing-fields > input[type="number"] { max-inline-size: 18rem; }
  .simulation-settings .simulation-timing-fields > label[for="simulation-duration"] { font-weight: 700; margin-block: 0.75rem; }
  .simulation-preview.reference-card { padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-canvas); }
  .simulation-preview h2 { font-size: 1.0625rem; }
  .simulation-preview-facts { border: 0; padding: 0; gap: 0; }
  .simulation-preview-facts > div { padding-block: 0.75rem; border-block-start: 1px solid var(--color-border-hairline); }
  .simulation-preview-facts dt { font-weight: 400; color: var(--color-text-muted); }
  .simulation-preview-facts dd { margin: 0; color: var(--color-text); }
  @media (max-width: 47.99rem) {
    .simulation-setup-panel { padding: 1rem; }
    .setup-scope-note, .simulation-preview.reference-card { padding: 1rem; }
    .simulation-preview-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  }
}

@layer overrides {
  .print-builder { max-inline-size: 65.8125rem; margin-inline: auto; padding: 1.5rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-surface); }
  .print-builder h2 { font-size: 1.5rem; }
  .print-builder > p { font-size: 0.9375rem; color: var(--color-text-muted); }
  .print-builder .print-config-fields { padding: 0; margin: 0; border: 0; display: grid; gap: 1.25rem; min-inline-size: 0; }
  .print-builder .print-config-fields > fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
  .print-builder legend { font-size: 1rem; font-weight: 700; margin-block-end: 0.5rem; }
  .print-builder .print-product-list { gap: 0; }
  .print-builder .print-product-option { padding: 0.75rem 0; border-block-end: 1px solid var(--color-border-hairline); }
  .print-builder label:has(input[type="radio"]), .print-builder label:has(input[type="checkbox"]) { display: flex; align-items: baseline; gap: 0.75rem; min-block-size: 2.75rem; }
  .print-builder input:is([type="radio"], [type="checkbox"]) { inline-size: 1.125rem; block-size: 1.125rem; flex: none; accent-color: var(--color-action); }
  .print-builder :is(select, input:not([type="radio"]):not([type="checkbox"])) { display: block; inline-size: 100%; min-block-size: 2.75rem; min-inline-size: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border-control); border-radius: 0.5rem; background: var(--color-surface); color: var(--color-text); }
  .print-builder .field-hint { font-size: 0.8125rem; color: var(--color-text-muted); }
  .print-builder .print-product-option .field-hint { margin-block: 0; padding-inline-start: 1.875rem; }
  .print-builder .print-control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .print-builder button[type="submit"] { justify-self: start; }
  @media (max-width: 47.99rem) {
    .print-builder { padding: 1rem; }
    .print-builder .print-control-grid { grid-template-columns: minmax(0, 1fr); }
    .print-builder button[type="submit"] { justify-self: stretch; }
  }
}

@layer overrides {
  .practice-builder .setup-scope-note { margin-block-end: 0; }
  .practice-builder .simulation-settings fieldset > label:has(input[type="checkbox"]) { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: 0.75rem; background: transparent; }
  .practice-area-copy { display: grid; gap: 0.375rem; }
  .practice-area-copy > span, .practice-area-count { color: var(--color-text-muted); font-size: 0.9375rem; }
  .practice-repeat { padding: 1rem; margin-block: 1.25rem; border: 1px solid var(--color-border); border-radius: 0.5rem; }
  .practice-repeat summary { font-weight: 700; cursor: pointer; }
  .practice-repeat[open] > label { display: block; margin-block: 1rem 0.5rem; }
  @media (max-width: 47.99rem) {
    .practice-builder .simulation-settings fieldset > label:has(input[type="checkbox"]) { grid-template-columns: 1.25rem minmax(0, 1fr); }
    .practice-area-count { grid-column: 2; }
  }
}

@layer components {
  .setup-navigation { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.5rem 1rem; }
  .setup-navigation .button { min-block-size: var(--target-default); }
}

@layer overrides {
  .study-player.question-card { max-inline-size: 50rem; margin-inline: auto; }
  .study-player.question-card > form { display: grid; gap: 1.5rem; }
  .study-player.question-card .player-action-bar { margin-block-start: 0; }
}

@layer overrides {
  .simulation-navigator h2 { font-size: 1.125rem; }
  .simulation-navigator .simulation-progress-label { margin-block: 1.25rem; }
  .simulation-navigator .simulation-confirmation { margin-block-start: 1.25rem; padding: 1.25rem; }
  .simulation-navigator .simulation-confirmation > * + * { margin-block-start: 0.75rem; }
  .simulation-item > :is(a, span) { inline-size: 2.75rem; block-size: 2.75rem; padding: 0; font-family: var(--font-sans); }
  .simulation-item:not([data-flagged]) small { display: none; }
}

@layer components {
  .hazard-setup-page { max-inline-size: 66rem; }
  .hazard-setup-heading { display: grid; gap: var(--space-2); margin-block: var(--space-5); }
  .hazard-setup-heading h1 { font-size: var(--text-h2); }
  .hazard-setup-heading p { color: var(--color-text-muted); max-inline-size: 68ch; }
  .hazard-environments > summary { cursor: pointer; font-weight: 700; min-block-size: var(--target-default); }
}

@layer overrides {
  .hazard-setup-page #hazard-builder-heading { font-size: 1.25rem; }
  .hazard-setup-page .setup-scope-note { display: grid; gap: 0.75rem; }
  .hazard-setup-page .simulation-settings > fieldset:first-child { margin-block-start: 0; }
}

@layer overrides {
  .practice-setup-section { scroll-margin-block-start: 5rem; }
  .practice-setup-section > .simulation-setup-panel { inline-size: 100%; }
  .practice-setup-section #practice-builder-heading { font-size: 1.25rem; }
  .practice-setup-section .setup-scope-note { display: grid; gap: 0.75rem; }
  .practice-setup-section .simulation-settings > fieldset:first-child { margin-block-start: 0; }
}

@layer overrides {
  .setup-summary { display: grid; gap: 0.75rem; margin-block: var(--space-5); }
  .setup-summary h3 { font-size: 1rem; }
  .setup-summary .simulation-preview-facts { margin: 0; }
  .setup-summary .simulation-preview-facts > div { padding-block: 0.5rem; }
  .setup-summary > p { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
}


.question-nonvisual-body ol { padding-inline-start: 1.5rem; margin-block: 1rem; }
.question-nonvisual-body li + li { margin-block-start: .75rem; }
.question-presentation-toggle { margin-block: .75rem; }

@layer layout {
  :is([data-route-id="study-hub"], [data-route-id="review-queue"]) .page-shell {
    inline-size: 100%;
    max-inline-size: none;
    padding: 0 0 var(--space-7);
  }
  :is([data-route-id="study-hub"], [data-route-id="review-queue"]) .page-shell > :not([data-study-hub]):not([data-review-queue]),
  .study-hub > .study-section,
  .study-hub > .study-activity-grid,
  .review-page > :not(.study-hero):not(.sr-only),
  [data-study-hub] > :not(.study-hub),
  [data-review-queue] > :not(.review-page) {
    inline-size: min(calc(100% - clamp(var(--space-6), 5vw, var(--space-9))), var(--layout-wide));
    margin-inline: auto;
  }
  :is(.study-hub, .review-page) > .study-hero {
    padding-inline: max(clamp(var(--space-4), 2.5vw, var(--space-7)), calc((100% - var(--layout-wide)) / 2));
    padding-block: clamp(var(--space-6), 4vw, var(--space-8)) var(--space-6);
  }
}

@layer components {
  .study-hub, .review-page { display: grid; gap: var(--space-7); }
  .study-section { display: grid; gap: var(--space-4); min-inline-size: 0; }
  :is(.study-section, #practice-sets) > .section-header h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
  .study-hub .task-card h3 { font-size: 1.0625rem; }
  .study-activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .study-activity-grid > .study-section { grid-template-rows: auto 1fr; align-content: start; }
  .study-activity-grid #study-history-panel > .empty-state { min-block-size: 100%; }
  .study-icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--color-action); flex: none; }
  .study-hero { display: grid; gap: var(--space-4); }
  .study-hero > :is(h1, p) { margin: 0; }
  .study-hero > p:not(.eyebrow) { max-inline-size: 65ch; font-size: 1.125rem; }
  .study-hero.page-header-prominent > p:not(.eyebrow) { color: var(--color-on-prominent); }
  .study-hero h1 { max-inline-size: 24ch; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.875rem); line-height: 1.15; letter-spacing: -0.025em; }
  .study-hero .eyebrow { color: var(--color-on-prominent-muted); }
  .study-hero-unavailable { background: var(--color-warning-surface); color: var(--color-text); border-block-end: var(--border-thin) solid var(--color-warning); }
  .study-hero-unavailable .eyebrow { color: var(--color-warning); }
  .study-hero .question-controls { margin-block: var(--space-2); }
  .study-hero .figure-strip .study-scope-label { font-size: var(--text-sm); line-height: 1.5; }
  .study-read-notice {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .study-read-notice > :is(h3, p) { margin: 0; }
  .study-read-notice > .button { justify-self: start; }
  .study-progress-rows {
    display: grid;
    padding-inline: var(--space-5);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .study-progress-rows > div {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding-block: var(--space-5);
  }
  .study-progress-rows > div + div { border-block-start: var(--border-thin) solid var(--color-border-hairline); }
  .study-progress-rows h3, .study-progress-rows p { margin: 0; }
  .study-progress-rows h3 { font-size: 1.125rem; }
  .study-progress-rows p { color: var(--color-text-muted); font-size: var(--text-sm); }
  .study-progress-rows strong { display: block; margin-block-start: var(--space-2); font-size: var(--text-xs); }
  .study-progress-rows a { font-weight: var(--weight-bold); font-size: var(--text-sm); }
  .history-feedback-unavailable { max-inline-size: 12ch; color: var(--color-text-muted); font-size: var(--text-xs); }
  .study-set-options { display: grid; list-style: none; padding: 0 var(--space-5); margin: 0; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  .study-set-options > li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
  .study-set-options > li + li { border-block-start: var(--border-thin) solid var(--color-border-hairline); }
  .study-set-options h3 { margin: 0; font-size: var(--text-sm); line-height: 1.35; }
  .study-set-options p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); }
  .study-set-options .button { white-space: nowrap; }
  [data-route-id="study-hub"] #practice-sets { display: grid; gap: var(--space-4); }
  [data-route-id="study-hub"] #practice-sets > .section-gap { margin-block-start: 0; }
  .review-page .review-queue-list { gap: 0; padding: 0; margin: 0; list-style: none; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
  .review-list-panel { border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
  .review-page .review-list-panel .review-queue-list { border: 0; border-radius: 0; }
  .review-scope-summary { margin: 0; padding: var(--space-3) var(--space-5); color: var(--color-text-muted); font-size: var(--text-xs); }
  .review-list-panel .review-scope-summary { border-block-end: var(--border-thin) solid var(--color-border-hairline); }
  .review-page .review-item-card { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 11rem; align-items: start; gap: var(--space-5); padding: var(--space-4) var(--space-5); border: 0; border-radius: 0; background: var(--color-surface); }
  .review-page .review-queue-list > li + li { border-block-start: var(--border-thin) solid var(--color-border-hairline); }
  .review-page .review-item-card h3 { margin: 0; font-size: var(--text-sm); line-height: 1.4; }
  .review-item-copy { display: grid; gap: var(--space-2); }
  .review-page .review-item-card > * + * { margin-block-start: 0; }
  .review-page .review-item-card :is(p, ul) { margin: 0; }
  .review-page .review-reason-list { color: var(--color-text-muted); font-size: var(--text-sm); }
  .review-page .review-item-card .question-controls { flex-direction: column; align-items: stretch; gap: var(--space-2); margin: 0; }
  .review-page .review-item-card .button { font-size: var(--text-xs); }
  .review-finish-action { min-block-size: var(--target-default); padding: var(--space-2); border: 0; background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
  .review-finish-action:hover { color: var(--color-text); }
  .review-finish-action:disabled { cursor: default; opacity: 0.6; }
  .review-finish-confirmation { grid-column: 2 / -1; display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas); }
  .review-finish-confirmation h4 { margin: 0; font-size: var(--text-sm); }
  .review-finish-confirmation p { color: var(--color-text-muted); font-size: var(--text-sm); }
  .review-confirmation-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .unavailable-attempts { padding: var(--space-5); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  .unavailable-attempts > p { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
  .unavailable-attempts ul { margin: 0; padding: 0; list-style: none; }
  .unavailable-attempts li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-block-start: var(--border-thin) solid var(--color-border-hairline); }
  .unavailable-attempts li > div:last-child { grid-column: 2; }
  .unavailable-attempts strong { font-size: var(--text-sm); }
  .unavailable-attempts li p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
  .review-page .review-error h1 { font-size: var(--text-h2); }
  .review-rules { display: grid; padding-inline: var(--space-5); margin: 0; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  .review-rules > div { display: grid; grid-template-columns: minmax(9rem, 0.6fr) minmax(0, 2fr); gap: var(--space-4); padding-block: var(--space-4); }
  .review-rules > div + div { border-block-start: var(--border-thin) solid var(--color-border-hairline); }
  .review-rules dt { font-size: var(--text-sm); font-weight: var(--weight-bold); }
  .review-rules dd { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
}

@layer overrides {
  @media (max-width: 46rem) {
    .study-hub, .review-page { gap: var(--space-6); }
    .study-activity-grid { grid-template-columns: minmax(0, 1fr); }
    :is(.study-hub, .review-page) > .study-hero { padding: 1.75rem 1.125rem 1.5rem; }
    .study-hero h1 { font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.02em; }
    .study-hero > p:not(.eyebrow) { font-size: 0.9375rem; }
    :is(.study-section, #practice-sets) > .section-header h2 { font-size: 1.0625rem; }
    .study-hero .figure-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .study-progress-rows { padding-inline: var(--space-4); }
    .study-progress-rows > div { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
    .study-progress-rows > div > a { grid-column: 2; min-block-size: var(--target-default); display: inline-flex; align-items: center; }
    .study-history .history-row { grid-template-columns: 5rem minmax(0, 1fr) auto; gap: var(--space-2); }
    .study-history .history-outcome { grid-column: 2; }
    .study-history .history-row > :is(a, .history-feedback-unavailable) { grid-column: 3; grid-row: 2; }
    .review-rules > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .review-page .review-item-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4); }
    .review-page .review-item-card .question-controls { flex-direction: row; flex-wrap: wrap; margin-block-start: var(--space-2); }
    .review-finish-confirmation { grid-column: 1; }
    .unavailable-attempts { padding: var(--space-4); }
    .unavailable-attempts li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
    .unavailable-attempts li > div:last-child { grid-column: 1; }
  }
  @media (forced-colors: active) {
    .study-read-notice, .study-progress-rows, .review-rules, .review-page .review-queue-list, .unavailable-attempts, .review-finish-confirmation { border-color: CanvasText; }
  }
}

@layer overrides {
  :is(.study-hub, .review-page) > .study-hero { padding: 3rem max(2.5rem, calc((100% - 80rem) / 2)) 2.5rem; }
  .study-hub > .study-section, .study-hub > .study-activity-grid, .review-page > :not(.study-hero):not(.sr-only) { inline-size: min(calc(100% - 5rem), 80rem); }
  .study-hub .task-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .study-coverage-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
  .study-coverage-grid :is(h3, p, li) { font-size: 0.9375rem; }
  .study-coverage-grid h3 { font-size: 1.0625rem; }
  .study-coverage-grid :is(p, li) { color: var(--color-text-muted); }
  .study-coverage-grid ul { padding-inline-start: 1.25rem; display: grid; gap: 0.5rem; }
  .study-coverage-areas { margin: 0; padding-inline-start: 1.75rem; }
  .study-coverage-areas li { border-block-start: 1px solid var(--color-border-hairline); padding: 0.625rem 0; }
  .study-coverage-areas li::marker { color: var(--color-text-muted); font-family: var(--font-mono); }
  .study-source-note { margin: 0; color: var(--color-text-muted); font-size: 0.8125rem; }
  .study-progress-rows > div { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .study-section > .button { justify-self: start; }
  .review-page .review-item-card { grid-template-columns: 7rem minmax(0, 1fr) auto; }
  .review-page .review-item-card .question-controls { flex-direction: row; align-items: center; }
  .review-finish-action { color: var(--color-action); font-weight: 700; text-decoration: none; }
  .review-finish-action[aria-expanded="true"] { border: 1px solid var(--color-border-control); border-radius: 0.375rem; }
  @media (max-width: 60rem) {
    .study-hub .task-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-page .review-item-card { grid-template-columns: 6rem minmax(0, 1fr) 10rem; }
    .review-page .review-item-card .question-controls { flex-direction: column; align-items: stretch; }
  }
  @media (max-width: 47.99rem) {
    :is(.study-hub, .review-page) > .study-hero { padding: 1.75rem 1.125rem 1.5rem; }
    .study-hub > .study-section, .study-hub > .study-activity-grid, .review-page > :not(.study-hero):not(.sr-only) { inline-size: calc(100% - 2rem); }
    .study-coverage-grid { grid-template-columns: minmax(0, 1fr); }
    .study-hub .task-cards { grid-template-columns: minmax(0, 1fr); }
    .study-progress-rows > div { grid-template-columns: minmax(0, 1fr); }
    .study-progress-rows > div > a { grid-column: 1; justify-self: start; }
    .study-progress-rows .study-icon { display: none; }
    .study-returning .study-progress-rows :is(p, a) { display: none; }
    .review-page .review-item-card { grid-template-columns: minmax(0, 1fr); }
    .review-page .review-item-card .question-controls { flex-direction: row; align-items: center; }
  }
}
@layer overrides {
  .study-hero .study-coverage-link { justify-self: start; min-block-size: var(--target-default); display: inline-flex; align-items: center; color: var(--color-surface); font-size: 0.9375rem; font-weight: 700; }
  .study-hero .figure-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .review-page .study-hero .figure-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 47.99rem) {
    .study-hero .figure-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-page .study-hero .figure-strip { gap: 0.75rem; }
    .review-page .study-hero .figure-strip dt { font-size: 0.75rem; }
    .review-page .study-hero .figure-strip dd { font-size: 1rem; }
  }
}

@layer overrides {
  @media (max-width: 47.99rem) {
    .study-ways-grid .task-card-link { grid-template-rows: auto auto; align-content: start; gap: var(--space-1); padding: 0.875rem; }
    .study-ways-grid .task-card-link > :is(svg, .task-card-description, .task-card-cta) { display: none; }
    .study-ways-grid .task-card-title { font-size: var(--text-sm); }
    .study-ways-grid .task-card-compact-summary { display: block; }
    .task-cards.study-ways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .study-first-visit .study-progress-rows :is(p, a) { display: none; }
    .study-first-visit .study-progress-rows strong { font-weight: var(--weight-normal); color: var(--color-text-muted); }
  }
}

@layer overrides {
  .study-settings-links { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-bold); }
  .study-quick-presets > summary { min-block-size: var(--target-default); padding-block: var(--space-3); cursor: pointer; color: var(--color-action); font-weight: var(--weight-bold); }
  .study-quick-presets[open] > .section-header { margin-block: var(--space-4); }
  .study-coverage-compact :is(h3, p) { font-size: var(--text-xs); }
  .study-coverage-compact h3 { font-size: var(--text-sm); }
  .study-coverage-compact > .button { justify-self: start; }
}

@layer overrides {
  @media (max-width: 47.99rem) {
    .review-page .study-hero .figure-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-page section[aria-labelledby="review-due-heading"] > .section-header > p { display: none; }
    .review-page .review-item-card .question-controls { flex-direction: column; align-items: stretch; }
    .review-page .review-finish-action { border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); }
    .review-page .review-confirmation-actions { display: grid; }
  }
}

@layer overrides {
  @media (max-width: 47.99rem) {
    .review-page .review-reason-list { margin: 0; padding: 0; list-style: none; gap: 0.125rem; font-size: 0.8125rem; text-wrap: pretty; }
  }
}

@layer overrides {
  @media (min-width: 48rem) {
    .review-page .study-hero .figure-strip:has(> div:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}

@layer overrides {
  .review-page .review-error h1 { font-size: 1.125rem; line-height: 1.4; color: var(--color-danger); }
  .review-page .review-error > p { font-size: 0.9375rem; }
  .review-page .review-error .question-controls { gap: var(--space-2); }
  .review-page .review-error .button { font-size: 0.875rem; padding-inline: var(--space-4); }
  @media (min-width: 36rem) {
    .review-page .review-error .question-controls { display: flex; flex-direction: row; flex-wrap: wrap; }
    .review-page .review-error .question-controls .button { inline-size: auto; }
  }
}

@layer overrides {
  .review-page .review-empty .button { font-size: 0.875rem; padding-inline: var(--space-4); }
}