/* ==========================================================================
   MobilizeGreen Report System  ·  mg-report.css  ·  v1.0
   One stylesheet for every MobilizeGreen analytics report.

   Paste this in place of each report's existing <style> block, then apply the
   class renames in the migration map. Brand values (--brand, --brand-2,
   --ground) are unchanged from the current reports and must not be edited.

   Contents
     01  Tokens
     02  Reset & base
     03  Layout shell
     04  Masthead
     05  Section nav  (.secnav)  and panel tabs  (.tabs / .subtabs)
     06  Section heads
     07  Cards & grid
     08  KPI panel
     09  Charts (SVG contract)
     10  Legend
     11  Tooltip
     12  Tables
     13  Chart / table swap
     14  Pills & status
     15  Callouts & notes
     16  Footer
     17  Responsive
   ========================================================================== */


/* == 01  TOKENS ============================================================ */

:root{
  color-scheme: light;

  /* --- Brand. Fixed. Do not edit. --- */
  --brand:        #42675F;
  --brand-deep:   #2E4A44;   /* headings, KPI figures, tooltip ground */
  --brand-2:      #6F833B;   /* eyebrows, active indicators, focus rings */

  /* --- Surfaces. Elevation reads plane < ground < card. ---
     #FFFFED is already near-maximum in red and green, so the only direction
     that lifts off it is toward white. Cards are therefore white by necessity,
     not by taste; anything warmer recedes. */
  --ground:       #FFFFED;   /* page */
  --plane:        #F6F5DF;   /* recessed: table heads, nav bars, tfoot, notes */
  --card:         #FFFFFF;   /* raised: cards, table bodies */

  /* --- Ink. All clear 4.5:1 on all three surfaces. --- */
  --ink:          #1B2A25;   /* 14.9:1 on card */
  --ink-2:        #4C5B54;   /*  7.2:1 */
  --ink-3:        #647368;   /*  5.0:1  — was #7E8C82 (3.5:1, failed AA) */
  --on-brand:     #FFFFED;   /*  6.2:1 on --brand */
  --on-brand-2:   #D2E0D7;   /*  4.6:1 on --brand */

  /* --- Rules. Alpha of the brand hue, so they stay in key on any surface. --- */
  --rule:         rgba(66,103,95,.18);
  --rule-soft:    rgba(66,103,95,.10);
  --rule-strong:  rgba(66,103,95,.30);

  /* --- Categorical series. Fixed order, never cycled. ---
     Validated: adjacent-pair CVD ΔE 8.6 (protan) / 12.3 (tritan),
     normal-vision floor 21.4, all ≥3:1 on card and ground.
     Ordered forms (bar, line, stack): up to 6.
     Unordered forms (scatter, bubble, map): 3 — beyond that, adjacency is
     uncontrolled and c1/c4 collide under deuteranopia. */
  --c1: #00795C;   /* green    — primary series */
  --c2: #D2691E;   /* orange   */
  --c3: #3A6FB5;   /* blue     */
  --c4: #B23A6E;   /* magenta  */
  --c5: #9C7A00;   /* gold     */
  --c6: #5D4E9E;   /* violet   */

  /* --- Sequential (magnitude). One hue, light→dark. 5 steps is the ceiling:
     a 6th cannot hold both the 2:1 light-end floor and a visible ΔL gap. --- */
  --q1: #7EBFAA;
  --q2: #4FA68D;
  --q3: #218C70;
  --q4: #0A6E58;
  --q5: #08543F;

  /* --- Diverging (polarity: change vs prior period, over/under target).
     Two hues, neutral midpoint. Never a hue at the middle. --- */
  --d-neg-2: #A8402A;
  --d-neg-1: #D89A80;
  --d-mid:   #E6E4DA;
  --d-pos-1: #7EBFAA;
  --d-pos-2: #00795C;

  /* --- Status. Reserved. Never reused as a series colour. --- */
  --ok:    #0B6B0B;  --ok-bg:   #EAF5EA;  --ok-br:   rgba(11,107,11,.34);
  --warn:  #8A5E00;  --warn-bg: #FAF0D8;  --warn-br: rgba(138,94,0,.34);
  --crit:  #B2352A;  --crit-bg: #FAEAE8;  --crit-br: rgba(178,53,42,.34);

  /* --- Type. Three faces, one job each.
     sans  = everything structural and every number
     mono  = labels, axis ticks, table heads, metadata (data chrome)
     serif = narration only: standfirsts, figure captions, callout prose --- */
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Source Serif 4", Georgia, serif;

  /* --- Radius. Two steps. --- */
  --r-lg: 10px;   /* cards, KPI panel, table wrapper, note blocks */
  --r-sm: 4px;    /* pills, swatches, buttons, tooltips */

  /* --- Space. 4px base. --- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:44px; --sp-9:64px;

  /* --- Shell --- */
  --maxw:   1200px;
  --gutter: 28px;
  --stick:  56px;   /* scroll-margin under the sticky nav */
}


