/* ═══════════════════════════════════════════════════════════════════════════
   FEDERAL INDEX — SHARED SITE CHROME AND COMPONENTS
   Linked by every public page, after /tokens.css. Every colour, size, space and
   duration is a token: this file declares no raw colour, and the token-drift
   guard fails the build if one appears.

   What lives here: the header, the phone menu, buttons, focus, the footer, and
   the small set of components every page reuses — a summary box, a document
   metadata list, status labels that always carry a word, the dated "as of"
   line and the source line. Page-specific layout stays with the page.

   The header and footer use their own container (.chrome) rather than .wrap,
   because document pages set .wrap to a reading measure and the chrome must sit
   at the same width on every page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* An element with the hidden attribute stays hidden even when a component rule
   gives it a display value (the demo's filter is hidden until its script runs). */
[hidden] { display: none !important; }

.chrome {
  max-width: var(--fi-container-site);
  margin-inline: auto;
  padding-inline: var(--fi-space-3);
}
@media (min-width: 768px) { .chrome { padding-inline: var(--fi-space-6); } }

/* ── skip link · WCAG 2.4.1 ─────────────────────────────────────────────── */
.skip {
  position: absolute; left: var(--fi-space-2); top: calc(var(--fi-space-2) * -6);
  z-index: 100; background: var(--fi-color-primary); color: var(--fi-color-on-primary);
  padding: var(--fi-space-105) var(--fi-space-3); border-radius: var(--fi-radius-md);
  font-weight: 600; text-decoration: none;
  transition: top var(--fi-duration-1) var(--fi-ease-standard);
}
.skip:focus { top: var(--fi-space-2); }

/* ── focus · never subtle, never under the sticky header (WCAG 2.4.7, 2.4.11) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--fi-color-focus);
  outline-offset: 2px;
  border-radius: var(--fi-radius-sm);
}
:where(a, button, input, select, textarea, summary, [tabindex], h2, h3, section) {
  scroll-margin-top: calc(var(--fi-space-8) + var(--fi-space-3));
}

/* ── header ─────────────────────────────────────────────────────────────── */
.site-top {
  position: sticky; top: 0; z-index: 50;
  background: var(--fi-color-surface);
  border-bottom: 1px solid var(--fi-color-border);
}
.site-top .chrome { display: flex; align-items: center; gap: var(--fi-space-3); min-height: 68px; }
.brand {
  display: flex; align-items: center; gap: var(--fi-space-105);
  text-decoration: none; color: inherit; margin-right: auto;
}
.brand .mark { width: 34px; height: 34px; flex: 0 0 auto; display: block; object-fit: contain; }
.brand b {
  font-family: var(--fi-font-sans);
  font-size: var(--fi-size-md); font-weight: 600; letter-spacing: -.01em;
  color: var(--fi-color-primary); white-space: nowrap;
}

.site-nav { display: none; gap: var(--fi-space-3); align-items: center; }
@media (min-width: 900px) { .site-nav { display: flex; } }
.site-nav a, .nav-signin {
  font-family: var(--fi-font-sans);
  color: var(--fi-color-ink-secondary); text-decoration: none;
  font-size: var(--fi-size-2xs); font-weight: 500;
  padding: var(--fi-space-1) 0; border-bottom: 2px solid transparent;
  transition: color var(--fi-duration-1) var(--fi-ease-standard),
              border-color var(--fi-duration-1) var(--fi-ease-standard);
}
.site-nav a:hover, .nav-signin:hover { color: var(--fi-color-primary); border-bottom-color: var(--fi-color-accent); }
/* The current page and its section are marked by a rule as well as colour. */
.site-nav a[aria-current] { color: var(--fi-color-primary); border-bottom-color: var(--fi-color-accent); }
.site-nav a[aria-current="page"] { font-weight: 600; }
.nav-signin { display: none; }
@media (min-width: 1040px) {
  .nav-signin { display: inline-block; padding-left: var(--fi-space-3); border-left: 1px solid var(--fi-color-border); border-bottom: 0; }
}

/* ── phone menu · the same links as .site-nav, below 900px ──────────────── */
.nav-menu { position: relative; border: 0; }
@media (min-width: 900px) { .nav-menu { display: none; } }
.nav-menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--fi-space-1);
  min-height: 44px; min-width: 44px; padding: 0 var(--fi-space-2);
  border: 1px solid var(--fi-color-border-strong); border-radius: var(--fi-radius-md);
  background: var(--fi-color-surface); color: var(--fi-color-primary);
  font-family: var(--fi-font-sans); font-size: var(--fi-size-2xs); font-weight: 600; white-space: nowrap;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
