/* Workforce analytics 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 .ct- so
   they cannot collide with the stylesheet's own .chart rule. */

:root{
  --c-main:#111F38;
  --c-accent:#C9A227;
  --c-muted:#BCC1D2;
  --chart-grid:var(--line);
  --chart-axis:var(--ink-3);
}
[data-theme="dark"]{
  --c-main:#E6E9F2;
  --c-accent:#E0BC4B;
  --c-muted:#6B7390;
  --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);}
.panel-pair{display:grid;gap:var(--s6);}
.panel-pair .panel{margin-bottom:0;}
.panel-pair{margin-bottom:var(--s6);}

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

/* ---------- 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;}
.ct-chart-wrap{position:relative;}

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

/* ---------- 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;}

.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;}
  .panel-pair{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){
  .tip{transition:none;}
}