/* == 02  RESET & BASE ====================================================== */

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
html,body{ margin:0; padding:0 }

body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--brand); text-underline-offset:2px }
:focus-visible{ outline:2px solid var(--brand-2); outline-offset:2px; border-radius:2px }
[hidden]{ display:none !important }

h1,h2,h3,h4{ margin:0; font-family:var(--sans); text-wrap:balance }
.num,.tabular{ font-variant-numeric:tabular-nums }

/* Weights: 500, 600, 700 only. Never 640/660 — those are synthetic on
   system-ui and render inconsistently across platforms. */


/* == 03  LAYOUT SHELL ====================================================== */

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) }
main.wrap{ padding-top:var(--sp-7); padding-bottom:var(--sp-9) }

.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--sp-5) }
.c3{ grid-column:span 3 }  .c4{ grid-column:span 4 }  .c5{ grid-column:span 5 }
.c6{ grid-column:span 6 }  .c7{ grid-column:span 7 }  .c8{ grid-column:span 8 }
.c12{ grid-column:span 12 }

.stack{ display:flex; flex-direction:column; gap:var(--sp-4) }


/* == 04  MASTHEAD ========================================================== */

.masthead{ background:var(--brand); color:var(--on-brand) }
.masthead-in{
  max-width:var(--maxw); margin:0 auto; padding:var(--sp-8) var(--gutter) var(--sp-7);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-6);
}
.masthead .kicker{
  margin:0 0 var(--sp-2); font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-brand-2); font-weight:600;
}
.masthead .kicker .org{ color:var(--on-brand) }
.masthead .kicker .dot{ margin:0 .7em; color:var(--on-brand-2); opacity:.7 }
.masthead h1{
  font-size:34px; font-weight:700; letter-spacing:-.025em; line-height:1.08;
  color:var(--on-brand);
}
/* One sentence on what the report covers. Narration, so serif. */
.masthead .sub{
  margin:var(--sp-2) 0 0; font-family:var(--serif); font-size:15px;
  line-height:1.5; color:var(--on-brand-2); max-width:56ch;
}
/* Reporting window, sync time, coverage. Data chrome, so mono. */
.masthead .meta{ display:flex; gap:var(--sp-7); flex-wrap:wrap; padding-bottom:var(--sp-1) }
.masthead .meta div{ font-family:var(--mono); font-size:11px; line-height:1.5; color:var(--on-brand-2) }
.masthead .meta b{
  display:block; color:var(--on-brand); font-weight:500; font-size:12.5px;
  letter-spacing:.01em; margin-bottom:1px;
}


/* == 05  NAVIGATION ========================================================
   Two components, two jobs. Do not mix them.
     .secnav — anchor links to sections of one long scrolling report
     .tabs   — switches which panel is visible (role=tablist)
   Both sit on --plane so they separate the masthead above from the cards
   below without stacking a second dark band under the masthead.
   ========================================================================== */

.secnav{
  position:sticky; top:0; z-index:40;
  background:var(--plane); border-bottom:1px solid var(--rule);
}
.secnav-in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
}
.secnav-in::-webkit-scrollbar{ display:none }
.secnav a{
  flex:none; display:inline-flex; align-items:baseline; gap:7px;
  padding:12px 12px 10px; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  color:var(--ink-3); text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .12s, border-color .12s;
}
.secnav a .n{ font-size:10px; font-weight:600; font-variant-numeric:tabular-nums; opacity:.75 }
.secnav a:hover{ color:var(--ink) }
.secnav a[aria-current="true"]{ color:var(--brand-deep); border-bottom-color:var(--brand-2) }
.secnav a[aria-current="true"] .n{ color:var(--brand-2); opacity:1 }

