/* ============================================================================
   ENSI REPORT — master design system
   European Nexus for Strategic Intelligence · print-grade A4 report stylesheet
   Renders as a paged PDF via Chrome --print-to-pdf AND as a web "PDF-like" page.
   Palette: magenta #cc37c5 (signature accent), ink #161615, green #2bd17e (data),
   coral #e0533e (alert), on warm white. One accent rule: magenta = emphasis.
   ============================================================================ */

:root{
  --ink:#161615;            /* near-black text */
  --ink-soft:#3a3a38;       /* secondary text */
  --ink-faint:#6f6f6b;      /* captions, meta */
  --rule:#e4e1da;           /* hairlines */
  --paper:#ffffff;
  --paper-warm:#faf8f4;     /* tinted panels */
  --paper-warm2:#f4f1ea;
  --magenta:#cc37c5;        /* PRIMARY ACCENT */
  --magenta-ink:#7d1f78;    /* dark magenta for text on light */
  --magenta-wash:#fbeefa;   /* magenta tint fill */
  --green:#1f9d5b;          /* data positive (darkened #2bd17e for print contrast) */
  --green-wash:#e8f7ee;
  --coral:#e0533e;          /* alert / negative */
  --coral-wash:#fdeee9;
  --navy:#1d2b4f;           /* deep data blue */
  --gold:#b8862b;           /* secondary data */
  --ff-display:"Fraunces","Georgia","Times New Roman",serif;
  --ff-serif:"Spectral","Georgia",serif;
  --ff-sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --ff-mono:"IBM Plex Mono","SFMono-Regular",monospace;
  --pageW:210mm; --pageH:297mm;
  --mx:20mm;   /* page side margin */
}

/* ---- page geometry (print) ------------------------------------------------ */
@page{ size:A4; margin:0; }
@media print{ .no-print{display:none!important;} }

*{ box-sizing:border-box; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
html,body{ margin:0; padding:0; background:#d8d6d0; color:var(--ink);
  font-family:var(--ff-sans); font-size:10.2pt; line-height:1.5; }

/* a .page is one printed sheet. On screen they stack with a gap + shadow. */
.page{
  position:relative; width:var(--pageW); min-height:var(--pageH); height:var(--pageH);
  background:var(--paper); margin:0 auto; overflow:hidden;
  padding:22mm var(--mx) 20mm var(--mx);
  page-break-after:always; break-after:page;
}
@media screen{ .page{ margin:10mm auto; box-shadow:0 6px 30px rgba(0,0,0,.22); } }
.page:last-child{ page-break-after:auto; }
.page.flush{ padding:0; }                       /* full-bleed pages (cover, dividers) */

/* running furniture (folio + running head), injected per page */
.folio{ position:absolute; left:var(--mx); right:var(--mx); bottom:11mm;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--ff-mono); font-size:7pt; letter-spacing:.06em;
  color:var(--ink-faint); text-transform:uppercase; }
.folio .pageno{ color:var(--magenta-ink); font-weight:600; }
.runhead{ position:absolute; left:var(--mx); right:var(--mx); top:11mm;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--ff-mono); font-size:7pt; letter-spacing:.10em;
  color:var(--ink-faint); text-transform:uppercase;
  border-bottom:.5pt solid var(--rule); padding-bottom:4pt; }
.runhead b{ color:var(--ink); font-weight:600; }

/* ---- typography ----------------------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:600; color:var(--ink);
  line-height:1.08; margin:0 0 .35em; letter-spacing:-.01em; }
h1{ font-size:30pt; } h2{ font-size:19pt; } h3{ font-size:13pt; } h4{ font-size:11pt; }
h2 .num,h3 .num{ color:var(--magenta); font-variant-numeric:tabular-nums; }
p{ margin:0 0 .62em; }
.lead{ font-family:var(--ff-serif); font-size:12.5pt; line-height:1.5; color:var(--ink-soft); }
.dropcap::first-letter{ font-family:var(--ff-display); font-weight:600; float:left;
  font-size:46pt; line-height:.82; padding:3pt 6pt 0 0; color:var(--magenta); }
strong,b{ color:var(--magenta-ink); font-weight:600; }
a{ color:var(--magenta-ink); text-decoration:none; }
.small{ font-size:8.5pt; } .mono{ font-family:var(--ff-mono); }
.eyebrow{ font-family:var(--ff-mono); font-size:7.5pt; letter-spacing:.18em;
  text-transform:uppercase; color:var(--magenta); font-weight:600; margin-bottom:6pt; }
.subtle{ color:var(--ink-faint); }

/* column flow for dense body pages */
.cols2{ column-count:2; column-gap:9mm; }
.cols2 h3{ column-span:all; margin-top:.4em; }
.keepwith{ break-inside:avoid; }