/* A page-level accordion style must never decorate the menu toggle. */
.nav-menu > summary::after { content: none; }
.nav-menu[open] > summary { background: var(--fi-color-tint); border-color: var(--fi-color-primary); }
.nav-menu-bars {
  display: block; width: 16px; height: 2px; border-radius: 1px; background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.nav-menu-list {
  position: absolute; right: 0; top: calc(100% + var(--fi-space-1)); z-index: 60;
  display: flex; flex-direction: column; min-width: 220px; padding: var(--fi-space-1) 0;
  background: var(--fi-color-surface); border: 1px solid var(--fi-color-border);
  border-radius: var(--fi-radius-md); box-shadow: var(--fi-shadow-overlay);
}
.nav-menu-list a {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--fi-space-3);
  font-family: var(--fi-font-sans);
  color: var(--fi-color-ink); text-decoration: none; font-size: var(--fi-size-xs);
}
.nav-menu-list a:hover { background: var(--fi-color-tint); color: var(--fi-color-primary); }
.nav-menu-list a[aria-current] { color: var(--fi-color-primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--fi-color-accent); }
.nav-menu-list .nav-menu-signin { border-top: 1px solid var(--fi-color-border); margin-top: var(--fi-space-1); color: var(--fi-color-ink-secondary); }

/* On a phone the header holds the name, the menu and the button; none may wrap. */
.site-top .btn { white-space: nowrap; }
@media (max-width: 479px) {
  .site-top .chrome { gap: var(--fi-space-1); padding-inline: var(--fi-space-2); }
  .site-top .btn { padding: 0 var(--fi-space-2); }
  .site-top .brand b { font-size: var(--fi-size-sm); }
  .nav-menu > summary { padding: 0; justify-content: center; }
  .nav-menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 379px) {
  .site-top .brand b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ── buttons · one primary per view, verb first ─────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--fi-space-3);
  border-radius: var(--fi-radius-md); border: 1px solid transparent;
  font-family: var(--fi-font-sans); font-size: var(--fi-size-2xs); font-weight: 600;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color var(--fi-duration-1) var(--fi-ease-standard),
              border-color var(--fi-duration-1) var(--fi-ease-standard),
              color var(--fi-duration-1) var(--fi-ease-standard);
}
.btn-primary { background: var(--fi-color-primary); color: var(--fi-color-on-primary); }
.btn-primary:hover { background: var(--fi-color-primary-hover); color: var(--fi-color-on-primary); }
.btn-ghost, .btn.ghost { border-color: var(--fi-color-border-strong); color: var(--fi-color-primary); background: transparent; }
.btn-ghost:hover, .btn.ghost:hover { border-color: var(--fi-color-primary); background: var(--fi-color-tint); }
.btn-lg { min-height: 52px; padding: 0 var(--fi-space-4); font-size: var(--fi-size-sm); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--fi-space-105); margin-top: var(--fi-space-4); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--fi-color-border);
  background: var(--fi-color-surface);
  padding-block: var(--fi-space-6) var(--fi-space-5);
  font-family: var(--fi-font-sans);
  font-size: var(--fi-size-2xs); line-height: var(--fi-leading-body);
  color: var(--fi-color-ink-secondary);
}
.site-foot p { margin: 0; max-width: none; font-size: inherit; color: inherit; }
.site-foot a { color: var(--fi-color-ink-secondary); text-decoration: none; }
.site-foot a:hover { color: var(--fi-color-primary); text-decoration: underline; text-underline-offset: 2px; }
.foot-grid { display: grid; gap: var(--fi-space-5); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); gap: var(--fi-space-6); } }
.foot-brand .brand { margin-bottom: var(--fi-space-2); }
.foot-nav { display: grid; gap: var(--fi-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .foot-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-foot .foot-h {
  font-size: var(--fi-size-3xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fi-color-ink-muted); margin-bottom: var(--fi-space-105);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fi-space-05); }
.foot-col li { margin: 0; max-width: none; }
/* Standalone links are not covered by the inline exception in SC 2.5.8. */
.foot-col a { display: inline-flex; align-items: center; min-height: 32px; }
.site-foot .indep {
  margin-top: var(--fi-space-5); padding-top: var(--fi-space-3);
  border-top: 1px solid var(--fi-color-border);
  color: var(--fi-color-ink-muted); max-width: var(--fi-measure-wide);
}
.site-foot .indep strong { color: var(--fi-color-ink-secondary); font-weight: 600; }
.site-foot .foot-legal { margin-top: var(--fi-space-2); color: var(--fi-color-ink-muted); font-size: var(--fi-size-3xs); }
.site-foot .foot-legal a { color: var(--fi-color-ink-muted); text-decoration: underline; text-underline-offset: 2px; }
.site-foot .foot-brand p { color: var(--fi-color-ink-muted); max-width: 34ch; }
.site-foot .foot-brand .foot-stage { margin-top: var(--fi-space-105); color: var(--fi-color-ink-secondary); font-weight: 600; }

/* ═══ SHARED CONTENT COMPONENTS ══════════════════════════════════════════ */

/* Eyebrow: a small section label. Red is a rule, never the text. */
.kicker {
  font-family: var(--fi-font-sans);
  font-size: var(--fi-size-3xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fi-color-ink-muted);
  display: flex; align-items: center; gap: var(--fi-space-105);
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--fi-color-accent); flex: none; }