.tabs{
  position:sticky; top:0; z-index:40;
  background:var(--plane); border-bottom:1px solid var(--rule);
}
.tabs-in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
}
.tabs-in::-webkit-scrollbar{ display:none }
.tab{
  appearance:none; border:0; background:none; cursor:pointer; flex:none;
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  color:var(--ink-3); padding:13px 15px 11px; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .12s, border-color .12s;
}
.tab:hover{ color:var(--brand) }
.tab[aria-selected="true"]{ color:var(--brand-deep); border-bottom-color:var(--brand-2) }
.tab .cnt{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-left:7px; font-weight:400 }

.subtabs{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 var(--sp-6) }
.subtab{
  appearance:none; cursor:pointer; background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-sm);
  font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-2); padding:7px 11px;
  transition:background .12s, border-color .12s, color .12s;
}
.subtab:hover{ border-color:var(--brand); color:var(--brand) }
.subtab[aria-selected="true"]{ background:var(--brand); border-color:var(--brand); color:var(--on-brand) }

.panel[hidden],.subpanel[hidden]{ display:none }


/* == 06  SECTION HEADS ===================================================== */

section{ margin:0 0 var(--sp-8); scroll-margin-top:var(--stick) }

.sec-head{
  display:flex; align-items:baseline; gap:var(--sp-3);
  border-bottom:2px solid var(--brand); padding-bottom:var(--sp-2); margin-bottom:var(--sp-2);
}
.sec-num{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em;
  color:var(--brand-2); font-variant-numeric:tabular-nums; flex:none;
}
.sec-head h2{ font-size:21px; font-weight:600; letter-spacing:-.015em; color:var(--brand-deep); flex:1 }
.sec-head .meta{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); flex:none }

/* Standfirst: the analyst's framing of the section. Narration, so serif. */
.standfirst{
  font-family:var(--serif); font-size:15.5px; line-height:1.55;
  color:var(--ink-2); margin:var(--sp-3) 0 var(--sp-5); max-width:66ch;
}

.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brand-2); font-weight:600; margin:0 0 var(--sp-2);
}


/* == 07  CARDS ============================================================= */

.card{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  display:flex; flex-direction:column; min-width:0;
}
.card-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:2px; flex:none;
}
.card h3{ font-size:15px; font-weight:600; letter-spacing:-.005em; color:var(--brand-deep) }
.card h4{ font-size:13px; font-weight:600; color:var(--brand-deep) }
.card .unit{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.04em; flex:none }
.card .cap{ font-size:12.5px; color:var(--ink-3); margin:var(--sp-1) 0 var(--sp-3); max-width:62ch }

/* Figure caption: what the chart shows and what it means. Narration, so serif.
   Figures inside it stay sans + tabular so they read as data. */
.card figcaption,
.figcap{
  font-family:var(--serif); font-size:13.5px; line-height:1.6; color:var(--ink-2);
  margin-top:var(--sp-3); padding-top:var(--sp-3);
  border-top:1px dashed var(--rule); max-width:84ch;
}
.figcap b{ font-family:var(--sans); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums }


/* == 08  KPI PANEL =========================================================
   One instrument panel, not a row of separate tiles: a 1px gap over a ruled
   ground gives hairline dividers and reads as a single object.
   ========================================================================== */

.kpis{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden;
}
.kpis.k4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.kpis.k3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.kpi{ background:var(--card); padding:var(--sp-4) var(--sp-4) var(--sp-3) }
.kpi .k{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 6px;
}
/* Headline figures carry the brand. Body data stays neutral ink. */
.kpi .v{
  font-size:29px; font-weight:700; letter-spacing:-.03em; line-height:1;
  color:var(--brand-deep); font-variant-numeric:tabular-nums;
}
.kpi .v small{ font-size:15px; font-weight:600; letter-spacing:-.01em }
.kpi .s{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin:7px 0 0 }


/* == 09  CHARTS ============================================================
   Class contract every chart honours, so chart code moves between reports
   without restyling. Set colours from --c1..--c6 / --q1..--q5 only.
   ========================================================================== */

.chart{ display:block; width:100%; height:auto; overflow:visible }
.chart text{ font-family:var(--mono); font-size:10px; fill:var(--ink-3) }
.chart .vlab{ font-family:var(--mono); font-size:10.5px; fill:var(--ink-2) }   /* value labels */
.chart .clab{ font-family:var(--sans); font-size:11.5px; fill:var(--ink-2) }   /* category labels */
.chart .grid-l{ stroke:var(--rule-soft); stroke-width:1 }                       /* gridlines, recessive */
.chart .axis-l{ stroke:var(--rule-strong); stroke-width:1 }                     /* baseline / axis */
.chart .hit{ fill:transparent; cursor:default }                                 /* hover targets */
.chart .hit:hover{ fill:var(--ink); fill-opacity:.04 }

