/* DopplerIQ — the brand book applied (Sep 2026). Coral is the brand;
   everything else stays warm and quiet. Outfit speaks (wordmark, display
   moments), Inter works (UI and body), JetBrains Mono counts (every number
   that sits in a column or changes in place). One easing, three durations,
   and only the mark and the Q move; cards and type animate opacity alone in
   brand mode, and rise four pixels in fluid mode. Safety red is a true red
   with an icon and a word; coral alone never means "bad". */
:root{
  --coral-50:#FDF1EF; --coral-100:#FBDAD6; --coral-200:#F6B3AD; --coral-300:#F08D86; --coral-400:#EC7069;
  --coral-500:#E85A52; --coral-600:#C9463F; --coral-700:#9E332E; --coral-800:#6E2422; --coral-900:#3A1412;
  --accent:#E85A52; --accent-mid:#C9463F; --accent-deep:#9E332E; --accent-tint:#FDF1EF; --accent-tint-2:#FBDAD6; --accent-line:#F08D86;
  --wave:linear-gradient(90deg,#E85A52 0%,#E85A52 50%,#9E332E 100%);
  --bg:#F5F4F0; --card:#FFFFFF; --band:#ECEAE4;
  --ink:#1C1B18; --mut:#6B6862; --ghost:#A29F98;
  --line:#E7E5DF; --line-2:#D9D6CE;
  --ok:#19A05A; --ok-tint:#DFF3E6; --ok-ink:#177A47;
  --warn:#D97706; --warn-tint:#FDF0DC; --warn-ink:#9A5305;
  --bad:#C42B1C; --bad-tint:#FBE1E1; --bad-ink:#9E1F13;
  --data-petrol:#0A8CA6; --data-petrol-tint:#DCEFF3;
  --indigo:#5B5BD6; --indigo-tint:#ECECFB;
  --ochre:#B4720A; --ochre-tint:#FBF1DF;
  --stripe:#FAF9F6; --toast:#1C1B18; --toast-ink:#FFFFFF; --hover:rgba(28,27,24,.04);
  --r:12px; --r-sm:8px;
  --shadow:0 1px 2px rgba(28,27,24,.04),0 2px 8px rgba(28,27,24,.05);
  --display:Outfit,"Avenir Next","Segoe UI",sans-serif;
  --sans:Inter,-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.4,0,.2,1); --t-state:160ms; --t-layout:240ms; --t-wave:2400ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:15px;
line-height:1.45;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
a{color:var(--accent-mid);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
code{font-family:var(--mono);font-size:.9em}
button{font-family:inherit}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--bg);border-right:1px solid var(--line);padding:18px 14px 16px;display:flex;flex-direction:column;gap:2px;
position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;padding:6px 10px 20px}
.brand a{color:var(--ink);text-decoration:none;display:inline-flex}
.lockup{line-height:1;white-space:nowrap;display:inline-flex;align-items:baseline;gap:.24em}
.wordmark{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--ink);white-space:nowrap}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;
color:var(--ink);font-weight:500;font-size:16px;border:1.5px solid transparent}
.nav a svg{width:20px;height:20px;color:var(--mut);flex:0 0 auto}
.nav a.on{background:var(--card);border-color:var(--accent-line);color:var(--ink)}
.nav a.on svg{color:var(--accent)}
.nav a:hover:not(.on){background:var(--hover);text-decoration:none}
.side .sect{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--ghost);padding:18px 12px 6px}
.nav .sect{padding:14px 12px 4px}
.nav .sect:first-child{padding-top:0}
.side .acct{display:flex;justify-content:space-between;padding:8px 12px;font-size:15px;
color:var(--mut);font-weight:500;border-radius:8px}
.side .acct b{color:var(--ink);font-family:var(--mono);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.side .foot{margin-top:auto;padding:12px;font-size:13px;color:var(--ghost);line-height:1.5}
.side .foot a{font-size:13px !important}

.main{padding:22px 28px 64px;min-width:0}
.topbar{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;min-height:40px}
.topbar h1{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:-.02em}
.topbar .sub{font-size:15px;color:var(--mut);font-weight:400}
.grid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start}
.col{display:flex;flex-direction:column;gap:18px}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px}
.card .head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.card .head h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
.card .head a{font-size:15px;font-weight:500;color:var(--mut)}
.card .head a:hover{color:var(--accent-mid)}

.big{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.big small{font-family:var(--sans);font-size:15px;color:var(--mut);font-weight:400;letter-spacing:0}
.subline{font-size:14px;color:var(--mut);font-weight:400;margin-top:3px}
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-bottom:6px}
.hero-split.three{grid-template-columns:1.2fr 1fr 1.4fr}
.hero-split.three .big{font-size:26px}
.caption{font-size:13.5px;color:var(--ghost);margin-top:10px}
.divider{height:1px;background:var(--line);margin:14px 0}

/* ---------- chips: tinted pills, sentence case ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;
border-radius:999px;padding:3px 9px;white-space:nowrap;line-height:1.4}
.chip.ok{background:var(--ok-tint);color:var(--ok-ink)}
.chip.warn{background:var(--warn-tint);color:var(--warn-ink)}
.chip.bad{background:var(--bad-tint);color:var(--bad-ink)}
.chip.quiet{background:var(--band);color:var(--mut)}
.chip.accent{background:var(--accent-tint);color:var(--accent-deep)}
.chip.demo{background:var(--toast);color:var(--toast-ink)}
.lab{font-family:var(--mono);font-size:12.5px;font-weight:500;background:var(--accent-tint);
color:var(--accent-deep);border-radius:6px;padding:2px 7px}
.lab.gray{background:var(--band);color:var(--mut)}

/* ---------- budget rows: name and value on top, bar beneath ---------- */
.covrow{display:grid;grid-template-columns:1fr auto;grid-template-areas:"nm val" "track track";
row-gap:9px;column-gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.covrow:last-child{border-bottom:none}
.covrow .nm{grid-area:nm;font-weight:500;font-size:16px}
.covrow .nm small{display:inline;margin-left:8px;font-weight:400;color:var(--mut);font-size:14px;
font-variant-numeric:tabular-nums}
.track{grid-area:track;position:relative;height:8px;border-radius:6px;background:var(--band)}
.track .fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--wave);min-width:3px}
.track .fill.quiet{background:var(--line-2)}
.track .fill.over{background:var(--bad)}
.track .floor{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--warn);opacity:.7;border-radius:2px}
.covrow .val{grid-area:val;display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;
font-family:var(--mono);font-weight:600;font-size:15px}
.covrow .val br{display:none}
.covrow .val small{color:var(--ghost);font-weight:400}

