/* BLOOM10X tokens — 04_Brand_Kit/DESIGN.md (measured 2026-09-21) */
:root {
  --ink: #16231b;
  --ink-muted: #16231b99;
  --hairline: #16231b29;
  --canvas: #f9f5eb;
  --surface: #ece7d9;
  --white: #fffdfa;
  --error: #ff5353;
  --error-surface: #ffdede;
  --good: #2f6b45;
  --good-surface: #dcebdf;
  --radius: 8px;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 14px/1.45 var(--sans); letter-spacing: -0.01em; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

.eyebrow { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: 40px; line-height: 1; }
h2 { font-size: 26px; line-height: 1.05; }

.btn { border: 1px solid var(--ink); background: var(--ink); color: var(--canvas); border-radius: var(--radius); padding: 9px 14px; cursor: pointer; font-weight: 500; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn:disabled { opacity: 0.5; cursor: progress; }
input, select, textarea { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 9px 11px; width: 100%; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { width: min(360px, 100%); display: grid; gap: 14px; }
.login .err { color: var(--error); min-height: 1.4em; }
.wordmark { font: 900 22px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.04em; }

/* Shell */
header.top { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--hairline); position: sticky; top: 0; background: var(--canvas); z-index: 5; flex-wrap: wrap; }
header.top .spacer { flex: 1; }
header.top .meta { color: var(--ink-muted); font-size: 12px; }
main { padding: 24px; max-width: 1480px; margin: 0 auto; }

/* Picker */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 20px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 18px; text-decoration: none; display: grid; gap: 10px; border: 1px solid transparent; }
.card:hover { border-color: var(--ink); }
.card .name { font: 400 24px/1.05 var(--serif); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--hairline); border-radius: 99px; padding: 4px 7px; }
.chip.off { opacity: 0.45; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin: 18px 0 20px; overflow-x: auto; }
.tabs a { padding: 9px 14px; text-decoration: none; color: var(--ink-muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--ink); border-color: var(--ink); }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 6px; }
.kpi .v { font: 400 30px/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12px; color: var(--ink-muted); }
.bar { height: 4px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ink); }

