/* ═══════════════════════════════════════════════════════════════════
   case-shell.css — case-specific primitives for acs-data.com cases
   Loads AFTER site.css. Base tokens / header / footer / buttons /
   lang-switch all come from site.css. This file adds:
   extra status tokens · channel-color tokens · mode toggle ·
   article shell · KPI · dashboards · slicers · arch · code · callouts.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* additive status tokens (site.css only ships --ok) */
  --warn:#9a6b15; --warn-soft:#f4ecd6;
  --bad:#b23b2e;  --bad-soft:#f3e0dc;
  /* channel encoding — distinguishable hues that don't fight brand green */
  --mp-c1:#1F6FEB; /* channel 1 (e.g. Shopify) */
  --mp-c2:#E8833A; /* channel 2 (e.g. Amazon)  */
  --mp-c3:#8B5CF6; /* channel 3 (e.g. Etsy)    */
  --mp-c4:#0EA5A5; /* channel 4 (e.g. wholesale) */
}

/* ─── Mode toggle ──────────────────────────────────────────── */
.mode-toggle-float{position:fixed;right:24px;top:78px;z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mode-toggle-float .label{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);letter-spacing:.08em;text-transform:uppercase;background:var(--paper-card);border:var(--b-1);padding:3px 9px;border-radius:99px}
.mode-toggle{display:inline-flex;background:var(--paper-card);border:var(--b-1);border-radius:var(--r-sm);padding:4px;font-family:var(--mono);box-shadow:0 6px 24px rgba(15,29,24,.12),0 2px 6px rgba(15,29,24,.06);animation:mode-pulse 3s ease-in-out infinite}
@keyframes mode-pulse{0%,100%{box-shadow:0 6px 24px rgba(15,29,24,.12),0 2px 6px rgba(15,29,24,.06),0 0 0 0 rgba(33,163,102,.55)}50%{box-shadow:0 6px 24px rgba(15,29,24,.14),0 2px 6px rgba(15,29,24,.06),0 0 0 10px rgba(33,163,102,0)}}
.mode-toggle:hover{animation:none}
.mode-toggle button{background:transparent;border:0;padding:8px 14px;cursor:pointer;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-dim);letter-spacing:.04em;border-radius:2px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background .12s, color .12s}
.mode-toggle button:hover{color:var(--ink)}
.mode-toggle button.active{background:var(--rust);color:var(--paper)}
.mode-toggle .glyph{width:14px;height:14px}
@media (max-width:680px){.mode-toggle-float{right:14px;top:64px}.mode-toggle-float .label{display:none}.mode-toggle button{padding:7px 12px;font-size:11px}}

body[data-mode="wheel"] .mode-tech{display:none}
body[data-mode="hood"] .mode-wheel{display:none}

/* ─── Article shell ────────────────────────────────────────── */
.article{max-width:820px;margin:0 auto;padding:48px 32px 80px}
@media (max-width:760px){.article{padding:32px 18px 56px}}

.crumbs{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.crumbs a{color:var(--ink-dim);border:0}
.crumbs a:hover{color:var(--rust)}
.crumbs .sep{margin:0 8px;opacity:.5}

h1.article-title{font-family:var(--mono);font-weight:500;font-size:clamp(34px,4.6vw,48px);line-height:1.08;letter-spacing:-.02em;margin:8px 0 16px;text-wrap:balance}
h1.article-title .it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-soft)}

.lede{font-family:var(--serif);font-size:21px;line-height:1.45;color:var(--ink-soft);max-width:680px;margin:0 0 28px;text-wrap:pretty}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}
.tag{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.04em;padding:3px 9px;border-radius:var(--r-sm);border:var(--b-1);color:var(--ink-dim);background:var(--paper-card)}
.tag--rust{border-color:var(--rust);color:var(--rust);background:rgba(16,124,65,.07)}

.industry-block{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;background:var(--paper-card);border-left:2px solid var(--rust);padding:12px 18px;margin:0 0 32px;font-size:14px}
.industry-block .ib-label{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
.industry-block .ib-text{color:var(--ink-soft)}
.industry-block .sep{color:var(--rust);font-weight:500;padding:0 4px}

.article p{margin:0 0 16px;max-width:680px}

.article h2{font-family:var(--mono);font-weight:500;font-size:28px;line-height:1.15;letter-spacing:-.01em;margin:56px 0 14px;display:flex;align-items:baseline;gap:14px}
.article h2 .num{font-family:var(--mono);font-size:13px;color:var(--rust);font-weight:400;letter-spacing:.04em;width:26px;flex-shrink:0}
.article h2 .stripe{flex:1;height:1px;background:var(--rule);align-self:center}
.article h3{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-.005em;margin:32px 0 8px}

.article ul,.article ol{margin:0 0 16px;padding-left:22px;max-width:680px}
.article li{margin-bottom:7px}
.article li::marker{color:var(--ink-dim)}

/* ─── KPI row ──────────────────────────────────────────────── */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 32px}
@media (max-width:680px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--paper-card);border:var(--b-1);border-radius:var(--r-md);padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.kpi .label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim)}
.kpi .num{font-family:var(--mono);font-weight:500;font-size:26px;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.kpi .delta{font-family:var(--mono);font-size:11.5px;color:var(--ok);letter-spacing:.02em}
.kpi--feature{background:var(--rust);border-color:var(--rust)}
.kpi--feature .label{color:rgba(243,246,244,.72)}
.kpi--feature .num{color:var(--paper)}
.kpi--feature .delta{color:rgba(243,246,244,.85)}

/* ─── Mode banner ──────────────────────────────────────────── */
.mode-banner{margin:0 0 32px;padding:12px 16px;background:var(--paper-card);border:var(--b-1);border-radius:var(--r-md);border-left:2px solid var(--rust);display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-soft)}
.mode-banner .label{font-family:var(--mono);font-size:11px;color:var(--rust);letter-spacing:.05em;text-transform:uppercase;font-weight:500;white-space:nowrap}

