*{box-sizing:border-box;margin:0;padding:0}

/* ── Tokens ──────────────────────────────────────────────────────────────
   Base palette matches the other pages. --text3 uses the corrected value
   from CLAUDE.md (the shipped #9ca3af measures 2.31:1 on --bg2); new work
   is meant to start from the fixed one. Every token below is declared in
   both :root and html.dark — a viz colour that exists in only one is
   invisible in the other and you do not notice unless you test both. */
:root{
  --bg:#f9fafb;--bg1:#ffffff;--bg2:#f3f4f6;--bg3:#f9fafb;
  --border:#e5e7eb;--border2:#f3f4f6;
  --text:#111827;--text2:#6b7280;--text3:#6c7079;--text4:#374151;
  --link:#1d4ed8;--ok:#15803d;--warn:#92400e;--danger:#b91c1c;
  /* Categorical series. Validated against this page's chart surface
     (--bg1 #ffffff) with the dataviz palette checker: lightness band,
     chroma floor, adjacent CVD ΔE 9.1, normal-vision ΔE 19.6 all pass.
     Contrast warns on aqua/yellow/magenta, so the relief rule applies —
     hence the always-on legend and the Table view on the stacked chart.
     s9/s10 were added when the top-N went from 8 to 10: cyan and umber,
     the two hue slots the first eight leave open. Re-validated as a set of
     ten, and they do not set the worst pair — that is still inside the
     original eight. */
  --s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;
  --s5:#e87ba4;--s6:#008300;--s7:#4a3aa7;--s8:#e34948;
  --s9:#00a2c7;--s10:#a3652a;
  --s-other:#9aa0a6;
  --chart-grid:#e5e7eb;--chart-axis:#d1d5db;--chart-surface:#ffffff;
  --ribbon-op:.34;
}
html.dark{
  --bg:#000;--bg1:#0d0d0d;--bg2:#141414;--bg3:#0a0a0a;
  --border:#222;--border2:#1a1a1a;
  --text:#e2e8f0;--text2:#94a3b8;--text3:#6e8099;--text4:#cbd5e1;
  --link:#60a5fa;--ok:#4ade80;--warn:#fbbf24;--danger:#f87171;
  /* The same ten hues re-stepped for the dark surface (#0d0d0d), not an
     automatic flip. All ten clear 3:1 there and every gate passes. The dark
     band is narrow (L 0.48–0.67), so the cyan is a step down from its light
     twin rather than a step up. */
  --s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;
  --s5:#d55181;--s6:#008300;--s7:#9085e9;--s8:#e66767;
  --s9:#009cbe;--s10:#b07a35;
  --s-other:#6b7280;
  --chart-grid:#1f1f1f;--chart-axis:#2a2a2a;--chart-surface:#0d0d0d;
  --ribbon-op:.30;
}

html,body{background:var(--bg);color:var(--text);font-family:"DM Sans",system-ui,sans-serif;font-size:13px;min-height:100vh}

/* Radii: 6px controls, 10px containers, 99px pills. Nothing else. */

/* Focus is visible everywhere — this is a tool people tab through all day
   and the browser default washes out on a near-white surface. */
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-48px;z-index:100;background:var(--bg1);
  color:var(--link);border:1px solid var(--border);border-radius:6px;padding:8px 12px;
  font-size:12px;font-weight:600;transition:top .12s}
.skip-link:focus{top:8px}

.app-shell{display:flex;min-height:100vh}