/* Summary box — 3 to 5 key facts from dense content (USWDS summary box). */
.summary-box {
  border: 1px solid var(--fi-color-border-strong);
  border-left: 4px solid var(--fi-color-primary);
  background: var(--fi-color-tint);
  padding: var(--fi-space-3) var(--fi-space-3) var(--fi-space-2);
  margin: var(--fi-space-3) 0 var(--fi-space-5);
}
.summary-box > .summary-h {
  font-family: var(--fi-font-sans); font-size: var(--fi-size-sm); font-weight: 700;
  color: var(--fi-color-primary); margin: 0 0 var(--fi-space-105);
}
.summary-box ul { margin: 0 0 var(--fi-space-1) var(--fi-space-3); padding: 0; }
.summary-box li { margin-bottom: var(--fi-space-1); color: var(--fi-color-ink); }
.summary-box p { color: var(--fi-color-ink); }

/* Status label — always a word, colour only reinforces it (WCAG 1.4.1). */
.status-label {
  /* The word carries the meaning, in ink at full contrast; the status colour
     marks the border and the square beside it (WCAG 1.4.1 and 1.4.3). */
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fi-font-sans); color: var(--fi-color-ink);
  font-size: var(--fi-size-3xs); font-weight: 700; letter-spacing: .02em;
  padding: 2px var(--fi-space-1); border-radius: var(--fi-radius-sm);
  border: 1px solid var(--status, var(--fi-color-border-strong)); background: var(--fi-color-surface);
  white-space: normal; line-height: 1.5;
}
.status-label::before { content: ""; width: 8px; height: 8px; background: var(--status, var(--fi-color-border-strong)); flex: none; }
.status-label.is-reading { --status: var(--fi-status-ok); }
.status-label.is-info { --status: var(--fi-status-info); }
.status-label.is-attention { --status: var(--fi-status-warning); }
.status-label.is-quiet { --status: var(--fi-color-ink-muted); }

