/* Superstore sales case study — page-specific styles.
   The shell (header, footer, .wrap, .eyebrow, typography) comes from ../css/styles.css; this file
   only adds the report furniture. Every colour resolves from a token so the page follows the
   site's light/dark toggle without a second palette. Chart classes are namespaced .ss- so they
   cannot collide with the stylesheet's own .chart rule, or with the other case studies. */

:root{
  /* Four years: the oldest fades, the newest is the brand navy. */
  --c-2021:#BCC1D2;
  --c-2022:#7C8598;
  --c-2023:#C9A227;
  --c-2024:#111F38;
  --c-new:#C9A227;
  --c-returning:#111F38;
  --c-neg:#B3261E;
  --chart-grid:var(--line);
  --chart-axis:var(--ink-3);
}
[data-theme="dark"]{
  --c-2021:#6B7390;
  --c-2022:#98A0B4;
  --c-2023:#E0BC4B;
  --c-2024:#E6E9F2;
  --c-returning:#E6E9F2;
  --c-neg:#F08A80;
  --chart-grid:rgba(255,255,255,0.10);
}

/* ---------- page intro ---------- */
.case-hero{padding:var(--s9) 0 var(--s7);}
.case-hero .display{margin:var(--s3) 0 var(--s4);max-width:16ch;}
.case-lede{font-size:1.0625rem;line-height:1.65;color:var(--ink-2);max-width:62ch;}
.case-meta{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--line);}
.case-meta div{display:flex;flex-direction:column;gap:2px;}
.case-meta dt{font:500 0.6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);}
.case-meta dd{margin:0;font-size:0.9375rem;color:var(--ink);}
.case-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-top:var(--s6);}

/* ---------- KPI strip ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:var(--s7) 0;}
.kpi{background:var(--bg);padding:var(--s5);border-left:3px solid var(--accent);}
.kpi-value{font:700 1.75rem/1.1 var(--display);color:var(--ink);letter-spacing:-0.01em;}
.kpi-label{margin-top:var(--s2);font-size:0.8125rem;color:var(--ink-3);line-height:1.4;}

/* ---------- panels ---------- */
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  padding:var(--s5) var(--s5) var(--s4);margin-bottom:var(--s6);}
.panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s2);}
.panel h2{font:600 1.0625rem/1.3 var(--font);color:var(--ink);margin:0;letter-spacing:-0.01em;}
.panel .note{font-size:0.8125rem;color:var(--ink-3);line-height:1.5;margin:var(--s2) 0 var(--s4);
  max-width:70ch;}
.panel-foot{font-size:0.75rem;color:var(--ink-3);line-height:1.5;margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--line);}

.ss-chart{width:100%;max-width:100%;display:block;}
.ss-chart text{font-family:var(--font);}
.ss-chart .tick{fill:var(--chart-axis);font-size:11px;}
.ss-chart .grid{stroke:var(--chart-grid);stroke-width:1;}
.ss-chart .axis{stroke:var(--line-2);stroke-width:1;}
.ss-chart .series{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.ss-chart .bar{fill:var(--c-2024);}
.ss-chart .bar.accent{fill:var(--c-2023);}
.ss-chart .bar.neg{fill:var(--c-neg);}
.ss-chart .bar.new{fill:var(--c-new);}
.ss-chart .bar.returning{fill:var(--c-returning);}
.ss-chart .hit{fill:transparent;cursor:crosshair;}
.ss-chart .crosshair{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 3;}
.ss-chart .dot{stroke:var(--bg);stroke-width:2;}
.ss-chart .barlabel{fill:var(--ink-2);font-size:10.5px;}
.ss-chart .barlabel.muted{fill:var(--ink-3);}
.ss-chart .inlabel{fill:var(--bg);font-size:10.5px;font-weight:600;}

/* ---------- legend / series toggles ---------- */
.legend{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 var(--s4);}
.legend button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink-2);
  font:500 0.8125rem/1 var(--font);cursor:pointer;transition:border-color .15s var(--ease),
  color .15s var(--ease),opacity .15s var(--ease);}
.legend button:hover{border-color:var(--line-2);color:var(--ink);}
.legend button[aria-pressed="false"]{opacity:.45;}
.legend .swatch{width:10px;height:10px;border-radius:2px;flex:none;}