/* ---------- product / promo rows: tall, icon left, values right ---------- */
.prow{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:none}
.prow .ic{width:40px;height:40px;border-radius:10px;background:var(--accent-tint);color:var(--accent-deep);
display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;flex:0 0 auto}
.prow .tt{flex:1;min-width:0}
.prow .tt b{display:block;font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .tt span{font-size:14px;color:var(--mut);font-weight:400}
.prow .rt{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.prow .rt b{display:block;font-family:var(--mono);font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
.prow .rt span{font-size:13.5px;color:var(--mut);font-weight:400}
.prow.washed .tt b{color:var(--mut)}
.prow .ic.gray{background:var(--band);color:var(--ghost)}
.count{font-family:var(--mono);font-size:24px;font-weight:600;color:var(--accent-deep);font-variant-numeric:tabular-nums}

/* ---------- gates ---------- */
.gate{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:15px;
color:var(--mut);border-bottom:1px solid var(--line)}
.gate:last-child{border-bottom:none}
.gate b{color:var(--ink);font-weight:500}
.gate .dot{width:24px;height:24px;border-radius:50%;background:var(--ok-tint);color:var(--ok-ink);
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto}
.gate .n{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ghost);padding-left:10px}
.gate.fail{background:var(--bad-tint);margin:0 -22px;padding:11px 22px;border-radius:0}
.gate.fail .dot{background:var(--bad);color:#fff}
.gate.fail b{color:var(--bad-ink)}
.gate.skip,.gate.skip b{color:var(--ghost)}
.gate.skip .dot{background:var(--bg);color:var(--ghost);border:1.5px dashed var(--line-2)}
.gate.pending .dot{background:var(--card);border:1.5px solid var(--accent);animation:pulse 1.1s ease-in-out infinite}
.gate.pending b{color:var(--mut)}
.gate.reveal{animation:rise var(--t-layout) var(--ease) both}
[data-motion="brand"] .gate.reveal{animation-name:appear}
.halt{border-left:3px solid var(--bad);background:var(--bad-tint);padding:12px 14px;margin-top:14px;
border-radius:0 10px 10px 0;font-size:15px;font-weight:600;color:var(--bad-ink)}
.halt small{display:block;color:var(--mut);font-weight:400;margin-top:3px;font-size:14px}
.halt[style]{animation:appear var(--t-layout) var(--ease) both}

/* ---------- cockpit strip ---------- */
.cockpit{display:flex;flex-wrap:wrap;align-items:stretch;background:var(--card);border-radius:var(--r);
box-shadow:var(--shadow);margin:0 0 18px;font-size:15px}
.cockpit .cell{display:flex;align-items:center;gap:7px;padding:10px 14px;border-right:1px solid var(--line);min-height:48px;font-size:14px}
.cockpit .cell:last-child{border-right:none}
.cockpit .cell.act{margin-left:auto;padding:8px 10px}
.cockpit .cell[hidden]{display:none}
.cockpit .k{color:var(--mut);font-size:13px;font-weight:400;white-space:nowrap}
.cockpit b{font-family:var(--mono);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cockpit .s{color:var(--ghost);font-weight:400;white-space:nowrap;font-size:13px}
.cockpit.halted{box-shadow:var(--shadow),inset 0 0 0 1.5px var(--bad)}
.runbtn{font-weight:600;font-size:15px;color:#fff;background:var(--accent);border:none;border-radius:9px;
padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.runbtn:hover{background:var(--accent-mid)}
.runbtn:disabled{background:var(--accent-tint);color:var(--accent-deep);cursor:wait}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}

/* ---------- buttons and inputs: white bordered, one filled primary ---------- */
.approve{font-weight:600;font-size:15px;color:#fff;background:var(--accent);border:none;
border-radius:9px;padding:10px 18px;cursor:pointer}
.approve:hover{background:var(--accent-mid)}
.approve:disabled{opacity:.55;cursor:not-allowed}
.ghostbtn{font-weight:500;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line-2);
border-radius:9px;padding:8px 14px;cursor:pointer}
.ghostbtn:hover{background:var(--bg)}
.ghostbtn.sm{padding:6px 11px;font-size:14px}
.monthnav{display:flex;align-items:center;gap:10px}
.monthnav b{font-size:16px;font-weight:600;min-width:150px;text-align:center}
.monthnav button{font-weight:500;border:1px solid var(--line-2);background:var(--card);border-radius:9px;
padding:7px 12px;cursor:pointer;color:var(--ink);font-size:15px}
.monthnav button:hover{background:var(--bg)}
label{display:block;font-size:13px;font-weight:500;color:var(--mut)}
label input,label select,label textarea{display:block;width:100%;margin-top:6px;font:inherit;
font-size:15px;font-weight:400;color:var(--ink);border:1px solid var(--line-2);border-radius:9px;
padding:9px 12px;background:var(--card)}
label input:focus,label select:focus,label textarea:focus{outline:none;border-color:var(--accent-line);
box-shadow:0 0 0 3px var(--accent-tint)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;min-height:6px}
.tagchip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-tint);color:var(--accent-deep);
font-size:14px;font-weight:500;border-radius:8px;padding:4px 10px}
.tagchip i{font-style:normal;cursor:pointer;color:var(--accent-deep);font-weight:700}
.tog{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--mut);font-weight:400}
.tog input{width:auto;margin:0}

