/* The design layer every console shares: NASA Horizon tokens, the reset, the header,
 * the nav pills, the usage meter and the two accessibility utilities.
 *
 * Framework space on purpose. Five pages used to carry their own copy of these tokens,
 * so a colour changed in one place and not the other four, and a skip link existed on
 * the pages someone remembered. A page links this and then styles only what is its own.
 */
  /* NASA Horizon Design System (HDS) tokens — nasa.github.io/hds-core.
     Blue = "do something here" (on-page actions/controls/links); Red = "go
     somewhere"/errors; carbon = neutrals; sharp corners (0 default, 2px
     controls); 1px dashed focus. */
  :root {
    --paper:#f6f6f6;            /* carbon-05 */
    --panel:#ffffff;           /* spacesuit-white */
    --ink:#17171b;             /* carbon-90 */
    --muted:#58585b;           /* carbon-60 */
    --line:#d1d1d1;            /* carbon-20 */
    --line-soft:#e3e3e3;       /* carbon-10 */
    --accent:#1c67e3;          /* nasa-blue */
    --accent-dark:#0b3d91;     /* nasa-blue-shade */
    --accent-soft:#e8f0fd;
    --pass:#1a7a4a; --pass-soft:#e0f2e8;        /* success (active-green family, AA text) */
    --rewrite:#ea6f24; --rewrite-soft:#fceadd;  /* international-orange */
    --block:#b60109; --block-soft:#fdeceb;      /* nasa-red-shade / tint bg */
    --radius:0px;              /* HDS default: square */
    --radius-control:2px;      /* HDS controls */
    --mono:"DM Mono",ui-monospace,Consolas,monospace;
    --sans:"Public Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --head:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); }

  header {
    position:sticky; top:0; z-index:10;
    background:var(--panel); border-bottom:2px solid var(--ink);
    display:flex; align-items:center; gap:16px; padding:10px 20px; flex-wrap:wrap;
  }
  header h1 { font-family:var(--head); font-size:15px; font-weight:700; letter-spacing:.01em; margin:0; }
  header h1 span { color:var(--accent); }
  .hmeta { font-family:var(--mono); font-size:11px; color:var(--muted); }
  .pill {
    font-family:var(--mono); font-size:10.5px; padding:3px 9px; border-radius:var(--radius-control);
    border:1px solid var(--line); background:var(--paper);
  }
  .pill b { color:var(--pass); font-weight:500; }
  header .right { margin-left:auto; display:flex; gap:8px; align-items:center; }
  header a { color:var(--muted); font-size:11.5px; text-decoration:none; }
  header a:hover { color:var(--accent); }
  /* icon nav pills */
  #nav { display:flex; gap:7px; align-items:center; }
  .navpill { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
    color:var(--muted); text-decoration:none; padding:5px 10px; border:1px solid var(--line);
    border-radius:999px; background:var(--panel); transition:all .12s; }
  .navpill svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round; }
  .navpill:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
  .navpill.solid { background:var(--accent); border-color:var(--accent); color:#fff; }
  .navpill.solid:hover { background:var(--accent-dark); color:#fff; }
  .navpill.plain { border-color:transparent; background:none; padding:5px 6px; }
  .navuser { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono);
    font-size:11px; color:var(--muted); }
  .navuser svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }
  /* usage meter */
  .usage { display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border:1px solid var(--line);
    border-radius:999px; background:var(--panel); }
  .usage .lbl { font-size:10px; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .usage .bar { width:64px; height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
  .usage .bar i { display:block; height:100%; border-radius:3px; background:var(--pass); transition:width .3s; }
  .usage .pct { font-family:var(--mono); font-size:11px; color:var(--ink); font-variant-numeric:tabular-nums; }
  .usage.warn .bar i { background:#e0a11c; } .usage.warn .pct { color:#8a6410; }
  .usage.hot  .bar i { background:#d64545; } .usage.hot  .pct { color:#a12b2b; }


  /* Off-screen until focused. `left:-999px` is not enough: it is relative to the
     nearest POSITIONED ancestor, so a skip link inside the sticky side panel landed
     back on screen. Clipping to a 1px box is independent of where it sits. */
  .skip-link {
    position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
    z-index:100; background:var(--accent); color:#fff;
    text-decoration:none; font-size:13px;
  }
  /* padding belongs to the FOCUSED state only: `* { box-sizing:border-box }` means a
     1px-wide box with 14px of horizontal padding still renders 28px wide, which is how
     a "hidden" skip link ended up as a visible chip over the header. */
  .skip-link:focus {
    left:0; top:0; width:auto; height:auto; padding:8px 14px; overflow:visible;
    clip:auto; clip-path:none;
    border-radius:0 0 var(--radius-control) 0;
  }
  .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
             overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

  /* AI-use disclosure banner (NAII 2800.2 §5.14) */