/* Mark specs: 2px lines, ≥8px markers, and a 2px surface gap between adjacent
   fills and stack segments. `.bar` rounds all four corners, which is right for
   floating and horizontal bars; for columns standing on a baseline, draw the
   rect as a path and round only the two data-end corners, so the mark stays
   anchored to the axis. */
.chart .line{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round }
.chart .area{ fill-opacity:.12; stroke:none }
.chart .bar{ rx:4; ry:4 }
.chart .seg{ stroke:var(--card); stroke-width:2 }
.chart .dot{ r:4; stroke:var(--card); stroke-width:2 }

.chart-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch }


/* == 10  LEGEND ============================================================
   Present whenever there are 2+ series. Identity is never colour alone:
   ≤4 series are also direct-labelled on the marks.
   ========================================================================== */

.legend{
  display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 var(--sp-3);
  padding:0; list-style:none;
}
.legend li,.legend span{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10.5px; color:var(--ink-2);
}
.sw{ width:10px; height:10px; border-radius:2px; flex:none; display:inline-block }


/* == 11  TOOLTIP ===========================================================
   One #tip element per page, reused by every chart. Not one per card.
   ========================================================================== */

#tip{
  position:fixed; z-index:60; pointer-events:none; opacity:0; transition:opacity .09s;
  background:var(--brand-deep); color:var(--on-brand);
  border-radius:var(--r-sm); padding:8px 10px;
  font-family:var(--mono); font-size:11px; line-height:1.5; max-width:260px;
  box-shadow:0 6px 20px rgba(27,42,37,.22);
}
#tip.on{ opacity:1 }
#tip .th{ display:block; font-weight:600; margin-bottom:3px }
#tip .tr{ display:flex; justify-content:space-between; gap:14px; color:var(--on-brand-2) }
#tip .tr b{ color:var(--on-brand); font-weight:500; font-variant-numeric:tabular-nums }
#tip .tr i{ width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:6px }


/* == 12  TABLES ============================================================
   Alignment follows data type, not column position: numeric cells carry .n.
   The old `th,td{text-align:right} :first-child{text-align:left}` rule breaks
   the moment a table has two label columns.
   ========================================================================== */

.tw{
  overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r-lg);
  background:var(--card);
}
table{ border-collapse:collapse; width:100%; font-size:13px }

thead th{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; text-align:left; padding:10px 12px;
  background:var(--plane); border-bottom:1px solid var(--rule);
  white-space:nowrap; position:sticky; top:0;
}
tbody td{ padding:8px 12px; border-bottom:1px solid var(--rule-soft); vertical-align:middle }
tbody tr:last-child td{ border-bottom:0 }
tbody tr:hover td{ background:var(--plane) }

td.n,th.n{ text-align:right; font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums }
td.name{ font-weight:500; color:var(--ink); min-width:180px }
td.dim{ color:var(--ink-3); font-family:var(--mono); font-size:11.5px; white-space:nowrap }

tfoot td{
  padding:9px 12px; background:var(--plane); font-weight:600;
  border-top:1px solid var(--rule-strong); border-bottom:0;
}
tfoot td.n{ color:var(--brand-deep) }

/* In-cell magnitude bar. */
.barcell{ position:relative; min-width:90px }
.barcell .bg,.barcell .fg{
  position:absolute; top:50%; transform:translateY(-50%);
  height:6px; border-radius:3px;
}
.barcell .bg{ left:12px; right:12px; background:var(--rule-soft) }
.barcell .fg{ left:12px; background:var(--c1) }


/* == 13  CHART / TABLE SWAP ================================================
   Every chart has a table view. The toggle swaps in place so the card does
   not change height.
   ========================================================================== */

.tbtn{
  font:inherit; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3);
  background:transparent; border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:4px 9px; cursor:pointer; flex:none;
  transition:color .12s, border-color .12s, background .12s;
}
.tbtn:hover{ color:var(--ink); border-color:var(--ink-3) }
.tbtn[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:var(--on-brand) }