/* ─── Dashboard chrome ─────────────────────────────────────── */
.dash{background:var(--paper-card);border:var(--b-1);border-radius:var(--r-md);overflow:hidden;margin:20px 0}
.dash__head{background:var(--paper-deep);color:var(--ink);padding:10px 18px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;border-bottom:var(--b-1)}
.dash__head .title{font-weight:500;flex:1}
.dash__head .meta{font-size:11px;color:var(--ink-dim);letter-spacing:.04em;white-space:nowrap}
.dash__head .upd{background:var(--rust);color:var(--paper);border:0;padding:6px 14px;font-family:var(--mono);font-size:11px;font-weight:500;border-radius:2px;cursor:pointer;letter-spacing:.04em;white-space:nowrap}
.dash__head .upd:hover{background:var(--rust-hover)}
.dash__sub{background:var(--paper-soft);padding:6px 18px;font-family:var(--mono);font-size:11px;color:var(--ink-soft);letter-spacing:.02em;border-bottom:var(--b-soft)}
.dash__body{padding:18px}

/* ─── Slicers / chips ──────────────────────────────────────── */
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.chip-row + .chip-row{margin-top:-2px}
.chip-row .lbl{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);letter-spacing:.06em;text-transform:uppercase;align-self:center;margin-right:4px}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;padding:5px 10px;border-radius:999px;border:var(--b-1);background:var(--paper-card);color:var(--ink-soft);cursor:pointer}
.chip:hover{border-color:var(--ink-dim);color:var(--ink)}
.chip.active{background:var(--rust);color:var(--paper);border-color:var(--rust)}
.chip.c1.active{background:var(--mp-c1);border-color:var(--mp-c1)}
.chip.c2.active{background:var(--mp-c2);border-color:var(--mp-c2)}
.chip.c3.active{background:var(--mp-c3);border-color:var(--mp-c3)}
.chip.c4.active{background:var(--mp-c4);border-color:var(--mp-c4)}

/* ─── Reference table ──────────────────────────────────────── */
.ref{width:100%;border-collapse:collapse;font-size:13.5px;margin:14px 0}
.ref th{background:var(--paper-deep);color:var(--ink-soft);font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:8px 12px;text-align:left;border-bottom:var(--b-1)}
.ref td{padding:9px 12px;border-bottom:var(--b-soft);vertical-align:top}
.ref td:first-child{font-family:var(--mono);font-size:12.5px;color:var(--ink);font-weight:500;width:34%}

/* ─── Flow row ─────────────────────────────────────────────── */
.flow{display:flex;flex-wrap:wrap;gap:0;align-items:center;margin:18px 0}
.flow-item{background:var(--paper-card);border:var(--b-1);border-radius:var(--r-md);padding:10px 14px;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink);flex:1;min-width:120px;text-align:center;line-height:1.3}
.flow-item small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--ink-dim);margin-top:3px}
.flow-arrow{color:var(--rust);font-family:var(--mono);font-size:18px;padding:0 8px;font-weight:500}

