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

:root{
  --c-actual:#111F38;
  --c-budget:#BCC1D2;
  --c-forecast:#C9A227;
  --c-good:#1E7A4C;
  --c-bad:#B3261E;
  --chart-grid:var(--line);
  --chart-axis:var(--ink-3);
}
[data-theme="dark"]{
  --c-actual:#E6E9F2;
  --c-budget:#6B7390;
  --c-forecast:#E0BC4B;
  --c-good:#5FBF8B;
  --c-bad:#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-value.pos{color:var(--c-good);} .kpi-value.neg{color:var(--c-bad);}
.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);}

/* ---------- the three-view switcher ---------- */
.views{display:flex;flex-wrap:wrap;gap:0;margin-bottom:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;width:fit-content;
  max-width:100%;}
.views button{appearance:none;border:0;border-right:1px solid var(--line);background:var(--bg);
  color:var(--ink-2);font:500 0.875rem/1 var(--font);padding:11px 18px;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease);}
.views button:last-child{border-right:0;}
.views button:hover{background:var(--bg-2);color:var(--ink);}
.views button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:600;}

/* ---------- the statement ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.pl-table{width:100%;border-collapse:collapse;font-size:0.875rem;
  font-variant-numeric:tabular-nums;min-width:720px;}
table.pl-table th,table.pl-table td{padding:7px 10px;text-align:right;
  border-bottom:1px solid var(--line);white-space:nowrap;}
table.pl-table th:first-child,table.pl-table td:first-child{text-align:left;
  position:sticky;left:0;background:var(--bg);}
table.pl-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.pl-table thead th:first-child{z-index:3;}
table.pl-table tbody tr:hover td,table.pl-table tbody tr:hover th{background:var(--bg-2);}
/* Type sets the weight, level sets the indent. A level-1 Detail row (Cost of Sales) sits flush
   with the subtotals; only the level-2 breakdown and margin rows step in. */
table.pl-table tr.subtotal th,table.pl-table tr.subtotal td{font-weight:600;color:var(--ink);}
table.pl-table tr.detail th:first-child{color:var(--ink-2);font-weight:400;}
table.pl-table tr.lvl2 th:first-child{padding-left:26px;}
table.pl-table tr.margin th:first-child{color:var(--ink-3);font-weight:400;font-style:italic;}
table.pl-table tr.margin td{color:var(--ink-3);}
table.pl-table td.good{color:var(--c-good);}
table.pl-table td.bad{color:var(--c-bad);}
table.pl-table td.blank{color:var(--ink-3);}

/* ---------- charts ---------- */
.pl-chart{width:100%;max-width:100%;display:block;}
.pl-chart text{font-family:var(--font);}
.pl-chart .tick{fill:var(--chart-axis);font-size:11px;}
.pl-chart .grid{stroke:var(--chart-grid);stroke-width:1;}
.pl-chart .axis{stroke:var(--line-2);stroke-width:1;}
.pl-chart .series{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.pl-chart .series.dashed{stroke-dasharray:5 4;}
.pl-chart .bar{fill:var(--c-forecast);}
.pl-chart .bar.neg{fill:var(--c-actual);}
.pl-chart .hit{fill:transparent;cursor:crosshair;}
.pl-chart .crosshair{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 3;}
.pl-chart .dot{stroke:var(--bg);stroke-width:2;}
.pl-chart .barlabel{fill:var(--ink-2);font-size:10.5px;}
.pl-chart .closeline{stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 3;}
.pl-chart .closelabel{fill:var(--ink-3);font-size:10px;}

/* ---------- legend ---------- */
.legend{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 var(--s4);}
.legend span.key{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border:1px solid var(--line);border-radius:999px;color:var(--ink-2);
  font:500 0.8125rem/1 var(--font);}
.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:140px;}
.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;}
.pl-chart-wrap{position:relative;}

/* ---------- 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(5,1fr);}
  .kpi-value{font-size:1.5rem;}
}
@media (prefers-reduced-motion:reduce){
  .tip,.views button{transition:none;}
}