/* Model performance 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 .mp- so
   they cannot collide with the stylesheet's own .chart rule, or with the other case studies. */

/* Two models, one colour each, used consistently on every chart: the star schema is the brand
   navy, the flat model is the accent. Nothing else on the page is coloured, so the reader only
   ever has to learn one mapping. */
:root{
  --c-star:#111F38;
  --c-flat:#C9A227;
  --c-neg:#B3261E;
  --chart-grid:var(--line);
  --chart-axis:var(--ink-3);
}
[data-theme="dark"]{
  --c-star:#E6E9F2;
  --c-flat:#E0BC4B;
  --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);}

.mp-chart{width:100%;max-width:100%;display:block;}
.mp-chart text{font-family:var(--font);}
.mp-chart .tick{fill:var(--chart-axis);font-size:11px;}
.mp-chart .grid{stroke:var(--chart-grid);stroke-width:1;}
.mp-chart .axis{stroke:var(--line-2);stroke-width:1;}
.mp-chart .series{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.mp-chart .bar{fill:var(--c-star);}
.mp-chart .bar.flat{fill:var(--c-flat);}
.mp-chart .bar.neg{fill:var(--c-neg);}
.mp-chart .hit{fill:transparent;cursor:crosshair;}
.mp-chart .crosshair{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 3;}
.mp-chart .dot{stroke:var(--bg);stroke-width:2;}
.mp-chart .barlabel{fill:var(--ink-2);font-size:10.5px;}
.mp-chart .barlabel.muted{fill:var(--ink-3);}
.mp-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;}
.mp-chart-wrap{position:relative;}

/* ---------- tables ---------- */
.mp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.mp-table{width:100%;border-collapse:collapse;font-size:0.875rem;
  font-variant-numeric:tabular-nums;min-width:560px;}
table.mp-table th,table.mp-table td{padding:8px 10px;text-align:right;
  border-bottom:1px solid var(--line);white-space:nowrap;}
table.mp-table th:first-child,table.mp-table td:first-child{text-align:left;
  position:sticky;left:0;background:var(--bg);}
table.mp-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.mp-table thead th:first-child{z-index:3;}
table.mp-table thead th .dir{color:var(--accent-text);font-size:0.6875rem;}
table.mp-table tbody tr:hover td,table.mp-table tbody tr:hover th{background:var(--bg-2);}
table.mp-table td.blank{color:var(--ink-3);}
table.mp-table td.pos{color:#1E7A4C;} table.mp-table td.neg{color:#B3261E;}
[data-theme="dark"] table.mp-table td.pos{color:#5FBF8B;}
[data-theme="dark"] table.mp-table td.neg{color:#F08A80;}
.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;}

.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;}
}

/* The row where the two models disagree. */
table.mp-table tr.diverges td,table.mp-table tr.diverges th{background:var(--accent-soft);font-weight:600;}