/* Pipeline Punks skin for the Build Studio sample pages (W-22, 2026-10-20).
   Loaded after tnds-tokens.css (which imports editorial.css) and before each
   page's own <style>. It maps the sample pages' legacy tokens onto the hub
   palette and type from src/app/globals.css, and self-hosts the same three
   fonts the hub uses (same latin subsets as the Next build), so a sample page
   makes no third-party font request. Visual only; sample data and page logic
   are untouched. */

@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-black-latin.woff2) format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(/fonts/dm-sans-latin.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2');}

/* Hub palette (globals.css): void, panel, console, console-line, bone, steel-light, teal, cable, signal. */
:root,body{
  --paper:#0b1018 !important; --bg:#0b1018 !important;
  --white:#111a26 !important; --surface:#111a26 !important; --light:#111a26 !important;
  --surface-2:#1b2d46 !important;
  --ink:#faf6ee !important; --navy:#faf6ee !important;
  --navy-deep:#0b1018 !important; --navy-light:#1b2d46 !important; --navy-soft:#8fa3b8 !important;
  --teal:#3d8eb9 !important; --teal-light:#6fb3d6 !important; --teal-dim:rgba(61,142,185,.12) !important; --rule:#3d8eb9 !important;
  --teal-soft:rgba(61,142,185,.14) !important;
  --amber:#d97706 !important; --amber-soft:#231b10 !important; --amber-text:#e8871e !important;
  --cable:#e8871e;
  --red:#e08a8a !important; --red-soft:rgba(224,138,138,.12) !important; --violet:#6fb3d6 !important;
  --sand:#111a26 !important; --sand-dark:#1b2d46 !important;
  --muted:#8fa3b8 !important; --slate:#8fa3b8 !important;
  --line:#345b82 !important; --border-soft:#345b82 !important;
  --good:#46b98a !important; --warn:#e8871e !important; --bad:#e08a8a !important;
  --font-display:'Archivo Black','DM Sans',system-ui,sans-serif !important;
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif !important;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace !important;
  --radius:0 !important;
}

body{background:var(--paper) !important; color:var(--ink) !important; font-family:var(--font-body) !important;}
*,*::before,*::after{border-radius:0 !important; box-shadow:none !important;}

/* Display type: Archivo Black has one weight, so synthesized bold is turned off. */
h1,h2,h3,.display,.kpi .num,.stat .num,.bar .wordmark,.bar .mark,.brandbar .mark{
  font-family:var(--font-display) !important; font-weight:400 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--ink) !important;}
h1{font-size:34px !important; line-height:1.1 !important;}
h2{font-size:22px !important;} h3{font-size:17px !important;}

/* Chrome: the hub header in miniature. */
.brandbar,.bar{background:var(--navy-deep) !important; color:var(--ink) !important; border-bottom:2px solid var(--line) !important; padding:12px 24px !important; gap:16px !important; display:flex !important; align-items:center !important; flex-wrap:wrap !important;}
.brandbar .logo,.bar .logo{display:inline-flex; align-items:center; flex:none;}
.brandbar .logo img,.bar .logo img{width:52px; height:52px; display:block; border:2px solid var(--line);}
.brandbar .kicker,.bar .kicker{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-light); white-space:nowrap;}
.brandbar .sub,.bar .sub{color:var(--muted) !important; font-family:var(--font-body) !important; font-size:13px !important;}
.bar .wordmark{font-size:18px !important;} .bar .wordmark .dot{color:var(--teal-light) !important;}
.bar .nav{color:var(--muted) !important; font-family:var(--font-mono) !important; font-size:11px !important; letter-spacing:.08em !important; text-transform:uppercase !important;}
.brandbar a,.bar a{color:var(--teal-light) !important; font-family:var(--font-mono) !important; font-size:12px !important; letter-spacing:.06em !important; text-transform:uppercase !important; text-decoration:none !important;}
.brandbar a:hover,.bar a:hover{color:var(--ink) !important; text-decoration:underline !important;}
.badge-sample{color:var(--cable) !important; background:transparent !important; border:1px solid var(--cable) !important; font-family:var(--font-mono) !important;}
.footer,.foot{background:var(--navy-deep) !important; color:var(--muted) !important; border-top:2px solid var(--line) !important; font-family:var(--font-mono) !important; font-size:12px !important; padding:14px 24px !important; text-align:center !important; line-height:1.6 !important;}
.footer a,.foot a{color:var(--teal-light) !important;}

/* Actions and fields. */
.btn{border:1px solid var(--line) !important; background:var(--surface) !important; color:var(--ink) !important; font-family:var(--font-mono) !important;}
.btn:hover{background:var(--surface-2) !important; border-color:var(--teal) !important;}
.btn.primary,button.primary{background:var(--cable) !important; border-color:var(--cable) !important; color:#0e1a2b !important;}
.btn.primary:hover,button.primary:hover{background:#f09a3a !important; border-color:#f09a3a !important;}
input,select,textarea{background:var(--surface-2) !important; color:var(--ink) !important; border:1px solid var(--line) !important; font-family:var(--font-body) !important;}

/* Surfaces, tables, tiles. */
.card,.panel,.hero-main,.hero-side,.kpi,.tile,.box{background:var(--surface) !important; background-image:none !important; border:2px solid var(--line) !important; color:var(--ink) !important;}
.kpi{border-top-width:3px !important;}
table{background:var(--surface) !important; border:2px solid var(--line) !important;}
th{background:var(--surface-2) !important; color:var(--ink) !important; font-family:var(--font-mono) !important; font-weight:500 !important; letter-spacing:.08em !important; text-transform:uppercase !important; font-size:11px !important;}
td{border-color:var(--line) !important; color:var(--ink) !important;}
td.name{color:var(--ink) !important;}
.alert{border-color:#5a4420 !important; color:var(--amber-text) !important; background:var(--amber-soft) !important;}
.alert.r{border-color:#5e2b2b !important; color:var(--bad) !important; background:rgba(224,138,138,.10) !important;}
.legend,.meta,.eyebrow,.label{color:var(--muted) !important;}
.chip{border:1px solid var(--line) !important; background:var(--surface-2) !important; color:var(--ink) !important; font-family:var(--font-mono) !important;}
.chip.ok{color:var(--good) !important;} .chip.warn{color:var(--warn) !important;} .chip.bad{color:var(--bad) !important;}

.kpi-grid{background:transparent !important; border:0 !important; gap:12px !important;}
.track,.graph-row .track,.kpi .bars .row .track{background:var(--surface-2) !important;}
.wrap,.shell{max-width:1180px;}

@media (max-width:640px){
  .wrap,.shell{padding:14px !important;}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .hero,.hero-main{grid-template-columns:1fr !important;}
  table{display:block !important; overflow-x:auto !important; max-width:100% !important;}
  th,td{padding:7px 8px !important;}
  .brandbar,.bar{padding:10px 16px !important; gap:10px !important;}
  .brandbar .sub,.bar .sub,.bar .nav{display:none !important;}
  .brandbar .kicker,.bar .kicker{font-size:10px; letter-spacing:.1em;}
  h1{font-size:26px !important;}
}
@media print{ body{background:#fff !important; color:#111 !important;} }