/* ─── Google Sheets input fragment ─────────────────────────── */
.gs-input{background:var(--ok-soft);border:1px solid rgba(16,124,65,.25);border-radius:var(--r-md);padding:16px 18px;margin:16px 0}
.gs-input .gs-title{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--ok);letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.gs-input table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;background:var(--paper);border-radius:var(--r-sm);overflow:hidden}
.gs-input th{background:rgba(16,124,65,.15);color:var(--ok);font-weight:500;text-align:left;padding:7px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.gs-input td{padding:6px 10px;border-bottom:var(--b-soft)}
.gs-input td.sku{filter:blur(3px);user-select:none}

/* ─── Architecture (hood mode) ─────────────────────────────── */
.arch{display:grid;grid-template-columns:1fr 200px 1fr;border:var(--b-1);border-radius:var(--r-md);overflow:hidden;background:var(--paper-card);margin:20px 0}
@media (max-width:680px){.arch{grid-template-columns:1fr}}
.arch__hdr{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;text-align:center}
.arch__hdr.mid{background:#14241c}
.arch__hdr.out{background:#1b2a22}
.arch__col{padding:14px;display:flex;flex-direction:column;gap:8px}
.arch__col.mid{background:var(--paper-soft);border-left:var(--b-soft);border-right:var(--b-soft);justify-content:center;align-items:center}
@media (max-width:680px){.arch__col.mid{border-left:0;border-right:0;border-top:var(--b-soft);border-bottom:var(--b-soft)}}
.arch__src{border-left:2px solid var(--rust);padding:8px 12px;background:var(--paper);font-family:var(--mono);font-size:12px}
.arch__src.gs{border-left-color:var(--ok)}
.arch__src.xl{border-left-color:var(--bluez)}
.arch__src b{display:block;color:var(--ink);font-weight:600;font-size:12px;margin-bottom:2px}
.arch__src span{color:var(--ink-dim);font-size:10.5px;line-height:1.4;display:block}
.arch__ch{background:var(--ink);color:var(--paper);padding:14px;border-radius:var(--r-sm);text-align:center;width:100%;font-family:var(--mono)}
.arch__ch b{font-size:14px;display:block;margin-bottom:4px}
.arch__ch span{font-size:10.5px;opacity:.7;display:block;line-height:1.4}
.arch__bypass{font-family:var(--mono);font-size:10px;color:var(--ink-dim);text-align:center;padding-top:8px;border-top:1px dashed var(--rule);line-height:1.4}
.arch__out{display:flex;flex-direction:column;align-items:center;gap:8px}
.arch__pq, .arch__pp{background:var(--paper);border:2px solid var(--rust);border-radius:var(--r-sm);padding:12px 14px;text-align:center;width:100%;font-family:var(--mono)}
.arch__pp{background:var(--rust);border-color:var(--rust);color:var(--paper)}
.arch__pq b, .arch__pp b{display:block;font-size:13px;margin-bottom:3px}
.arch__pq b{color:var(--rust)}
.arch__pp b{color:var(--paper)}
.arch__pq span, .arch__pp span{font-size:10.5px;display:block;line-height:1.4}
.arch__pq span{color:var(--ink-dim)}
.arch__pp span{color:rgba(243,246,244,.82)}
.arch__arr{font-family:var(--mono);font-size:20px;color:var(--rust);line-height:1}

/* ─── Code / formula ───────────────────────────────────────── */
code{font-family:var(--mono);font-size:.92em;background:var(--paper-deep);padding:1px 6px;border-radius:2px;border:var(--b-soft);color:var(--ink)}
pre.code{background:#10211a;color:#e6efe8;padding:16px 20px;border-radius:var(--r-md);overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.55;margin:16px 0;border:var(--b-soft)}
pre.code .kw{color:#7fd1a6}
pre.code .fn{color:#79b8e8}
pre.code .cm{color:#7d8f86;font-style:italic}
pre.code .str{color:#cdb98a}
pre.code .nm{color:#fff;font-weight:500}
.formula{background:var(--paper-card);border:1px dashed var(--rule);border-radius:var(--r-md);padding:14px 20px;font-family:var(--mono);font-size:14px;line-height:1.7;margin:16px 0}
.formula b{color:var(--rust);font-weight:600}

/* ─── Callouts ─────────────────────────────────────────────── */
.callout{border-left:2px solid var(--rust);padding:14px 18px;margin:18px 0;background:linear-gradient(90deg,rgba(16,124,65,.06),transparent 60%);font-size:14.5px;color:var(--ink-soft);max-width:680px}
.callout b{color:var(--ink)}
.callout--ok{border-left-color:var(--ok);background:linear-gradient(90deg,rgba(33,163,102,.08),transparent 60%)}
.callout--warn{border-left-color:var(--warn);background:linear-gradient(90deg,rgba(154,107,21,.08),transparent 60%)}
.callout--bluez{border-left-color:var(--bluez);background:linear-gradient(90deg,rgba(0,155,247,.06),transparent 60%)}

/* ─── Timeline table ───────────────────────────────────────── */
.timeline-tbl{width:100%;border-collapse:collapse;font-size:13.5px;margin:12px 0}
.timeline-tbl th{background:var(--paper-deep);color:var(--ink-soft);font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:8px 12px;text-align:left;border-bottom:var(--b-1)}
.timeline-tbl td{padding:9px 12px;border-bottom:var(--b-soft);vertical-align:top}
.timeline-tbl td:last-child{font-family:var(--mono);color:var(--ink-soft);white-space:nowrap;text-align:right}

/* ─── Footer spacing on case pages ─────────────────────────── */
.site-foot{margin-top:96px}

/* ─── Next-step block ──────────────────────────────────────── */
.nextstep{margin-top:48px;padding:24px 26px;background:var(--paper-card);border:var(--b-1);border-radius:var(--r-md);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.nextstep__txt{flex:1;min-width:240px}
.nextstep h4{font-family:var(--sans);font-weight:600;font-size:17px;margin:0 0 6px;letter-spacing:-.005em;color:var(--ink)}
.nextstep p{font-size:14px;margin:0;color:var(--ink-soft)}
.nextstep__btns{display:flex;gap:10px;flex-wrap:wrap}