/* "Classic" scorecard -- recreates the SCI Project Scorecard Power BI layout:
   a burgundy section label in the left gutter, metric cards to its right.

   Colour policy. The source dashboard used Power BI's default categorical palette; a
   like-for-like port fails accessibility -- with 4+ hues the all-pairs CVD check bottoms
   out at dE 3.1 (orange vs green under protanopia), and no hue set fixes it. These donuts
   are parts-of-a-whole ranked by size rather than identities, so they use a single-hue
   SEQUENTIAL ramp (verified monotonic in lightness) plus a direct label on every slice.
   Lightness ordering survives every CVD type, and identity is never colour-alone.
   Brand burgundy #96022e is chrome only, never a series colour. */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;background:#eceae7;color:#221e1f;font-size:10pt;
 line-height:1.4;-webkit-font-smoothing:antialiased}

/* ---- top bar / nav ---- */
.topbar{background:#221e1f;color:#fff;padding:0}
.tin{max-width:1400px;margin:0 auto;padding:9px 18px;display:flex;align-items:center;
 justify-content:space-between;gap:18px;flex-wrap:wrap}
.tlogo{height:26px;width:auto;display:block}
.nav{display:flex;gap:4px}
.nav a{font-size:8.5pt;letter-spacing:.1em;text-transform:uppercase;color:#cfcccd;
 text-decoration:none;padding:5px 13px;border-radius:3px;border:1px solid transparent}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav a.on{background:#96022e;color:#fff;border-color:#96022e}
.tmeta{font-size:8pt;color:#a7a9ac}
.tmeta b{color:#fff}

/* ---- sheet ---- */
.sheet{max-width:1400px;margin:14px auto 40px;background:#fff;border:1px solid #d8d4d0;
 padding:18px 20px 26px}
.shead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
 flex-wrap:wrap;padding-bottom:14px}
.shead h1{font-size:16pt;font-weight:bold;letter-spacing:-.3px;line-height:1.25}
.shead h1 .thin{font-weight:normal;color:#58595b}
.hright{display:flex;gap:12px;align-items:flex-start}
.slicer{border:1px solid #d8d4d0;min-width:270px}
.slicer .cap{background:#96022e;color:#fff;font-size:8.5pt;font-weight:bold;
 text-align:center;padding:3px 6px;letter-spacing:.04em}
.slicer select{width:100%;border:0;padding:6px 8px;font-family:inherit;font-size:9.5pt;
 background:#fff;color:#221e1f;cursor:pointer}
.pmbox{border:1px solid #d8d4d0;min-width:170px;text-align:center;padding:8px 12px}
.pmbox .nm{font-size:12pt;font-weight:bold}
.pmbox .rl{font-size:8pt;color:#58595b;margin-top:2px}

/* ---- section rows ---- */
.rows{display:block}
.row{display:grid;grid-template-columns:118px 1fr;gap:9px;margin-bottom:9px;align-items:stretch}
.slab{background:#96022e;color:#fff;font-weight:bold;font-size:9.5pt;display:flex;
 align-items:center;justify-content:center;text-align:center;padding:8px 6px;line-height:1.2}
.cards{display:grid;gap:9px;grid-auto-flow:column;grid-auto-columns:1fr}
.cards.c2{grid-template-columns:repeat(2,1fr);grid-auto-flow:row}
.cards.c3{grid-template-columns:repeat(3,1fr);grid-auto-flow:row}
.cards.c4{grid-template-columns:repeat(4,1fr);grid-auto-flow:row}
.cards.c6{grid-template-columns:repeat(6,1fr);grid-auto-flow:row}
@media(max-width:700px){.cards,.cards.c3,.cards.c4,.cards.c6{grid-template-columns:1fr 1fr;
 grid-auto-flow:row}}

.card{border:1px solid #d8d4d0;padding:7px 10px 9px;background:#fff;min-height:56px;
 display:flex;flex-direction:column;justify-content:space-between}
.card .lbl{font-size:7.5pt;color:#58595b;line-height:1.25;margin-bottom:3px}
.card .val{font-size:13pt;font-weight:bold;font-variant-numeric:tabular-nums;
 letter-spacing:-.2px}
.card .val.sm{font-size:11pt}
.card .val.neg{color:#96022e}
.card .val.pos{color:#1c6b4a}
.card .val.dash{color:#a7a9ac;font-weight:normal}
.card.hl .val{color:#cb773d}
.card .missing{font-size:7.5pt;color:#a7a9ac;font-style:italic;line-height:1.3}

/* ---- panels (charts, tables) ---- */
.panel{border:1px solid #d8d4d0;padding:9px 11px 11px;background:#fff}
.panel .ptitle{font-size:10pt;font-weight:bold;text-align:center;margin-bottom:6px}
.panel.missing{display:flex;flex-direction:column;align-items:center;justify-content:center;
 min-height:150px;text-align:center;background:#fbfaf9}
.panel.missing .mtxt{font-size:9pt;color:#8b8c8f;font-style:italic;max-width:230px}
.panel.missing .mico{font-size:15pt;color:#cfcbc7;margin-bottom:6px;letter-spacing:.1em}

.donutwrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
svg.d{overflow:visible}
.dlegend{font-size:8pt;color:#4a4547;display:flex;flex-direction:column;gap:3px;min-width:120px}
.dlegend div{display:flex;align-items:center;gap:6px;white-space:nowrap}
.dlegend i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.dlegend .n{color:#8b8c8f;font-variant-numeric:tabular-nums}
.slice{cursor:pointer;transition:opacity .12s}
.slice:hover{opacity:.8}

table.mini{width:100%;border-collapse:collapse;font-size:8.5pt}
table.mini th{text-align:left;font-size:7.5pt;color:#58595b;font-weight:bold;
 border-bottom:1px solid #d8d4d0;padding:0 8px 4px 0;white-space:nowrap}
table.mini td{padding:3px 8px 3px 0;border-bottom:1px solid #f0eeeb;
 font-variant-numeric:tabular-nums}
table.mini tr:last-child td{border-bottom:none}
table.mini td.num,table.mini th.num{text-align:right}
.scroll{max-height:230px;overflow-y:auto}

.srcnote{font-size:7.5pt;color:#a7a9ac;margin-top:5px;font-style:italic}
.rule{border-top:2px solid #221e1f;margin:8px 0 12px}

#boot{max-width:1400px;margin:0 auto;padding:40px 20px;color:#58595b}
#boot .err{background:#fdf3f5;border-left:3px solid #96022e;padding:14px 16px;color:#4a4547}
.spin{display:inline-block;width:13px;height:13px;border:2px solid #cfcbc7;
 border-top-color:#96022e;border-radius:50%;animation:sp .8s linear infinite;
 vertical-align:-2px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}

#tip{position:fixed;background:#221e1f;color:#fff;padding:5px 9px;border-radius:3px;
 font-size:8.5pt;pointer-events:none;opacity:0;transition:opacity .1s;z-index:99;
 max-width:260px;box-shadow:0 3px 10px rgba(0,0,0,.28)}

footer{max-width:1400px;margin:0 auto;padding:0 20px 40px;font-size:8pt;color:#8b8c8f;
 text-align:center;line-height:1.8}
footer b{color:#58595b}
@media print{body{background:#fff}.sheet{border:0}.row{break-inside:avoid}.nav{display:none}}

/* Top block: two INDEPENDENT stacks. A shared grid row-aligns the columns, which makes the
   taller right-hand block stretch its left-hand neighbour and leaves a gap the source
   layout does not have. */
.top{display:grid;grid-template-columns:1fr 1.1fr;gap:0 22px;align-items:start}
.top .col{display:flex;flex-direction:column}
@media(max-width:1120px){.top{grid-template-columns:1fr}}
.wides{display:block}
.wides .row{grid-template-columns:118px 1fr}