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

   STEP 11 redesign sample: EDITORIAL LEDGER (Direction B). A warm,
   printed-brief system with Fraunces display type, DM Sans body copy,
   JetBrains Mono labels, hairline rules, sharp corners, no shadows, and
   measured teal/amber accents.

   To REVERT: restore one of the commented :root blocks below and drop
   the editorial.css import. The previous legacy, Swiss, and Ops Terminal
   token values are preserved here so rollback is a single-file edit.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&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 ------------------------------------------------------- */

/* ---- OPS TERMINAL tokens (Direction C). Restore into :root to revert. ----
:root{
  --paper:#0E1A2B; --bg:#0E1A2B; --white:#1B2D46; --surface:#1B2D46;
  --surface-2:#25395A; --light:#1B2D46; --ink:#EDEAE0; --navy:#EDEAE0;
  --navy-deep:#0A1422; --navy-light:#27405C; --navy-soft:#9DB6CC;
  --teal:#3D8EB9; --teal-light:#6FB3D6; --teal-dim:rgba(61,142,185,0.12);
  --rule:#3D8EB9; --amber:#D97706; --amber-soft:#231B10; --amber-text:#E8962E;
  --sand:#13243A; --sand-dark:#1C2A3D; --muted:#93A3B8; --slate:#93A3B8;
  --line:#345B82; --border-soft:#345B82; --good:#46B98A; --warn:#E0962E;
  --bad:#E08A8A; --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;
}
   ---- end OPS TERMINAL --------------------------------------------------- */

:root{
  --paper:#F7F4EC;
  --bg:#F7F4EC;
  --white:#FFFDF7;
  --surface:#FFFDF7;
  --surface-2:#EFE8D8;
  --light:#FBF8F1;
  --ink:#11243A;
  --navy:#11243A;
  --navy-deep:#172B43;
  --navy-light:#2B4A67;
  --navy-soft:#4B6175;
  --teal:#3D8EB9;
  --teal-light:#236C90;
  --teal-dim:rgba(61,142,185,0.12);
  --rule:#3D8EB9;
  --amber:#D97706;
  --amber-soft:#FCF0D8;
  --amber-text:#8C4C04;
  --sand:#F7F4EC;
  --sand-dark:#E6E0D2;
  --muted:#5C6672;
  --slate:#5C6672;
  --line:#E6E0D2;
  --border-soft:#E6E0D2;
  --good:#246B4C;
  --warn:#8C4C04;
  --bad:#9A3B3B;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --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.58;
  font-size:15px;
}
a{color:var(--teal-light); text-underline-offset:3px;}
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:0;
  line-height:1.08;
}

/* 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. */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--teal-light);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--rule); display:inline-block; flex:none;}

/* Brand bar: a quiet ledger header, not a dark app chrome. */
.brandbar{
  background:var(--surface);
  color:var(--ink);
  padding:14px 26px;
  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:21px; 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(--navy);
  text-decoration:none;
  font-size:12px;
  font-family:var(--font-mono);
  letter-spacing:0;
  text-transform:uppercase;
}
.brandbar a:hover{color:var(--teal-light);}

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

/* Buttons */
.btn{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0;
  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(--ink); border-color:var(--ink); color:var(--paper); font-weight:600;}
.btn.primary:hover{background:var(--navy-light); border-color:var(--navy-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(--navy);
  background:var(--light);
  border:1px solid var(--line);
  padding:2px 9px;
  margin:2px 4px 2px 0;
  font-family:var(--font-mono);
  letter-spacing:0;
}

/* 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:0;
  color:var(--muted);
  margin-bottom:8px;
  font-family:var(--font-mono);
}
.kpi .num{font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--ink); line-height:1; letter-spacing:0;}
.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(--surface);
  color:var(--muted);
  font-size:12px;
  padding:12px 24px;
  text-align:center;
  font-family:var(--font-mono);
  letter-spacing:0;
  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;}}