/* ── Side nav ─────────────────────────────────────────────────────────── */
.sidenav{width:210px;flex-shrink:0;background:var(--bg1);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidenav.collapsed{width:48px}
.sidenav.collapsed .sn-brand,.sidenav.collapsed #snBrand,
.sidenav.collapsed .sn-label{display:none}
.sidenav.collapsed .sn-top{justify-content:center;padding:14px 0}
.sidenav.collapsed .sn-toggle{margin-left:0}
.sidenav.collapsed .sn-link{justify-content:center;padding:8px 0}
.sidenav.collapsed .sn-badge,.sidenav.collapsed .sn-bottom{display:none}
.sn-top{padding:14px 12px 10px;border-bottom:1px solid var(--border)}
.sn-brand{font-size:12px;font-weight:600;color:var(--text);line-height:1.3}
.sn-brand span{display:block;font-size:10px;font-weight:400;color:var(--text3);margin-top:1px}
.sn-links{flex:1;padding:8px 6px;overflow-y:auto}
.sn-section{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;
  letter-spacing:.07em;padding:8px 8px 3px}
.sn-link{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;
  font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;border:none;
  background:none;font-family:inherit;width:100%;text-align:left;margin-bottom:2px;
  transition:all .1s;text-decoration:none}
.sn-link:hover{background:var(--bg2);color:var(--text)}
.sn-link.active{background:#dbeafe;color:#1d4ed8}
html.dark .sn-link.active{background:#04111f;color:#60a5fa}
.sn-link.soon{opacity:.4;cursor:default;pointer-events:none}
.sn-icon{font-size:13px;width:18px;text-align:center;flex-shrink:0}
.sn-badge{font-size:9px;padding:1px 5px;border-radius:4px;background:var(--bg2);
  color:var(--text3);border:1px solid var(--border);margin-left:auto}
.sn-bottom{padding:8px 10px;border-top:1px solid var(--border)}
.sn-sprint{font-size:10px;color:var(--text3)}

.main-content{flex:1;min-width:0;height:100vh;overflow-y:auto}
.app-inner{padding:16px 22px 60px;max-width:1500px}

/* ── Head + sub-tabs ──────────────────────────────────────────────────── */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;
  padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:14px;gap:10px;flex-wrap:wrap}
.page-head h1{font-size:15px;font-weight:600}
.page-head p{font-size:11px;color:var(--text2);margin-top:2px}
.page-head-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.dash-tabs{display:flex;gap:2px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.dash-tab{font-family:inherit;font-size:12px;font-weight:500;color:var(--text2);
  background:none;border:none;border-bottom:2px solid transparent;
  padding:6px 12px;cursor:pointer;margin-bottom:-1px}
.dash-tab:hover{color:var(--text)}
.dash-tab[aria-selected="true"]{color:var(--link);border-bottom-color:var(--link)}
.dash-tab[disabled]{opacity:.4;cursor:default}

/* ── Filter row — one row, above everything it scopes ─────────────────── */
.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.f-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;
  letter-spacing:.05em;margin-right:2px}
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--border);
  border-radius:6px;padding:2px;gap:2px}
.seg button{font-family:inherit;font-size:11px;font-weight:500;color:var(--text2);
  background:none;border:none;border-radius:4px;padding:4px 9px;cursor:pointer}
.seg button:hover{color:var(--text)}
.seg button[aria-checked="true"]{background:var(--bg1);color:var(--text);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}
html.dark .seg button[aria-checked="true"]{box-shadow:none;border:1px solid var(--border)}

.ctl{position:relative}
.ctl-btn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:11px;
  color:var(--text);background:var(--bg1);border:1px solid var(--border);border-radius:6px;
  padding:5px 9px;cursor:pointer;max-width:230px}
