/* EPI web-native framework: semantic defaults plus a small constraint grammar. */
@layer reset, tokens, base, layout, components;

@layer reset {
  /* Box model and replaced-element defaults */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 2;
  }

  body {
    margin: 0;
  }

  img,
  picture,
  video,
  canvas,
  svg,
  iframe {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  button,
  input,
  textarea,
  select {
    color: inherit;
  }
  textarea {
    resize: vertical;
  }
  fieldset {
    min-inline-size: 0;
  }
  [hidden] {
    display: none !important;
  }
}

@layer tokens {
  /* Color, typography, rhythm, geometry, and motion */
  :root {
    color-scheme: light;

    --brand-navy: #162e51;
    --brand-blue-dark: #0d3a6a;
    --brand-blue: #185394;
    --brand-blue-light: #85c8ff;
    --brand-ink: #faf9f5;
    --canvas: light-dark(#edf1ef, #08141c);
    --surface: light-dark(#fffefa, #132630);
    --surface-inset: light-dark(#e8eeec, #0e2029);
    --ink: light-dark(#17242c, #e7eff1);
    --ink-muted: light-dark(#53666e, #9fb0b7);
    --line: light-dark(#c5d0cf, #2d4550);
    --line-strong: light-dark(#879da2, #4b646e);
    --accent: light-dark(#1f6f86, #82c9dd);
    --accent-ink: light-dark(#175b79, #8dcde3);
    --accent-soft: light-dark(#dfeaec, #173b49);
    --emphasis-ink: var(--ink);
    --focus: light-dark(#087b82, #72cbd0);
    --field-rule: light-dark(#8da0a4, #506873);
    --table-stripe-surface: light-dark(rgb(16 43 60 / 0.025), rgb(255 255 255 / 0.025));
    --table-hover-surface: light-dark(rgb(31 111 134 / 0.07), rgb(130 201 221 / 0.08));
    --on-accent: #fff;
    --danger: oklch(50% 0.16 28);
    --danger-soft: light-dark(oklch(95% 0.035 28), oklch(29% 0.07 28));
    --warning: oklch(55% 0.12 72);
    --warning-soft: light-dark(oklch(95% 0.045 85), oklch(30% 0.055 78));
    --success: oklch(45% 0.11 150);
    --success-soft: light-dark(oklch(95% 0.035 150), oklch(28% 0.055 150));
    --shell-surface: light-dark(#f8faf7, #0b1d26);
    --shell-ink: light-dark(#17384a, #edf5f4);
    --shell-ink-muted: light-dark(#4b6570, #b7c8cc);
    --shell-active: light-dark(#1f6f86, #82c9dd);
    --shell-hover: light-dark(rgb(16 47 63 / 0.07), rgb(231 239 241 / 0.08));
    --agency-logo: url("../assets/images/epa-logo.svg");
    --footer-surface: #0d2947;
    --citation-surface: #0a2239;
    --citation-ink: #c4dbe5;
    --citation-link: #87d1dc;
    --hero-surface: #082d62;
    --ecosar-hero-surface: light-dark(#457b80, #173d4a);
    --hero-banner-surface: rgb(0 0 0 / 0.1);
    --hero-footer-fade: rgb(0 0 0 / 0.82);
    --compact-hero-surface: var(--accent-soft);
    --compact-hero-ink: light-dark(var(--brand-blue-dark), var(--ink));
    --search-surface: light-dark(#fff, #102833);
    --search-ink: light-dark(#17242c, #e7eff1);
    --search-line: light-dark(rgb(255 255 255 / 0.68), #4b646e);
    --search-focus: light-dark(#8dd1d6, #72cbd0);
    --primary-hover: color-mix(in oklch, var(--brand-blue), white 12%);
    --font-sans:
      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    --text-dense: 0.8125rem;
    --text-ui: 0.875rem;
    --text-body: 1rem;
    --text-section: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --text-title: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
    --text-display: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
    --leading-tight: 1.15;
    --leading-dense: 1.35;
    --leading-body: 1.5;
    --tracking-tight: -0.025em;
    --tracking-label: 0.05em;
    --weight-regular: 400;
    --weight-strong: 600;
    --weight-value: 700;

    --space-3xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --page-gutter: clamp(1rem, 4vw, 4rem);
    --page-max: 84rem;
    --measure: 66ch;

    --radius-pill: 999px;
    --border: 1px;
    --indicator-width: 0.2rem;
    --focus-width: 2px;
    --focus-offset: 3px;
    --focus-inset: calc(-1 * var(--focus-width));
    --focus-outline: var(--focus-width) solid var(--focus);
    --control-height: 2.25rem;
    --control-height-compact: 1.875rem;
    --component-pad: var(--space-sm);
    --control-padding-block: var(--space-xs);
    --control-padding-inline: var(--component-pad);
    --field-padding-inline: 0;
    --site-header-height: 4.25rem;
    --card-header-height: calc(var(--control-height) + var(--space-3xs));
    --elevation-overlay: 0 0.75rem 2rem rgb(40 35 25 / 0.1);
    --duration: 140ms;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --agency-logo: url("../assets/images/epa-logo-white.svg");
    --elevation-overlay: 0 1rem 2.5rem rgb(0 0 0 / 0.28);
  }

  :root[data-theme] {
    color: var(--ink);
    background-color: var(--canvas);
  }
}

@layer base {
  /* Document, typography, and prose */
  body {
    min-block-size: 100svh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
  }

  #app {
    min-block-size: 100svh;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
  }

  :where(body, #app) > main {
    flex: 1 0 auto;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    margin-block: 0;
    color: var(--ink);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-title);
  }
  h2 {
    font-size: var(--text-section);
  }
  :where(h3, h4, h5, h6) {
    font-size: var(--text-body);
  }

  :where(p, ul, ol, dl, figure, blockquote, pre, table) {
    margin-block: 0;
  }
  :where(figcaption, blockquote) {
    max-inline-size: var(--measure);
  }
  :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, figcaption) {
    overflow-wrap: anywhere;
  }

  a {
    color: var(--accent-ink);
    text-decoration: none;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.18em;
  }

  a:hover {
    color: var(--accent);
    text-decoration: underline;
  }

  :focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
  }

  small,
  hgroup > p:first-child,
  table,
  :where(figcaption, caption) {
    font-size: var(--text-dense);
    line-height: var(--leading-dense);
  }
  small,
  :where(figcaption, caption) {
    color: var(--ink-muted);
  }
  :where(
    h1, h2, h3, h4, h5, h6,
    strong,
    a,
    legend
  ) {
    color: var(--emphasis-ink);
    font-weight: var(--weight-strong);
  }
  :where(
    th,
    tr[data-total] > :first-child,
    hgroup > p:first-child
  ) {
    font-weight: var(--weight-strong);
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
  }

  :where(code, kbd):not(pre *) {
    padding: 0.1em 0.3em;
    border: var(--border) solid var(--line);
    background: var(--surface-inset);
  }

  pre {
    max-inline-size: 100%;
    padding: var(--space-md);
    overflow: auto;
    border-inline-start: var(--indicator-width) solid var(--accent);
    background: var(--surface-inset);
    line-height: var(--leading-body);
  }

  blockquote {
    padding-inline-start: var(--space-lg);
    border-inline-start: var(--indicator-width) solid var(--line-strong);
    color: var(--ink-muted);
  }

  hr {
    border: 0;
    border-block-start: var(--border) solid var(--line);
    margin-block: 0;
  }

  hgroup {
    display: grid;
    gap: var(--space-3xs);
  }
  hgroup > p:first-child {
    color: var(--accent-ink);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  hgroup > p:last-child {
    color: var(--ink-muted);
    font-size: var(--text-body);
  }

  :where(dd, blockquote) {
    margin: 0;
  }
  figure {
    max-inline-size: 100%;
    display: grid;
    gap: var(--space-xs);
    margin-inline: 0;
  }
  :where(figcaption, caption) {
    text-align: start;
  }

  /* Tables */
  table {
    --table-cell-padding: var(--space-xs);
    inline-size: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }
  :where(th, td) {
    padding: var(--table-cell-padding);
    border-block-end: var(--border) solid color-mix(in oklch, var(--line), transparent 44%);
    text-align: start;
    vertical-align: top;
  }
  thead th {
    color: var(--ink-muted);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  :where(tbody, tfoot):last-child > tr:last-child > :where(th, td) {
    border-block-end: 0;
  }
  tbody tr:nth-child(even) {
    background: var(--table-stripe-surface);
  }
  tbody tr:is(:hover, :focus-within) {
    background: var(--table-hover-surface);
  }
  :where(td, th) > :where(data, time):only-child {
    display: block;
    text-align: end;
  }
  :where(tfoot, tr[data-total]) {
    color: var(--ink-muted);
  }
  tr[data-total] {
    background: var(--surface-inset);
  }

  /* Forms and controls */
  form {
    max-inline-size: 100%;
  }
  fieldset {
    padding: 0;
    border: 0;
    margin: 0;
  }
  legend {
    padding: 0;
  }
  :where(label, dt) {
    display: grid;
    gap: var(--space-3xs);
    color: color-mix(in oklch, var(--ink-muted), var(--ink) 20%);
    font-size: var(--text-ui);
    font-variant-caps: all-small-caps;
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-tight);
  }
  :where(
    input:not(
      [type="checkbox"],
      [type="radio"],
      [type="file"],
      [type="range"],
      [type="color"],
      [type="button"],
      [type="submit"],
      [type="reset"],
      [type="image"],
      [type="hidden"]
    ),
    select,
    textarea
  ) {
    inline-size: 100%;
    min-block-size: var(--control-height);
    align-self: start;
    padding: calc(var(--control-padding-block) / 2) var(--field-padding-inline);
    border: 0;
    border-block-end: var(--border) solid var(--field-rule);
    color: var(--ink);
    background: transparent;
    box-shadow: none;
    font: var(--text-ui) / var(--leading-tight) var(--font-sans);
  }
  :where(
    input:not(
      [type="checkbox"],
      [type="radio"],
      [type="file"],
      [type="range"],
      [type="color"],
      [type="button"],
      [type="submit"],
      [type="reset"],
      [type="image"],
      [type="hidden"]
    ),
    select,
    textarea
  ):hover:not(:disabled) {
    border-block-end-color: var(--ink);
  }
  :where(
    input:not(
      [type="checkbox"],
      [type="radio"],
      [type="file"],
      [type="range"],
      [type="color"],
      [type="button"],
      [type="submit"],
      [type="reset"],
      [type="image"],
      [type="hidden"]
    ),
    select,
    textarea
  ):focus {
    border-block-end-color: var(--focus);
    box-shadow: 0 1px 0 var(--focus);
  }
  :where(input, select, textarea):disabled,
  button:disabled {
    cursor: not-allowed;
    opacity: 0.64;
  }
  :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--accent);
  }
  ::placeholder {
    color: color-mix(in oklch, var(--ink-muted), transparent 12%);
    opacity: 1;
  }
  input[type="file"] {
    inline-size: 100%;
    min-inline-size: 0;
  }
  :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--danger);
  }
  progress {
    inline-size: min(100%, 28rem);
    block-size: 0.5rem;
    accent-color: var(--accent);
  }

  @supports (appearance: base) {
    select,
    ::picker(select) {
      appearance: base;
    }
  }

  button {
    border: var(--border) solid color-mix(in oklch, var(--line-strong), transparent 18%);
    color: inherit;
    background: transparent;
    cursor: pointer;
    transition:
      background var(--duration),
      border-color var(--duration);
  }

  button:hover:not(:disabled) {
    border-color: var(--ink);
    color: var(--surface);
    background: var(--ink);
  }
  button > :where(svg, img) {
    inline-size: 1em;
    block-size: 1em;
    flex: none;
  }
  button[type="submit"] {
    border-color: var(--accent);
    color: var(--on-accent);
    background: var(--brand-blue);
  }
  button[type="submit"]:hover:not(:disabled) {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
  }
  input[type="search"]::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
  }

  /* Top-layer surfaces; width comes from their own composition. */
  dialog,
  [popover] {
    padding: var(--space-lg);
    text-align: start;
    border: var(--border) solid var(--line-strong);
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--elevation-overlay);
  }
  dialog {
    max-block-size: min(calc(100svh - var(--space-md) - var(--space-md)), 50rem);
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }
  dialog > section {
    min-block-size: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }
  [popover] {
    max-block-size: min(88vh, 50rem);
    overflow: auto;
  }
  dialog::backdrop {
    background: color-mix(in srgb, var(--brand-navy) 58%, transparent);
    backdrop-filter: blur(2px);
  }
  dialog:not([open]) {
    display: none !important;
  }
  dialog > header > :first-child {
    margin-inline-end: auto;
  }

  @supports (position-area: block-end span-inline-end) {
    [popover] {
      position: fixed;
      position-anchor: auto;
      inset: auto;
      margin: 0;
    }
  }

  nav ul {
    padding-inline-start: var(--space-lg);
  }
  :where(ol, ul) {
    padding-inline-start: var(--space-md);
  }
}

@layer layout {
  /* Composition primitives */
  .frame {
    inline-size: min(
      var(--frame-max, var(--page-max)),
      calc(100% - var(--frame-gutter, var(--page-gutter)) * 2)
    );
    margin-inline: auto;
  }
  .frame[data-size="auto"] {
    inline-size: fit-content;
    max-inline-size: calc(100% - var(--frame-gutter, var(--page-gutter)) * 2);
  }

  .stack {
    --gap: var(--space-md);
    display: grid;
    align-content: start;
    gap: var(--gap);
  }

  .cluster {
    --gap: var(--space-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
  }

  .control-row {
    --gap: var(--space-3xs);
    min-inline-size: 0;
    max-inline-size: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
  }
  /* Inherited density variant for control compositions and component hosts. */
  .controls-compact {
    --control-height: var(--control-height-compact);
    --control-padding-block: var(--space-3xs);
    --control-padding-inline: var(--space-xs);
    --gap: var(--space-3xs);
  }
  .control-row > :where(
    input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]),
    select,
    textarea
  ),
  .control-row-fill {
    min-inline-size: 0;
    flex: 1 1 0;
  }
  .control-row > :where(button, .icon-button, .control-row-fixed) {
    flex: none;
  }
  .control-row-break {
    flex-basis: 100%;
  }
  .control-group {
    min-inline-size: 0;
    max-inline-size: 100%;
    display: inline-flex;
    flex-wrap: wrap;
  }

  .control-row[data-controls="square"] > * {
    inline-size: var(--control-height);
    flex: none;
  }
  .control-row[data-controls="square"] {
    --gap: 0;
  }

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

  .stack > *,
  .grid > *,
  .sidebar > *,
  .disclosure > * {
    min-inline-size: 0;
  }

  .sidebar {
    --gap: var(--space-lg);
    --sidebar-width: 18rem;
    --sidebar-main-min: 52%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--gap);
  }
  .sidebar-rail {
    flex: 1 1 var(--sidebar-width);
  }
  .sidebar-main {
    flex: 999 1 0;
    min-inline-size: min(100%, var(--sidebar-main-min));
  }
}
@layer components {
  .control-band {
    flex: 0 0 auto;
    padding: var(--control-padding-block, var(--space-3xs));
  }
  .control-button {
    position: relative;
    border: var(--border) solid var(--line-strong);
    color: inherit;
    background: var(--surface);
    cursor: pointer;
    user-select: none;
  }
  .controls-flat :where(button, .control-button) {
    border-color: transparent;
    background: transparent;
  }
  .controls-flat :where(button:hover:not(:disabled), .control-button:hover, button[aria-pressed="true"]) {
    color: var(--accent-ink);
    background: var(--accent-soft);
  }

  /* Definition lists and table ownership */
  .definition-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-xs) var(--space-md);
  }
  .definition-pair {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
  .chemical-facts {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-sm) var(--space-lg);
  }
  .chemical-facts .definition-pair {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs);
  }
  .chemical-facts dd {
    font-size: var(--text-ui);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
  }

  .table-scroll {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  /* Application shell */
  .site-header {
    --ink-muted: var(--shell-ink-muted);
    --accent-ink: var(--shell-ink);
    z-index: 10;
    color: var(--shell-ink);
    background: color-mix(in oklch, var(--shell-surface) 82%, transparent);
    backdrop-filter: blur(0.75rem) saturate(110%);
  }
  .site-header[data-variant="overlay"] {
    --shell-ink: #fff;
    --shell-ink-muted: rgb(255 255 255 / 0.82);
    --shell-active: #fff;
    --shell-hover: rgb(255 255 255 / 0.12);
    --focus: #fff;
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    inline-size: 100%;
    color: var(--shell-ink);
    background: transparent;
    backdrop-filter: none;
  }
  .site-header[data-variant="overlay"] .site-header-layout {
    min-block-size: var(--site-header-height);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding-block: 0;
  }
  .site-header-layout {
    min-block-size: var(--site-header-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    padding-block: var(--space-xs);
  }
  :where(.site-header, .site-footer)[data-width="full"] {
    --frame-max: 100%;
    --frame-gutter: clamp(var(--space-md), 2vw, var(--space-lg));
  }
  .agency-mark img {
    display: block;
    inline-size: min(15rem, 42vw);
    block-size: auto;
    content: var(--agency-logo);
  }
  .site-header .agency-mark {
    color: var(--shell-ink);
  }
  .site-header[data-variant="overlay"] .agency-mark img {
    inline-size: 4.5rem;
    content: normal;
  }
  .site-header[data-variant="overlay"] nav {
    grid-column: auto;
    margin-inline-start: auto;
  }
  .site-header[data-variant="overlay"] nav ul {
    flex-wrap: nowrap;
  }
  .site-header[data-variant="overlay"] nav a {
    padding-inline: var(--space-3xs);
    font-size: var(--text-dense);
  }
  .site-header[data-variant="overlay"] .header-actions {
    grid-column: auto;
    grid-row: auto;
  }
  .site-header[data-layout="search"] {
    --header-side-width: calc(var(--control-height) + var(--control-height));
    position: relative;
  }
  .site-header[data-layout="search"] .site-header-layout {
    display: grid;
    grid-template-columns: var(--header-side-width) minmax(0, 1fr) var(--header-side-width);
    padding-block: var(--space-xs);
  }
  .site-header[data-layout="search"][data-variant="overlay"] .agency-mark img {
    inline-size: var(--header-side-width);
  }
  .site-header-content {
    min-inline-size: 0;
    inline-size: 100%;
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .site-header[data-layout="search"] .header-actions {
    --gap: 0;
    inline-size: var(--header-side-width);
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
  }
  .site-header nav {
    grid-column: 1 / -1;
  }
  .header-actions {
    --gap: var(--space-3xs);
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  :where(.site-header, .site-footer) nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .site-header nav a,
  .icon-link {
    font-size: var(--text-ui);
    line-height: var(--leading-tight);
  }
  .site-header nav a {
    display: block;
    padding: var(--control-padding-block) var(--control-padding-inline);
    text-decoration: none;
  }
  .site-header :where(nav a, .icon-button) {
    color: var(--shell-ink-muted);
  }
  .site-header :where(nav a:hover, nav a[aria-current="page"], .icon-button:hover) {
    color: var(--shell-ink);
  }
  .site-header nav a[aria-current="page"] {
    box-shadow: inset 0 calc(-1 * var(--indicator-width)) var(--shell-active);
  }

  .site-footer {
    --emphasis-ink: var(--brand-ink);
    --agency-logo: url("../assets/images/epa-logo-white.svg");
    margin-block-start: auto;
    display: grid;
    gap: 0;
    color: var(--brand-ink);
    background: var(--footer-surface);
  }
  .site-footer-body {
    padding-block: var(--footer-padding-block, var(--space-md));
    font-size: var(--text-dense);
    line-height: var(--leading-dense);
  }
  .footer-layout {
    --grid-min: 16rem;
    align-items: var(--footer-align, start);
  }
  .footer-meta {
    padding-block-start: var(--space-md);
    color: var(--brand-blue-light);
    text-align: center;
  }
  .site-footer .agency-mark img {
    max-inline-size: 100%;
    inline-size: clamp(11rem, 28vw, 21rem);
  }
  .site-footer nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .site-footer nav {
    --gap: var(--space-3xs);
  }
  .site-footer nav h2 {
    font-size: var(--text-dense);
    line-height: var(--leading-dense);
    letter-spacing: var(--tracking-label);
  }
  .site-footer a {
    padding: 0;
    color: inherit;
    font-weight: var(--weight-regular);
  }
  .site-footer :where(a:hover, nav small) {
    color: var(--brand-blue-light);
  }
  .site-footer > .site-banner a {
    color: var(--citation-link);
    font-weight: var(--weight-strong);
  }
  @media (width >= 48rem) {
    .site-header-layout {
      display: flex;
      gap: var(--space-md);
      padding-block: 0;
    }
    .site-header .agency-mark img {
      inline-size: min(12rem, 28vw);
    }
    .site-header[data-variant="overlay"] .agency-mark img {
      inline-size: 6.5625rem;
    }
    .site-header[data-variant="overlay"] nav a {
      padding-inline: var(--component-pad);
      font-size: var(--text-ui);
    }
    .site-header[data-layout="search"] .site-header-content {
      grid-column: 2;
      grid-row: 1;
    }
    .site-header nav {
      margin-inline-start: auto;
    }
    .site-header nav ul {
      flex-wrap: nowrap;
    }
  }

  /* Institutional banners */
  .site-banner {
    --site-banner-surface: var(--brand-blue);
    --emphasis-ink: var(--brand-ink);
    color: var(--brand-ink);
    background: var(--site-banner-surface);
  }
  .site-banner-content {
    display: grid;
    gap: var(--space-3xs);
    padding-block: var(--space-3xs);
    font-size: var(--text-dense);
    line-height: var(--leading-dense);
    text-align: center;
  }
  .site-footer > .site-banner {
    --site-banner-surface: var(--citation-surface);
  }
  .site-footer > .site-banner .site-banner-content {
    color: var(--citation-ink);
  }
  :where(
    .site-banner-primary,
    .card-title-menu,
    .disclosure > summary
  ) {
    font-weight: var(--weight-strong);
  }
  .stat > figcaption {
    font-weight: var(--weight-strong);
  }

  /* Icons, cards, and scientific presentation */
  .icon-button {
    inline-size: var(--control-height);
    block-size: var(--control-height);
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    color: var(--ink-muted);
  }
  .icon-button:hover:not(:disabled) {
    color: var(--accent-ink);
    background: var(--accent-soft);
  }
  .site-header .icon-button:hover:not(:disabled) {
    background: var(--shell-hover);
  }

  /* Shared icon asset mappings */
  .icon-upload {
    --icon: url("../assets/images/icons/upload.svg");
  }
  .icon-draw {
    --icon: url("../assets/images/icons/square-pen.svg");
  }
  .icon-close {
    --icon: url("../assets/images/icons/x.svg");
  }
  .icon-info {
    --icon: url("../assets/images/icons/info.svg");
  }
  .icon-alert {
    --icon: url("../assets/images/icons/triangle-alert.svg");
    color: var(--warning);
  }
  .icon-download {
    --icon: url("../assets/images/icons/download.svg");
  }
  .icon-chevron {
    --icon: url("../assets/images/icons/chevron-down.svg");
  }
  .icon-step-forward {
    --icon: url("../assets/images/icons/step-forward.svg");
  }
  .icon-settings {
    --icon: url("../assets/images/icons/settings.svg");
  }
  .icon-help {
    --icon: url("../assets/images/icons/circle-help.svg");
  }
  .icon-sun {
    --icon: url("../assets/images/icons/sun.svg");
  }
  .icon-moon {
    --icon: url("../assets/images/icons/moon.svg");
  }
  .icon-chevron-left {
    --icon: url("../assets/images/icons/chevron-left.svg");
  }
  .icon-chevron-right {
    --icon: url("../assets/images/icons/chevron-right.svg");
  }

  .icon {
    inline-size: 1em;
    block-size: 1em;
    display: block;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
  }

  .icon-link {
    --gap: var(--space-3xs);
    min-block-size: var(--control-height);
    flex-wrap: nowrap;
  }

  button,
  .control-button,
  .tabs [role="tab"],
  .mode-tabs label {
    min-block-size: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--control-padding-block) var(--control-padding-inline);
    font-size: var(--text-ui);
    font-variant-caps: all-small-caps;
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-tight);
  }

  .card {
    overflow: clip;
    background: var(--surface);
  }

  .heading-detail,
  .card-content,
  .model-output,
  :where(.callout, .alert) {
    font-size: var(--text-dense);
    line-height: var(--leading-dense);
  }

  .card-header {
    min-block-size: var(--card-header-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-sm);
    padding: var(--space-3xs) var(--component-pad) 0;
  }
  .card-header > :first-child {
    min-inline-size: 0;
    overflow: clip;
    overflow-clip-margin: 0.2em;
  }
  .card-header :where(h2, h3, h4) {
    font-size: var(--text-body);
    white-space: nowrap;
  }
  .heading-pair {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--space-xs);
    white-space: nowrap;
  }
  .heading-pair > a {
    min-block-size: var(--space-lg);
  }
  .heading-detail {
    min-inline-size: 0;
    overflow: hidden;
    color: var(--ink-muted);
    font-weight: var(--weight-regular);
    text-overflow: ellipsis;
  }
  .heading-pair sub {
    position: relative;
    inset-block-start: 0.2em;
    vertical-align: baseline;
  }
  .card-title-menu {
    padding: 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    font-size: var(--text-body);
    font-variant-caps: normal;
    letter-spacing: var(--tracking-tight);
  }
  .card-title-menu:hover {
    color: var(--accent);
    background: transparent;
  }
  .card-content {
    container: card-content / inline-size;
    min-inline-size: 0;
    display: grid;
    align-content: start;
    gap: var(--space-md);
    padding: var(--component-pad);
  }
  .card-content > * {
    min-inline-size: 0;
  }
  .card-content > svg[role="img"] {
    max-inline-size: 12rem;
    margin-inline: auto;
  }

  .model-output {
    padding: 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    white-space: pre;
  }

  .field {
    display: grid;
    gap: var(--space-3xs);
  }
  .field-label {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3xs);
  }
  .field > :where(small, [data-field-help]) {
    color: var(--ink-muted);
  }
  .form-actions {
    justify-content: flex-end;
  }
  .status-panel {
    display: grid;
    justify-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    color: var(--ink-muted);
    text-align: center;
  }
  .card-content > .status-panel {
    padding: 0;
  }
  .disclosure-list {
    border-block: var(--border) solid var(--line);
  }
  .disclosure {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    border: 0;
    border-block-end: var(--border) solid var(--line);
  }
  .disclosure:last-child {
    border-block-end: 0;
  }
  .disclosure[open] {
    gap: var(--space-sm);
  }
  .disclosure > summary {
    min-block-size: var(--control-height);
    display: flex;
    align-items: center;
    padding-inline: var(--space-xs);
    cursor: pointer;
  }
  .disclosure > :not(summary) {
    margin-block: 0;
    padding: 0 var(--space-xs) var(--space-md);
  }

  .stat {
    --stat-color: var(--ink);
    place-items: center;
    gap: 0;
  }
  .stat > .stat-value {
    color: var(--stat-color);
    font-size: var(--text-section);
    font-weight: var(--weight-value);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
  }
  .stat > :where(figcaption, .stat-unit, .stat-note) {
    text-align: center;
  }
  .stat > :where(figcaption, .stat-value, .stat-unit, .stat-note) {
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .stat.vivid { --stat-color: var(--accent-ink); }
  .stat.muted { --stat-color: var(--ink-muted); }
  .stat.success { --stat-color: var(--success); }
  .stat.danger { --stat-color: var(--danger); }
  .table-numeric :where(th, td):not(:first-child),
  :where(th, td).numeric {
    text-align: end;
  }

  /* Feedback, fields, and disclosures */
  :where(.callout, .alert) {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-inline-start: var(--indicator-width) solid var(--intent-line);
    background: var(--intent-surface);
  }
  .callout {
    --intent-line: var(--accent);
    --intent-surface: var(--accent-soft);
  }
  .callout.success {
    --intent-line: var(--success);
    --intent-surface: var(--success-soft);
  }
  .callout.warning {
    --intent-line: var(--warning);
    --intent-surface: var(--warning-soft);
  }
  .alert {
    --intent-line: var(--danger);
    --intent-surface: var(--danger-soft);
  }
  .badge {
    display: inline-block;
    padding: 0.15em 0.45em;
    border-radius: var(--radius-pill);
    font-size: var(--text-dense);
  }
  .badge.warning {
    color: var(--warning);
    background: var(--warning-soft);
  }

  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Combobox */
  .combobox {
    --joined-line: var(--line-strong);
    --joined-surface: var(--surface);
    --joined-ink: var(--ink);
    --joined-focus: var(--focus);
    display: block;
    anchor-scope: --combobox;
  }
  .combobox > form {
    inline-size: min(100%, var(--combobox-max, 44rem));
    margin-inline: auto;
  }
  .combobox-control {
    position: relative;
  }
  .combobox .search-group {
    anchor-name: --combobox;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: var(--border) solid var(--joined-line);
    color: var(--joined-ink);
    background: var(--joined-surface);
  }
  .combobox .search-group:focus-within {
    border-color: var(--joined-focus);
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
    box-shadow: 0 0 0 var(--focus-width) color-mix(in oklch, var(--joined-focus), transparent 78%);
  }
  .combobox .search-group > :where(input, button, a) {
    block-size: var(--control-height);
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 0;
    color: var(--joined-ink);
    background: var(--joined-surface);
    box-shadow: none;
  }
  .combobox .search-group > :where(input, button, a):focus-visible {
    outline: 0;
  }
  .combobox .search-group > :where(button, a) {
    inline-size: var(--control-height);
    padding: 0;
    border-inline-start: var(--border) solid color-mix(in oklch, var(--line), transparent 34%);
  }
  .combobox[data-variant="field"] {
    --focus-outline: transparent;
  }
  .combobox .search-group > input {
    min-inline-size: 0;
    flex: 1 1 auto;
    padding: calc(var(--control-padding-block) / 2) var(--control-padding-inline);
  }
  .combobox .search-group > :where(button, a):hover:not(:disabled) {
    color: var(--accent-ink);
    background: var(--accent-soft);
  }
  .combobox [role="listbox"] {
    position: absolute;
    z-index: 20;
    inset-block-start: calc(100% + var(--space-xs));
    inset-inline: 0;
    max-block-size: 18rem;
    padding: var(--space-3xs);
    overflow: auto;
    border: var(--border) solid var(--line-strong);
    background: var(--surface);
    box-shadow: var(--elevation-overlay);
  }
  .combobox .search-status {
    display: block;
    padding: var(--space-sm);
    color: var(--ink-muted);
  }
  .combobox [role="option"] {
    display: block;
    inline-size: 100%;
    border: 0;
    color: var(--ink);
    background: transparent;
    text-align: start;
    text-decoration: none;
    font-variant-caps: normal;
    font-weight: var(--weight-regular);
    letter-spacing: 0;
    line-height: var(--leading-tight);
  }
  .combobox [role="option"] small {
    display: block;
  }
  .combobox [role="option"]:hover,
  .combobox [role="option"][aria-selected="true"] {
    background: var(--accent-soft);
  }
  .combobox [aria-busy="true"] {
    cursor: progress;
  }

  @supports (position-area: block-end span-inline-end) {
    .combobox [popover][role="listbox"] {
      position: fixed;
      position-anchor: --combobox;
      inset: auto;
      inline-size: anchor-size(width);
      max-inline-size: calc(100vw - 2 * var(--space-md));
      margin: 0;
      margin-block-start: var(--space-xs);
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block;
    }
  }

  /* Tabs and horizontal scroll strips */
  .scroll-strip {
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scroll-snap-type: inline proximity;
  }
  .scroll-strip > :not([popover]),
  .tab-strip [role="tab"] {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .card-header > :focus-visible,
  .card-header > :not([popover]) :focus-visible {
    outline-offset: var(--focus-inset);
  }

  .tab-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .tab-strip > [role="presentation"] {
    display: contents;
  }
  .tabs [role="tab"],
  .mode-tabs label {
    border: 0;
    border-block-end: var(--indicator-width) solid transparent;
    color: var(--ink-muted);
    background: transparent;
  }
  .tabs [role="tab"]:hover,
  .mode-tabs label:hover {
    color: var(--ink);
    background: transparent;
  }
  .tabs [role="tab"][aria-selected="true"],
  .mode-tabs input:checked + label {
    color: var(--accent-ink);
    border-block-end-color: var(--accent);
  }
  .mode-tabs input[type="radio"] {
    opacity: 0;
    pointer-events: none;
  }
  .mode-tabs label {
    cursor: pointer;
  }
  .mode-tabs input:focus-visible + label {
    outline: var(--focus-outline);
    outline-offset: var(--focus-inset);
  }
  :where(.tabs, .mode-tabs) {
    --scroll-strip-surface: var(--surface);
    --scroll-strip-block-size: var(--control-height);
    --scroll-backward-direction: to right;
    --scroll-forward-direction: to left;
    min-inline-size: 0;
    position: relative;
  }
  :dir(rtl) :where(.tabs, .mode-tabs) {
    --scroll-backward-direction: to left;
    --scroll-forward-direction: to right;
  }
  .scroll-strip-button {
    z-index: 1;
    position: absolute;
    inset-block-start: 0;
    inline-size: 2.75rem;
    min-inline-size: 0;
    min-block-size: var(--scroll-strip-block-size);
    padding: 0 var(--space-xs);
    border: 0;
    color: var(--accent-ink);
    transition:
      opacity var(--duration) ease,
      transform var(--duration) ease,
      visibility 0s linear;
  }
  .scroll-strip-button[data-scroll-direction="backward"] {
    inset-inline-start: 0;
    justify-content: flex-start;
    background: linear-gradient(
      var(--scroll-backward-direction),
      var(--scroll-strip-surface) 62%,
      transparent
    );
  }
  .scroll-strip-button[data-scroll-direction="forward"] {
    inset-inline-end: 0;
    justify-content: flex-end;
    background: linear-gradient(
      var(--scroll-forward-direction),
      var(--scroll-strip-surface) 62%,
      transparent
    );
  }
  .scroll-strip-button:hover {
    color: var(--ink);
  }
  .scroll-strip-button:disabled {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.9);
    transition-delay: 0s, 0s, var(--duration);
  }
  .scroll-strip-button + .scroll-strip {
    scrollbar-width: none;
  }

  @supports selector(::scroll-button(inline-start)) {
    .scroll-strip {
      position: relative;
      scrollbar-width: none;
    }
    .scroll-strip::scroll-button(inline-start),
    .scroll-strip::scroll-button(inline-end) {
      z-index: 1;
      position: absolute;
      inset-block-start: 0;
      inline-size: 2.75rem;
      min-inline-size: 0;
      min-block-size: var(--scroll-strip-block-size);
      display: inline-flex;
      align-items: center;
      padding: 0 var(--space-xs);
      border: 0;
      color: var(--accent-ink);
      transition:
        opacity var(--duration) ease,
        transform var(--duration) ease,
        visibility 0s linear;
    }
    .scroll-strip::scroll-button(inline-start) {
      inset-inline-start: 0;
      justify-content: flex-start;
      background: linear-gradient(
        var(--scroll-backward-direction),
        var(--scroll-strip-surface) 62%,
        transparent
      );
    }
    .scroll-strip::scroll-button(inline-end) {
      inset-inline-end: 0;
      justify-content: flex-end;
      background: linear-gradient(
        var(--scroll-forward-direction),
        var(--scroll-strip-surface) 62%,
        transparent
      );
    }
    .tab-strip::scroll-button(inline-start) {
      content: url("../assets/images/icons/chevron-left.svg") / "Scroll tabs backward";
    }
    .tab-strip::scroll-button(inline-end) {
      content: url("../assets/images/icons/chevron-right.svg") / "Scroll tabs forward";
    }
    .scroll-strip::scroll-button(inline-start):hover,
    .scroll-strip::scroll-button(inline-end):hover {
      color: var(--ink);
    }
    .scroll-strip::scroll-button(inline-start):disabled,
    .scroll-strip::scroll-button(inline-end):disabled {
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
      transform: scale(0.9);
      transition-delay: 0s, 0s, var(--duration);
    }
  }

  [popover].popover-menu {
    padding: var(--space-3xs);
  }
  [popover].popover-menu ul {
    display: grid;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  [popover].popover-menu button {
    inline-size: 100%;
    justify-content: flex-start;
    border-color: transparent;
  }
  .popover-menu[popover] button:is(:hover:not(:disabled), [aria-current="true"]) {
    border-color: transparent;
    color: var(--ink);
    background: var(--accent-soft);
  }

  @media (width < 48rem) {
    .card-header .icon-link {
      inline-size: var(--control-height);
      block-size: var(--control-height);
      justify-content: center;
      gap: 0;
    }
    .card-header .icon-link-label {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @supports (position-area: block-end span-inline-end) {
    [popover].popover-menu {
      margin-block-start: var(--space-xs);
      position-area: block-end span-inline-start;
      position-try-fallbacks: flip-block, flip-inline;
    }
  }

  /* Theme control */
  [data-theme-toggle] .theme-icon-dark,
  :root[data-theme="dark"] [data-theme-toggle] .theme-icon-light {
    display: none;
  }
  :root[data-theme="dark"] [data-theme-toggle] .theme-icon-dark {
    display: block;
  }
  /* Global accessibility and output modes */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }

  @media (forced-colors: active) {
    .icon {
      forced-color-adjust: none;
    }
    .card,
    .callout,
    .alert {
      border: var(--border) solid CanvasText;
    }
    .tabs [role="tab"][aria-selected="true"] {
      border-block-end-color: Highlight;
    }
  }

  @media print {
    :root {
      color-scheme: light;
      --canvas: white;
      --surface: white;
      --surface-inset: white;
      --ink: black;
      --ink-muted: #333;
      --line: #aaa;
    }
    .site-header,
    .site-footer,
    button,
    [popover],
    .tab-strip,
    .combobox,
    dialog {
      display: none !important;
    }
    .tabs [role="tabpanel"][hidden] {
      display: block !important;
    }
    :where(.grid, .sidebar) {
      display: block;
    }
    :where(article, section, table, figure) {
      break-inside: avoid;
    }
  }
}