/* ---------- tooltip ---------- */
.tip{position:absolute;pointer-events:none;z-index:20;opacity:0;transition:opacity .12s;
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);
  box-shadow:var(--shadow);padding:8px 10px;font-size:0.8125rem;color:var(--ink);
  min-width:130px;}
.tip.on{opacity:1;}
.tip-title{font:500 0.6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px;}
.tip-row{display:flex;align-items:center;gap:6px;justify-content:space-between;
  margin-top:3px;white-space:nowrap;}
.tip-row .k{display:flex;align-items:center;gap:6px;color:var(--ink-2);}
.tip-row .v{font-variant-numeric:tabular-nums;font-weight:600;}
.tip-swatch{width:8px;height:8px;border-radius:2px;flex:none;}
.ss-chart-wrap{position:relative;}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.ss-table{width:100%;border-collapse:collapse;font-size:0.875rem;
  font-variant-numeric:tabular-nums;min-width:560px;}
table.ss-table th,table.ss-table td{padding:8px 10px;text-align:right;
  border-bottom:1px solid var(--line);white-space:nowrap;}
table.ss-table th:first-child,table.ss-table td:first-child{text-align:left;
  position:sticky;left:0;background:var(--bg);}
table.ss-table thead th{position:sticky;top:0;background:var(--bg);z-index:2;
  font:600 0.75rem/1.3 var(--font);color:var(--ink-2);user-select:none;
  border-bottom:1px solid var(--line-2);}
table.ss-table thead th:first-child{z-index:3;}
table.ss-table.products thead th{cursor:pointer;}
table.ss-table.products thead th:hover{color:var(--ink);}
table.ss-table thead th .dir{color:var(--accent-text);font-size:0.6875rem;}
table.ss-table tbody tr:hover td,table.ss-table tbody tr:hover th{background:var(--bg-2);}
table.ss-table td.blank{color:var(--ink-3);}
table.ss-table td.pos{color:#1E7A4C;} table.ss-table td.neg{color:#B3261E;}
[data-theme="dark"] table.ss-table td.pos{color:#5FBF8B;}
[data-theme="dark"] table.ss-table td.neg{color:#F08A80;}
table.ss-table.products td.product{white-space:normal;min-width:260px;text-align:left;}
table.cohort td.self{color:var(--ink-3);}
table.cohort td.strong{font-weight:600;color:var(--ink);}
.pill{display:inline-block;padding:1px 7px;border-radius:999px;font-size:0.6875rem;
  border:1px solid var(--line);color:var(--ink-3);margin-left:8px;vertical-align:1px;}

/* ---------- data-quality notes ---------- */
.caveats{border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);background:var(--bg-2);padding:var(--s5);margin:var(--s7) 0;}
.caveats h2{font:600 1rem/1.3 var(--font);margin:0 0 var(--s3);color:var(--ink);}
.caveats ul{margin:0;padding-left:1.1em;}
.caveats li{font-size:0.875rem;line-height:1.65;color:var(--ink-2);margin-bottom:var(--s2);}
.caveats li:last-child{margin-bottom:0;}
.caveats strong{color:var(--ink);font-weight:600;}
.caveats code{font-family:var(--mono);font-size:0.8125rem;}

.shot{margin:0 0 var(--s4);}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);}
.shot figcaption{font-size:0.75rem;color:var(--ink-3);line-height:1.5;margin-top:var(--s2);}
.techniques{margin:0;padding-left:1.1rem;font-size:0.875rem;line-height:1.6;color:var(--ink-2);}
.techniques li + li{margin-top:var(--s2);}

.loading{padding:var(--s8) 0;text-align:center;color:var(--ink-3);font-size:0.9375rem;}

@media (min-width:760px){
  .kpis{grid-template-columns:repeat(3,1fr);}
  .panel{padding:var(--s6) var(--s6) var(--s5);}
}
@media (min-width:1000px){
  .kpis{grid-template-columns:repeat(6,1fr);}
  .kpi-value{font-size:1.5rem;}
}
@media (prefers-reduced-motion:reduce){
  .tip{transition:none;}
}