/* © TALOS Group Pty Ltd, used under licence by TALOS Defence Pty Ltd. */
/*
 * hangar.css: the one stylesheet for the Hangar site (D6.8, D6.13; website plan Sections 2 and 7).
 *
 * Why it looks the way it does: type, spacing, one-pixel borders and colour restraint. Near-black
 * ground, off-white text, a muted neutral, and the TALOS Defence gold on at most two things per
 * page (the counter's booked hours and the one primary action). No cards with coloured left edges,
 * no images, no emoji. Every number uses tabular figures so columns line up.
 *
 * Cascade layers keep specificity flat: a component rule never needs !important to beat a base
 * rule, and a utility always wins because its layer is last.
 *
 * No preprocessor and no build step beyond tools/assets.py, which rewrites the two font URLs below
 * to their content-hashed names. If a font file is absent, assets.py drops its @font-face rule, and
 * the stacks fall back to the system font with no failed request.
 */

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

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/Geist-Variable.2f4b2ca32e81.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/GeistMono-Variable.a2e22117f78f.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */

@layer tokens {
  :root {
    color-scheme: dark;
    --ground: #0A0A0A;
    --surface: #111111;
    --raised: #161616;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --text: #EDEDED;
    --muted: #8A8A8A;
    --faint: #5A5A5A;
    --accent: #D9A34B;
    --accent-ink: #0A0A0A;
    --ok: #7FB77E;
    --warn: #D9A34B;
    --fail: #D96B6B;
    --glow: rgba(255, 255, 255, 0.06);
    --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --radius: 6px;
    --space: 4px;
    --measure: 65ch;
    --wrap: 1120px;
    --nav-h: 56px;
    --ease: cubic-bezier(0.2, 0, 0, 1);
  }

  /* Light mode exists for people who choose it and for print. Only tokens change. */
  @media (prefers-color-scheme: light) {
    :root {
      color-scheme: light;
      --ground: #FFFFFF;
      --surface: #F7F7F7;
      --raised: #F0F0F0;
      --border: rgba(0, 0, 0, 0.09);
      --border-strong: rgba(0, 0, 0, 0.16);
      --text: #111111;
      --muted: #5F5F5F;
      --faint: #A0A0A0;
      --accent: #9A6B1E;
      --accent-ink: #FFFFFF;
      --ok: #2E7D32;
      --fail: #B3261E;
      --glow: rgba(0, 0, 0, 0.04);
    }
  }
}

/* ------------------------------------------------------------------ base */

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-variant-numeric: tabular-nums;
    scroll-padding-top: calc(var(--nav-h) + 16px);
  }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font: 400 15px/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
  h1 { font-size: clamp(28px, 4vw, 40px); }
  h2 { font-size: 22px; }
  h3 { font-size: 16px; }
  p { margin: 0; text-wrap: pretty; }
  a { color: inherit; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
  a:hover { text-decoration-color: currentColor; }
  code, kbd, pre, samp { font-family: var(--mono); font-size: 0.92em; }
  code { overflow-wrap: anywhere; }
  img, svg { display: block; max-width: 100%; }
  ul, ol { margin: 0; padding: 0; }
  dl, dd { margin: 0; }
  table { border-collapse: collapse; width: 100%; }
  th { font-weight: 500; text-align: left; }
  input, select, textarea, button { font: inherit; color: inherit; }
  hr { border: 0; border-top: 1px solid var(--border); }
  ::selection { background: var(--text); color: var(--ground); }

  /* Focus is always visible and never gold, so the accent stays on two things. */
  :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 2px; }

  [hidden] { display: none !important; }
}

/* ------------------------------------------------------------------ layout */

