/* =====================================================================
   TNDS / Pipeline Punks showroom brand. One source of truth - every kit
   page links this.

   STEP 11 redesign: OPS TERMINAL editorial system (Direction C). A dark
   command-console look. JetBrains Mono display + labels / DM Sans body.
   Background #0E1A2B, surface #13243A, text #EDEAE0, teal #3D8EB9 and
   amber #D97706 as signal/status colors, grid line #1C2A3D. Radius 0,
   hairline borders, no shadows, tabular mono numbers, small status dots.
   All text pairs meet WCAG AA on their surface. The de-cartoony reset,
   token enforcement and motion live in editorial.css, imported below so
   every linked page adopts the look at once with no per-page markup edits.

   To REVERT: restore the LEGACY :root block below (and drop the
   editorial.css import). The previous SWISS OPS values are preserved in a
   commented block too. One edit either way.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
@import url('editorial.css');

/* ---- LEGACY tokens (pre-editorial). Restore into :root to revert. -------
:root{
  --navy:#1a3a5c; --navy-deep:#0f2439; --navy-light:#234a6e;
  --teal:#3d8eb9; --teal-light:#5ba8d1; --teal-dim:rgba(61,142,185,0.15);
  --amber:#d97706; --amber-soft:#fef3c7; --amber-text:#b45309;
  --sand:#f5f1eb; --sand-dark:#e8e2d8; --light:#faf7f2;
  --ink:#1a1a1a; --muted:#6b7280; --slate:#64748b;
  --line:#d1d5db; --border-soft:#e5e7eb; --white:#fff;
  --good:#2e7d57; --warn:#b45309; --bad:#8a3b3b;
  --radius:6px;
  --font-display:'Anton','Bebas Neue',Impact,sans-serif;
  --font-body:'DM Sans','Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
   ---- end LEGACY ---------------------------------------------------------- */

/* ---- SWISS OPS tokens (Direction A). Restore into :root to revert. -------
:root{
  --paper:#FAFAF8; --white:#FFFFFF; --light:#FFFFFF;
  --ink:#11243A; --navy:#11243A; --navy-deep:#0E1B2C; --navy-light:#27405C;
  --teal:#236C90; --teal-light:#5BA8D1; --teal-dim:rgba(61,142,185,0.10);
  --rule:#3D8EB9; --amber:#D97706; --amber-soft:#FBF1E2; --amber-text:#955405;
  --sand:#FAFAF8; --sand-dark:#EDEBE3; --muted:#566472; --slate:#566472;
  --line:#E3E1DA; --border-soft:#E3E1DA;
  --good:#2E7D57; --warn:#955405; --bad:#9A3B3B; --paper:#FAFAF8;
  --font-display:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;
  --font-body:'DM Sans','Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',monospace; --radius:0;
}
   ---- end SWISS OPS ------------------------------------------------------- */