/* section opener accent bar */
.kicker{ display:inline-block; font-family:var(--ff-mono); font-size:8pt;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--magenta);
  padding:3pt 8pt; border-radius:2pt; }
.hr{ height:2pt; background:var(--ink); border:0; margin:10pt 0; width:42pt; }
.hr.mag{ background:var(--magenta); }

/* ---- KPI tiles & stat blocks --------------------------------------------- */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:5mm; margin:6mm 0; }
.kpis.k3{ grid-template-columns:repeat(3,1fr);} .kpis.k2{ grid-template-columns:repeat(2,1fr);}
.kpi{ border:.75pt solid var(--rule); border-top:3pt solid var(--magenta);
  border-radius:3pt; padding:5mm 4mm; background:var(--paper-warm); break-inside:avoid; }
.kpi .val{ font-family:var(--ff-display); font-size:25pt; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.kpi .val .u{ font-size:12pt; color:var(--magenta-ink); }
.kpi .lab{ font-size:8pt; color:var(--ink-faint); margin-top:5pt; line-height:1.3; }
.kpi .src{ font-family:var(--ff-mono); font-size:6.5pt; color:var(--ink-faint); margin-top:4pt; }
.kpi.green{ border-top-color:var(--green);} .kpi.green .val .u{color:var(--green);}
.kpi.coral{ border-top-color:var(--coral);} .kpi.coral .val .u{color:var(--coral);}
.kpi.navy{ border-top-color:var(--navy);} .kpi.navy .val .u{color:var(--navy);}

.statline{ display:flex; gap:7mm; flex-wrap:wrap; margin:5mm 0; padding:4mm 0;
  border-top:1.5pt solid var(--ink); border-bottom:.5pt solid var(--rule); }
.statline .s{ flex:1 1 0; min-width:30mm; }
.statline .s b{ display:block; font-family:var(--ff-display); font-size:18pt; color:var(--ink); }
.statline .s span{ font-size:7.5pt; color:var(--ink-faint); }

/* ---- callouts, pull quotes, source chips --------------------------------- */
.callout{ background:var(--paper-warm); border-left:3pt solid var(--magenta);
  padding:4mm 5mm; margin:5mm 0; border-radius:0 3pt 3pt 0; break-inside:avoid; font-size:9.5pt; }
.callout.green{ border-left-color:var(--green); background:var(--green-wash);}
.callout.coral{ border-left-color:var(--coral); background:var(--coral-wash);}
.callout .h{ font-family:var(--ff-mono); font-size:7.5pt; letter-spacing:.12em;
  text-transform:uppercase; color:var(--magenta-ink); margin-bottom:3pt; font-weight:600; }
.callout.green .h{color:var(--green);} .callout.coral .h{color:var(--coral);}

.pquote{ break-inside:avoid; margin:6mm 0; padding-left:12mm; position:relative; }
.pquote::before{ content:"\201C"; position:absolute; left:0; top:-6mm;
  font-family:var(--ff-display); font-size:46pt; color:var(--magenta); line-height:1; }
.pquote p{ font-family:var(--ff-serif); font-size:13.5pt; line-height:1.42; color:var(--ink); font-style:italic; }
.pquote .cite{ font-family:var(--ff-mono); font-size:7.5pt; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-faint); font-style:normal; margin-top:3mm; }
.pquote .cite b{ color:var(--magenta-ink); }

.chip{ display:inline-block; font-family:var(--ff-mono); font-size:6.8pt; letter-spacing:.04em;
  border:.6pt solid var(--rule); border-radius:10pt; padding:1.5pt 6pt; color:var(--ink-faint);
  background:var(--paper); margin:1pt 2pt 1pt 0; }
.chip b{ color:var(--magenta-ink); }

/* ---- figures & captions --------------------------------------------------- */
figure{ margin:5mm 0; break-inside:avoid; }
figure .fignum{ font-family:var(--ff-mono); font-size:7pt; letter-spacing:.10em;
  text-transform:uppercase; color:var(--magenta); font-weight:600; }