@layer layout {
  .wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
  .page { padding-block: calc(var(--space) * 12) calc(var(--space) * 20); }
  .narrow { width: min(100% - 32px, 680px); }
  .band { padding-block: calc(var(--space) * 16); border-top: 1px solid var(--border); }
  .band-tight { padding-block: calc(var(--space) * 8); }
  .page-head { display: grid; gap: calc(var(--space) * 3); margin-bottom: calc(var(--space) * 8); }
  .row-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }

  .split { display: grid; grid-template-columns: 1fr 1.1fr; gap: calc(var(--space) * 12); align-items: start; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space) * 6); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space) * 4); }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }

  /* Docs: menu, page, contents. Collapses to one column at small widths. */
  .doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: calc(var(--space) * 12); align-items: start; }
  .doc-layout.three { grid-template-columns: 220px minmax(0, 1fr) 180px; }
  .doc-layout > aside { position: sticky; top: calc(var(--nav-h) + 24px); font-size: 13px; }
  .doc-layout .doc-toc { order: 2; }
  .doc-layout.three .doc-nav { order: 0; }
  .doc-layout.three .prose { order: 1; }

  @media (max-width: 960px) {
    .doc-layout, .doc-layout.three { grid-template-columns: minmax(0, 1fr); }
    .doc-layout > aside { position: static; }
    .doc-layout .doc-toc { order: 0; }
    .split, .two-col, .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; }
  }
}

/* ------------------------------------------------------------------ components */