.swap{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin-top:var(--sp-3) }
.swap > .chart-wrap{ flex:1 1 auto; min-height:0; display:flex; align-items:center; width:100% }
.swap > .tw{ display:none; position:absolute; inset:0; margin:0; overflow:auto }
.swap.tbl-on > .chart-wrap{ visibility:hidden }
.swap.tbl-on > .tw{ display:block }


/* == 14  PILLS & STATUS ====================================================
   Status colours are reserved and always ship with a label, never colour
   alone. Never reuse them as a series colour.
   ========================================================================== */

.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:500; padding:3px 7px; border-radius:var(--r-sm);
  border:1px solid; white-space:nowrap;
}
.pill svg{ display:block; flex:none }
.p-ok  { color:var(--ok);    border-color:var(--ok-br);   background:var(--ok-bg) }
.p-warn{ color:var(--warn);  border-color:var(--warn-br); background:var(--warn-bg) }
.p-crit{ color:var(--crit);  border-color:var(--crit-br); background:var(--crit-bg) }
.p-mute{ color:var(--ink-2); border-color:var(--rule);    background:var(--plane) }


/* == 15  CALLOUTS & NOTES ================================================== */

/* Callout: one thing the reader must not miss. Prose, so serif. */
.callout{
  background:var(--plane); border:1px solid var(--rule);
  border-left:3px solid var(--brand-2); border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5); margin:var(--sp-5) 0;
}
.callout .t{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--brand-2); font-weight:600;
}
.callout p{
  font-family:var(--serif); font-size:14.5px; line-height:1.65;
  color:var(--ink-2); margin:var(--sp-2) 0 0; max-width:84ch;
}
.callout.is-warn{ border-left-color:var(--warn) }
.callout.is-warn .t{ color:var(--warn) }

/* Method notes / data caveats. Sans, because they are read as reference. */
.notes{
  background:var(--plane); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6);
}
.notes h3{ font-size:14px; color:var(--brand-deep); margin:0 0 var(--sp-3) }
.notes ul{ margin:0; padding-left:18px }
.notes li{ font-size:12.5px; color:var(--ink-2); margin-bottom:7px }
.notes li b{ color:var(--ink); font-weight:600 }
.notes code{
  font-family:var(--mono); font-size:11.5px; background:var(--card);
  border:1px solid var(--rule-soft); padding:1px 5px; border-radius:var(--r-sm);
}

.deflist{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:0; font-size:13px }
.deflist dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.deflist dd{ margin:0; color:var(--ink) }

.empty{
  border:1px dashed var(--rule); border-radius:var(--r-lg);
  background:var(--card); padding:var(--sp-7) var(--sp-6); color:var(--ink-3);
}


/* == 16  FOOTER ============================================================ */

footer.wrap{
  border-top:1px solid var(--rule); margin-top:var(--sp-9);
  padding-top:var(--sp-6); padding-bottom:var(--sp-9);
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
  display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
}
footer.wrap b{ color:var(--ink-2); font-weight:500 }


/* == 17  RESPONSIVE ======================================================== */

@media (max-width:1000px){
  .kpis{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .kpis.k4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:900px){
  .c3,.c4,.c5,.c6,.c7,.c8{ grid-column:span 12 }
}
@media (max-width:640px){
  :root{ --gutter:16px }
  .masthead-in{ padding:var(--sp-7) var(--gutter) var(--sp-6) }
  .masthead h1{ font-size:25px }
  .masthead .meta{ gap:var(--sp-5) }
  .kpis,.kpis.k4,.kpis.k3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .kpi .v{ font-size:24px }
  .card{ padding:var(--sp-4) var(--sp-4) var(--sp-3) }
  section{ margin-bottom:var(--sp-7) }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ transition:none !important; animation:none !important }
}

/* Forced-colors / print: identity must survive without colour, so charts
   carry direct labels and every chart has a table view. */
@media print{
  .secnav,.tabs,.tbtn{ display:none }
  .card{ break-inside:avoid; border-color:#999 }
  .swap > .tw{ display:block; position:static }
}

/* == PROJECT OVERRIDES ====================================================
   Kept separate so assets/mg-report.css stays byte-identical to the version
   issued by the design system. */

/* Cards are <figure> for the figcaption semantics; the reset above does not
   zero figure margins, so the UA default (15px 40px) was insetting every card
   inside the 12-column grid. */
figure{ margin:0 }

/* Breathing room under the KPI panel before the first section head. */
.kpis{ margin-bottom:var(--sp-7) }