/* Tables */
.split { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
.tablewrap { overflow: auto; border: 1px solid var(--hairline); border-radius: var(--radius); max-height: 72vh; background: var(--white); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--hairline); }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: inherit; }
thead th { position: sticky; top: 0; background: var(--surface); font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; z-index: 2; }
thead tr.group th { top: 0; text-align: center; border-left: 1px solid var(--hairline); }
thead tr.cols th { top: 29px; }
thead tr.cols th:first-child, thead tr.group th:first-child { z-index: 3; }
tbody tr { background: var(--white); }
tbody tr:hover { background: var(--canvas); }
tr.total td { font-weight: 600; background: var(--surface); }
td.gstart, th.gstart { border-left: 1px solid var(--hairline); }
td.muted { color: var(--ink-muted); }
td.future { color: #16231b40; }

.panel { background: var(--surface); border-radius: var(--radius); padding: 6px 16px; }
.panel dl { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.panel dt, .panel dd { padding: 8px 0; border-bottom: 1px solid var(--hairline); margin: 0; }
.panel dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.panel dt.sec { grid-column: 1 / -1; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); padding-top: 16px; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar select { width: auto; }
.pill { font: 500 11px/1 var(--mono); text-transform: uppercase; padding: 5px 8px; border-radius: 4px; letter-spacing: 0.05em; }
.pill.alert { background: var(--error-surface); color: #a3121b; }
.pill.ok { background: var(--good-surface); color: var(--good); }
.empty { background: var(--surface); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--ink-muted); }

.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.form label { display: grid; gap: 6px; }
.form label.wide { grid-column: 1 / -1; }
td input { width: 110px; padding: 5px 8px; text-align: right; }
.toast { position: fixed; bottom: 18px; right: 18px; background: var(--ink); color: var(--canvas); padding: 10px 14px; border-radius: var(--radius); max-width: 420px; }

@media (max-width: 640px) {
  header.top, main { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 32px; }
}

thead.single tr.cols th { top: 0; }

/* Source toggles */
.toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 7px 10px; background: var(--white); cursor: pointer; user-select: none; }
.toggle input { width: auto; margin: 0; accent-color: var(--ink); }

/* Chart — palette validated with dataviz validate_palette.js (light, surface #fffdfa): all checks PASS */
:root { --c-spend: #c98a2e; --c-rev: #1f8a5c; }
.chart { position: relative; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 14px 4px; margin-bottom: 18px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .ax { font: 500 10px var(--mono); fill: var(--ink-muted); }
.chart .hit { fill: transparent; }
.chart .hit.on { fill: #16231b0d; }
.chart .legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-muted); margin-bottom: 4px; }
.chart .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.chart .legend i.ln { height: 2px; width: 14px; vertical-align: 3px; }
.chart .tip { position: absolute; top: 34px; background: var(--ink); color: var(--canvas); font-size: 12px; padding: 8px 10px; border-radius: 6px; pointer-events: none; line-height: 1.5; min-width: 150px; }
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.chart-head .legend { margin: 0; flex-wrap: wrap; }
.chart-head .cap { color: var(--ink-muted); font: 500 10px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.chart.collapsed { padding: 8px 14px; }
.btn.sm { padding: 5px 10px; font-size: 12px; }

/* Profit model (Goals & P&L) */
.pm-note { color: var(--ink-muted); font-size: 12.5px; margin: 0 0 12px; max-width: 900px; }
.pm-inline { display: grid; gap: 4px; font-size: 12px; color: var(--ink-muted); }
.pm-inline select, .pm-inline input { width: auto; min-width: 120px; }
.pm-table td input, .pm-table th input { width: 110px; padding: 5px 8px; text-align: right; }
.pm-table th input { width: 70px; margin-left: 6px; }
.pm-table tr.pm-sec td { background: var(--surface); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); text-align: left; }
.pm-save { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin-top: 14px; }
.kpi .pm-inline input { width: 100%; }
/* Trend lines: bar-series trend drawn darker than the bars so it reads on top of them */
:root { --c-spend-trend: #8a5a14; }
.chart .legend i.dash { width: 16px; height: 0; border-top: 2px dashed var(--ink-muted); background: none; vertical-align: 3px; }

/* Analytics (Shopify-style) */
.an-head { margin: -4px 0 12px; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.an-kpi, .an-card { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 14px; position: relative; min-width: 0; }
.an-kpi h3, .an-card h3 { font: 600 13px/1.3 var(--sans); margin: 0 0 6px; text-decoration: underline dotted var(--hairline); text-underline-offset: 3px; }
.an-kpi .kv { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.an-kpi .v { font: 400 24px/1.1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.an-kpi .spark { width: 100%; height: 28px; margin-top: 6px; display: block; }
.dpill { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.dpill.good { color: var(--good); } .dpill.bad { color: #a3121b; }
.an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.an-card.wide { grid-column: span 2; } .an-card.full { grid-column: 1 / -1; }
@media (max-width: 1100px) { .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .an-grid { grid-template-columns: 1fr; } .an-card.wide { grid-column: auto; } }
.bigv { font: 400 26px/1.1 var(--serif); letter-spacing: -0.02em; margin-bottom: 6px; display: flex; gap: 8px; align-items: baseline; }
.an-line { position: relative; } .an-line svg { width: 100%; height: auto; display: block; }
.an-line .ax, .donut .ax { font: 500 10px var(--mono); fill: var(--ink-muted); }
.an-line .hit { fill: transparent; } .an-line .hit.on { fill: #16231b0d; }
.an-line .tip, .an-card .tip { position: absolute; top: 4px; background: var(--ink); color: var(--canvas); font-size: 12px; padding: 7px 9px; border-radius: 6px; pointer-events: none; line-height: 1.5; min-width: 150px; z-index: 3; }
.an-legend { display: flex; gap: 14px; justify-content: center; font-size: 11px; color: var(--ink-muted); margin-top: 4px; }
.an-legend i { display: inline-block; width: 12px; height: 2px; margin-right: 5px; vertical-align: 3px; }
.an-legend i.dash { border-top: 2px dashed #16231b59; height: 0; background: none; }
.an-table { width: 100%; } .an-table td { padding: 6px 4px; border-bottom: 1px solid var(--hairline); }
.an-table td:first-child { position: static; text-align: left; } .an-table td:last-child { width: 64px; }
.donut { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .donut svg { width: 150px; flex: none; }
.donut .dv { font: 400 18px var(--serif); fill: var(--ink); }
.dlegend { display: grid; gap: 6px; flex: 1; min-width: 150px; font-size: 12.5px; }
.dlegend div { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; }
.dlegend i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.hbars { display: grid; gap: 10px; }
.hb .hl { font-size: 12px; color: var(--ink-muted); margin-bottom: 3px; }
.hb .hr { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 2px; }
.hb .hr i { display: block; height: 12px; border-radius: 0 4px 4px 0; min-width: 2px; }
.hb .hr.prev i { background: #16231b26; height: 8px; } .hb .hr.prev span { color: var(--ink-muted); }
.funnel { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.funnel .fh { padding: 4px 8px 8px; display: grid; gap: 2px; } .funnel .fh b { font: 400 20px var(--serif); } .funnel .fh .s { font-size: 12px; color: var(--ink-muted); }
.funnel .fb { height: 140px; display: flex; align-items: flex-end; background: var(--canvas); border-radius: 4px; }
.funnel .fb i { display: block; width: 100%; background: #2a78d6; border-radius: 4px 4px 0 0; }
.an-perf td, .an-perf th { font-size: 12.5px; } .an-perf .sub { line-height: 1; }
.an-perf i.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

.an-grid { grid-auto-flow: dense; align-items: start; }

/* Targets, custom KPI cards (Analytics) */
.an-sec { margin-bottom: 14px; }
.an-sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.an-sec-head h2 { font-size: 22px; display: flex; gap: 10px; align-items: baseline; }
.an-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.an-target { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 14px; position: relative; display: grid; gap: 4px; }
.an-target .v { font: 400 24px/1.1 var(--serif); }
.an-target .s { font-size: 12px; color: var(--ink-muted); }
.an-target .bar { height: 6px; background: var(--hairline); border-radius: 3px; overflow: hidden; margin: 4px 0; }
.an-target .bar i { display: block; height: 100%; background: var(--ink); }
.an-target .bar i.good { background: var(--good); } .an-target .bar i.warn { background: #c9810a; } .an-target .bar i.bad { background: #a3121b; }
.pill.warn { background: #fdf3e3; color: #8a5a07; } .pill.neutral { background: var(--surface); color: var(--ink-muted); }
.an-tg-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.an-tg-form input, .an-tg-form select { width: auto; }
.an-kpi .x, .an-target .x { position: absolute; top: 6px; right: 8px; border: none; background: none; color: #16231b40; cursor: pointer; font-size: 13px; }
.an-kpi .x:hover, .an-target .x:hover { color: #a3121b; }
.an-kpi .kpi-pick { border: none; background: none; padding: 0 18px 0 0; width: auto; max-width: 100%; font: 600 13px/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.an-add { border-style: dashed; color: var(--ink-muted); cursor: pointer; font: 500 13px var(--sans); min-height: 90px; }
.an-add:hover { color: var(--ink); border-color: var(--ink); }

/* Top Ads */
.ta td { vertical-align: middle; }
.ta-ad { display: flex; align-items: center; gap: 10px; min-width: 320px; max-width: 460px; white-space: normal; }
.ta-ad img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; background: var(--surface); }
.ta-ad .rank { color: var(--ink-muted); width: 16px; flex: none; font-variant-numeric: tabular-nums; }
.ta-name { font-weight: 600; font-size: 12.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ta-ad > div { min-width: 0; } .ta-sub { overflow-wrap: anywhere; } /* underscore-joined ad names have no spaces to wrap at */
.ta-name a { text-decoration: none; } .ta-name a:hover { text-decoration: underline; }
.ta-sub { font-size: 11px; color: var(--ink-muted); }

/* KPI card header: short label + caret; the native select sits invisibly on top so the title is the picker */
.an-kpi { padding-right: 14px; }
.kpi-head { position: relative; display: flex; align-items: center; gap: 4px; margin-right: 22px; min-width: 0; }
.kpi-lbl { font: 600 13px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-head .caret { font-size: 10px; color: var(--ink-muted); flex: none; }
.an-kpi .kpi-pick { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; padding: 0; }
/* ✕ only on hover/focus, clear of the caret */
.an-kpi .x, .an-target .x { top: 8px; right: 8px; opacity: 0; transition: opacity .12s; }
.an-kpi:hover .x, .an-kpi:focus-within .x, .an-target:hover .x, .an-target:focus-within .x { opacity: 1; }
@media (hover: none) { .an-kpi .x, .an-target .x { opacity: 1; } }
/* empty targets note spans the row */
.an-targets .an-empty { grid-column: 1 / -1; max-width: 720px; }
/* compact, aligned target form */
.an-tg-form input, .an-tg-form select { height: 34px; padding: 5px 10px; font-size: 13px; }
.an-tg-form input[name=label] { width: 180px; } .an-tg-form input[name=value] { width: 130px; } .an-tg-form select { width: 220px; }
.an-tg-form .btn { height: 34px; padding: 0 12px; }

/* Anomalies */
.an-snap { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }
.an-snap .an-kpi .v { font-size: 20px; }
.an-legend-row { display: flex; gap: 14px; font-size: 11.5px; color: var(--ink-muted); margin: 0 0 10px; flex-wrap: wrap; }
.an-legend-row i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.an-legend-row i.flagsw { box-shadow: inset 0 0 0 2px var(--ink); }
.an-good1 { background: #e9f3eb; } .an-good2 { background: #cfe6d5; }
.an-bad1 { background: #fdeceb; } .an-bad2 { background: #f8d4d2; }
.an-amber1 { background: #fdf6e7; } .an-amber2 { background: #f7e6c2; }
.an-matrix td, .an-matrix th { text-align: center; }
.an-matrix td:first-child, .an-matrix th:first-child { text-align: left; }
.an-matrix .hint { display: block; font-size: 10.5px; color: var(--ink-muted); font-weight: 400; }
.an-matrix .na { color: #16231b40; }
.acell { display: grid; gap: 1px; justify-items: center; border-radius: 6px; padding: 5px 4px; min-width: 104px; }
.acell .pct { font-weight: 700; font-size: 13px; }
.acell .vals { font-size: 10.5px; color: var(--ink-muted); white-space: nowrap; }
.acell .why { font-size: 9.5px; font-weight: 600; opacity: 0; }
.acell.flag { box-shadow: inset 0 0 0 2px var(--ink); }
.an-good1 .pct, .an-good2 .pct { color: var(--good); } .an-bad1 .pct, .an-bad2 .pct { color: #a3121b; }
td.clickable { cursor: pointer; } td.clickable:hover .acell { box-shadow: inset 0 0 0 2px #2a78d6; } td.clickable:hover .why { opacity: 1; }
.an-flags { display: grid; gap: 6px; }
.an-flag { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--hairline); border-radius: 7px; padding: 7px 10px; font: 13px var(--sans); cursor: pointer; background: var(--white); }
.an-flag.bad { background: #fdeceb; border-color: #f3c8c5; color: #7e1119; } .an-flag.good { background: #e9f3eb; border-color: #c4dfcb; color: #1d5a33; } .an-flag.neutral { background: #fdf6e7; border-color: #efdcae; color: #6e4a07; }
.an-flag .fv { font-size: 11.5px; opacity: .8; white-space: nowrap; }
.drill-overlay { position: fixed; inset: 0; background: #16231b73; display: flex; align-items: flex-start; justify-content: center; z-index: 50; padding: 24px 16px; overflow-y: auto; }
.drill-overlay[hidden] { display: none; }
.drill { background: var(--white); border-radius: 12px; width: 100%; max-width: 960px; overflow: hidden; }
.drill-head { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-bottom: 1px solid var(--hairline); }
.drill-head h2 { font-size: 24px; } .drill-head .meta { font-size: 12px; color: var(--ink-muted); }
.drill-head .chg { margin-left: auto; font: 400 28px var(--serif); } .drill-head .chg.good { color: var(--good); } .drill-head .chg.bad { color: #a3121b; }
.drill-close { border: none; background: var(--surface); border-radius: 7px; width: 30px; height: 30px; font-size: 18px; cursor: pointer; }
.drill-body { padding: 16px 18px 20px; } .drill-body h3 { font: 600 13px var(--sans); margin: 0 0 6px; }
.narr { background: var(--surface); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; font-size: 13px; }
.an-movers { font-size: 12px; } .an-movers td.nm { white-space: normal; max-width: 340px; } .an-movers .muted { color: var(--ink-muted); }
.drill-body textarea { width: 100%; height: 190px; font: 12px/1.5 ui-monospace, Menlo, monospace; background: var(--canvas); }

/* Breakdown table: stay inside the card (global th/td nowrap + sticky first column forced overflow) */
.an-card { overflow: hidden; }
.an-table { table-layout: fixed; width: 100%; min-width: 0; }
.an-table td { white-space: normal; font-size: 13px; }
.an-table td:first-child { position: static; background: none; word-break: break-word; }
.an-table td:nth-child(2) { width: 38%; text-align: right; white-space: nowrap; }
.an-table td:last-child { width: 58px; text-align: right; white-space: nowrap; }
.an-table .sub { display: block; font-size: 11px; color: var(--ink-muted); }
.an-table tr { background: none; }

/* Tracker: keep the "Month to date" summary row visible while the daily rows scroll */
.tablewrap tr.total td { position: sticky; bottom: 0; z-index: 2; background: var(--surface); box-shadow: 0 -1px 0 var(--hairline); }
.tablewrap tr.total td:first-child { left: 0; z-index: 3; }

/* Solid sticky header: pin the whole <thead> as one block (no per-row top offsets → no gap), opaque cells */
.tablewrap thead { position: sticky; top: 0; z-index: 4; background: var(--surface); }
.tablewrap thead th, .tablewrap thead tr.group th, .tablewrap thead tr.cols th { position: static; top: auto; background: var(--surface); }
.tablewrap thead th:first-child { position: sticky; left: 0; z-index: 5; background: var(--surface); }
.tablewrap thead tr.group th { border-bottom: 1px solid var(--hairline); }

/* Projections */
.projbar { opacity: .35; stroke: var(--c-spend-trend); stroke-dasharray: 3 2; stroke-width: 1; }
.projband { fill: var(--c-rev); opacity: .12; }
.todayline { stroke: var(--ink-muted); stroke-dasharray: 2 3; stroke-width: 1; }
.legend i.ln.proj, .an-legend i.ln.proj, i.ln.proj { display: inline-block; width: 16px; height: 0; border-top: 2px dotted var(--c-rev); background: none; vertical-align: 3px; margin-right: 5px; }
.linkbtn { border: none; background: none; padding: 0; color: #2a78d6; font: 500 11.5px var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.toggle.sm { padding: 4px 8px; font-size: 12px; }
.pj-form .form { margin-bottom: 8px; }
.pj-doc p { margin: 0 0 8px; } .pj-doc { max-width: 900px; font-size: 13px; }
.an-movers td.best { background: #e9f3eb; font-weight: 600; }

/* Annotations */
.ann rect, .ann line { pointer-events: none; }
.ann circle { cursor: pointer; }
.ann .annic { font-size: 7px; pointer-events: none; }
.ann-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ann-form input, .ann-form select { width: auto; height: 34px; padding: 5px 10px; font-size: 13px; }
.ann-form input[name=title] { min-width: 240px; flex: 1; } .ann-form input.wide { min-width: 280px; flex: 2; }
.ann-form label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); }
.anntag { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; }
.ann-t td { vertical-align: middle; }

/* Deep Dives */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 14px; }
.subtabs button { border: 1px solid var(--hairline); background: var(--white); color: var(--ink-muted); border-radius: 999px; padding: 6px 12px; font: 500 12.5px var(--sans); cursor: pointer; }
.subtabs button.on { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.dd-t td, .dd-t th { text-align: right; } .dd-t td:first-child, .dd-t th:first-child, .dd-t td.nm { text-align: left; }
.dd-t td.worst { background: #fbeaea; font-weight: 600; }
.dd-t td.lown { color: var(--ink-muted); opacity: .6; }
.dd-t .hint { display: block; font: 400 10.5px var(--sans); color: var(--ink-muted); }
.dd-notes { min-width: 220px; max-width: 360px; } .dd-note { margin-bottom: 3px; font-size: 12px; }
.chipbtn { border: 1px solid var(--hairline); background: var(--white); border-radius: 999px; padding: 4px 10px; font: 500 12px var(--sans); color: var(--ink-muted); cursor: pointer; }
.chipbtn.on { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.dd-t tr.sub td { background: var(--surface); }
.dd-heat td, .dd-heat th { text-align: center !important; min-width: 110px; } .dd-heat td:first-child, .dd-heat th:first-child { text-align: left !important; }
.subtabs.sm { margin: 0 0 10px; } .subtabs.sm button { padding: 4px 10px; font-size: 12px; }
.map-card { padding: 8px; } .geo-map { position: relative; min-height: 340px; cursor: grab; }
.map-card .tip { position: absolute; }
.map-legend { display: flex; align-items: center; gap: 8px; font: 500 11px var(--mono); color: var(--ink-muted); padding: 6px 4px 2px; }
.map-legend i { display: inline-block; width: 160px; height: 10px; border-radius: 3px; }
.globe-tip { background: var(--ink); color: var(--canvas); font: 12px/1.5 var(--sans); padding: 7px 9px; border-radius: 6px; }
.sitelink { font: 400 18px var(--sans); margin-left: 8px; text-decoration: none; color: var(--ink-muted); vertical-align: 6px; }
.sitelink:hover { color: var(--ink); }

/* Benchmarks */
.bm-sec { margin: 18px 0 8px; } .bm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bm-card.is-good { box-shadow: inset 3px 0 0 var(--good); } .bm-card.is-bad { box-shadow: inset 3px 0 0 #a3121b; }
.bm-bar { position: relative; height: 22px; margin: 10px 0 4px; }
.bm-bar i, .bm-key i { position: absolute; display: block; }
.bm-track { left: 0; right: 0; top: 10px; height: 3px; border-radius: 2px; background: var(--hairline); }
.bm-tick { top: 3px; width: 2px; height: 17px; margin-left: -1px; background: var(--ink); }
.bm-me { top: 4px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: #2a78d6; border: 2px solid var(--white); box-shadow: 0 0 0 1px #2a78d6; }
.bm-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--ink-muted); margin-bottom: 6px; }
.bm-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; margin-top: 4px; }
.bm-key span { position: relative; padding-left: 20px; line-height: 22px; } .bm-key i { left: 2px; }
@media (max-width: 1100px) { .bm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .bm-grid { grid-template-columns: 1fr; } }

/* Grouped navigation: groups (underlined) + sub-tabs (pills) */
.tabs.groups { margin-bottom: 10px; } .tabs.groups a { font-weight: 500; }
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.subnav a { padding: 5px 12px; border-radius: 999px; text-decoration: none; color: var(--ink-muted); font-size: 13px; border: 1px solid transparent; }
.subnav a:hover { border-color: var(--hairline); }
.subnav a.on { background: var(--ink); color: var(--canvas); }

/* Customers / P&L */
.coh td, .coh th { min-width: 64px; } .coh td.pay { outline: 2px solid var(--ink); outline-offset: -2px; font-weight: 600; }
.seg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pnl td.ind { padding-left: 22px; color: var(--ink-muted); } .pnl tr.sub td { background: var(--surface); }
.dd-t tr.flagrow td { background: #fbeaea; }
.costs-grid { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; font-size: 13px; } .costs-grid label { display: flex; align-items: center; gap: 6px; }
.digest-preview { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px; background: #fff; }
.sankey { position: relative; min-height: 460px; } .sk-link { cursor: pointer; transition: stroke-opacity .12s; }
.sk-label { font: 500 11.5px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--white); stroke-width: 3px; }
.sk-head { font-weight: 600; }

/* Header client switcher */
.hdr-clients { display: flex; align-items: center; gap: 10px; margin-left: 18px; }
.hdr-clients a.hdr-all { font-size: 13px; color: var(--ink-muted); text-decoration: none; } .hdr-clients a.hdr-all.on, .hdr-clients a.hdr-all:hover { color: var(--ink); text-decoration: underline; }
.hdr-clients select { width: auto; padding: 5px 28px 5px 10px; font-size: 13px; }
/* Brand-logo platform toggles */
.srcgroup { display: inline-flex; gap: 6px; }
.srcbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--white); color: var(--ink); cursor: pointer; padding: 0; }
.srcbtn:not(.on) { color: var(--ink-muted); opacity: .38; background: transparent; border-style: dashed; }
.srcbtn.on { box-shadow: inset 0 -2px 0 var(--ink); }
.bi.mono { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--ink); color: var(--canvas); font: 600 10px var(--sans); }
.chip.logo { display: inline-flex; align-items: center; padding: 4px 6px; color: var(--ink); }
/* Icon buttons (annotations / projections / hide chart) */
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--white); color: var(--ink-muted); cursor: pointer; padding: 0; }
.iconbtn.on { color: var(--ink); border-color: var(--ink); }
.iconbtn:hover { color: var(--ink); }
/* Glossary tooltips */
.gtip { position: fixed; z-index: 1000; max-width: 320px; background: var(--ink); color: var(--canvas); font: 400 12.5px/1.45 var(--sans); padding: 9px 11px; border-radius: 8px; pointer-events: none; }
.gtip b { font-weight: 600; } .gtip code { display: block; margin-top: 6px; font: 500 11px/1.4 var(--mono); color: #cfe3d5; white-space: normal; }
.has-gl { cursor: help; } .has-gl:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
/* Ask panel */
.ask-log { max-height: 55vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.ask-user { align-self: flex-end; background: var(--ink); color: var(--canvas); padding: 8px 12px; border-radius: 12px 12px 2px 12px; max-width: 80%; }
.ask-assistant { background: var(--surface); padding: 10px 12px; border-radius: 12px 12px 12px 2px; max-width: 92%; } .ask-assistant p { margin: 0 0 6px; } .ask-assistant.err { color: #a3121b; } .ask-wait { opacity: .6; }
.budget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1000px) { .budget-grid { grid-template-columns: 1fr; } }
.cm-vars { display: flex; flex-wrap: wrap; gap: 6px; } .copyable { cursor: copy; background: var(--surface); padding: 3px 6px; border-radius: 4px; }
.share-mode #logout, .share-mode #who { display: none; }

/* Reports */
.rep-group { margin: 0 0 18px; } .rep-group h3 { margin: 0 0 8px; }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.rep-card { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--white); padding: 10px 12px; text-decoration: none; color: var(--ink); font-size: 13px; }
.rep-card:hover { border-color: var(--ink); } .rep-card.na { opacity: .5; background: transparent; border-style: dashed; cursor: help; } .rep-card .pill { align-self: flex-start; }
.rep-meta { font: 500 10.5px var(--mono); text-transform: uppercase; color: var(--ink-muted); }
.rep-t th.sortable { cursor: pointer; } .rep-t th.sortable:hover { color: var(--ink); }

/* ---------- Customer intelligence (Insights, Customers, RFM, Segments, Churn & repeat, Dashboards, Builder, Goals) ---------- */
.clickrow { cursor: pointer; } .clickrow:hover td { background: var(--surface); }
.ppl-t td { vertical-align: middle; }
.rfm-dots { display: inline-flex; gap: 2px; vertical-align: middle; }
.rfm-dot { width: 17px; height: 17px; border-radius: 4px; display: inline-grid; place-items: center; font: 500 9px/1 var(--mono); color: var(--ink); background: var(--surface); }
.rfm-dot.s2 { background: #cfe3d6; } .rfm-dot.s3 { background: #8fc1a0; } .rfm-dot.s4 { background: var(--good); color: var(--white); }
.rfm-m td { text-align: center; }
.seg-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.seg-builder { margin-bottom: 12px; }
.seg-rule { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; flex-wrap: wrap; }
.seg-rule select, .seg-rule input { width: auto; min-width: 140px; }
.profile-card { background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; padding: 18px; margin-top: 8px; }
.phead { display: flex; gap: 14px; align-items: flex-start; }
.phead .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--canvas); display: grid; place-items: center; font: 500 18px var(--sans); flex: none; }
.pstats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 16px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.pstat { display: flex; flex-direction: column; gap: 6px; } .pstat b { font-weight: 500; font-size: 15px; }
@media (max-width: 900px) { .pstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.journey { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.journey li { display: flex; gap: 10px; align-items: flex-start; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 10px 12px; }
.jdot { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 500 11px var(--mono); flex: none; }
.pimg { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; background: var(--surface); flex: none; display: inline-block; vertical-align: middle; }
.pimg.big { width: 64px; height: 64px; } .pimg.ph { border: 1px dashed var(--hairline); }
.prow { display: inline-flex; gap: 8px; align-items: center; }
.fbar { height: 6px; background: var(--surface); border-radius: 3px; margin-bottom: 4px; overflow: hidden; } .fbar i { display: block; height: 100%; border-radius: 3px; }
/* follow-up tree */
.fu { display: grid; gap: 14px; }
.fu-root { display: flex; gap: 12px; align-items: center; background: var(--surface); border-radius: var(--radius); padding: 12px; }
.fu-root > div, .fu-node > div { display: flex; flex-direction: column; gap: 4px; }
.fu-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding-left: 18px; border-left: 2px solid var(--hairline); }
.fu-kid { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 10px; }
.fu-node { display: flex; gap: 10px; align-items: center; }
.fu-gkids { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--hairline); display: grid; gap: 6px; }
.fu-g { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; }
/* insights */
.ins-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ins-card { background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ins-card.alert { border-color: #e7b3b3; } .ins-card.good { background: transparent; }
.ins-card h3 { margin: 0; font: 500 15px/1.35 var(--sans); } .ins-card p { margin: 0; color: var(--ink-muted); }
.ins-top { display: flex; justify-content: space-between; align-items: center; }
.ins-impact { font: 400 24px/1 var(--serif); display: inline-flex; flex-direction: column; align-items: flex-end; }
.ins-impact small { font: 500 10px var(--mono); text-transform: uppercase; color: var(--ink-muted); letter-spacing: .05em; margin-top: 3px; }
.ins-card details summary { cursor: pointer; font-size: 12.5px; color: var(--ink-muted); }
.ins-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.ins-mini { padding: 6px 0; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 8px; } .ins-mini .ins-impact { font-size: 16px; }
/* dashboards */
.dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dash-w { background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px; min-width: 0; }
.dash-w.wide { grid-column: span 2; } .dash-w.dragging { opacity: .4; }
.dash-wh { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; } .dash-wh h3 { margin: 0; font: 500 13px var(--sans); }
.dash-w .kv .v { font: 400 30px/1 var(--serif); }
.drag { cursor: grab; color: var(--ink-muted); margin-right: 6px; }
.dash-add { margin-bottom: 12px; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .dash-grid { grid-template-columns: 1fr; } .dash-w.wide { grid-column: auto; } }
/* report builder */
.rb { display: grid; gap: 10px; } .rb-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .rb-row .eyebrow { min-width: 130px; }
.rb-filter { display: inline-flex; gap: 4px; align-items: center; }
/* goal tracker */
.goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .goal-grid { grid-template-columns: 1fr; } }
.goal-card .kv .v { font: 400 30px/1 var(--serif); }
.goal-bar { position: relative; height: 10px; background: var(--surface); border-radius: 5px; margin: 10px 0 8px; }
.goal-bar i { display: block; height: 100%; background: var(--good); border-radius: 5px; }
.goal-bar b { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--ink); }
.dash-w .spark { display: block; width: 100%; height: 36px; margin-top: 8px; }
.goal-card .kv { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* Client picker: every logo chip is the same fixed circle with the same icon size; icon row and "Updated" line sit at the same height on every card */
.picker .card { grid-template-rows: auto auto auto 1fr; align-content: start; }
.picker .card .chips { gap: 4px; flex-wrap: nowrap; }
.picker .card .meta { align-self: end; }
.chip.logo { width: 28px; height: 28px; padding: 0; flex: none; justify-content: center; border-radius: 50%; }
.chip.logo .bi { width: 14px; height: 14px; }
.bi.mono { background: transparent; color: currentColor; border: 1.5px solid currentColor; border-radius: 3px; font: 700 9px/1 var(--sans); box-sizing: border-box; }
.chip.logo[data-tip="Odoo"] .bi { width: 21px; height: 21px; } /* wide wordmark: needs more width to read at the same visual weight */

/* Blueprint decision rules */
.bp-flag { font-size: 12.5px; line-height: 1.35; padding: 4px 8px; border-radius: 6px; margin: 2px 0; background: var(--surface); }
.bp-flag.warn { background: #fdf3e3; color: #6d4704; } .bp-flag.ok { background: var(--good-surface); color: var(--good); } .bp-flag.alert { background: var(--error-surface); color: #8a1016; }
tr.grp td { background: var(--surface); font-size: 12.5px; }
.bp-bars { width: 100%; height: auto; max-height: 220px; }
.bp-verdict { font: 400 30px/1 var(--serif); }
.bp-card { margin-top: 16px; } .bp-card .bp-flag { margin-top: 8px; }
/* Profit → Free Shipping */
.fs-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.fs-wrap { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .fs-wrap { grid-template-columns: 1fr; } }
.fs-left { background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.fs-left h3 { font: 500 13px var(--sans); margin: 14px 0 6px; } .fs-left h3:first-child { margin-top: 0; }
.fs-in { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; font-size: 12.5px; } .fs-in small { color: var(--ink-muted); font-size: 11.5px; line-height: 1.3; }
.fs-pair { display: flex; gap: 6px; } .fs-pair > * { flex: 1; }
.fs-excl { display: grid; gap: 3px; margin: 6px 0; } .fs-excl .toggle, #fs-countries .toggle { font-size: 12.5px; }
.fs-right { display: grid; gap: 12px; min-width: 0; }
.fs-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } @media (max-width: 900px) { .fs-kpis { grid-template-columns: repeat(2, 1fr); } }
.fs-kpis small { color: var(--ink-muted); font-size: 11.5px; }
.fs-big { font: 400 28px/1.1 var(--serif); margin: 4px 0 2px; } .fs-big.pos { color: var(--good); } .fs-big.neg { color: #a3121b; }
.fs-svg { width: 100%; height: auto; }
tr.hl td { background: var(--good-surface); }
.fs-assume ul { margin: 0; padding-left: 18px; font-size: 13px; } .fs-assume li { margin: 2px 0; }

/* Budget Planner (Ads → Budget Planner) */
.bpl-stack { display: grid; grid-template-columns: 60px 1fr 90px; align-items: center; gap: 10px; margin: 8px 0 0; }
.bpl-bar { display: flex; gap: 2px; height: 16px; background: var(--surface); border-radius: 4px; overflow: hidden; }
.bpl-bar i { display: block; height: 100%; border-radius: 4px; }
.bpl-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bpl-pace { display: block; margin-top: 6px; }
.bpl-pace .bpl-hit:hover { fill: rgba(22, 35, 27, .06); }
#bpl-set summary { cursor: pointer; }

/* Setup → Activity log */
.act-src { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; padding: 2px 7px; border-radius: 6px; background: var(--surface); }
.act-t { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted, #6b6b6b); }
.act-who { white-space: nowrap; }
.act-detail { font-size: 12.5px; max-width: 520px; overflow-wrap: anywhere; }

/* Settings → Digests → template */
.dg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.dg-list { list-style: none; margin: 6px 0 0; padding: 0; }
.dg-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--hairline); border-radius: 6px; margin: 0 0 4px; background: var(--white, #fff); }
.dg-list li .linkbtn { padding: 0 4px; }
.dg-text label { display: block; }

/* Privacy mode (header eye button, ⌘/Ctrl+Shift+B): blur client identifiers and customer details for streams / calls */
.privacy .pv, .privacy .pv-t, .privacy #hdr-client { filter: blur(0.5em); user-select: none; } /* em: bigger text gets a bigger blur */
.privacy .pv-t { display: inline-block; }
#privacy-btn.on { background: var(--ink, #16231b); color: var(--cream, #f9f5eb); }

/* Demo clients: story buttons + before/after banner */
.story-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 10px; border: 1px dashed var(--hairline); border-radius: 8px; }
.story-banner { margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; background: var(--good-surface, #e8f2ec); }
.story-banner p { margin: 4px 0 10px; }
.story-kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.story-kpi { display: flex; flex-direction: column; min-width: 120px; padding: 6px 10px; border-radius: 6px; background: var(--white, #fff); }
.story-kpi b { font: 400 22px/1.1 var(--serif); }
.story-kpi .up { color: var(--good); font-weight: 600; } .story-kpi .down { color: #a3121b; font-weight: 600; }