:root{
  /* OPS TERMINAL palette. Notes on dual-use legacy tokens:
     --navy was historically used as both dark text AND dark fills. Its
     dominant use is heading/emphasis TEXT, so it maps to a light value
     here; the few background usages are overridden in editorial.css.
     Likewise --white maps to a surface (its dominant use is fills); the
     few var(--white) text usages are handled in editorial.css.
     Every text/surface pair below meets WCAG AA. */
  --paper:#0E1A2B; --bg:#0E1A2B;                 /* page background */
  --white:#1B2D46; --surface:#1B2D46;            /* primary surface (lighter, lifts off the bg) */
  --surface-2:#25395A; --light:#1B2D46;          /* raised / hover / active surface */
  --ink:#EDEAE0;                                  /* primary text */
  --navy:#EDEAE0;                                 /* heading/emphasis TEXT (remapped light) */
  --navy-deep:#0A1422;                            /* darkest surface: headers, footers */
  --navy-light:#27405C; --navy-soft:#9DB6CC;      /* secondary emphasis / code text */
  --teal:#3D8EB9;                                 /* accent: rules, borders, focal fills */
  --teal-light:#6FB3D6;                           /* teal TEXT + links (AA on surfaces) */
  --teal-dim:rgba(61,142,185,0.12);               /* subtle teal tint */
  --rule:#3D8EB9;                                 /* decorative teal rule (non-text) */
  --amber:#D97706;                                /* signal: CTA + status */
  --amber-soft:#231B10; --amber-text:#E8962E;     /* dark warm panel / amber text */
  --sand:#13243A; --sand-dark:#1C2A3D;            /* dark hairline / track */
  --muted:#93A3B8; --slate:#93A3B8;               /* secondary text (AA on the lighter surfaces) */
  --line:#345B82; --border-soft:#345B82;          /* visible steel-blue border on every card/box */
  --good:#46B98A; --warn:#E0962E; --bad:#E08A8A;  /* status colors (AA on dark) */
  --font-display:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --font-body:'DM Sans','Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --radius:2px;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.6; font-size:15px;}
a{color:var(--teal-light);}
h1,h2,h3,.display{font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em; line-height:1.1;}

/* Tabular mono numbers everywhere data is shown */
.kpi .num,.stat .num,.figure,.est-range,.invest-range{font-variant-numeric:tabular-nums;}

/* Eyebrow / mono label utility, with a small teal status dot. */
.eyebrow{font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:8px;}
.eyebrow::before{content:""; width:6px; height:6px; background:var(--teal); display:inline-block; flex:none;}

/* Brand bar (dark console header) */
.brandbar{background:var(--navy-deep); color:var(--ink); padding:13px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; border-bottom:1px solid var(--line);}
.brandbar .mark{font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:0; text-transform:none;}
.brandbar .mark span{color:var(--teal-light);}
.brandbar .sub{font-size:13px; color:var(--muted); font-family:var(--font-body);}
.brandbar .grow{flex:1;}
.brandbar a{color:var(--muted); text-decoration:none; font-size:12px; font-family:var(--font-mono); letter-spacing:.04em; text-transform:uppercase;}
.brandbar a:hover{color:var(--ink);}

/* Sample-data badge (mono label, sharp) */
.badge-sample{display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; color:var(--amber-text); background:var(--amber-soft);
  border:1px solid #5A4420; padding:4px 10px; font-family:var(--font-mono);}

/* Buttons */
.btn{font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.02em; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); padding:9px 15px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;}
.btn:hover{background:var(--surface-2); border-color:var(--teal);}
.btn.primary{background:var(--teal); border-color:var(--teal); color:#08131F; font-weight:600;}
.btn.primary:hover{background:var(--teal-light); border-color:var(--teal-light);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed;}
.btn:focus-visible{outline:2px solid var(--teal-light); outline-offset:2px;}

/* Cards */
.card{background:var(--surface); border:1px solid var(--line); padding:18px 20px;}

/* Tags */
.tag{display:inline-block; font-size:11px; color:var(--ink); background:var(--teal-dim);
  border:1px solid var(--line); padding:2px 9px; margin:2px 4px 2px 0; font-family:var(--font-mono); letter-spacing:.02em;}

/* KPI tiles */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.kpi{background:var(--surface); border-top:2px solid var(--rule); padding:18px 20px;}
.kpi .label{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:8px; font-family:var(--font-mono);}
.kpi .num{font-family:var(--font-display); font-weight:600; font-size:32px; color:var(--ink); line-height:1; letter-spacing:-0.02em;}
.kpi .sub{font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-top:8px;}
.kpi .sub.up{color:var(--good);} .kpi .sub.down{color:var(--amber-text);}
.kpi .bars{margin-top:12px; display:flex; flex-direction:column; gap:5px;}
.kpi .bars .row{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); font-family:var(--font-mono);}
.kpi .bars .row .track{flex:1; height:6px; background:var(--sand-dark); overflow:hidden;}
.kpi .bars .row .fill{height:100%; background:var(--rule);}

.footer{background:var(--navy-deep); color:var(--muted); font-size:12px; padding:12px 24px; text-align:center; font-family:var(--font-mono); letter-spacing:.03em; border-top:1px solid var(--line);}

@media print{ .no-print{display:none !important;} body{background:#fff;} .kpi,.card{break-inside:avoid;} }
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}