figcaption{ font-size:7.8pt; color:var(--ink-faint); margin-top:3pt; line-height:1.35; }
figcaption b{ color:var(--ink); }

/* ---- charts (pure CSS/SVG, no JS deps) ----------------------------------- */
/* horizontal bar chart */
.barchart{ margin:3mm 0; }
.barchart .row{ display:grid; grid-template-columns:34mm 1fr auto; align-items:center;
  gap:3mm; margin:2.4mm 0; font-size:8pt; }
.barchart .row .name{ color:var(--ink-soft); text-align:right; }
.barchart .row .track{ background:var(--paper-warm2); border-radius:2pt; height:7mm; position:relative; overflow:hidden; }
.barchart .row .fill{ display:block; height:100%; min-width:1pt; border-radius:2pt; background:var(--magenta); }
.barchart .row .fill.green{background:var(--green);} .barchart .row .fill.navy{background:var(--navy);}
.barchart .row .fill.coral{background:var(--coral);} .barchart .row .fill.gold{background:var(--gold);}
.barchart .row .v{ font-family:var(--ff-mono); font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; }
/* donut via conic-gradient */
.donut{ width:34mm; height:34mm; border-radius:50%; position:relative;
  background:conic-gradient(var(--magenta) calc(var(--p)*1%), var(--paper-warm2) 0); }
.donut::after{ content:""; position:absolute; inset:24%; background:var(--paper); border-radius:50%; }
.donut .c{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-size:13pt; color:var(--ink); z-index:1; }
.legend{ font-size:7.5pt; color:var(--ink-soft); }
.legend i{ display:inline-block; width:8pt; height:8pt; border-radius:2pt; margin-right:3pt; vertical-align:-1pt; }

/* ---- tables --------------------------------------------------------------- */
table.data{ width:100%; border-collapse:collapse; font-size:8pt; margin:4mm 0; break-inside:avoid; }
table.data th{ text-align:left; font-family:var(--ff-mono); font-size:6.8pt; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint); border-bottom:1.2pt solid var(--ink); padding:3pt 4pt; }
table.data td{ border-bottom:.5pt solid var(--rule); padding:3.4pt 4pt; vertical-align:top; }
table.data tr:nth-child(even) td{ background:var(--paper-warm); }
table.data td .flag{ font-weight:600; color:var(--magenta-ink); }

/* ---- numbered breakdown (the "priority" anatomy) -------------------------- */
.aspect{ margin:4mm 0; break-inside:avoid; }
.aspect .lbl{ font-family:var(--ff-mono); font-size:7.5pt; letter-spacing:.12em;
  text-transform:uppercase; color:var(--magenta); font-weight:600;
  border-bottom:.5pt solid var(--rule); padding-bottom:2pt; margin-bottom:3pt; }
ol.principles{ counter-reset:p; list-style:none; padding:0; margin:3mm 0; }
ol.principles li{ counter-increment:p; position:relative; padding-left:9mm; margin:0 0 3mm;
  font-size:9pt; break-inside:avoid; }
ol.principles li::before{ content:counter(p); position:absolute; left:0; top:0;
  width:6mm; height:6mm; background:var(--magenta); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--ff-mono);
  font-size:7.5pt; font-weight:600; }
ol.principles li b{ color:var(--ink); }
ul.examples{ list-style:none; padding:0; margin:3mm 0; font-size:8.5pt; }
ul.examples li{ padding:2.2mm 0 2.2mm 7mm; border-bottom:.5pt solid var(--rule); position:relative; break-inside:avoid; }
ul.examples li::before{ content:"\25B8"; position:absolute; left:0; color:var(--magenta); }
ul.examples li .co{ font-weight:600; color:var(--magenta-ink); }