.ctl-btn:hover{background:var(--bg2)}
.ctl-btn[aria-expanded="true"]{border-color:var(--link)}
.ctl-btn .cb-name{font-weight:600;color:var(--text2);flex-shrink:0}
.ctl-btn .cb-val{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctl-btn .cb-caret{color:var(--text3);font-size:9px;flex-shrink:0}
.pop{position:absolute;z-index:40;top:calc(100% + 4px);left:0;min-width:250px;
  background:var(--bg1);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 8px 26px rgba(0,0,0,.13);padding:6px;display:none}
html.dark .pop{box-shadow:0 8px 26px rgba(0,0,0,.6)}
.pop.open{display:block}
.pop-search{width:100%;font-family:inherit;font-size:11px;color:var(--text);
  background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:5px 8px;margin-bottom:5px}
.pop-actions{display:flex;gap:5px;padding:0 2px 5px}
.mini{font-family:inherit;font-size:10px;font-weight:600;color:var(--link);background:none;
  border:none;cursor:pointer;padding:2px 4px;border-radius:4px}
.mini:hover{background:var(--bg2)}
.pop-list{max-height:270px;overflow-y:auto}
.pop-row{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:6px;
  font-size:11px;color:var(--text);cursor:pointer;width:100%;background:none;border:none;
  font-family:inherit;text-align:left}
.pop-row:hover{background:var(--bg2)}
.pop-row .tick{width:14px;flex-shrink:0;font-size:12px;font-weight:700;color:var(--link)}
.pop-row .rlabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pop-row .rmeta{font-size:10px;color:var(--text3);flex-shrink:0;font-variant-numeric:tabular-nums}
.pop-note{font-size:10px;color:var(--text3);padding:6px 7px}
.pop-foot{border-top:1px solid var(--border);margin-top:5px;padding:7px 7px 3px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pop-foot label{font-size:10px;color:var(--text3)}
.pop-foot input[type=date]{font-family:inherit;font-size:11px;color:var(--text);
  background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:4px 6px}
.btn-reset{font-family:inherit;font-size:11px;color:var(--text2);background:none;
  border:1px solid var(--border);border-radius:6px;padding:5px 9px;cursor:pointer}
.btn-reset:hover{background:var(--bg2);color:var(--text)}

/* ── Stat tiles — label / value / hint, three distinct steps ──────────── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.metric{background:var(--bg1);border:1.5px solid var(--border);border-radius:10px;padding:9px 12px}
.metric-label{font-size:10px;color:var(--text3);margin-bottom:2px;font-weight:500;
  text-transform:uppercase;letter-spacing:.04em}
.metric-value{font-size:20px;font-weight:600;line-height:1.15}
.metric-hint{font-size:10px;color:var(--text3);margin-top:2px}
.c-warn{color:#92400e}html.dark .c-warn{color:#fbbf24}
.c-ok{color:#15803d}html.dark .c-ok{color:#4ade80}
.c-danger{color:#b91c1c}html.dark .c-danger{color:#f87171}

/* Status pills. Pastel surface + darkened ink of the same hue, every pair
   measured against its own background: 4.57 / 6.37 / 5.30 light, 7.69 / 7.33 /
   5.03 dark. These are status colours and stay out of the series palette. */
.chip{display:inline-block;padding:1px 7px;border-radius:99px;font-size:10px;font-weight:600;
  letter-spacing:.01em;white-space:nowrap}
.chip-ok{background:#dcfce7;color:#15803d}
.chip-warn{background:#fef3c7;color:#92400e}
.chip-danger{background:#fee2e2;color:#b91c1c}
.chip-mute{background:var(--bg2);color:var(--text2)}
html.dark .chip-ok{background:#10352b;color:#4ade80}
html.dark .chip-warn{background:#40340f;color:#fbbf24}
html.dark .chip-danger{background:#4a1f22;color:#f87171}

/* ── Chart cards ──────────────────────────────────────────────────────── */
.card{background:var(--bg1);border:1.5px solid var(--border);border-radius:10px;
  padding:12px 14px 10px;margin-bottom:14px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:2px}
.card-title{font-size:15px;font-weight:600}
.card-sub{font-size:11px;color:var(--text2);margin-top:1px}
.chart-host{position:relative;margin-top:8px}
.chart-host.stale{opacity:.45;transition:opacity .1s}
.chart-host svg{display:block;overflow:visible}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--border2)}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);
  background:none;border:none;font-family:inherit;cursor:pointer;padding:1px 2px;border-radius:4px}
.lg:hover{color:var(--text)}
.lg[aria-pressed="true"]{color:var(--text);font-weight:500}
.lg .sw{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.lg .swline{width:14px;height:2px;border-radius:2px;flex-shrink:0}
.lg.off{opacity:.4}

/* Panel states: loaded / loading / empty / error. A blank card is a
   question; each of these is an answer. */
.panel-state{padding:34px 18px;text-align:center}
.panel-state h3{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px}
.panel-state p{font-size:11px;color:var(--text3);max-width:420px;margin:0 auto 10px}
.panel-state .btn-act{font-family:inherit;font-size:11px;font-weight:600;color:#fff;
  background:var(--link);border:none;border-radius:6px;padding:6px 12px;cursor:pointer}
html.dark .panel-state .btn-act{color:#04111f}
.spin{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--link);
  border-radius:50%;margin:0 auto 8px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}

/* ── Table view (the WCAG-clean twin of the stacked chart) ────────────── */
.tbl-wrap{overflow-x:auto;margin-top:8px;border:1px solid var(--border);border-radius:10px}
/* A long list scrolls inside its own card rather than pushing the next panel
   off the page. The sticky header comes from table.dt. */
.tbl-wrap.tall{max-height:420px;overflow-y:auto}
table.dt{border-collapse:collapse;min-width:100%;font-size:12px}
table.dt th,table.dt td{padding:6px 10px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--border2);font-variant-numeric:tabular-nums}
table.dt thead th{position:sticky;top:0;background:var(--bg2);color:var(--text2);
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;z-index:1}
table.dt th[scope=row]{text-align:left;font-weight:500;color:var(--text);font-variant-numeric:normal}
table.dt thead th:first-child{text-align:left}
table.dt tfoot td,table.dt tfoot th{font-weight:600;background:var(--bg3);border-top:1px solid var(--border)}
.th-key{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:baseline}

/* ── Tooltip ──────────────────────────────────────────────────────────── */
.tip{position:fixed;z-index:80;pointer-events:none;background:var(--bg1);
  border:1px solid var(--border);border-radius:8px;padding:7px 9px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);font-size:11px;max-width:280px;display:none}
html.dark .tip{box-shadow:0 6px 20px rgba(0,0,0,.7)}
.tip-head{font-size:11px;font-weight:600;color:var(--text);margin-bottom:4px}
.tip-row{display:flex;align-items:center;gap:7px;line-height:1.55}
.tip-row .k{width:12px;height:2px;border-radius:2px;flex-shrink:0}
/* Values lead, labels follow — the reader already has the series. */
.tip-row .v{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;
  min-width:52px;text-align:right}
.tip-row .n{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tip-note{font-size:10px;color:var(--text3);margin-top:4px;padding-top:4px;border-top:1px solid var(--border2)}

/* ── Footer ───────────────────────────────────────────────────────────── */
.src{font-size:10px;color:var(--text3);line-height:1.7;border-top:1px solid var(--border);
  padding-top:10px;margin-top:4px}
.src b{color:var(--text2);font-weight:600}
.warnbar{display:flex;align-items:flex-start;gap:8px;background:#fef3c7;border:1px solid #fde68a;
  border-radius:10px;padding:8px 12px;margin-bottom:14px;font-size:11px;color:#92400e}
html.dark .warnbar{background:#231a05;border-color:#4a3708;color:#fbbf24}

@media(max-width:900px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .app-inner{padding:14px 14px 50px}
}

/* ── Added for the multi-page report ──────────────────────────────────── */

/* Date range sits in the filter row as two native pickers rather than behind
   a popover: it is the control people reach for first, and a browser date
   input is a real calendar without shipping one. */
.daterange{display:inline-flex;align-items:center;gap:6px;background:var(--bg1);
  border:1px solid var(--border);border-radius:6px;padding:3px 8px}
.daterange label{font-size:11px;font-weight:600;color:var(--text2)}
.daterange input[type=date]{font-family:inherit;font-size:11px;color:var(--text);
  background:transparent;border:none;padding:2px 0;color-scheme:light}
html.dark .daterange input[type=date]{color-scheme:dark}
.daterange .sep{font-size:11px;color:var(--text3)}

/* Cross-filter chip. Power-BI-style click-to-filter is invisible unless the
   page says what is active and how to get out of it. */
.xf-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.xf-chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;
  background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:99px;padding:3px 5px 3px 11px}
html.dark .xf-chip{background:#04111f;color:#60a5fa;border-color:#0b2c52}
.xf-chip b{font-weight:600}
.xf-chip button{font-family:inherit;font-size:12px;line-height:1;color:inherit;background:none;
  border:none;cursor:pointer;padding:2px 5px;border-radius:99px;opacity:.75}
.xf-chip button:hover{opacity:1;background:rgba(0,0,0,.07)}
.xf-hint{font-size:10px;color:var(--text3)}

/* Clickable marks need to look clickable. */
.chart-host svg [data-series],.chart-host svg [data-cat]{cursor:pointer}
.chart-host svg [data-nohit]{cursor:default}

.card-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.btn-x{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:11px;
  font-weight:500;color:var(--text2);background:var(--bg1);border:1px solid var(--border);
  border-radius:6px;padding:5px 9px;cursor:pointer}
.btn-x:hover{background:var(--bg2);color:var(--text)}

/* A category axis with long names (people, issues) reads better rotated than
   truncated — a clipped name is not a label. */
.chart-host svg text.tilt{text-anchor:end}

/* ── Heat scale for the Employee Overview matrices ─────────────────────────
   Soft/pastel by request. Three stops interpolated in RGB: bad -> middling ->
   good. Both themes are stepped separately — a pastel that reads as "gentle"
   on white glows on black — and each is paired with an ink that clears 4.5:1
   against every stop in its own set. */
:root{
  --heat-lo:#fecaca;  /* red    */
  --heat-mid:#fef0c3; /* yellow */
  --heat-hi:#c9f0dd;  /* green  */
  --heat-ink:#1f2937;
  --mx-zero:#9aa0a6;
}
html.dark{
  --heat-lo:#4a1f22;
  --heat-mid:#40340f;
  --heat-hi:#10352b;
  --heat-ink:#e6edf5;
  --mx-zero:#5b6572;
}

/* ── Matrix (Power BI style) ──────────────────────────────────────────────
   The wrapper scrolls, never the page. First column and header row are both
   sticky so a name and a week number stay visible in a 50-column grid. */
.mx-wrap{overflow:auto;max-height:560px;border:1px solid var(--border);border-radius:10px;margin-top:8px}
table.mx{border-collapse:separate;border-spacing:0;font-size:11px;background:var(--bg1)}
table.mx th,table.mx td{padding:4px 7px;white-space:nowrap;text-align:right;
  border-bottom:1px solid var(--border2);font-variant-numeric:tabular-nums}
table.mx thead th{position:sticky;top:0;z-index:2;background:var(--bg2);color:var(--text2);
  font-size:10px;font-weight:600;letter-spacing:.03em;border-bottom:1px solid var(--border)}
table.mx th[scope=row]{position:sticky;left:0;z-index:1;background:var(--bg1);text-align:left;
  font-weight:500;color:var(--text);font-variant-numeric:normal;max-width:190px;
  overflow:hidden;text-overflow:ellipsis;border-right:1px solid var(--border)}
table.mx thead th:first-child{left:0;z-index:3;text-align:left}
table.mx tbody tr:hover th[scope=row]{background:var(--bg2)}
table.mx .mx-tot{position:sticky;right:0;background:var(--bg3);font-weight:600;
  border-left:1px solid var(--border);z-index:1}
table.mx thead .mx-tot{z-index:3;background:var(--bg2)}
table.mx tfoot td,table.mx tfoot th{position:sticky;bottom:0;background:var(--bg2);
  font-weight:600;border-top:1px solid var(--border);z-index:2}
table.mx tfoot th[scope=row]{z-index:3}
table.mx td.z{color:var(--mx-zero)}
.mx-cell{display:block;border-radius:4px;padding:2px 5px;margin:-2px -2px}
.mx-note{font-size:10px;color:var(--text3);margin-top:6px;line-height:1.6}
.mx-scale{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--text3);margin-left:auto}
.mx-scale i{display:inline-block;width:34px;height:9px;border-radius:3px;font-style:normal}