/* ==========================================================================
   NF Survey Report 2025 -- page styles (ported verbatim from
   build_report.py PAGE_CSS, class names unchanged so the section HTML
   strings built in the logic block below can be dropped in unmodified). */
*{box-sizing:border-box}
/* Data-viz palette: the values tokenColour() falls back to, declared once so the
   ramp is inspectable and overridable rather than living only in JS fallbacks. */
.nfsr{
  --wt-dv-border:#eceef1;
  --wt-dv-group-1:#dde4fb; --wt-dv-group-2:#a7bef4; --wt-dv-group-3b:#7fa0ef;
  --wt-dv-group-3a:#4f74e8; --wt-dv-group-4:#2250e3; --wt-dv-group-5:#302682;
  --wt-dv-africa:#281e32; --wt-dv-americas:#2250e3; --wt-dv-asia:#52adf5;
  --wt-dv-europe:#66d463; --wt-dv-oceania:#7feeb2;
  --wt-dv-cat-1:#2250e3; --wt-dv-cat-2:#52adf5; --wt-dv-cat-3:#66d463;
  --wt-dv-cat-4:#302682; --wt-dv-cat-5:#2bb6a6; --wt-dv-cat-6:#5847b8;
}
.nfsr{font-family:'Ubuntu',Arial,sans-serif;line-height:1.5;color:#281e32}
.nfsr .doc{max-width:1120px;margin:0 auto;background:#fff}
.nfsr .cover{background:linear-gradient(135deg,var(--wt-ocean-blue,#302682),var(--wt-transition-blue,#2250e3));color:#fff;padding:120px 64px 96px}
.nfsr .cover-inner{max-width:760px}
.nfsr .cover-eyebrow{letter-spacing:.28em;font-weight:500;font-size:14px;opacity:.85}
.nfsr .cover-title{font-size:60px;line-height:1.02;font-weight:700;margin:18px 0 0}
.nfsr .cover-year{font-size:112px;font-weight:700;line-height:1;margin:8px 0 0;color:var(--wt-sky-blue,#52adf5)}
.nfsr .cover-tagline{margin-top:24px;font-size:20px;font-weight:300;opacity:.92}
.nfsr .sec{padding:56px 64px;border-top:1px solid #eceef1}
.nfsr .kicker{font-size:13px;letter-spacing:.2em;font-weight:700;color:var(--wt-transition-blue,#2250e3)}
.nfsr h2{font-size:32px;font-weight:700;margin:6px 0 18px;color:#281e32}
.nfsr h3{font-size:20px;font-weight:700;margin:34px 0 10px;color:#302682}
.nfsr h3.brk{margin-top:44px;border-top:2px solid #eceef1;padding-top:28px}
.nfsr h4{font-size:14px;font-weight:500;margin:0 0 8px;color:#281e32;display:flex;align-items:center;gap:6px}
.nfsr p{margin:0 0 14px;max-width:74ch;color:#3c3a44}
.nfsr .fn{font-size:12.5px;color:#6b6975}
/* ---- Contents: anchor navigation over the numbered sections ---- */
.nfsr [id^="sec-"]{scroll-margin-top:24px}
.nfsr .contents{padding-top:34px;padding-bottom:30px}
.nfsr .contents-head{font-size:13px;letter-spacing:.2em;font-weight:700;text-transform:uppercase;color:var(--wt-transition-blue,#2250e3);margin-bottom:16px}
.nfsr .nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:2px 28px}
.nfsr .nav-item{display:flex;align-items:baseline;gap:12px;padding:11px 10px 11px 4px;border-bottom:1px solid #eceef1;text-decoration:none;color:#281e32;border-radius:6px;transition:background .14s var(--ease-out,ease-out),color .14s var(--ease-out,ease-out),padding-left .14s var(--ease-out,ease-out)}
.nfsr .nav-item:hover{background:#f4f7fe;color:var(--wt-transition-blue,#2250e3);padding-left:10px}
.nfsr .nav-num{font-size:12px;font-weight:700;letter-spacing:.08em;color:#9a98a3;flex:none;width:20px}
.nfsr .nav-item:hover .nav-num{color:var(--wt-transition-blue,#2250e3)}
.nfsr .nav-label{font-size:14.5px;font-weight:500;line-height:1.35}
@media print{.nfsr .contents{break-after:page}}
/* ---- LA28 focus: the report's one dark, full-bleed feature section ---- */
.nfsr .focus{background:linear-gradient(135deg,var(--wt-deep-navy,#281e32) 0%,var(--wt-ocean-blue,#302682) 55%,var(--wt-transition-blue,#2250e3) 100%);color:#fff;padding:0;margin:44px 0;border-radius:18px;overflow:hidden}
.nfsr .focus-inner{padding:44px 48px 40px;max-width:none}
.nfsr .focus .kicker.focus-kicker{color:var(--wt-lawn-green,#66d463)}
.nfsr .focus h2{color:#fff;font-size:34px;max-width:22ch;margin:8px 0 24px}
.nfsr .focus p{color:rgba(255,255,255,.9);font-weight:300;font-size:15px;line-height:1.65;max-width:62ch;margin:0}
.nfsr .focus a{color:var(--wt-dew-green,#7feeb2);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.nfsr .focus a:hover{color:#fff}
.nfsr .focus-row{display:grid;grid-template-columns:1fr 260px;gap:40px;align-items:center;padding:26px 0;border-top:1px solid rgba(255,255,255,.16)}
.nfsr .focus-logo{display:block;height:150px;width:100%;border-bottom:0;text-decoration:none}
/* The white-outlined lockup keeps the gradient script legible on the dark panel. */
.nfsr .focus-logo-img{display:block;height:100%;width:100%;object-fit:contain;object-position:center}

.nfsr .focus-close{border-top:1px solid rgba(255,255,255,.16);padding-top:22px;margin-top:4px !important;font-style:italic}
@media (max-width:720px){.nfsr .focus-row{grid-template-columns:1fr;gap:18px}.nfsr .focus-logo{height:120px;width:100%}}
.nfsr a{color:var(--wt-transition-blue,#2250e3)}
.nfsr .dot{width:11px;height:11px;border-radius:3px;display:inline-block}
/* Domain subtitle: flex + gap so the colour swatch never touches its label. */
.nfsr h3.dom-h{display:flex;align-items:center;gap:10px}
.nfsr h3.dom-h .dot{flex:none}
.nfsr .stat-row{display:flex;gap:16px;margin:22px 0 22px;flex-wrap:wrap}
.nfsr .stat{flex:1;min-width:150px;background:#f7f9fc;border:1px solid #eceef1;border-radius:14px;padding:18px 20px}
.nfsr .stat-num{font-size:36px;font-weight:700;color:var(--wt-transition-blue,#2250e3);line-height:1}
.nfsr .stat-lbl{margin-top:6px;font-size:13px;color:#6b6975}
.nfsr .tbl{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0}
.nfsr .tbl th,.nfsr .tbl td{text-align:left;padding:9px 12px;border-bottom:1px solid #eceef1;vertical-align:middle}
.nfsr .tbl th{font-weight:500;color:#6b6975;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.nfsr .tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.nfsr .tbl .tot td{font-weight:700;border-top:2px solid #281e32;border-bottom:none}
.nfsr .tbl.mini{max-width:360px}.nfsr .tbl.half{max-width:520px}
.nfsr .wcell{width:170px}.nfsr .wbar{display:block;height:9px;border-radius:6px}
.nfsr .gcell{display:inline-block;padding:3px 9px;border-radius:999px;font-weight:700;font-size:12px;text-align:center;min-width:30px}
.nfsr .nmcell{display:flex;align-items:center;gap:10px;width:100%}
.nfsr .nmcell .gcell{margin-left:auto;flex:none;box-sizing:border-box;white-space:nowrap}
.nfsr .nmcell--n .gcell{width:34px;min-width:34px;padding:3px 0}
.nfsr .chg{font-weight:700;font-size:12px;white-space:nowrap}
.nfsr .ar{font-size:11px}.nfsr .ar.up{color:#2e9e34}.nfsr .ar.down{color:#d64545}.nfsr .ar.same{color:#b7b5bf}
.nfsr .chg.up{color:#2e9e34}.nfsr .chg.down{color:#d64545}.nfsr .chg.same{color:#8b8992}
.nfsr .split-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:#3c3a44;margin:6px 0 12px}
.nfsr .split-legend .sw{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
/* flex-basis pins both radars to the same track width so the two charts line
   up vertically regardless of what sits in the column beside them. */
.nfsr .radar-wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.nfsr .radar{flex:0 1 460px;min-width:320px;max-width:460px}
.nfsr .radar-legend .sw{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
.nfsr .radar-badges{flex:1;min-width:240px}
.nfsr .badge-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;border-bottom:1px solid #f0f2f5}
.nfsr .radar-ax,.nfsr .wt-radar__ax{font-size:10.5px;fill:#3c3a44}
.nfsr .crit{margin:6px 0;padding-left:20px}.nfsr .crit li{margin:5px 0;color:#3c3a44;font-size:14px}
.nfsr .groups-layout{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;margin:10px 0 22px}
.nfsr .groups-layout .gcol-tbl{flex:2 1 360px;min-width:300px}
.nfsr .groups-layout .gcol-tbl .tbl{margin:0}
/* The mini table is capped at 360px, so the histogram takes the slack rather
   than being squeezed into a third of the row. */
.nfsr .groups-layout .gcol-hist{flex:1 1 440px;min-width:320px}
.nfsr .groups-layout .gcol-hist h4{margin:0 0 8px}
/* Keep the table and histogram on one row at any width: no wrapping, and both
   columns allowed to shrink below their basis. */
.nfsr .groups-layout:has(.gcol-hist){align-items:center;flex-wrap:nowrap}
.nfsr .groups-layout:has(.gcol-hist) .gcol-tbl{flex:0 1 360px;min-width:0}
.nfsr .groups-layout:has(.gcol-hist) .gcol-hist{min-width:0}
/* Drop the SVG's fixed pixel height so it scales with its column instead of
   letterboxing inside a 240px-tall box. */
.nfsr .gcol-hist .wt-histogram{display:block;width:100%;height:auto}
.nfsr .cx-grid{stroke:#ccd1d6;stroke-dasharray:3 3;stroke-width:1}
.nfsr .crit-card{flex:1 1 280px;min-width:260px;background:#f7f9fc;border:1px solid #eceef1;border-radius:14px;padding:16px 20px}
.nfsr .crit-card h3{margin:0 0 8px;font-size:16px}
.nfsr .crit-card .crit-lead{font-size:13px;color:#3c3a44;margin:0 0 10px;line-height:1.45}
.nfsr .crit-card .crit li{font-size:13px}
.nfsr .donut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;justify-items:center}
.nfsr .wt-donut__num{font-size:22px;font-weight:700;fill:#281e32}
.nfsr .wt-donut__sub{font-size:10px;fill:#9a98a3}
.nfsr .wt-donut__lbl{font-size:13px;font-weight:500;fill:#281e32}
.nfsr .map{margin:10px 0;border:1px solid #eceef1;border-radius:12px;overflow:hidden;background:#fff;padding:10px}
.nfsr .map svg{display:block;width:100%;height:auto}
.nfsr .hero-trend{background:#f7f9fc;border:1px solid #eceef1;border-radius:14px;padding:18px 22px;margin:8px 0 22px}
.nfsr .trend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.nfsr .trend-card{background:#fff;border:1px solid #eceef1;border-radius:14px;padding:12px 14px}
/* auto-FILL, not auto-fit. Coaches and Marketing, Media & Communication carry a single card each,
   and auto-fit collapses the empty track so that card stretched to the full 984px. Its chart is a
   320x150 viewBox, which preserves its aspect ratio, so the drawing stayed small and centred in a
   very wide box while every other domain showed tidy 482px cards. auto-fill keeps the empty track,
   so a lone card is the same size as its siblings elsewhere. */
.nfsr .kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-bottom:12px}
.nfsr .kpi-card{background:#fff;border:1px solid var(--wt-dv-border,#eceef1);border-radius:14px;padding:12px 14px}
/* Nested inside .kpi-card, so the chart carries no border of its own — only the
   outer KPI card is outlined. */
.nfsr .wt-kpistackedbar{background:transparent;border:0;padding:0}
.nfsr .kpi-empty{color:#9a98a3;font-size:13px;font-style:italic;padding:20px 0}
.nfsr .prov{font-size:10px;font-weight:700;color:#b7791f;background:#fef3d7;border-radius:4px;padding:1px 6px;margin-left:6px;text-transform:uppercase}

/* ==========================================================================
   Trailing items, and why these column counts.

   Every grid here was `auto-fit, minmax(N, 1fr)`, which picks as many columns
   as fit and says nothing about whether the item count divides by them. Inside
   the report's 984px content column that left a trailing item alone in an
   otherwise empty row in three places: eight domain cards as 3+3+2, four KPI
   cards per domain as 3+1, and worst of all the five confederations in
   section 10 as 2+2+1, which put Oceania on a row of its own beside half a
   row of nothing.

   The counts above are chosen to divide what each grid actually carries: four
   across for the eight domains, two across for the KPI cards. Both keep
   auto-fit, so a domain that has a single card still gets the full width when
   the empty tracks collapse.

   Section 10 cannot be solved that way, because five never divides by a whole
   number of equal columns. It is multi-column instead: the blocks flow and the
   browser balances the two columns, so there is no lone row and no block
   stretched over dead space at the bottom of a short row. */
.nfsr .rk-grid{display:grid;grid-template-columns:1fr;gap:20px}
.nfsr .rk-block{margin:0}
/* Reference rows, not prose: 43px of row for a name, a score and an arrow was most of why this
   section ran to 4,800px. Tighter rows take roughly 11px off each of the 169, and the change is
   scoped to this section so the eight-row Indicators table keeps its roomier setting. */
.nfsr .rk-block .wt-datatable th,
.nfsr .rk-block .wt-datatable td{padding:4px 12px}
.nfsr .rk-block .wt-datatable{font-size:13.5px;margin:6px 0}

/* Each of the five tables used to size its own columns to its own content, so the group chip and
   the score landed at a different x in every block: 309px into Africa, whose longest name is
   "Democratic Republic of the Congo", against 274px into Americas. Read down the section the
   columns visibly stepped in and out. A fixed layout with the two numeric columns pinned gives all
   five tables one geometry, and the name column takes whatever is left. */
.nfsr .rk-block .wt-datatable{table-layout:fixed}
.nfsr .rk-block .wt-datatable th:nth-child(2),
.nfsr .rk-block .wt-datatable td:nth-child(2){width:76px}
.nfsr .rk-block .wt-datatable th:nth-child(3),
.nfsr .rk-block .wt-datatable td:nth-child(3){width:40px}
/* A name long enough to need the room wraps inside its cell rather than shoving the chip out of
   the column it now shares with four other tables. */
.nfsr .rk-block .nmcell{min-width:0}
/* Footnote marker on a federation held at Group 4 by the minimum criteria, and the note under the
   five tables that explains it. Gold rather than red: it marks a rule, not a fault. */
.nfsr .g5-mark{color:#a97e12;font-weight:700;margin-left:4px}
.nfsr .rk-note{font-size:12.5px;color:#6b6975;font-weight:300;line-height:1.55;margin:14px 0 0;max-width:74ch}

/* Desktop: place the five confederations explicitly rather than letting them flow.
   Flowing them put Oceania at the foot of the second column, under Europe; placing them puts it
   in the first column beside Europe, which is both what the layout wants and 700px shorter.

       Africa    | Asia
       Americas  | Europe   <- spans two rows, being far the tallest at 51 federations
       Oceania   |

   The nth-child indexes are the alphabetical DOM order the markup is built in, which is fixed:
   five continental confederations, CONTINENT_ORDER, never more or fewer. Mobile inherits the
   single-column rule above, so the reading order there stays alphabetical with Oceania last.
   If Europe ever stopped being the tallest the only cost is whitespace, not a broken layout. */
@media (min-width:721px){
  .nfsr .rk-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .nfsr .rk-block:nth-child(1){grid-area:1/1/2/2}   /* Africa */
  .nfsr .rk-block:nth-child(2){grid-area:2/1/3/2}   /* Americas */
  .nfsr .rk-block:nth-child(3){grid-area:1/2/2/3}   /* Asia */
  .nfsr .rk-block:nth-child(4){grid-area:2/2/4/3}   /* Europe */
  .nfsr .rk-block:nth-child(5){grid-area:3/1/4/2}   /* Oceania */
}
.nfsr .gt .gtd,.nfsr .gt .ctd{text-align:center;width:52px}
.nfsr .cx-lbl,.nfsr .wt-stackedbar__row-label{font-size:13px;fill:#3c3a44;font-weight:500}
.nfsr .cx-lbl-strong,.nfsr .wt-stackedbar__row-label--world{font-weight:700;fill:#281e32}
.nfsr .cx-val{font-size:13px;fill:#281e32;font-weight:700}.nfsr .cx-sub{font-size:11px;fill:#9a98a3;font-weight:400}
.nfsr .cx-stack,.nfsr .wt-stackedbar__val,.nfsr .wt-kpistackedbar__seg-val{font-size:11px;font-weight:700;text-anchor:middle}
/* Figures for segments too narrow to hold one, set under the bar and joined to their segment by a
   hairline. Smaller and lighter than an in-bar figure so the lane reads as a footnote to the bar
   rather than as a second row of data. */
.nfsr .wt-stackedbar__val-out,.nfsr .wt-kpistackedbar__seg-out{font-size:9.5px;font-weight:700;text-anchor:middle}
.nfsr .wt-kpistackedbar__seg-out{font-weight:400}
.nfsr .wt-seglead{fill:none;stroke-width:.8;opacity:.75}
.nfsr .cx-legend,.nfsr .wt-stackedbar__legend-text,.nfsr .wt-splitbar__legend-text{font-size:11px;fill:#6b6975}
.nfsr .cx-axis,.nfsr .wt-trend__axis,.nfsr .wt-histogram__axis{font-size:10px;fill:#9a98a3}
.nfsr .cx-pt,.nfsr .wt-trend__pt-label{font-size:11px;font-weight:700;fill:#281e32}
.nfsr .wt-trend__lbl,.nfsr .wt-histogram__lbl{font-size:13px;fill:#281e32}
.nfsr .wt-trend__grid{stroke:#e5e7eb;stroke-width:1}
.nfsr .wt-histogram__grid{stroke:#ccd1d6;stroke-width:1;stroke-dasharray:3 3}
.nfsr .wt-trend__line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.nfsr .wt-radar__grid{fill:none;stroke:#e5e7eb;stroke-width:1}
.nfsr .wt-radar__spoke{stroke:#e5e7eb;stroke-width:1}
.nfsr .wt-radar__poly{stroke-width:2;stroke-linejoin:round}
.nfsr .wt-radar__lg{font-size:12px;fill:#281e32}
.nfsr .wt-kpistackedbar__title{font-size:13px;font-weight:700;color:#281e32;margin:0 0 6px}
.nfsr .wt-kpistackedbar__year{font-size:9.5px;fill:#9a98a3}
.nfsr .wt-kpistackedbar__total{font-size:10px;font-weight:400;fill:#281e32}
/* Regular weight throughout these bar charts (overrides the shared .cx-stack rule). */
.nfsr .wt-kpistackedbar .wt-kpistackedbar__seg-val{font-weight:400}
.nfsr .wt-splitbar__val{font-size:11px;font-weight:700}
.nfsr .wt-splitbar__legend-pct{font-size:13px;fill:#9a98a3}
.nfsr .wt-datatable{width:100%;border-collapse:collapse;font-size:14px;color:#281e32;margin:8px 0}
.nfsr .wt-datatable th,.nfsr .wt-datatable td{padding:9px 12px;border-bottom:1px solid #eceef1;text-align:left;vertical-align:middle}
.nfsr .wt-datatable th{font-weight:500;color:#6b6975;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.nfsr .wt-datatable__th--num,.nfsr .wt-datatable__td--num{text-align:right;font-variant-numeric:tabular-nums}
.nfsr .wt-datatable__dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.nfsr .wt-datatable__wcell{display:block;height:9px;width:150px;border-radius:6px;background:#e5e7eb;overflow:hidden}
.nfsr .wt-datatable__wbar{display:block;height:9px;border-radius:6px}
.nfsr .wt-datatable__change{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.nfsr .wt-datatable__ar{font-size:11px}
.nfsr .wt-datatable__ar--up{color:#2e9e34}.nfsr .wt-datatable__ar--down{color:#d64545}.nfsr .wt-datatable__ar--same{color:#b7b5bf}
.nfsr .back{background:linear-gradient(135deg,var(--wt-ocean-blue,#302682),var(--wt-transition-blue,#2250e3));color:#fff;padding:96px 64px;text-align:center}
.nfsr .back .wt-logo{height:56px;filter:brightness(0) invert(1);margin-bottom:32px}
.nfsr .key-msg{font-size:34px;font-weight:700;max-width:20ch;margin:0 auto 44px}
/* One row, never wrapping. */
/* Every lockup's wordmark bottoms out at its frame edge, so flex-end puts all
   five "Triathlon" baselines on one line despite the differing heights. */
.nfsr .conf-logos{display:flex;flex-wrap:nowrap;gap:22px;justify-content:center;align-items:flex-end;margin-bottom:40px}
.nfsr .conf-logos img{height:38px;width:auto;flex:none;filter:brightness(0) invert(1);opacity:.92}
/* Europe's wordmark fills only 69% of its frame height (its star mark overshoots
   top and bottom), so a shared height renders its text ~1.43x smaller. Scaling
   the whole lockup up by that factor equalises the wordmarks while keeping each
   logo's own mark-to-"Triathlon" proportions intact. */
.nfsr .conf-logos .cl--europe{height:54px;margin:0 -24px}
.nfsr .back-contact a{color:#fff}
.nfsr .loading{padding:100px 40px;text-align:center;color:#9a98a3;font-size:15px}
@media print{.nfsr .doc{box-shadow:none}.nfsr .sec{page-break-inside:avoid}.nfsr .cover,.nfsr .back{page-break-after:always}}

/* ==========================================================================
   Small screens.

   The report is a print/desktop artboard: fixed 64px section padding, display
   type sized in px, and grids whose minimum column is wider than a phone. At
   375px that left 199px of content width, so the cover title clipped mid-word
   and most grids overflowed. This layer reflows it.

   It used to be injected at runtime with every selector prefixed `html`, to
   out-specify artboard rules the bundle appended after it. Now that the page
   loads a real stylesheet, order does the job and the prefix is gone.

   Breakpoint is 720px to match .focus-row above, so the whole document
   changes shape at a single width. */
@media (max-width:720px) {
  /* the big win: side padding was eating two thirds of a phone screen */
  .nfsr .cover { padding:56px 20px 40px; }
  .nfsr .sec { padding:32px 20px; }
  .nfsr .back { padding:56px 20px; }

  /* display type, scaled for a phone rather than a printed page */
  .nfsr .cover-eyebrow { font-size:12px; letter-spacing:.2em; }
  .nfsr .cover-title { font-size:34px; }
  .nfsr .cover-year { font-size:64px; }
  .nfsr .cover-tagline { font-size:17px; margin-top:18px; }
  .nfsr h2 { font-size:24px; }
  .nfsr .focus h2 { font-size:24px; }
  .nfsr .key-msg { font-size:22px; }
  .nfsr .stat-num { font-size:28px; }

  /* grids whose minimum column cannot fit: one column instead */
  .nfsr .nav-grid,
  .nfsr .trend-grid,
  .nfsr .kpi-grid { grid-template-columns:1fr; }

  /* flex rows pinned side by side, some with min-width floors */
  .nfsr .groups-layout,
  .nfsr .groups-layout:has(.gcol-hist) { flex-wrap:wrap; }
  .nfsr .groups-layout .gcol-tbl,
  .nfsr .groups-layout .gcol-hist,
  .nfsr .groups-layout:has(.gcol-hist) .gcol-tbl,
  .nfsr .groups-layout:has(.gcol-hist) .gcol-hist { flex:1 1 100%; min-width:0; }
  .nfsr .radar-wrap > * { flex:1 1 100%; min-width:0; }

  /* Charts are width:100% with a fixed height attribute. On a wide screen that
     matches their viewBox so it looks right, but as the width shrinks the
     drawing scales down inside a box that does not, padding each chart with
     dead space: 179px on each radar, 191px on the stacked bar, 30-45px on
     every trend and KPI bar. height:auto lets the viewBox set the aspect so
     the box follows the drawing. */
  .nfsr svg { max-width:100%; }
  .nfsr svg[viewBox] { height:auto; }

  /* The widest table is ~469px of columns, which no reflow makes fit.
     display:block turns each table into its own scroll box, so one table
     scrolls sideways instead of the whole document. */
  .nfsr table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* The back cover's five confederation marks sit on one nowrap row, with the
   europe mark pulled in by negative margins. That row needs roughly 800px, so
   it already overflowed on a tablet, above the breakpoint above. Given its own
   wider query so the desktop arrangement is left untouched.

   The heights above are not arbitrary and must survive into this query. Each
   lockup frames its mark differently: Europe's star reaches further out from
   its wordmark than the other four icons do, so at a common height its type
   comes out visibly smaller. Desktop corrects for that by setting Europe to
   54px against everyone else's 38px, which is what makes the five wordmarks
   read as the same size. This query used to flatten Europe back to 38px, which
   undid the correction and left it the odd one out in a stacked column on a
   phone: four marks at one size and Europe smaller.

   So keep both heights and drop only the negative margins, which existed to
   tuck the star into a tight single row and have nothing to do in a wrapped
   one. The marks are centred, so the differing box widths are what centring is
   for; it is the wordmarks that need to match, and they do. */
@media (max-width:840px) {
  .nfsr .conf-logos { flex-wrap:wrap; gap:16px 18px; }
  .nfsr .conf-logos img { margin:0; }
  .nfsr .conf-logos .cl--europe { height:54px; margin:0; }
}