/* ---- cover & full-bleed dividers ------------------------------------------ */
.cover{ background:var(--ink); color:#fff; padding:26mm var(--mx); display:flex; flex-direction:column; height:var(--pageH); }
.cover .wm{ font-family:var(--ff-mono); font-size:8pt; letter-spacing:.22em; text-transform:uppercase; color:var(--magenta); }
.cover h1{ color:#fff; font-size:43pt; line-height:1.02; margin-top:auto; }
.cover .sub{ font-family:var(--ff-serif); font-size:14pt; color:rgba(255,255,255,.78); margin-top:5mm; max-width:150mm; }
.cover .meta{ margin-top:8mm; font-family:var(--ff-mono); font-size:8pt; letter-spacing:.06em;
  color:rgba(255,255,255,.6); text-transform:uppercase; display:flex; gap:8mm; flex-wrap:wrap; }
.cover .meta b{ color:var(--magenta); }
.divider{ background:var(--ink); color:#fff; height:var(--pageH); padding:var(--mx); display:flex; flex-direction:column; justify-content:center; }
.divider .pt{ font-family:var(--ff-mono); font-size:9pt; letter-spacing:.2em; color:var(--magenta); text-transform:uppercase; }
.divider h2{ color:#fff; font-size:34pt; max-width:150mm; margin-top:6mm; }
.divider .dl{ color:rgba(255,255,255,.7); font-family:var(--ff-serif); font-size:12pt; margin-top:6mm; max-width:140mm; }

/* ---- contents ------------------------------------------------------------- */
.toc{ font-size:9pt; }
.toc .grp{ font-family:var(--ff-mono); font-size:7.5pt; letter-spacing:.12em; text-transform:uppercase;
  color:var(--magenta); margin:5mm 0 2mm; border-bottom:.5pt solid var(--rule); padding-bottom:2pt; }
.toc .row{ display:flex; align-items:baseline; gap:3pt; margin:1.6mm 0; }
.toc .row .t{ color:var(--ink); } .toc .row .d{ flex:1; border-bottom:.5pt dotted var(--rule); }
.toc .row .pg{ font-family:var(--ff-mono); color:var(--magenta-ink); font-variant-numeric:tabular-nums; }
.toc .row .n{ font-family:var(--ff-mono); color:var(--ink-faint); width:8mm; }

/* utility */
.mt0{margin-top:0;} .mb0{margin-bottom:0;} .tc{text-align:center;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7mm;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm;}
.box{border:.75pt solid var(--rule);border-radius:3pt;padding:4mm;background:var(--paper-warm);break-inside:avoid;}
.box .bt{font-family:var(--ff-display);font-size:11pt;margin-bottom:2mm;}
/* ---- compact AREA deep-dive page (fits a dense 7-lens area on one A4 sheet) ---- */
.page.area{ padding:15mm 18mm 12mm; font-size:9pt; line-height:1.4; }
.page.area h2{ font-size:16.5pt; margin-bottom:.2em; }
.page.area .hr{ margin:5pt 0; }
.page.area .lead{ font-size:10pt; line-height:1.38; margin:1.5mm 0 3mm !important; }
.page.area .kpis{ gap:3.5mm; margin:0 0 3mm !important; }
.page.area .kpi{ padding:3mm 3mm; border-top-width:2.5pt; }
.page.area .kpi .val{ font-size:18pt; }
.page.area .kpi .lab{ font-size:7pt; margin-top:3pt; }
.page.area .kpi .src{ font-size:6pt; margin-top:2pt; }
.page.area .aspect{ margin:2.2mm 0; }
.page.area .aspect .lbl{ font-size:7pt; margin-bottom:2pt; }
.page.area .aspect p{ font-size:8.6pt; line-height:1.36; margin:0 0 1mm; }
.page.area .statline{ margin:2mm 0; padding:2.5mm 0; }
.page.area .statline .s b{ font-size:14pt; }
.page.area .statline .s span{ font-size:7pt; }
.page.area ol.principles{ margin:1.5mm 0; }
.page.area ol.principles li{ font-size:8pt; padding-left:8mm; margin-bottom:1.6mm; line-height:1.32; }
.page.area ol.principles li::before{ width:5mm; height:5mm; font-size:7pt; }
.page.area ul.examples li{ font-size:7.4pt !important; padding:1.5mm 0 1.5mm 6mm; line-height:1.3; }
.page.area .box{ padding:2mm 3mm !important; }
.page.area .callout{ padding:2.5mm 4mm; font-size:8.2pt; margin:2.5mm 0 0; }
.page.area .grid2{ gap:6mm !important; }

/* tighten dense data tables so long matrices fit one sheet */
table.data{ font-size:7.7pt; }
table.data th{ padding:2.4pt 4pt; }
table.data td{ padding:2.3pt 4pt; line-height:1.28; }

/* final nudge for the longest matrices */
table.data{ font-size:7.4pt; }
table.data td{ padding:1.8pt 4pt; line-height:1.22; }
table.data th{ padding:2pt 4pt; }
