/* GENERATED from lib/brand/steel.css — edit THERE, then run: node mechanic-portal/build-brand.mjs */
/* steel.css — the Clean Steel standard: KSG's ratified design language as importable tokens + recipes.
   SPEC: docs/DESIGN.md + the living mockups docs/design/clean-steel-sidebyside.html (structure + both token
   sets, extracted verbatim) and docs/design/clean-steel-accents.html (the accent audition). When this file and
   those mockups disagree, the mockups win.

   TWO SIBLING MODES, ONE TOKEN SET: every color lives in html[data-theme="dark"] / html[data-theme="light"].
   A page that sets NO data-theme gets dark (:root falls back to the dark set) — today's behavior, unchanged,
   so nothing live shifts until a surface explicitly opts in. The toggle flips data-theme only — never a second
   stylesheet, never a layout change (DESIGN.md "Two sibling modes").

   SOFT FURNITURE, HARD EQUIPMENT: `.card` is the soft surface (10px radius, line border, a faint shadow — the
   ONE permitted depth cue). The safety `.tag`, status `.st` chips, the `.cb` checkbox, and the KEYO block label
   stay SQUARED (border-radius:0) even inside the soft world — they read as equipment, not software. `.tag`
   itself sits OUTSIDE the card system entirely, on the ground, in every consumer.

   TYPE: condensed stencil caps (.cond) live ONLY in the load-bearing skeleton — the stripe wordmark, .secbar
   titles, .nav labels, the tag header, the KEYO block label, and the sparing .edge line. Body/buttons/labels
   are calm, normal-weight system sans. Monospace tabular numerals (.mono) stay everywhere, unchanged.

   NEVER A FILL (DESIGN.md "Key Maroon"): --maroon and --amber are BORDER/TEXT colors on interactive
   controls (.btn.primary, .nav a.on, .st.wait) — never background:var(--maroon)/var(--amber) outside the
   fleet's own named exceptions (.stripe, .tag .head, .keyo .k, .prog i, .cb.done). --amber2 is the secondary
   amber tone (text accents only, e.g. a machine-unit number) — two portals had already independently minted
   this exact value under a page-local --accent2 name before it was promoted here (ui/clean-steel-accent-
   foundation, 2026-07-30); rename a portal-local equivalent to var(--amber2) rather than keeping its own copy.
   lib/brand/no-fill-guard.mjs is the reusable test a migrated portal's OWN suite adopts to enforce this.

   Copy into a portal's public/ via its build-brand.mjs (the house pattern). Shares variable names with the
   retired light lib/brand/theme.css ON PURPOSE (historical) — a surface imports steel.css alone, never both. */

:root, html[data-theme="dark"] {
  --bg:#2a2a2e; --panel:#323237; --sechead:#2e2e33; --line:#46464d; --hair:#3b3b41;
  --maroon:#6f1d27; --ink:#dcdad5; --muted:#a09e97; --dim:#7b796f;
  --ok:#5aa47b; --red:#c44a41; --amber:#cf9245; --amber2:#E9B45A;
  --tagbg:#332a2a; --tagrule:#5c4340; --progtrack:#4a4a50; --btnline:#6e6e75; --navbg:#242428;
  --shadow:0 1px 2px rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.18);
  --hover:#383840;  /* pointer-hover surface for desktop Steel pages (one shared hover gray — don't mint per-surface) */
}
html[data-theme="light"] {
  --bg:#EEF1F4; --panel:#FBFCFD; --sechead:#F3F5F8; --line:#D4DAE0; --hair:#E4E8ED;
  --maroon:#6f1d27; --ink:#1C2530; --muted:#5A6675; --dim:#8A93A0;
  --ok:#2E8B57; --red:#B23B3B; --amber:#C77F22; --amber2:#A8651A;
  --tagbg:#FDF6F5; --tagrule:#D9B8B4; --progtrack:#E0E4E9; --btnline:#B8C0C9; --navbg:#FBFCFD;
  --shadow:0 1px 2px rgba(20,30,45,.06), 0 2px 8px rgba(20,30,45,.05);
  --hover:#EDF0F3;
}

:root{
  --sans:-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --steel-cond:"Arial Narrow",sans-serif;
  --steel-mono:"SF Mono",Consolas,monospace;
}

body.steel{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);}

/* the two display voices */
.cond{font-family:var(--steel-cond);letter-spacing:.1em;text-transform:uppercase;font-weight:800;}
.mono{font-family:var(--steel-mono);font-variant-numeric:tabular-nums;}

/* shared buttons — CALM, bordered, generalizing .keyo .talk's existing shape. .btn.primary is the SAME
   bordered shape with the maroon edge — a border/text color is not a fill (.nav a.on already sets this
   precedent); background:var(--maroon) here would be a SECOND painted accent on the screen, forbidden. */
.btn{border:1px solid var(--btnline);background:transparent;color:var(--ink);font:inherit;font-size:13px;
  font-weight:600;padding:8px 13px;border-radius:7px;cursor:pointer;}
.btn:hover{border-color:var(--dim);}
.btn.primary{border-color:var(--maroon);color:var(--maroon);}
.btn.primary:hover{background:var(--sechead);}