/* ---------- review changes ---------- */
.more{font-size:14px;color:var(--ghost);padding-top:10px}
.card.empty{text-align:center;padding:56px 30px;position:relative;overflow:hidden}
.card.empty .bigdot{width:56px;height:56px;border-radius:50%;margin:0 auto 16px;background:var(--ok-tint);
color:var(--ok-ink);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}
.card.empty h2{font-family:var(--display);font-size:22px;font-weight:500;margin-bottom:6px}
.card.empty p{color:var(--mut);font-size:15px}
.card.empty .quietnote{color:var(--ghost);font-size:14px;max-width:56ch;margin:10px auto 0}
.card.empty.halted .bigdot.bad{background:var(--bad);color:#fff}
.card.empty.halted h2{color:var(--bad-ink)}
.toast{position:fixed;bottom:26px;right:26px;background:var(--toast);color:var(--toast-ink);font-size:15px;
border-radius:12px;padding:13px 18px;box-shadow:0 8px 30px rgba(28,27,24,.25)}
.toast b{font-weight:600}

/* ---------- promo calendar ---------- */
.dow{display:grid;grid-template-columns:repeat(7,1fr);font-size:12px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--ghost);padding-bottom:8px;border-bottom:1px solid var(--line)}
.week{border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:2px}
.week:last-child{border-bottom:none}
.days{display:grid;grid-template-columns:repeat(7,1fr)}
.day{padding:10px 6px 4px;font-size:14px;font-weight:500;color:var(--mut);display:flex;align-items:baseline;gap:6px}
.day.out{color:var(--line-2)}
.day.today span{background:var(--accent);color:#fff;border-radius:8px;padding:2px 8px;margin-left:-8px}
.todaytag{font-style:normal;font-size:10px;font-weight:600;color:var(--accent-mid);letter-spacing:.06em;text-transform:uppercase}
.lanes{display:flex;flex-direction:column;gap:4px;min-height:8px;padding:2px 0 4px}
.lane{display:grid;grid-template-columns:repeat(7,1fr)}
.bar{height:26px;border-radius:7px;font-size:13px;font-weight:500;display:flex;align-items:center;
padding:0 10px;white-space:nowrap;overflow:hidden;margin:0 3px}
.bar.solid{background:var(--accent);color:#fff}
.bar.pre{background:var(--accent-tint);color:var(--accent-deep);border:1.5px dashed var(--accent-line);border-right:none}
.bar.cl{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}
.bar.cr{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}
.sw{display:inline-block;width:18px;height:10px;border-radius:4px;vertical-align:middle;margin-right:8px}
.sw.solid{background:var(--accent)}
.sw.pre{background:var(--accent-tint);border:1.5px dashed var(--accent-line)}
.kv{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.kv:last-child{border-bottom:none}
.kv span{flex:0 0 120px;color:var(--mut);font-weight:400;font-size:14px;padding-top:1px}
.kv b{font-weight:500}

/* ---------- delivery ---------- */
.filemeta{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.filemeta div{background:var(--bg);border-radius:10px;padding:12px 14px}
.filemeta b{display:block;font-family:var(--mono);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.filemeta span{font-size:13px;color:var(--mut)}
.pathline{font-family:var(--mono);font-size:12px;color:var(--ghost);margin-bottom:14px}
.subhead{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ghost);margin:16px 0 6px}
.tsv{width:100%;border-collapse:collapse;font-size:14.5px}
.tsv th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--ghost);padding:8px 10px;border-bottom:1px solid var(--line)}
.tsv td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tsv td small{display:block;color:var(--ghost);font-size:12.5px}
.tsv .mono{font-family:var(--mono);font-size:13px}
.tsv .blank{color:var(--line-2)}
.tsv.striped tbody tr:nth-child(odd) td{background:var(--stripe)}
.tsv tr.more td{color:var(--ghost);font-size:14px;background:var(--card) !important;padding:10px}
.tsv .brandcell{color:var(--mut)}
.cnote{font-size:13.5px;color:var(--ghost)}
.dim{font-style:normal;color:var(--ghost);font-weight:400}
.meta-line{font-size:13.5px;color:var(--ghost);margin-bottom:14px}
.meta-line code{font-family:var(--mono);font-size:12px;background:var(--bg);border-radius:5px;padding:1px 6px;color:var(--mut)}
.meta-line .tab{color:var(--line-2)}
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:6px}
.stat{background:var(--bg);border-radius:10px;padding:14px 16px}
.stat .big{font-size:22px}
.stat .subline{margin-top:3px}

/* ---------- scheduler ---------- */
.sched{display:grid;grid-template-columns:1fr;gap:18px}
.editor{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start}
.editor[hidden]{display:none}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.frow.three{grid-template-columns:1fr 1fr 1fr}
.verdict{border-radius:10px;padding:12px 14px;font-weight:500;font-size:15px;margin:12px 0 4px}
.verdict.ok{background:var(--ok-tint);color:var(--ok-ink)}
.verdict.bad{background:var(--bad-tint);color:var(--bad-ink)}
.preview .stat .big{font-size:24px}
@media(max-width:1100px){.editor{grid-template-columns:1fr}}

@media(max-width:980px){.grid{grid-template-columns:1fr}.shell{grid-template-columns:1fr}.side{display:none}
.main{padding:16px 16px 48px}}
@media(prefers-reduced-motion:reduce){.pulse,.gate.pending .dot,.gate.reveal,.halt[style]{animation:none}}

/* ---------- dark mode: same roles, re-stepped for a dark surface ---------- */
:root[data-theme="dark"]{
  --accent:#EC7069; --accent-mid:#F08D86; --accent-deep:#F6B3AD; --accent-tint:#3A1412; --accent-tint-2:#55201C; --accent-line:#9E332E;
  --wave:linear-gradient(90deg,#E85A52 0%,#E85A52 50%,#C9463F 100%);
  --bg:#141416; --card:#1E1E21; --band:#2A2A2E; --stripe:#222226;
  --ink:#ECEAE4; --mut:#A5A29B; --ghost:#75726C;
  --line:#2C2C31; --line-2:#3A3A40;
  --ok:#3FBF7A; --ok-tint:#163B2A; --ok-ink:#6FD9A2;
  --warn:#F0A64A; --warn-tint:#3E2A10; --warn-ink:#F2BF78;
  --bad:#E0483A; --bad-tint:#45201F; --bad-ink:#F29A9A;
  --data-petrol:#2FA3B8; --data-petrol-tint:#11363E;
  --indigo:#8B8BEA; --indigo-tint:#26264A;
  --ochre:#E0A24A; --ochre-tint:#3E2A10;
  --toast:#ECEAE4; --toast-ink:#141416; --hover:rgba(255,255,255,.06);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.25);
  color-scheme:dark;
}
:root[data-theme="dark"] .side .foot{color:var(--ghost)}
:root[data-theme="dark"] .day.today span{color:#1C1B18}
:root[data-theme="dark"] .bar.solid{color:#1C1B18}
:root[data-theme="dark"] .approve{color:#1C1B18}
:root[data-theme="dark"] .approve:hover{background:var(--accent-mid)}

/* theme toggle, sidebar bottom */
.themebtn{display:flex;align-items:center;gap:10px;width:100%;margin-top:auto;padding:9px 12px;
font-size:14px;font-weight:500;color:var(--mut);background:var(--card);border:1px solid var(--line-2);
border-radius:9px;cursor:pointer;text-align:left}
.themebtn:hover{color:var(--ink)}
.themebtn svg{width:16px;height:16px;flex:0 0 auto}
.themebtn .sw{margin:0 0 0 auto;width:30px;height:16px;border-radius:999px;background:var(--line-2);position:relative}
.themebtn .sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--card);transition:left .15s}
.themebtn[aria-pressed="true"] .sw{background:var(--accent)}
.themebtn[aria-pressed="true"] .sw::after{left:16px}
.side .foot{margin-top:12px}

/* ---------- modal: dimmed backdrop, centered panel, title + subtitle, close in the corner ---------- */
.backdrop{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;align-items:center;
justify-content:center;padding:24px;opacity:0;transition:opacity .14s ease-out}
.backdrop.in{opacity:1}
.backdrop.out{opacity:0}
.modal{background:var(--card);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.28);
width:min(560px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;
transform:translateY(6px) scale(.985);transition:transform .14s ease-out}
.backdrop.in .modal{transform:none}
.modal.wide{width:min(1180px,100%)}
.mhead{display:flex;align-items:flex-start;gap:16px;padding:26px 30px 6px}
.mhead h2{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:-.02em}
.mhead p{font-size:16px;color:var(--mut);margin-top:6px}
.mclose{margin-left:auto;background:none;border:none;color:var(--ink);font-size:18px;line-height:1;
cursor:pointer;padding:6px 8px;border-radius:8px}
.mclose:hover{background:var(--band)}
.mbody{padding:18px 30px;overflow:auto}
.mtext{font-size:16px;color:var(--mut);line-height:1.5}
.mfoot{display:flex;justify-content:flex-end;gap:10px;padding:8px 30px 26px}
.approve.danger{background:var(--bad)}
.approve.danger:hover{background:var(--bad-ink)}
:root{--scrim:rgba(28,27,24,.45)}
:root[data-theme="dark"]{--scrim:rgba(0,0,0,.62)}

/* option rows inside a modal: gray bands with a switch, as in a settings sheet */
.mrows{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px 20px}
.mrow{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:12px;padding:14px 18px;font-size:16px;font-weight:500}
.mrow .switch{margin-left:auto}
.switch{width:40px;height:22px;border-radius:999px;background:var(--line-2);position:relative;border:none;cursor:pointer;flex:0 0 auto}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--card);
box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.switch[aria-checked="true"]{background:var(--accent)}
.switch[aria-checked="true"]::after{left:21px}
@media(prefers-reduced-motion:reduce){.backdrop,.modal,.switch::after{transition:none}}

/* ---------- price index ---------- */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;background:var(--card);
border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:18px}
.filters .fsep{flex-basis:100%;height:0}
.filters .crumbs{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ghost);flex:1;min-width:0;padding:2px 2px 6px}
.filters .crumbs a{color:var(--accent-mid)}
.filters .crumbs b{color:var(--ink);font-weight:600}
.filters .crumbs i{font-style:normal}
.fsel{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;border:1px solid var(--line-2);
border-radius:9px;padding:6px 10px;background:var(--card);color:var(--ink);cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:0}
.fsel span{color:var(--mut);font-weight:400}
.fsel span.vs{color:var(--accent-deep)}
.fsel.active{border-color:var(--accent-line);background:var(--accent-tint);color:var(--accent-deep)}
.fsel.active span{color:var(--accent-deep)}
.fsel select,.fsel input{margin:0;padding:0;border:none;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--ink);width:auto;max-width:180px}
.fsel select:focus,.fsel input:focus{outline:none;box-shadow:none;border:none}
.filters .count{margin-left:auto;font-size:14px;font-weight:400;color:var(--mut);font-variant-numeric:tabular-nums}
.filters .count b{color:var(--ink);font-weight:600}
.popover{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:320px}
#exportMenu{left:auto;right:0}
.menu{border:1px solid var(--line-2);border-radius:12px;background:var(--card);box-shadow:0 12px 40px rgba(0,0,0,.14);overflow:hidden;font-size:14px;font-weight:500}
.menu>div{padding:9px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;cursor:pointer}
.menu>div:last-child{border-bottom:none}
.menu>div:hover{background:var(--bg)}
.menu>div.on{background:var(--accent-tint);color:var(--accent-deep)}
.menu>div.off{color:var(--ghost);cursor:not-allowed}
.menu>div span{color:var(--ghost);font-weight:400;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.menu>div.h{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ghost);background:var(--bg);cursor:default}
.menu>div.custom{display:flex;gap:6px;align-items:center;cursor:default}
.menu>div.custom input{font:inherit;font-size:13px;border:1px solid var(--line-2);border-radius:7px;padding:4px 6px;background:var(--card);color:var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px}
.kpi .big{font-size:26px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kpi .big .sub{font-size:15px}
.kpi .cmp{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13.5px;color:var(--ghost);font-variant-numeric:tabular-nums}
.chip.down{background:var(--data-petrol-tint);color:#075E70}
.chip.up{background:var(--ochre-tint);color:#7E4F05}
.chip.priority{background:var(--accent-tint);color:var(--accent-deep)}
.chip.promo{background:var(--indigo-tint);color:#4343B8}
.chip.coop{background:var(--data-petrol-tint);color:#075E70}
:root[data-theme="dark"] .chip.coop{color:#8AD3E0}
.chip.src{background:var(--card);border:1px solid var(--line-2);color:var(--mut);font-weight:500}
:root[data-theme="dark"] .chip.down{color:#8AD3E0}
:root[data-theme="dark"] .chip.up{color:#F2BF78}
:root[data-theme="dark"] .chip.promo{color:#B3B3F5}
.chartwrap{position:relative}
.chart{width:100%;height:auto;display:block}
.tip{position:absolute;z-index:5;pointer-events:none;background:var(--toast);color:var(--toast-ink);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:500;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.2);white-space:nowrap}
.tip b{font-weight:600}
.tip span{opacity:.75}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;font-weight:500;color:var(--mut);margin-top:10px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.legend i.hatch{background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 5px);opacity:.7}
.mover{display:grid;grid-template-columns:40px minmax(0,1fr) 150px 84px 110px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.mover:last-child{border-bottom:none}
.mover:hover{text-decoration:none;background:var(--hover);margin:0 -10px;padding:10px}
.mover .th,.th{width:40px;height:40px;border-radius:8px;background:var(--bg);border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.th img{width:100%;height:100%;object-fit:contain}
.th.big{width:72px;height:72px;border-radius:12px}
.mover .tt b{display:block;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mover .tt span{font-size:13px;color:var(--mut)}
.mover .was{font-family:var(--mono);font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums;text-align:right}
.mover .was b{color:var(--ink);font-weight:600}
.spark{width:110px;height:26px;display:block;justify-self:end}
table.t{width:100%;border-collapse:collapse;font-size:14.5px}
table.t th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ghost);padding:8px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
table.t td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr[data-key]{cursor:pointer}
table.t tr[data-key]:hover td{background:var(--hover)}
table.t td:first-child{font-weight:500}
table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.t td.n{font-family:var(--mono);font-size:13.5px}
table.t td.dim{color:var(--ghost);font-weight:400}
table.t .tt b{display:block;font-weight:500}
table.t .tt span{font-size:13px;color:var(--mut);font-weight:400}
.dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:16px;
background:var(--toast);color:var(--toast-ink);border-radius:14px;padding:10px 12px 10px 20px;font-size:15px;box-shadow:0 12px 36px rgba(0,0,0,.28);max-width:calc(100% - 320px)}
.dock b{font-weight:600}
.dock .s{opacity:.7;font-size:13.5px}
.dock .btn{background:var(--card);color:var(--ink);border:none;border-radius:9px;padding:8px 14px;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.dock[hidden]{display:none}
.skuhead{display:flex;align-items:center;gap:18px}
.skuhead .tt{flex:1;min-width:0}
.skuhead .tt h2{font-size:20px;font-weight:600;letter-spacing:-.01em}
.skuhead .tt .sub{display:block;margin-top:4px}
.skuhead .pricebox{text-align:right}
.skuhead .hero-n{font-family:var(--mono);font-size:32px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.kv2{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px 12px;font-size:15px}
.kv2 dt{color:var(--mut);font-weight:400;font-size:14px}
.kv2 dd{font-weight:500}
.input{display:block;width:100%;font:inherit;font-size:15px;color:var(--ink);border:1px solid var(--line-2);border-radius:9px;padding:9px 12px;background:var(--card)}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.mover{grid-template-columns:40px minmax(0,1fr) 84px}.mover .was,.mover .spark{display:none}}
@media print{.side,.cockpit,.dock,#exportBtn,.filters .fsel,.popover{display:none !important}.shell{grid-template-columns:1fr}.main{padding:0}.card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}}
/* two- and three-column card rows */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
@media(max-width:1100px){.two,.three{grid-template-columns:1fr}}

#rangeMenu{left:auto;right:0;min-width:440px}
.menu>div span{white-space:normal;text-align:right;max-width:60%}
.chip.src{white-space:normal;text-align:left;line-height:1.35}

/* ---------- promo calendar ---------- */
.legend i.hatch-ink{background:repeating-linear-gradient(135deg,var(--ink) 0 2px,transparent 2px 5px);opacity:.6}
.bar.pro{background:var(--indigo);color:#fff}
.bar.pri{background:var(--accent);color:#fff}
.bar.coop{background:var(--data-petrol);color:#fff}
.overlap.conflict{background:repeating-linear-gradient(135deg,var(--bad-ink) 0 2px,transparent 2px 5px);opacity:.8}
a.bar{text-decoration:none}
a.bar:hover{filter:brightness(1.08);text-decoration:none}
.bar.open{-webkit-mask:linear-gradient(90deg,#000 75%,transparent);mask:linear-gradient(90deg,#000 75%,transparent)}
.overlap{height:12px;border-radius:4px;margin:0 3px;background:repeating-linear-gradient(135deg,var(--ink) 0 2px,transparent 2px 5px);opacity:.5;cursor:help}
.tabs{display:flex;gap:2px;align-items:center;border-bottom:1px solid var(--line-2);margin-bottom:6px;flex-wrap:wrap}
.tabs span[data-tab]{padding:8px 12px;font-size:15px;font-weight:500;color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.tabs span.on{color:var(--ink);border-bottom-color:var(--ink)}
.tabs span small{color:var(--ghost);font-weight:600;margin-left:6px;font-size:13px}
.tabs .tog{margin-left:auto}
.pcard{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.pcard:last-child{border-bottom:none}
.pcard b{display:block;font-size:16px;font-weight:500}
.pcard b a{color:var(--ink)}
.pcard .m{font-size:14px;color:var(--mut);display:block;margin-top:3px}
.pcard .stat{font-size:14px;color:var(--mut);font-variant-numeric:tabular-nums}
.pcard .stat b{display:inline;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink)}
.pcard .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pcard.washed{opacity:.6}
.side a.acct{text-decoration:none}
.side a.acct:hover{background:var(--hover)}

/* wizard */
.wiz{display:flex;flex-direction:column;min-height:60vh}
.steps{display:flex;gap:0;padding:0 0 12px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.steps span{padding:6px 14px 6px 0;margin-right:10px;font-size:13.5px;font-weight:500;color:var(--ghost);display:flex;align-items:center;gap:7px}
.steps span i{font-style:normal;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.steps span.done{color:var(--mut)} .steps span.done i{background:var(--ok-tint);color:var(--ok-ink);border-color:transparent}
.steps span.on{color:var(--ink)} .steps span.on i{background:var(--ink);color:var(--card);border-color:var(--ink)}
.wbody{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:22px;align-items:start;flex:1}
.wbody .impact{background:var(--bg);border-radius:12px;padding:16px 18px;position:sticky;top:0}
.impact h4{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ghost);margin-bottom:8px}
.impact .big{font-size:28px}
.impact.busy{opacity:.6}
.wfoot{display:flex;justify-content:space-between;align-items:center;padding-top:16px;margin-top:16px;border-top:1px solid var(--line)}
.wfoot .r{display:flex;gap:8px}
label.f{display:block;font-size:13px;font-weight:500;color:var(--mut);margin-top:12px}
label.f:first-child{margin-top:0}
label.f .input{margin-top:6px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tog.big{display:flex;align-items:center;gap:10px;font-size:15px;padding:10px 12px;background:var(--bg);border-radius:10px;margin-bottom:12px}
.tog.big b{color:var(--ink);font-weight:600}
.pick.off{opacity:.4;pointer-events:none}
.tree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.tree>div{border:1px solid var(--line-2);border-radius:10px;padding:8px;font-size:13.5px;max-height:220px;overflow:auto;background:var(--card)}
.tree>div b{display:block;font-size:11px;color:var(--ghost);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree label{display:flex;gap:8px;align-items:center;padding:4px 6px;border-radius:6px;color:var(--ink);cursor:pointer;font-size:13.5px;font-weight:500}
.tree label:hover{background:var(--bg)}
.tree label.focus{background:var(--accent-tint);color:var(--accent-deep)}
.tree label small{margin-left:auto;color:var(--ghost);font-variant-numeric:tabular-nums;font-weight:400}
.tree .cb{display:inline-flex;padding:2px}
.box{width:14px;height:14px;border:1.5px solid var(--line-2);border-radius:4px;display:inline-block;background:var(--card)}
.box.on{background:var(--accent);border-color:var(--accent)}
.box.half{background:linear-gradient(90deg,var(--accent) 50%,var(--card) 50%);border-color:var(--accent)}
.tagchip.ex{background:var(--bad-tint);color:var(--bad-ink)}
.tagchip.ex i{color:var(--bad-ink)}
.stackbar{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px;margin-top:8px}
.stackbar span{display:block;background:var(--indigo)}
.dist-l{display:flex;justify-content:space-between;font-size:12px;color:var(--ghost);font-weight:500;margin-top:4px;gap:8px;flex-wrap:wrap}
.tune{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.tune:last-child{border-bottom:none}
.tune b{display:block;font-size:15px;font-weight:500}
.tune .why{font-size:13px;color:var(--mut);display:block}
.tune .ctl{margin-top:8px}
.tune.off .ctl{opacity:.38;pointer-events:none}
.tune .eff{font-size:13px;font-weight:600;color:var(--accent-deep);margin-top:6px;font-variant-numeric:tabular-nums}
.tune.off .eff{color:var(--ghost);font-weight:500}
.tune input[type=range]{width:100%;accent-color:var(--accent)}
.slider-l{display:flex;justify-content:space-between;font-size:12px;color:var(--ghost);font-weight:500;padding:0 2px}
.slider-l b{color:var(--ink)}
.verdict{border-radius:10px;padding:12px 14px;font-weight:500;font-size:15px}
.verdict.ok{background:var(--ok-tint);color:var(--ok-ink)}
.verdict.bad{background:var(--bad-tint);color:var(--bad-ink)}
.mtext b{color:var(--ink);font-weight:600}
@media(max-width:1100px){.wbody{grid-template-columns:1fr}.wbody .impact{position:static}.tree{grid-template-columns:1fr}.pcard{grid-template-columns:1fr}}

/* ---------- wizard refinements ---------- */
.frow>label.f,.frow>div>.f:first-child{margin-top:0}
.typecards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
.typecard{display:block;border:1.5px solid var(--line-2);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--card)}
.typecard input{position:absolute;opacity:0;pointer-events:none}
.typecard b{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
.typecard span{font-size:13px;color:var(--mut);line-height:1.4}
.typecard.on{border-color:var(--accent);background:var(--accent-tint)}
.typecard.on b{color:var(--accent-deep)}
.seg2{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;margin-left:8px;vertical-align:middle}
.seg2 button{font:inherit;font-size:12.5px;font-weight:500;padding:3px 10px;border:none;background:var(--card);color:var(--mut);cursor:pointer}
.seg2 button.on{background:var(--ink);color:var(--card)}
.tree label{position:relative;padding-right:6px}
.tree label .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree label.ex .nm{color:var(--ghost);text-decoration:line-through}
.exbtn{font:inherit;font-size:11px;font-weight:600;color:var(--mut);background:var(--card);border:1px solid var(--line-2);border-radius:6px;padding:1px 7px;cursor:pointer;margin-left:6px;opacity:0}
.tree label:hover .exbtn,.exbtn.on{opacity:1}
.exbtn.on{background:var(--bad-tint);color:var(--bad-ink);border-color:transparent}
.exbtn:hover{background:var(--bad-tint);color:var(--bad-ink);border-color:transparent}
.linkbtn{font:inherit;font-size:13.5px;font-weight:500;color:var(--accent-mid);background:none;border:none;cursor:pointer;padding:10px 0 0}
.scopeline{margin-top:14px;font-size:14.5px;color:var(--mut);background:var(--bg);border-radius:10px;padding:10px 14px}
.scopeline b{color:var(--ink);font-weight:600}
.guard{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.guard h4{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--ink);font-weight:600}
.grow{margin-top:10px}
.grow .gl{display:flex;justify-content:space-between;font-size:13px;color:var(--mut);margin-bottom:5px;gap:10px}
.grow .gl b{color:var(--ink);font-weight:600}
.grow .track{height:8px}
.grow .ceil{position:absolute;right:0;top:-3px;bottom:-3px;width:2px;background:var(--bad);opacity:.6;border-radius:2px}
.dist{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;margin:8px 0 4px}
.dist span{display:block}
.impact .note{font-size:13px}
/* Run now is a secondary action; the page's one filled button is its main action */
.runbtn{background:var(--card);color:var(--ink);border:1px solid var(--line-2)}
.runbtn:hover{background:var(--accent-tint);border-color:var(--accent-line)}
.tabs .approve{margin-left:8px;padding:7px 14px;font-size:14px}
.lens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.lens .card{padding:14px 16px;background:var(--bg);box-shadow:none}
.lens h4{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lens .big{font-size:24px;margin-top:6px}
.chip.src{white-space:nowrap}
.kpis.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){.typecards,.lens{grid-template-columns:1fr}.kpis.five{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- feed health ---------- */
.finding{display:grid;grid-template-columns:36px minmax(0,1fr) 150px;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.finding:last-child{border-bottom:none}
.finding.clear{opacity:.7}
.finding .ic{width:36px;height:36px;border-radius:10px;background:var(--bg);color:var(--mut);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.finding .ic.watch{background:var(--warn-tint);color:var(--warn-ink)}
.finding .ic.ok{background:var(--ok-tint);color:var(--ok-ink)}
.finding b{display:block;font-size:15.5px;font-weight:500}
.finding>span>span{font-size:14px;color:var(--mut);display:block;margin-top:3px}
.finding .tr{display:inline;font-size:13px;color:var(--ink);font-weight:500}
.finding .rt{text-align:right;font-size:14px}
.finding .rt a{font-weight:500;display:inline-block;margin-top:6px}
.ads{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:12px}
.ads .stat{background:var(--bg);border-radius:10px;padding:12px 14px}
.ads .stat .big{font-size:20px}
.ads .stat .cmp{font-size:12.5px;color:var(--ghost);margin-top:4px}
@media(max-width:1100px){.ads{grid-template-columns:repeat(2,minmax(0,1fr))}.finding{grid-template-columns:36px minmax(0,1fr)}.finding .rt{text-align:left}}

/* ---------- runs card, policy banner ---------- */
.runs{display:flex;align-items:flex-end;gap:6px;height:84px}
.runs .r{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.runs .bar{width:100%;max-width:26px;background:var(--accent);border-radius:4px 4px 0 0;transform-origin:bottom}
.runs .bar.nopush{background:var(--line-2)}
.runs .g{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.runs .g.bad{background:var(--bad)}
.runs-x{display:flex;gap:6px;margin-top:4px}
.runs-x span{flex:1;text-align:center;font-size:10.5px;color:var(--ghost);font-weight:500;white-space:nowrap}
.runrow{display:grid;grid-template-columns:12px 108px minmax(0,1fr) auto 44px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--mut)}
.runrow:last-child{border-bottom:none}
.runrow b{color:var(--ink);font-family:var(--mono);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.runrow .st{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.runrow .st.bad{background:var(--bad)}
.runrow .dim{color:var(--ghost);text-align:right;font-variant-numeric:tabular-nums}
.policy{border-radius:10px;padding:11px 14px;font-size:14.5px;margin-bottom:14px;font-weight:500}
.policy.ok{background:var(--ok-tint);color:var(--ok-ink)}
.policy.warn{background:var(--warn-tint);color:var(--warn-ink)}

/* ---------- readiness: what happens next ---------- */
.ready{margin-top:16px;background:var(--bg);border-radius:12px;padding:14px 16px}
.ready .rh{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.ready .rh b{font-weight:600}
.ready .rhead{font-size:15px;font-weight:500;margin-top:6px}
.rsteps{list-style:none;display:grid;gap:8px;margin-top:10px}
.rsteps li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.rsteps li>span>b{display:block;font-weight:500}
.rsteps li>span>span{font-size:13px;color:var(--mut)}
.rs{font-style:normal;flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:1px}
.rs.ok{background:var(--ok-tint);color:var(--ok-ink)}
.rs.pend{border:1.5px dashed var(--line-2);background:var(--card)}
.rs.wait{background:var(--warn-tint);color:var(--warn-ink)}
.rs.bad{background:var(--bad);color:#fff}
.ready.compact{margin-top:0}
.ready .note{margin-top:10px;font-size:13px}

/* readiness as a horizontal stepper */
.rsteps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin-top:14px;position:relative}
.rsteps li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0 12px 0 0;position:relative}
.rsteps li::before{content:"";position:absolute;top:10px;left:22px;right:0;height:2px;background:var(--line-2)}
.rsteps li:last-child::before{display:none}
.rsteps li>span{padding-right:6px}
.rs{position:relative;z-index:1;background:var(--card)}
.rs.pend{background:var(--card)}
.ready.compact .rsteps li>span>span{font-size:12px}
@media(max-width:900px){.rsteps{grid-auto-flow:row;grid-auto-columns:auto}.rsteps li{flex-direction:row}.rsteps li::before{display:none}}
.held{margin-top:16px;background:var(--warn-tint);border-radius:12px;padding:14px 16px}
.held .head h2{font-size:16px}
.card.held{background:var(--card);border:1.5px solid var(--warn)}

/* signed-in identity and the viewer role */
.side .foot .who{color:var(--mut);margin-bottom:6px;font-size:12.5px}
.side .foot .who b{font-weight:600;color:var(--ink)}
body.viewer .approve,body.viewer .runbtn,body.viewer #addBtn,body.viewer #addBtn2,body.viewer #resetDemo,body.viewer #clearBtn,
body.viewer [data-edit],body.viewer [data-end],body.viewer [data-archive],body.viewer [data-unarchive],body.viewer [data-hold],body.viewer #dockBtn{display:none !important}

/* ---------- brand: the wave where things are happening ---------- */
.loader{display:inline-flex;align-items:center;gap:10px;color:var(--mut);font-size:14px;font-weight:400}
.loader svg{width:40px;height:20px;overflow:visible;flex:0 0 auto;display:block}
.loader.block{display:flex;justify-content:center;padding:26px 0}
.loader.wait{opacity:0;animation:appear var(--t-state) var(--ease) 220ms forwards}
.progress{display:block;height:8px;border-radius:4px;background:var(--band);overflow:hidden;width:180px}
.progress i{display:block;height:100%;border-radius:4px;background:var(--wave);width:0;transition:width var(--t-layout) linear}
.cockpit .running{display:flex;align-items:center;gap:14px;padding:2px 4px}
.cockpit .running .s{font-variant-numeric:tabular-nums}
.cockpit .cell.act{min-width:0}
.dq-mark{overflow:visible}
.emptyq{position:relative;overflow:hidden;padding:26px 24px;text-align:left;border-radius:10px;background:var(--bg)}
.emptyq .q{position:absolute;right:-18px;bottom:-34px;font-size:150px;line-height:1;pointer-events:none;color:var(--accent-tint)}
.emptyq b{display:block;font-size:15px;font-weight:500;position:relative}
.emptyq span{display:block;font-size:13px;color:var(--mut);position:relative;margin-top:2px}
.emptyq .approve.sm{position:relative;display:inline-block;margin-top:12px;padding:7px 14px;font-size:14px;color:#fff;text-decoration:none}
.card.empty .q{position:absolute;right:-24px;bottom:-40px;font-size:220px;line-height:1;pointer-events:none;color:var(--accent-tint)}
.card.empty > *{position:relative}

/* arrivals: fluid rises 4 px and fades, brand fades; both stagger 40 ms per item */
.in{animation:rise var(--t-layout) var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
[data-motion="brand"] .in{animation-name:appear}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes appear{from{opacity:0}to{opacity:1}}
.xf{transition:opacity 180ms var(--ease)}
.xf.out{opacity:0}
/* fills and bars grow into place; the gradient rule fills left to right */
.track .fill,.dist span,.stackbar span,.grow .fill{animation:fillin 600ms var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes fillin{from{width:0}}
.runs .bar{animation:growup 600ms var(--ease) both;animation-delay:calc(var(--i,0) * 30ms)}
@keyframes growup{from{transform:scaleY(0)}}
[data-motion="brand"] .runs .bar{animation-name:appear}   /* brand mode: fills still grow (the book's progress rule), bars fade */
.chart .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:drawin 1200ms var(--ease) forwards}
@keyframes drawin{to{stroke-dashoffset:0}}
.chart .rise{transform-box:fill-box;transform-origin:bottom;animation:growup 600ms var(--ease) both;animation-delay:calc(var(--i,0) * 12ms)}
.chart .fade{animation:appear 600ms var(--ease) both;animation-delay:calc(var(--i,0) * 12ms)}
[data-motion="brand"] .chart .rise{animation-name:appear}
@media(prefers-reduced-motion:reduce){
  .in,.track .fill,.dist span,.stackbar span,.runs .bar,.chart .draw,.chart .rise,.chart .fade,.loader.wait{animation:none}
  .chart .draw{stroke-dashoffset:0}
  .xf,.progress i{transition:none}
}
.busy{opacity:.55;transition:opacity var(--t-state) var(--ease)}
.chart .risedn{transform-box:fill-box;transform-origin:top;animation:growup 600ms var(--ease) both;animation-delay:calc(var(--i,0) * 12ms)}
[data-motion="brand"] .chart .risedn{animation-name:appear}
.spark .draw{animation-duration:800ms}
@media(prefers-reduced-motion:reduce){.chart .risedn{animation:none}.busy{opacity:1}}

/* ---------- skeletons: placeholders in the shape of the content, shimmering until data lands ---------- */
.skel{display:grid;gap:10px;padding:2px 0}
.skel.wait{opacity:0;animation:appear var(--t-state) var(--ease) 220ms forwards}
.skel i,.skel b{display:block;border-radius:6px;background:linear-gradient(90deg,var(--band) 0%,var(--line-2) 40%,var(--band) 80%);background-size:220% 100%;animation:shimmer 1.4s linear infinite;height:11px}
.skel .r{display:grid;grid-template-columns:40px minmax(0,1fr) 72px;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.skel .r:last-child{border-bottom:none}
.skel .r>i:first-child{width:40px;height:40px;border-radius:10px}
.skel .r .l{display:grid;gap:8px}
.skel .r>i:last-child{height:13px}
.skel .g{display:grid;grid-template-columns:24px minmax(0,1fr) 16px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.skel .g:last-child{border-bottom:none}
.skel .g i:first-child{width:24px;height:24px;border-radius:50%}
.skel .g i:last-child{height:10px}
.skel .ln{height:12px}
.skel .k{display:grid;gap:9px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px}
.skel .k b{height:26px;width:48%}
.skel .k i{width:72%}
.skel .kk{display:grid;gap:14px}
.skel .sp{height:6px}
.skel .ch{height:200px;border-radius:var(--r)}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-100% 0}}
/* strip cells and gate dots shimmer while a run is in flight */
.shim{color:transparent !important;border-radius:6px;background:linear-gradient(90deg,var(--band) 0%,var(--line-2) 40%,var(--band) 80%);background-size:220% 100%;animation:shimmer 1.4s linear infinite;min-width:48px}
.shim *{visibility:hidden}
.gate.pending .dot{background:linear-gradient(90deg,var(--band) 0%,var(--line-2) 40%,var(--band) 80%);background-size:220% 100%;animation:shimmer 1.4s linear infinite;border:none}
/* brand mode: lines fade in instead of drawing */
[data-motion="brand"] .chart .draw{stroke-dasharray:none;stroke-dashoffset:0;animation:appear 600ms var(--ease) both}
@media(prefers-reduced-motion:reduce){.skel i,.skel b,.shim,.gate.pending .dot{animation:none}.skel.wait{animation:none;opacity:1}}

/* ---------- dashboard: tiles, widget grid, the flow, customize ---------- */
.dash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.dash .wg.span2{grid-column:1/-1}
.dash .wg.bare{padding:0;background:none;box-shadow:none}
.dash .card .head{margin-bottom:10px}
.dash .head .hr a{font-size:14px;color:var(--mut)}
.dash .head .hr a:hover{color:var(--accent-mid)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tile{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px 14px;display:flex;flex-direction:column;gap:6px;min-height:132px}
.tile .k{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ghost)}
.tile .big{font-size:28px;margin-top:2px}
.tile .line{font-size:13.5px;color:var(--mut);line-height:1.45}
.tile .line a{color:var(--ink);font-weight:500}
.tile .line a:hover{color:var(--accent-mid);text-decoration:none}
.tile.attention{box-shadow:var(--shadow),inset 0 0 0 1.5px var(--warn)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:4px}
.trio>div b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.trio>div span{display:block;font-size:12.5px;color:var(--mut);margin-top:2px}
.trio.wide{margin-bottom:6px}
.trio b.ok-ink{color:var(--ok-ink)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.flowcap{margin-bottom:8px;max-width:90ch}
.flowwrap{margin:0 -6px}
.chart.flow{width:100%;height:auto;display:block}
.chart.flow text{font-family:var(--sans)}
.seg{margin-left:0}
.seg button{padding:5px 12px;font-size:13px}
.dash .prow{padding:11px 0}
.dash a.prow{text-decoration:none;color:inherit}
.dash a.prow:hover .tt b{color:var(--accent-mid)}
.dash a.gate{text-decoration:none}
.gate.wait .dot{background:var(--warn-tint);color:var(--warn-ink)}
.crows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.crow{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:12px;padding:13px 16px;font-size:15.5px;font-weight:500;cursor:grab}
.crow .handle{color:var(--ghost);font-size:14px;letter-spacing:-3px;user-select:none}
.crow .nm{flex:1}
.crow.dragging{opacity:.45}
.crow .switch{margin-left:auto}
@media(max-width:1100px){.dash{grid-template-columns:1fr}.tiles{grid-template-columns:1fr}.crows{grid-template-columns:1fr}}

/* ---------- the catalog map ---------- */
.lenses{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lens-chip{font:inherit;font-size:13px;font-weight:500;color:var(--mut);background:var(--card);border:1px solid var(--line-2);border-radius:999px;padding:4px 11px;cursor:pointer}
.lens-chip:hover{color:var(--ink);border-color:var(--accent-line)}
.lens-chip.on{background:var(--accent-tint);color:var(--accent-deep);border-color:var(--accent-line)}
.mapcap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.mapcap .crumbs{font-size:14px;color:var(--mut)}
.mapcap .crumbs a{color:var(--accent-mid);cursor:pointer}
.mapcap .crumbs b{color:var(--ink);font-weight:600}
.mapwrap{position:relative}
.chart.map{width:100%;height:auto;display:block;border-radius:10px;overflow:hidden}
.chart.map text{font-family:var(--sans);pointer-events:none}
.chart.map rect.cell{cursor:pointer;transition:opacity var(--t-state) var(--ease)}
.maplegend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--mut);margin-top:10px}
.maplegend .ramp{display:inline-block;width:110px;height:10px;border-radius:5px;vertical-align:middle;margin:0 6px}
.maplegend .ol{display:inline-block;width:16px;height:10px;border-radius:3px;vertical-align:middle;margin-right:6px;border:2px solid var(--accent)}
.maplegend .ol.pro{border-color:var(--indigo)}
.maplegend .ol.coop{border-color:var(--data-petrol)}
.maplegend .ol.pre{border-style:dashed}
.maplegend .hatch{display:inline-block;width:16px;height:10px;border-radius:3px;vertical-align:middle;margin-right:6px;background:repeating-linear-gradient(135deg,var(--ghost) 0 2px,transparent 2px 5px)}

/* price index: the movers row and the drill table give way before they overflow their card */
.tablewrap{overflow-x:auto}
.tablewrap table.t{min-width:520px}
.mover{grid-template-columns:40px minmax(0,1fr) auto auto 110px}
.mover .was{font-size:12.5px}
@media(max-width:1500px){.mover{grid-template-columns:40px minmax(0,1fr) auto auto}.mover .spark{display:none}}
@media(max-width:1100px){.mover{grid-template-columns:40px minmax(0,1fr) auto}.mover .was{display:none}}
/* the movers and the drill table stack before the table has to clip */
@media(max-width:1500px){.two{grid-template-columns:1fr}}

/* ---------- promo cards: icon tile, name and chips, the window as a rule, a stat block, actions ---------- */
.pcard{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.pcard:last-child{border-bottom:none}
.pcard .pic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pcard .pic svg{width:20px;height:20px}
.pcard .pic.pri{background:var(--accent-tint);color:var(--accent-deep)}
.pcard .pic.pro{background:var(--indigo-tint);color:var(--indigo)}
.pcard .pic.coop{background:var(--data-petrol-tint);color:var(--data-petrol)}
.pcard .coopmeta{display:block;margin-top:2px}
.guard.conflict .cfl{padding:8px 0;border-top:1px solid var(--line)}
.guard.conflict .cfl:first-of-type{border-top:none}
.pcard .pmain{min-width:0;display:grid;gap:5px}
.pcard .pmain b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:16px;font-weight:500}
.pcard .pmain b a{color:var(--ink)}
.pcard .pmain b a:hover{color:var(--accent-mid);text-decoration:none}
.pcard .chips{display:inline-flex;gap:6px;flex-wrap:wrap}
.pcard .m{font-size:13.5px;color:var(--mut);margin:0}
.pprog{display:flex;align-items:center;gap:10px;margin-top:3px}
.pprog .progress{width:180px;height:6px;flex:0 0 auto}
.pprog .mono{font-size:12px;color:var(--ghost)}
.pstats{display:flex;gap:24px;padding:0 4px}
.pstats>div{display:grid;gap:1px;text-align:right}
.pstats b{font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;line-height:1.2}
.pstats span{font-size:12px;color:var(--mut);white-space:nowrap}
.pcard .acts{display:flex;gap:6px;flex-wrap:nowrap}
.pcard.washed{opacity:.6}
@media(max-width:1300px){.pcard{grid-template-columns:44px minmax(0,1fr)}.pstats{grid-column:2;justify-content:flex-start}.pstats>div{text-align:left}.pcard .acts{grid-column:2;justify-content:flex-start}}

/* brand typeahead under an input (replaces the native datalist popup) */
.ta{position:relative}
.talist{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--card);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 8px 24px rgba(28,27,24,.12);padding:4px;max-height:260px;overflow:auto}
.tai{padding:8px 10px;border-radius:7px;font-size:14.5px;cursor:pointer;color:var(--ink)}
.tai b{font-weight:600;color:var(--accent-deep)}
.tai.on,.tai:hover{background:var(--accent-tint)}