/* ============================================================================
   THE CONSOLE SHELL.

   Six screens were built as six standalone pages: no navigation between them,
   six private colour schemes, and nothing to say they belonged to one system.
   The mockup at 00-architecture/mockups/yard-ops-console.html is what the yard
   was promised — one console, one rail, one visual language — and this file is
   that language, LIFTED FROM THE MOCKUP rather than re-typed, so the two cannot
   drift apart by a hex digit.

   WHY THE SCREENS' OWN TOKENS GO

   Each screen declared its own `:root` palette. They overlapped by name
   (--accent, --surface, --ink, --line) and disagreed by value, so a chip on the
   gate terminal and a chip on the yard map were different greens for no reason
   anybody chose. Those blocks are deleted; the aliases at the bottom of this
   file map every legacy name onto the console palette, so each screen's own
   component rules keep working and quietly change colour together.

   The mockup is a single page with .screen divs and <button> navigation. This
   is six pages, so the rail is links — which is better: a screen has a URL, the
   back button works, and a role that may not open a screen never sees the link.
   ========================================================================= */

:root {
    --bg: #f3f2ed;
    --surface: #ffffff;
    --surface-2: #eae7dd;
    --surface-3: #ded9cb;
    --border: #d6d2c3;
    --text: #1b1f1e;
    --text-muted: #63675f;
    --text-faint: #8c8f85;
    --accent: #1f5c56;
    --accent-soft: #dce9e6;
    --accent-2: #b5541f;
    --accent-2-soft: #f2e0d2;
    --success: #3f7d4f;
    --success-soft: #e1eee2;
    --warning: #a4700f;
    --warning-soft: #f4e7cd;
    --critical: #b33a2e;
    --critical-soft: #f5e0dc;
    --info: #2b6485;
    --info-soft: #dfe9ee;
    --extreme: #7e22ce;
    --extreme-soft: #f1e2fb;
    --shadow: 0 1px 2px rgba(27,31,30,0.06), 0 6px 20px -8px rgba(27,31,30,0.18);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #14181a;
      --surface: #1c2124;
      --surface-2: #232a2c;
      --surface-3: #2c3336;
      --border: #363d3f;
      --text: #edeeea;
      --text-muted: #a3a89f;
      --text-faint: #767b73;
      --accent: #57c4b4;
      --accent-soft: #1e3634;
      --accent-2: #e08a4a;
      --accent-2-soft: #3a2a1c;
      --success: #74c187;
      --success-soft: #1f3323;
      --warning: #e0ab41;
      --warning-soft: #3a2f18;
      --critical: #e2695a;
      --critical-soft: #3b2320;
      --info: #6cb0d6;
      --info-soft: #1c2e37;
      --extreme: #d9a3f5;
      --extreme-soft: #3a1f47;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.5);
    }
  }
  :root[data-theme="dark"] {
    --bg: #14181a;
    --surface: #1c2124;
    --surface-2: #232a2c;
    --surface-3: #2c3336;
    --border: #363d3f;
    --text: #edeeea;
    --text-muted: #a3a89f;
    --text-faint: #767b73;
    --accent: #57c4b4;
    --accent-soft: #1e3634;
    --accent-2: #e08a4a;
    --accent-2-soft: #3a2a1c;
    --success: #74c187;
    --success-soft: #1f3323;
    --warning: #e0ab41;
    --warning-soft: #3a2f18;
    --critical: #e2695a;
    --critical-soft: #3b2320;
    --info: #6cb0d6;
    --info-soft: #1c2e37;
    --extreme: #d9a3f5;
    --extreme-soft: #3a1f47;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.5);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .display {
    font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-wrap: balance;
    margin: 0;
  }
  code, .mono, .num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
  button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
  a { color: var(--accent); }

  /* The first column is the shared console column; the second is the page.
     Both systems lay out the same way now, from the same stylesheet. */
  .shell { display: flex; align-items: stretch;
           min-height: calc(100vh - var(--cict-top-h, 54px)); }
  .main { flex: 1; min-width: 0; }

  /* ---- Nav rail ---- */
  .rail {
    background: transparent;
    border-right: 0;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 0;
    height: 100vh;
  }
  .brand { display: flex; flex-direction: column; gap: 2px; padding: 0 6px; }
  .brand .mark { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 0.03em; line-height: 1; }
  .brand .sub { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.12em; }
  .nav-group-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); padding: 0 10px; margin-bottom: 4px; }
  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav a {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
  }
  .nav a:hover { background: var(--surface-2); color: var(--text); }
  .nav a.active { background: var(--accent-soft); color: var(--accent); }
  .nav a .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55; flex-shrink: 0; }
  .nav a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  .rail-foot { margin-top: auto; padding: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-faint); }

  /* ---- Main ---- */
  /* .main padding and width: theme.css, "one format" — one value, both systems. */
  .topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
  .who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
  .who .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; }

  .screen { display: none; }
  .screen.active { display: block; }

  .grid { display: grid; gap: 16px; }
  .cols-4 { grid-template-columns: repeat(4, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-2 { grid-template-columns: 1.3fr 1fr; }
  .cols-5 { grid-template-columns: repeat(5, 1fr); }
  @media (max-width: 1200px) { .cols-5 { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 980px) { .cols-5, .cols-4, .cols-3, .cols-2 { grid-template-columns: 1fr; } }
  @media (max-width: 860px) { .shell { flex-direction: column; } }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: var(--shadow);
  }
  .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
  .card-head h2 { font-size: 16px; }
  .card-head .hint { font-size: 11.5px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

  .kpi { display: flex; flex-direction: column; gap: 4px; }
  .kpi .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 600; }
  .kpi .value { font-size: 25px; font-weight: 700; font-family: "IBM Plex Mono", monospace; }
  .kpi .delta { font-size: 12px; color: var(--text-muted); }
  .kpi .delta.good { color: var(--success); }
  .kpi .delta.bad { color: var(--critical); }

  .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
  .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .chip.success { background: var(--success-soft); color: var(--success); }
  .chip.warning { background: var(--warning-soft); color: var(--warning); }
  .chip.critical { background: var(--critical-soft); color: var(--critical); }
  .chip.info { background: var(--info-soft); color: var(--info); }
  .chip.neutral { background: var(--surface-2); color: var(--text-muted); }
  .chip.accent2 { background: var(--accent-2-soft); color: var(--accent-2); }
  .chip.extreme { background: var(--extreme-soft); color: var(--extreme); }
  tr.driveway-row td { background: var(--surface-2); font-size: 12px; }

  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 600; padding: 0 10px 8px; border-bottom: 1px solid var(--border); }
  td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  .table-wrap { overflow-x: auto; }
  td.num, th.num { text-align: right; }

  .bar-track { background: var(--surface-3); border-radius: 999px; height: 7px; overflow: hidden; }
  .bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }
  .bar-fill.warning { background: var(--warning); }
  .bar-fill.critical { background: var(--critical); }
  .bar-fill.projected { background: repeating-linear-gradient(45deg, var(--accent) 0 4px, transparent 4px 8px); border-right: 1px solid var(--accent); }

  .btn {
    all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 16px; border-radius: 7px; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--accent); color: #fff;
  }
  .btn:hover { filter: brightness(1.08); }
  .btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
  .btn.ghost { background: transparent; color: var(--accent); padding: 9px 4px; }
  .btn.sm { padding: 6px 11px; font-size: 11px; }
  .btn:disabled { opacity: 0.45; cursor: not-allowed; }

  .field { display: flex; flex-direction: column; gap: 5px; }
  .field label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .field input[type="text"], .field input[type="number"], .field input[type="date"], .field select {
    background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 9px 10px; color: var(--text);
  }
  .field input:focus, .field select:focus { border-color: var(--accent); }
  .toggle-group { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
  .toggle-group button { all: unset; cursor: pointer; padding: 8px 14px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
  .toggle-group button.active { background: var(--accent); color: #fff; }
  .toggle-group button + button { border-left: 1px solid var(--border); }

  hr.rule { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
  .muted { color: var(--text-muted); }
  .faint { color: var(--text-faint); font-size: 12px; }
  .right { text-align: right; }
  .stack { display: flex; flex-direction: column; gap: 10px; }
  .row { display: flex; align-items: center; gap: 10px; }
  .row.between { justify-content: space-between; }
  .row.wrap { flex-wrap: wrap; }

  .window-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .window-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; cursor: pointer; background: var(--surface); }
  .window-card:hover { border-color: var(--accent); }
  .window-card.selected { border-color: var(--accent); background: var(--accent-soft); }
  .window-card .t { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 12.5px; }
  .window-card .cap { font-size: 10.5px; color: var(--text-faint); margin: 5px 0 4px; }

  .container-row { display: grid; grid-template-columns: 1.4fr auto auto 30px; gap: 10px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .container-row:last-child { border-bottom: none; }
  .icon-btn { all: unset; cursor: pointer; width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); }
  .icon-btn:hover { background: var(--critical-soft); color: var(--critical); }

  .checkpoint-track { display: flex; align-items: center; gap: 0; margin: 6px 0 16px; }
  .cp-node { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
  .cp-circle { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--text-faint); background: var(--surface); }
  .cp-node.done .cp-circle { background: var(--success); border-color: var(--success); color: #fff; }
  .cp-node.current .cp-circle { border-color: var(--accent); color: var(--accent); }
  .cp-label { font-size: 11px; font-weight: 600; text-align: center; color: var(--text-muted); }
  .cp-time { font-size: 10.5px; color: var(--text-faint); font-family: "IBM Plex Mono", monospace; }
  .cp-connector { flex: 1; height: 2px; background: var(--border); margin-bottom: 26px; }
  .cp-connector.done { background: var(--success); }

  ::selection { background: var(--accent-soft); color: var(--accent); }
  .subtle-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
  .subtle-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ---------------------------------------------------------------------------
   Legacy token aliases.

   The six screens were written against these names. Rather than rewrite six
   stylesheets and risk changing what they MEAN — --f1..--f5 is a fill ramp,
   --go is a gate decision, --tap is a touch target — each name is pointed at
   the console equivalent. One place to look when a colour is wrong, and no
   screen silently keeps a palette of its own.
   ------------------------------------------------------------------------ */
:root {
  --paper: var(--bg);
  --card: var(--surface);
  --wash: var(--surface-2);
  --ink: var(--text);
  --muted: var(--text-muted);
  --faint: var(--text-faint);
  --line: var(--border);
  --chip: var(--accent-soft);
  --chip-ink: var(--accent);
  --accent-ink: #fff;
  --accent-press: var(--accent);
  --focus: var(--accent);

  --sans: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --ok: var(--success);       --ok-bg: var(--success-soft);
  --warn: var(--warning);     --warn-bg: var(--warning-soft);
  --crit: var(--critical);    --crit-bg: var(--critical-soft);
  --err: var(--critical);     --err-bg: var(--critical-soft);
  --stop: var(--critical);
  --info-bg: var(--info-soft);
  --last: var(--info);        --last-bg: var(--info-soft);
  --hold: var(--warning);     --hold-bg: var(--warning-soft);
  --pend: var(--warning);     --pend-bg: var(--warning-soft);
  --ready: var(--success);    --ready-bg: var(--success-soft);
  --full: var(--critical);    --full-bg: var(--critical-soft);
  --limited: var(--warning);  --limited-bg: var(--warning-soft);
  --open: var(--success);
  --go: var(--success);       --go-ink: #fff;
  --stale: var(--text-faint);
  --over: var(--critical);
  --empty: var(--surface-2);

  /* The yard map's depth ramp. It is deliberately NOT the accent at five
     opacities: a lane at 20% and a lane at 40% have to be told apart across a
     desk, and equal steps in lightness are what does that. */
  --f1: #cfe6da; --f2: #9bd0b7; --f3: #63b694; --f4: #2f9770; --f5: #1f5c56;

  --tap: 44px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --f1: #1f3d38; --f2: #2c5a51; --f3: #3d7d70; --f4: #47a193; --f5: #57c4b4;
    --accent-ink: #0f1416;
    --go-ink: #0f1416;
  }
}
:root[data-theme="dark"] {
  --f1: #1f3d38; --f2: #2c5a51; --f3: #3d7d70; --f4: #47a193; --f5: #57c4b4;
  --accent-ink: #0f1416;
  --go-ink: #0f1416;
}

/* ---------------------------------------------------------------------------
   The rail, as links.
   ------------------------------------------------------------------------ */
.nav a { text-decoration: none; }
.rail .signout {
  all: unset; cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--text-faint); padding: 6px 10px; border-radius: 6px;
}
.rail .signout:hover { background: var(--surface-2); color: var(--critical); }
.rail-foot .who { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.rail-foot .who .name { color: var(--text-muted); font-weight: 600; }

/* A screen that has not been built yet is a link that says so, rather than a
   link that 404s. Naming the gap is the honest half of showing the rail. */
.nav a.soon { opacity: 0.5; cursor: default; }
.nav a.soon:hover { background: none; color: var(--text-muted); }
.nav a.soon::after {
  content: "soon"; margin-left: auto; font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint);
}

@media (max-width: 980px) {
  .rail { gap: 12px; align-items: center; padding: 10px 12px; }
  .rail .brand, .rail .nav-group-label, .rail-foot { display: none; }
  .nav { flex-direction: row; gap: 4px; }
}


/* ---------------------------------------------------------------------------
   The shell owns the page width now.

   Each screen wrapped itself in `.wrap { max-width: 1240px; margin: 0 auto }`
   back when it WAS the page. Inside a 232px rail that is wider than the column
   it sits in, so the yard map's zone cards ran off the right edge with no
   scrollbar to say so. The shell sets the measure; the screen fills it.
   ------------------------------------------------------------------------ */
.main > .wrap { max-width: none; margin: 0; }