/* header: maroon stripe like painted steel (ONE maroon accent per screen — see DESIGN.md) */
.stripe{height:46px;background:var(--maroon);display:flex;align-items:flex-end;padding:0 18px 7px;}
.stripe .co{font-size:14px;color:#f2e9e9;letter-spacing:.16em;}
.stripe .co small{color:rgba(242,233,233,.6);letter-spacing:.3em;font-size:8.5px;margin-left:8px;}
.hd{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;background:var(--panel);}
.hd h1{margin:0;font-size:17px;font-weight:700;letter-spacing:.01em;}
.hd .role{color:var(--muted);font-size:11.5px;margin-left:8px;}
.hd .sync{margin-left:auto;font-size:10px;color:var(--muted);text-align:right;}
.hd .sync b{color:var(--ok);font-weight:700;}

/* the card: soft furniture — the one permitted depth cue, and it stays faint */
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  margin-top:16px;overflow:hidden;}

/* section bars — plan-sheet title blocks, now a CARD HEADER: condensed caps left, monospace meta right */
.secbar{display:flex;align-items:baseline;background:var(--sechead);border-bottom:1px solid var(--line);
  padding:9px 16px;}
.secbar h2{margin:0;font-size:11px;color:var(--ink);}
.secbar i{font-style:normal;margin-left:auto;font-size:9.5px;color:var(--dim);letter-spacing:.08em;}

/* the physical safety tag (DO NOT OPERATE) — hard equipment: SQUARED even inside the soft world, and it
   sits OUTSIDE the card system entirely, on the ground (never wrapped in .card). */
.tag{margin:16px 16px 0;border:2px solid var(--red);background:var(--tagbg);border-radius:0;}
.tag .head{background:var(--red);color:#fbf3f2;text-align:center;padding:6px;font-size:13px;letter-spacing:.22em;}
.tag .b{padding:10px 13px;display:flex;justify-content:space-between;align-items:baseline;}
.tag .b b{font-size:13.5px;} .tag .b small{color:var(--muted);font-size:10.5px;}
.tag .meta{border-top:1px dashed var(--tagrule);padding:7px 13px;font-size:10px;color:var(--muted);display:flex;justify-content:space-between;}

/* rows: flat, ruled, dense — the density lives INSIDE the card */
.row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--hair);}
.card .row:last-child{border-bottom:none;}
.row .t{flex:1;min-width:0;} .row .t b{font-size:13.5px;font-weight:600;display:block;}
.row .t small{color:var(--muted);font-size:11.5px;}

/* status chips: flat bordered TEXT — hard equipment, SQUARED even inside a card */
.st{font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:2px 7px;border:1px solid;border-radius:0;}
.st.ok{color:var(--ok);border-color:var(--ok);}
.st.wait{color:var(--amber);border-color:var(--amber);}
.st.crew{color:var(--muted);border-color:var(--muted);}
.st.bad{color:var(--red);border-color:var(--red);}

/* square checkbox — hard equipment, SQUARED */
.cb{width:20px;height:20px;border:2px solid var(--dim);flex:none;border-radius:0;}
.cb.done{border-color:var(--ok);background:var(--ok);position:relative;}
.cb.done:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:900;}

/* crew roster table */
table.crew{width:calc(100% - 32px);margin:2px 16px;border-collapse:collapse;}
.crew td{padding:8px 0;border-bottom:1px solid var(--hair);font-size:12.5px;}
.crew tr:last-child td{border-bottom:none;}
.crew .in{color:var(--ok);font-weight:700;font-size:10px;letter-spacing:.06em;}
.crew .out{color:var(--red);font-weight:700;font-size:10px;letter-spacing:.06em;}
.crew td:last-child{text-align:right;}
.foot{padding:7px 16px 10px;font-size:9.5px;color:var(--dim);}

/* flat progress bar (no animation) */
.prog{height:3px;background:var(--progtrack);margin-top:7px;position:relative;}
.prog i{position:absolute;inset:0 40% 0 0;background:var(--amber);}
.eta{color:var(--amber);font-weight:700;}

/* KEYO: a radio on the dash — flat maroon block label (SQUARED — it's equipment) + calm text + a soft
   action button. Never an orb. In Clean Steel the panel is a .card; the block label stays squared. */
.keyo{display:flex;align-items:center;gap:12px;padding:13px 15px;border-left:4px solid var(--maroon);}
.keyo .k{font-size:12px;letter-spacing:.18em;color:#f2e9e9;background:var(--maroon);padding:4px 8px;font-weight:800;border-radius:0;}
.keyo .t b{font-size:12.5px;display:block;font-weight:600;} .keyo .t small{color:var(--muted);font-size:10.5px;}
.keyo .talk{margin-left:auto;border:1px solid var(--btnline);background:transparent;color:var(--ink);
  font-size:10.5px;letter-spacing:.06em;padding:8px 13px;font-weight:600;border-radius:7px;cursor:pointer;}

/* the sparing K.E.Y. E.D.G.E. moment line — at most once per screen */
.edge{text-align:center;color:var(--dim);font-size:9.5px;letter-spacing:.3em;margin:20px 0 4px;}

/* nav: flat labeled tabs; active = the 3px maroon top border (this screen's one accent, when the stripe
   isn't it) */
.nav{background:var(--navbg);border-top:1px solid var(--line);display:flex;}
.nav a{flex:1;text-align:center;color:var(--dim);font-size:10px;text-decoration:none;font-weight:800;
  letter-spacing:.12em;padding:13px 0 6px;border-top:3px solid transparent;}
.nav a.on{color:var(--ink);border-top-color:var(--maroon);}