/* ── example review cards (homepage, platform, oil and gas, demo) ───────── */
.ex-grid, .ex-list { display: grid; gap: var(--fi-space-3); margin: var(--fi-space-3) 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ex-grid, .ex-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-grid > li, .ex-list > li { margin: 0; max-width: none; min-width: 0; }
.ex-card { border: 1px solid var(--fi-color-border-strong); background: var(--fi-color-surface); padding: var(--fi-space-3); height: 100%; overflow-wrap: anywhere; }
.ex-card.ex-not-applicable { background: var(--fi-color-surface-sunken); }
.ex-top { display: flex; flex-wrap: wrap; gap: var(--fi-space-1); align-items: center; font-family: var(--fi-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fi-color-ink-secondary); }
.ex-type { background: var(--fi-color-tint); color: var(--fi-color-primary); padding: 2px 6px; border-radius: var(--fi-radius-sm); font-weight: 600; }
.ex-title { font-family: var(--fi-font-sans); font-size: var(--fi-size-md); line-height: 1.35; margin: var(--fi-space-1) 0 0; }
.ex-title a { color: var(--fi-color-primary); }
.ex-card .docmeta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.docmeta > div { min-width: 0; }
.ex-review { margin-top: var(--fi-space-2); border-top: 2px solid var(--fi-color-border); padding-top: var(--fi-space-105); }
.ex-review p { margin: 0 0 var(--fi-space-1); font-size: var(--fi-size-2xs); max-width: none; }
.ex-review .ex-review-h { font-family: var(--fi-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fi-color-ink-muted); }

/* A scrollable table wrapper is a focusable region, so a keyboard user can
   scroll it (axe scrollable-region-focusable). page() adds the attributes. */
.tw:focus-visible { outline: 3px solid var(--fi-color-focus); outline-offset: 2px; }

/* Document metadata — a definition list, the FederalRegister.gov pattern. */
.docmeta { display: grid; gap: var(--fi-space-105) var(--fi-space-4); margin: var(--fi-space-3) 0 0; grid-template-columns: 1fr; }
@media (min-width: 620px) { .docmeta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.docmeta > div { border-top: 1px solid var(--fi-color-border); padding-top: var(--fi-space-1); }
.docmeta dt {
  font-family: var(--fi-font-sans);
  font-size: var(--fi-size-3xs); text-transform: uppercase; letter-spacing: .08em; color: var(--fi-color-ink-muted);
}
.docmeta dd { margin: 2px 0 0; font-size: var(--fi-size-2xs); color: var(--fi-color-ink); }
.docmeta dd.m, .mono { font-family: var(--fi-font-mono); font-variant-numeric: tabular-nums; }

/* A dated measurement, stated beside the figure it dates. */
.asof { font-size: var(--fi-size-3xs); color: var(--fi-color-ink-muted); }
.asof time { font-variant-numeric: tabular-nums; }

/* Illustration label, shown at the point of viewing. */
.illus {
  display: flex; align-items: center; gap: var(--fi-space-1); flex-wrap: wrap;
  padding: var(--fi-space-105) var(--fi-space-3);
  background: var(--fi-color-surface-sunken); border-bottom: 1px solid var(--fi-color-border-strong);
  font-family: var(--fi-font-sans); font-size: var(--fi-size-3xs); color: var(--fi-color-ink-secondary);
}

/* Visually hidden, still announced. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .skip, .site-nav a, .nav-signin, .btn { transition: none; }
}

/* ═══ EDITORIAL LAYER · 2026-10-09 ═══════════════════════════════════════
   White-led, editorial: large serif titles, navy for type and the primary
   action, red only as thin rules, light cool-gray for alternating bands and the
   footer. No dark bands. */
.site-top { background: var(--fi-color-surface); border-bottom: 1px solid var(--fi-ink-10); }
.site-top .chrome { min-height: 76px; }
.brand b { font-family: var(--fi-font-serif); font-weight: 600; font-size: var(--fi-size-lg); letter-spacing: -.01em; color: var(--fi-color-primary); }
.site-nav { gap: var(--fi-space-4); }
.site-nav a { color: var(--fi-color-ink); font-weight: 500; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--fi-color-primary); border-bottom-color: var(--fi-color-accent); }
.btn { border-radius: var(--fi-radius-sm); letter-spacing: .01em; }
.btn-primary { background: var(--fi-color-primary); }
.btn-ghost { border-color: var(--fi-color-primary); }

/* Page titles: white, a large serif title over a hairline, full bleed. */
:is(.info-hero, .lg-head, .reg-hero, .demo-hero, .t-hero) {
  box-shadow: 0 1px 0 0 var(--fi-ink-10), 0 0 0 100vmax var(--fi-color-surface);
  clip-path: inset(0 -100vmax -1px);
  padding-block: var(--fi-space-8) var(--fi-space-6);
  margin-bottom: var(--fi-space-6);
}
html body :is(.info-hero, .lg-head, .reg-hero, .demo-hero, .t-hero) h1 {
  font-family: var(--fi-font-serif); font-weight: 500; color: var(--fi-color-primary);
  font-size: clamp(36px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -.02em; max-width: 20ch;
}
html body :is(.info-hero, .lg-head, .reg-hero, .demo-hero, .t-hero) .lede { font-size: var(--fi-size-lg); line-height: var(--fi-leading-lead); color: var(--fi-color-ink-secondary); max-width: 62ch; }

/* Footer: light cool-gray, navy headings, same content. */
.site-foot { background: var(--fi-color-surface-sunken); border-top: 1px solid var(--fi-ink-10); }
.site-foot .foot-brand .brand b { font-size: var(--fi-size-lg); }
.site-foot .foot-h { color: var(--fi-color-primary); }
.site-foot .indep { border-top-color: var(--fi-ink-20); }