@layer components {
  /* The skip link: hidden until focused. */
  .skip { position: absolute; left: 16px; top: -48px; z-index: 20; padding: 8px 12px; background: var(--text); color: var(--ground); border-radius: var(--radius); }
  .skip:focus { top: 8px; }

  /* Icons from the one sprite. currentColor lets text colour drive them. */
  .i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .i.big { width: 32px; height: 32px; }
  .i.ok, .state-ok { color: var(--ok); }
  .i.wait { color: var(--muted); }

  /* Navigation: sticky and translucent, with a one-pixel rule under it. */
  .nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--ground) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
  .nav-in { width: min(100% - 32px, var(--wrap)); margin-inline: auto; height: var(--nav-h); display: flex; align-items: center; gap: 24px; }
  .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; }
  .mark { width: 18px; height: 18px; }
  .nav-links { display: flex; gap: 20px; font-size: 14px; color: var(--muted); }
  .nav-links a, .subnav a { text-decoration: none; transition: color 160ms var(--ease); }
  .nav-links a:hover, .subnav a:hover { color: var(--text); }
  .nav-end { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; }
  .nav-who { color: var(--muted); text-decoration: none; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu { display: none; position: relative; }
  .menu summary { list-style: none; cursor: pointer; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu-panel { position: absolute; right: 0; top: calc(100% + 8px); display: grid; min-width: 200px; padding: 6px; background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); }
  .menu-panel a { padding: 8px 10px; border-radius: 4px; text-decoration: none; }
  .menu-panel a:hover { background: var(--surface); }
  .subnav { border-top: 1px solid var(--border); }
  .subnav-in { width: min(100% - 32px, var(--wrap)); margin-inline: auto; display: flex; gap: 20px; overflow-x: auto; height: 40px; align-items: center; font-size: 13px; color: var(--muted); scrollbar-width: none; }
  .subnav-org { margin-left: auto; white-space: nowrap; color: var(--faint); }

  @media (max-width: 760px) {
    .nav-links, .nav-end { display: none; }
    .menu { display: block; margin-left: auto; }
  }

  /* Buttons. Primary is gold; there is one primary per page. */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 160ms var(--ease), border-color 160ms var(--ease), background-color 160ms var(--ease); }
  .btn:hover { border-color: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover { border-color: var(--accent); filter: brightness(1.06); }
  .btn-quiet { background: transparent; }
  .btn.small { height: 28px; padding: 0 10px; font-size: 13px; }
  .btn.wide { width: 100%; }
  .link { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
  .link:hover { border-color: var(--text); }
  .actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .actions form { display: contents; }

  /* Type helpers. */
  .display { font-size: clamp(40px, 7vw, 72px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; }
  .lead { font-size: 18px; color: var(--muted); max-width: var(--measure); }
  .eyebrow { font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .eyebrow a { text-decoration: none; }
  .muted { color: var(--muted); }
  .fine { font-size: 13px; color: var(--muted); }
  .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .num.accent { color: var(--accent); }
  .section-title { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 16px; }
  .section-title.small { margin-top: 24px; margin-bottom: 8px; }
  .pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 12px; color: var(--muted); white-space: nowrap; }
  .nowrap { white-space: nowrap; }
  kbd { padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; font-size: 12px; color: var(--muted); }

  /* The hero. The glow and the grid are CSS on empty elements, fading to the edges; no image. */
  .hero { position: relative; overflow: hidden; padding-block: calc(var(--space) * 20) calc(var(--space) * 16); }
  .hero-glow { position: absolute; inset: -20% 10% auto; height: 520px; background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(40px); pointer-events: none; }
  .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 20%, black, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 20%, black, transparent 70%); opacity: 0.5; pointer-events: none; }
  .hero-in { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(var(--space) * 12); align-items: start; }
  .hero-copy { display: grid; gap: 20px; align-content: start; }
  .hero-side { display: grid; gap: 16px; }
  .install { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
  .install-line { display: inline-flex; gap: 10px; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13px; white-space: nowrap; overflow-x: auto; max-width: 100%; }
  .prompt { color: var(--faint); user-select: none; }

  @media (max-width: 900px) {
    .hero-in { grid-template-columns: 1fr; }
    .hero { padding-block: calc(var(--space) * 12); }
  }

  /* The counter: true at render time, with the time it was read. */
  .counter { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 20px; display: grid; gap: 12px; }
  .counter-quiet { padding: 16px 20px; }
  .counter-night { display: flex; align-items: center; gap: 10px; font-weight: 500; }
  .counter-what { color: var(--muted); font-size: 14px; }
  .counter-nums { display: flex; flex-wrap: wrap; gap: 24px; padding-block: 8px; border-block: 1px solid var(--border); }
  .counter-nums p { display: grid; gap: 2px; }
  .counter-nums .num { font-size: 36px; line-height: 1.1; }
  .counter-nums .unit { font-size: 13px; color: var(--muted); }
  .counter-asat { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
  .counter-asat .state-ok { display: inline-flex; align-items: center; gap: 6px; }
  .live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); flex: none; }

  /* The sample certificate card. One-pixel border, lifted a pixel on hover. */
  .cert-card { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-decoration: none; transition: transform 160ms var(--ease), border-color 160ms var(--ease); }
  .cert-card:hover { transform: translateY(-1px); border-color: var(--border-strong); }
  .cert-card-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
  .cert-card-id { font-size: 13px; color: var(--text); }
  .cert-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

  /* The terminal: real CLI output as selectable text. */
  .terminal { margin: 0; border: 1px solid var(--border); border-radius: 10px; background: #050505; color: #EDEDED; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); }
  .terminal-bar { display: flex; align-items: center; height: 36px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .terminal-title { font: 500 12px var(--mono); color: #8A8A8A; }
  .terminal-lines { list-style: none; padding: 16px 18px 20px; font: 13px/1.7 var(--mono); overflow-x: auto; white-space: pre; }
  .terminal-lines li { display: flex; gap: 10px; }
  .terminal-lines li.cmd .text { color: #FFFFFF; }
  .terminal-lines li:not(.cmd) .text { color: #A8A8A8; }
  .terminal-lines .prompt { color: #5A5A5A; }
  .film { padding-top: 0; border-top: 0; }

  /* How it works, what it runs on, the price. */
  .steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .steps li { display: grid; gap: 8px; align-content: start; padding: 20px; background: var(--ground); }
  .steps p { color: var(--muted); font-size: 14px; }
  .step-n { font: 500 12px var(--mono); color: var(--faint); }
  .pillars { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .pillars li { display: grid; gap: 8px; align-content: start; }
  .pillars .i { width: 20px; height: 20px; color: var(--muted); }
  .pillars p { color: var(--muted); font-size: 14px; }
  .price-band { display: grid; gap: 12px; justify-items: start; }
  .price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
  .price-line .num { font-size: 40px; }

  @media (max-width: 900px) {
    .steps, .pillars { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 520px) {
    .steps, .pillars { grid-template-columns: 1fr; }
  }

  /* Cards and forms. */
  .card { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 20px; }
  .card + .card, .card + .report, .report + .card { margin-top: 16px; }
  .card-title { font-size: 15px; margin-bottom: 12px; }
  .card ul { padding-left: 18px; display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
  .form { display: grid; gap: 16px; }
  .field { display: grid; gap: 6px; font-size: 14px; }
  .field > span:first-child { color: var(--muted); font-size: 13px; }
  .field small { color: var(--muted); font-size: 12px; }
  input:not([type="radio"], [type="checkbox"], [type="hidden"], [type="file"]), select, textarea {
    height: 38px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--ground); transition: border-color 160ms var(--ease);
  }
  input:hover, select:hover { border-color: rgba(255, 255, 255, 0.24); }
  input:focus-visible, select:focus-visible { outline: none; border-color: var(--text); }
  input[aria-invalid="true"], select[aria-invalid="true"], fieldset[aria-invalid="true"] { border-color: var(--fail); }
  input:user-invalid { border-color: var(--fail); }
  input[type="file"] { font-size: 13px; color: var(--muted); max-width: 100%; }
  input[type="file"]::file-selector-button { margin-right: 12px; height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--raised); color: var(--text); cursor: pointer; }
  .money-input { display: flex; align-items: center; gap: 8px; }
  .money-input input { flex: 1; }
  fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
  legend { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
  .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
  .check input { margin-top: 4px; accent-color: var(--text); }
  .terms { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); }
  .passkey-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--muted); }
  .status-line { min-height: 1.5em; font-size: 13px; color: var(--muted); }
  .device-code { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); }
  .device-code code { font-size: 20px; letter-spacing: 0.08em; }

  /* A refusal beside a form: a full one-pixel border, never a coloured strip on one edge. */
  .problem { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--fail) 55%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--fail) 8%, transparent); display: grid; gap: 6px; }
  .problem-sentence { font-weight: 500; }
  .problem-next { color: var(--muted); font-size: 14px; }

  /* Definition lists for facts: two columns at desktop, one at small widths. */
  .facts { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .facts dt, .facts dd { padding: 10px 14px; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
  .facts dt { color: var(--muted); font-size: 13px; }
  .facts dd { font: 13px/1.6 var(--mono); }
  .facts dt:first-of-type, .facts dt:first-of-type + dd { border-top: 0; }
  .facts.compact dt, .facts.compact dd { padding: 8px 12px; }
  .facts-title { font-size: 13px; font-weight: 500; color: var(--muted); margin: 24px 0 10px; }
  @media (max-width: 520px) {
    .facts { grid-template-columns: 1fr; }
    .facts dd { border-top: 0; padding-top: 0; }
  }

  /* The verifier report: the verdict, then each check with a word for its status. The same
     classes verify.js writes (verdict ok, verdict bad, ol.checks with passed, failed, not_run). */
  .report { display: grid; gap: 12px; }
  .report:empty { display: none; }
  .verdict { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); font-weight: 500; }
  .verdict.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
  .verdict.bad { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 45%, transparent); }
  ol.checks { list-style: none; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  ol.checks li { display: grid; grid-template-columns: 6rem 1fr; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 14px; }
  ol.checks li:first-child { border-top: 0; }
  .check-word { font: 500 12px/1.9 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
  ol.checks li.passed .check-word { color: var(--ok); }
  ol.checks li.failed .check-word { color: var(--fail); }
  ol.checks li.not_run .check-word { color: var(--muted); }
  .check-text code { color: var(--muted); margin-right: 6px; }
  /* verify.js writes each check as plain text in the li, so its status word comes from here. */
  #report ol.checks li { grid-template-columns: 1fr; }
  #report ol.checks li::before { font: 500 12px/1.9 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
  #report ol.checks li.passed::before { content: "passed"; color: var(--ok); }
  #report ol.checks li.failed::before { content: "failed"; color: var(--fail); }
  #report ol.checks li.not_run::before { content: "not run"; color: var(--muted); }
  #report h2 { font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 12px; }
  #report dl { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; border: 1px solid var(--border); border-radius: var(--radius); }
  #report dt, #report dd { margin: 0; padding: 10px 14px; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
  #report dt:first-of-type, #report dt:first-of-type + dd { border-top: 0; }
  #report dd { font: 13px/1.6 var(--mono); }
  #report .muted { font-size: 13px; }
  .verifier .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block: 8px; border-top: 1px solid var(--border); }
  .verifier .row:first-of-type { border-top: 0; }
  .verifier .row label { min-width: 10rem; color: var(--muted); font-size: 14px; }
  .verifier .btn { margin-top: 12px; }
  .server-report { margin-top: 16px; }
  .file-list { list-style: none; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .file-list li { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; padding: 10px 14px; background: var(--ground); font-size: 14px; }
  .file-list a { font-family: var(--mono); font-size: 13px; }

  /* The certificate page. */
  .cert-head { display: grid; gap: 10px; margin-bottom: 32px; }
  .cert-id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; }
  .fingerprint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; }
  .cert-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
  .cert-side { display: grid; gap: 10px; position: sticky; top: calc(var(--nav-h) + 24px); }
  .qr-box { display: grid; gap: 8px; justify-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .qr { width: 168px; height: 168px; border-radius: 4px; }
  .ways { list-style: none; display: grid; gap: 10px; font-size: 13px; }
  .ways li { display: grid; gap: 4px; }
  .way-name { color: var(--muted); }
  .ways code { padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
  @media (max-width: 900px) {
    .cert-grid { grid-template-columns: 1fr; }
    .cert-side { position: static; }
  }

  /* Digests: Geist Mono, groups of four, no wrap inside a group. A copy takes the digest whole,
     because the gaps are margins, not characters. */
  .digest { display: inline-flex; flex-wrap: wrap; gap: 0 0.5ch; font-size: 12.5px; }
  .digest span { white-space: nowrap; }
  .copy summary { cursor: pointer; font-size: 12px; color: var(--muted); list-style: none; }
  .copy summary::-webkit-details-marker { display: none; }
  .copy[open] summary { color: var(--text); }
  .copy-field { width: min(100%, 42rem); height: 32px; margin-top: 6px; font: 12px var(--mono); }

  /* Tables: one-pixel rules, numbers right-aligned, scrolling inside their own box at small widths. */
  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
  .table th, .table td { padding: 10px 14px; border-top: 1px solid var(--border); vertical-align: top; font-size: 14px; }
  .table thead th { border-top: 0; font-size: 12px; color: var(--muted); font-weight: 500; white-space: nowrap; background: var(--surface); }
  .table tbody th { font-weight: 500; }
  .table.dense th, .table.dense td { padding: 8px 12px; font-size: 13px; }
  .num-col { text-align: right; }
  .notes { display: grid; gap: 8px; margin: 24px 0; padding-left: 18px; color: var(--muted); font-size: 14px; max-width: var(--measure); }

  /* Booking: nights as rows, the picker as a grid of labels around radio inputs. */
  .nights { list-style: none; display: grid; gap: 8px; }
  .night { display: grid; grid-template-columns: 1fr auto auto auto 16px; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: transform 160ms var(--ease), border-color 160ms var(--ease); }
  .night:hover { transform: translateY(-1px); border-color: var(--border-strong); }
  .night-day { font-weight: 500; }
  .night-free { font-size: 13px; color: var(--muted); }
  @media (max-width: 640px) {
    .night { grid-template-columns: 1fr; gap: 4px; }
    .night .i { display: none; }
  }
  .picker { display: grid; gap: 24px; }
  .window-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
  .window { position: relative; display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color 160ms var(--ease), transform 160ms var(--ease); }
  .window:hover { border-color: var(--border-strong); transform: translateY(-1px); }
  /* The radio stays in the page for the keyboard and screen readers; the label draws the state. */
  .window input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .window:has(input:checked) { border-color: var(--text); background: var(--raised); }
  .window:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
  .window-size { font-weight: 500; }
  .window-time { font-size: 13px; color: var(--muted); }
  .window-charge { font-size: 14px; }
  .window .pill { justify-self: start; }
  .picker-options { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .choices { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); }
  .choice { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
  .choice input { accent-color: var(--text); }
  .retain-fields { display: grid; gap: 10px; margin-top: 6px; }
  .retain-fields small { color: var(--muted); font-size: 12px; }
  /* The date field shows only when "until a date" is chosen; :has() reads the choice. */
  .retention .until-only { display: none; }
  .retention:has(input[value="until"]:checked) .until-only { display: grid; }
  .picker-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .picker-bar .btn { margin-left: auto; }
  .picker-chosen { display: none; font-size: 14px; }
  .picker:has(.window input:checked) .picker-chosen { display: block; }
  @media (max-width: 640px) {
    .picker-options { grid-template-columns: 1fr; }
    .picker-bar .btn { margin-left: 0; width: 100%; }
  }

  /* The hold: the printed time is the truth; the bar is a picture of it. */
  .hold-bar { height: 4px; border-radius: 2px; background: var(--raised); overflow: hidden; }
  .hold-bar span { display: block; height: 100%; width: calc(var(--left, 10) * 10%); background: var(--text); }
  .hold-left-1 { --left: 1; } .hold-left-2 { --left: 2; } .hold-left-3 { --left: 3; } .hold-left-4 { --left: 4; } .hold-left-5 { --left: 5; }
  .hold-left-6 { --left: 6; } .hold-left-7 { --left: 7; } .hold-left-8 { --left: 8; } .hold-left-9 { --left: 9; } .hold-left-10 { --left: 10; }

  /* Notices and the error page. */
  .notice { display: grid; gap: 14px; justify-items: start; }
  .notice h1 { font-size: 26px; }
  .error-page { display: grid; gap: 14px; }
  .status-code { font-size: 13px; color: var(--muted); }

  /* The run page: the log box is a reversed flex column, so it opens at the newest line and stays
     there as lines arrive, with no script. */
  .run-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .log-scroll { display: flex; flex-direction: column-reverse; max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #050505; color: #D6D6D6; }
  .log { list-style: none; padding: 10px 0; font: 12.5px/1.65 var(--mono); }
  .log li { display: grid; grid-template-columns: 9.5ch 1fr; gap: 14px; padding: 0 14px; }
  .log li time { color: #5A5A5A; }
  .log li span { white-space: pre-wrap; overflow-wrap: anywhere; }
  .log li.err span { color: #E9A0A0; }
  .log li.hangar span, .log li.state span { color: #8A8A8A; }
  .log li.state { grid-template-columns: 1fr; }
  .run-ended { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }

  /* Account. */
  .stat { display: grid; gap: 6px; padding: 16px; background: var(--ground); }
  .stat-label { font-size: 12px; color: var(--muted); }
  .stat .num { font-size: 20px; }
  .stat .num.big { font-size: 28px; }
  .plain-list { list-style: none; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .plain-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--ground); font-size: 14px; }
  .timeline { list-style: none; display: grid; gap: 8px; font-size: 14px; }
  .timeline li { display: grid; grid-template-columns: 14rem 1fr; gap: 12px; }
  .timeline time { color: var(--muted); font-size: 13px; }
  @media (max-width: 640px) {
    .timeline li { grid-template-columns: 1fr; gap: 2px; }
  }

  /* Operator dashboards: numbers in a grid; unknown is drawn as a word, never as zero. */
  .tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius); width: max-content; max-width: 100%; overflow-x: auto; margin-bottom: 8px; }
  .tabs a { padding: 6px 12px; border-radius: 4px; text-decoration: none; font-size: 13px; color: var(--muted); }
  .tabs a[aria-current="page"] { background: var(--raised); color: var(--text); }
  .metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .metric { display: grid; gap: 6px; padding: 14px 16px; background: var(--ground); }
  .metric dt { font-size: 12px; color: var(--muted); }
  .metric dd { font-size: 20px; }
  .unknown { font: 500 13px var(--mono); color: var(--warn); }

  /* Docs and legal prose. */
  .prose { max-width: var(--measure); min-width: 0; }
  .prose.wide { max-width: 860px; }
  .prose > * + * { margin-top: 16px; }
  .prose h1 { font-size: clamp(28px, 4vw, 36px); margin-bottom: 8px; }
  .prose h2 { margin-top: 40px; padding-top: 8px; font-size: 20px; }
  .prose h3 { margin-top: 24px; }
  .prose p, .prose li { color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
  .prose ul, .prose ol { padding-left: 20px; display: grid; gap: 6px; }
  .prose li > ul, .prose li > ol { margin-top: 6px; }
  .prose code { padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); font-size: 0.88em; }
  .prose pre { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow-x: auto; font-size: 13px; line-height: 1.6; }
  .prose pre code { padding: 0; border: 0; background: none; }
  .prose .table { font-size: 14px; }
  .prose .table th, .prose .table td { padding: 8px 12px; border-top: 1px solid var(--border); }
  .prose .table thead th { border-top: 0; background: var(--surface); font-size: 12px; color: var(--muted); }
  .prose .table { display: block; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
  .prose img { border: 1px solid var(--border); border-radius: var(--radius); }
  .reset-steps { counter-reset: step; list-style: none; padding-left: 0 !important; }
  .reset-steps li { display: grid; gap: 6px; padding: 14px 0 14px 44px; border-top: 1px solid var(--border); position: relative; }
  .reset-steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 500 12px var(--mono); color: var(--faint); }
  .doc-source { margin-top: 40px !important; }
  .toc-title { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
  .doc-toc ol, .doc-nav ol { list-style: none; display: grid; gap: 2px; }
  .doc-toc a, .doc-nav a { display: block; padding: 4px 8px; border-radius: 4px; color: var(--muted); text-decoration: none; }
  .doc-toc a:hover, .doc-nav a:hover { color: var(--text); }
  .doc-nav a[aria-current="page"] { color: var(--text); background: var(--surface); }
  .search { margin-bottom: 16px; }
  .search input { width: 100%; height: 34px; font-size: 13px; }
  .search.big { display: flex; gap: 8px; margin: 0; }
  .search.big input { height: 38px; font-size: 14px; }
  .results { list-style: none; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; }
  .results li { display: grid; gap: 4px; padding: 14px 16px; background: var(--ground); }
  .results a { font-weight: 500; text-decoration: none; }
  .results p { font-size: 13px; }

  /* The footer. */
  .foot { border-top: 1px solid var(--border); padding-block: 40px 56px; margin-top: 40px; }
  .foot-in { width: min(100% - 32px, var(--wrap)); margin-inline: auto; display: grid; gap: 14px; }
  .foot-brand { display: flex; gap: 10px; align-items: baseline; }
  .foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--muted); }
  .foot-links a, .foot-eol a { text-decoration: none; }
  .foot-links a:hover, .foot-eol a:hover { color: var(--text); }
  .foot-eol { font-size: 13px; }
  .foot-fine { font-size: 12px; color: var(--muted); }
}

/* ------------------------------------------------------------------ utilities */

@layer utilities {
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ------------------------------------------------------------------ motion */

/* Motion is decoration: every animation below sits inside no-preference, so reduced motion shows
   the final state at once. Scroll-driven reveals run only where the browser supports them; elsewhere
   the content is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .live { animation: pulse 2.4s var(--ease) infinite; }

  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
    70% { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  /* The hold bar empties over the minutes left. */
  .hold-bar span { animation: drain calc(var(--left, 10) * 60s) linear forwards; }
  @keyframes drain { to { width: 0; } }

  /* The terminal types itself: each line appears after the one before. */
  .terminal-lines li { animation: type-in 1ms steps(1, end) both; animation-delay: calc(var(--n, 24) * 0.22s + 0.3s); }
  @keyframes type-in { from { visibility: hidden; } to { visibility: visible; } }

  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

    /* Where scroll-driven timelines exist, the session types as the terminal scrolls into view. */
    .terminal { view-timeline-name: --term; }
    .terminal-lines li { animation-delay: 0s; animation-timeline: --term; animation-range: entry calc(var(--n, 24) * 3%) entry calc(var(--n, 24) * 3% + 2%); }
  }
}

/* Each line's position, for the delays above. The film sequence is short; later lines share the
   last delay. */
.terminal-lines li:nth-child(1) { --n: 0; } .terminal-lines li:nth-child(2) { --n: 1; } .terminal-lines li:nth-child(3) { --n: 2; }
.terminal-lines li:nth-child(4) { --n: 3; } .terminal-lines li:nth-child(5) { --n: 4; } .terminal-lines li:nth-child(6) { --n: 5; }
.terminal-lines li:nth-child(7) { --n: 6; } .terminal-lines li:nth-child(8) { --n: 7; } .terminal-lines li:nth-child(9) { --n: 8; }
.terminal-lines li:nth-child(10) { --n: 9; } .terminal-lines li:nth-child(11) { --n: 10; } .terminal-lines li:nth-child(12) { --n: 11; }
.terminal-lines li:nth-child(13) { --n: 12; } .terminal-lines li:nth-child(14) { --n: 13; } .terminal-lines li:nth-child(15) { --n: 14; }
.terminal-lines li:nth-child(16) { --n: 15; } .terminal-lines li:nth-child(17) { --n: 16; } .terminal-lines li:nth-child(18) { --n: 17; }
.terminal-lines li:nth-child(19) { --n: 18; } .terminal-lines li:nth-child(20) { --n: 19; } .terminal-lines li:nth-child(21) { --n: 20; }
.terminal-lines li:nth-child(22) { --n: 21; } .terminal-lines li:nth-child(23) { --n: 22; } .terminal-lines li:nth-child(24) { --n: 23; }

/* ------------------------------------------------------------------ print */

/* A certificate is printed for an assessor's file: black on white, the facts and the report, the
   QR, and none of the site's chrome. */
@media print {
  :root { --ground: #FFFFFF; --surface: #FFFFFF; --raised: #FFFFFF; --text: #000000; --muted: #444444; --border: #BBBBBB; --border-strong: #888888; --ok: #1B5E20; --fail: #B71C1C; color-scheme: light; }
  body { font-size: 11pt; }
  .nav, .subnav, .foot-links, .skip, .menu, .btn, form, .hero-glow, .hero-grid, .copy, .picker-bar { display: none !important; }
  .cert-grid { grid-template-columns: 1fr 180px; }
  .cert-side { position: static; }
  .terminal, .log-scroll { background: #FFFFFF; color: #000000; box-shadow: none; max-height: none; }
  a { text-decoration: none; }
  .table-wrap, .facts, ol.checks, .card { break-inside: avoid; }
}

/* Revoke All: the confirmation lives inside the page. A native details element opens the form;
   the form needs its box ticked before the browser sends it. */
@layer components {
  .revoke { display: grid; gap: 12px; }
  .revoke summary { list-style: none; width: max-content; border-color: color-mix(in srgb, var(--fail) 55%, transparent); color: var(--fail); }
  .revoke summary::-webkit-details-marker { display: none; }
  .revoke[open] summary { background: var(--raised); }
  .revoke .form { max-width: 560px; }
  .revoke .btn { border-color: var(--fail); color: var(--fail); background: transparent; }
}