/* ============================================================
   SIC Stats — a sticky two-column stage. A card on one side
   holds the visual and steps through slides; the text column
   opposite changes with it as the visitor scrolls.

   Colour comes in through --ss-* custom properties set by the
   block's Style tab, so every value below resolves to one of
   the eight palette colours (or a palette colour at reduced
   opacity, which still renders as that hue).
   ============================================================ */

.sicstats {
	--ss-bg:     #ffffff;
	--ss-text:   #021859;
	--ss-muted:  rgba(2,24,89,.72);
	--ss-accent: #bf1304;
	--ss-panel:  #ffffff;

	/* The field behind the stage. The heading band above keeps --ss-bg, so
	   the section steps from white to blush the way the Map block does.
	   Not one of the Style controls: change it here to change every Stats
	   block at once. */
	--ss-stage:  #f2e0df;

	/* Hairlines and washes are the text colour at low alpha, so they follow
	   the band instead of being pinned to one tone. The plain rgba values
	   come first as a fallback for browsers without color-mix. */
	--ss-line:   rgba(2,24,89,.16);
	--ss-line:   color-mix(in srgb, var(--ss-text) 16%, transparent);
	--ss-wash:   rgba(2,24,89,.07);
	--ss-wash:   color-mix(in srgb, var(--ss-text) 7%, transparent);

	/* How far below the top of the window the card parks while the slides
	   are scrubbed. The site header is fixed, so this has to clear it AND
	   leave a gap, or the card reads as glued to the navigation.

	   --sic-header-h is the theme's own header variable, but it is the
	   min-height of the inner bar rather than the rendered height of the
	   whole header, so the second number is the real clearance. Change that
	   one value to move every slide's card together. */
	--ss-sticky-top: calc(var(--sic-header-h, 38px) + 96px);

	background: var(--ss-bg);
	color: var(--ss-text);
	font-family: var(--sic-body-font);
	padding: 0;
}
.sicstats-inner { max-width: 1320px; margin: 0 auto; min-width: 0; }

/* Two full-bleed bands. The colour sits on these wrappers rather than on
   .sicstats-inner, which is capped at 1320px and would leave gutters. */
.sicstats-top   { background: var(--ss-bg);    padding: 88px 48px 48px; }
.sicstats-field { background: var(--ss-stage); padding: 56px 48px 96px; }

/* ---- section intro ---- */
.sicstats-eyebrow {
	display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--ss-accent);
}
.sicstats-eyebrow span { width: 34px; height: 1px; background: currentColor; display: inline-block; }
.sicstats-heading {
	margin: 0 0 14px;
	font-family: var(--sic-heading-font); font-weight: 500;
	font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08;
}
.sicstats-introtext {
	margin: 0; max-width: 62ch;
	color: var(--ss-muted);
	/* 20px default — the shared body size. A Design-tab Font size for
	   this element outranks the plain class, so a hand-set block keeps
	   its own value. */
	font-size: 20px; line-height: 1.7;
}

/* ---- stage ---- */
.sicstats-stage { position: relative; min-width: 0; }
/* The grid itself must NOT be sticky. It is as tall as the prose stack
   beside it, and a sticky element only stays pinned while its own bottom
   edge is above the bottom of the viewport — so it unpinned almost at once
   and the card scrolled away. The card column is what sticks. */
.sicstats-sticky {
	display: grid;
	/* The visual carries more detail than the prose, so it gets the
	   larger share of the stage. */
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 52px;
	align-items: start;          /* cards sit at the top, never centred */
}
/* The card can be moved to the right without reordering the markup,
   so the text still comes first for screen readers. */
.sicstats-left, .sicstats-right { min-width: 0; }
/* Only the card is pinned, and align-self keeps it at the top of the row
   rather than stretching to the height of the prose. */
.sicstats-left {
	position: sticky; top: var(--ss-sticky-top);
	align-self: start;
}
.sicstats[data-side="right"] .sicstats-left  { order: 2; }
.sicstats[data-side="right"] .sicstats-right { order: 1; }

/* The prose blocks are the scroll: each is roughly one screen tall, so the
   column scrolls past while the card beside it stays pinned. They replace
   the invisible spacer steps that used to drive this. */
.sicstats-slide {
	/* Stated outright rather than inherited from the theme's reset: the
	   padding below has to count INSIDE min-height, or every short step
	   would grow by it and the rhythm of the whole column would change. */
	box-sizing: border-box;
	min-height: 76vh;
	/* A step taller than min-height gets its height from its content, and
	   with no padding the next step's eyebrow began immediately under the
	   last line — a full panel ran straight into the following heading.
	   The padding only shows on those tall steps; a short one still
	   centres inside min-height exactly as before. */
	padding-block: clamp(36px, 7vh, 96px);
	display: flex; flex-direction: column; justify-content: center;
	/* Everything but the current block is dimmed back, so the one level
	   with the card is clearly the one being read. */
	opacity: .28;
	transition: opacity .45s ease;
}
.sicstats-slide.is-current { opacity: 1; }

/* ---- the card ---- */
/* min-width:0 all the way down. A flex or grid child will not shrink below
   its content by default, so a wide table pushed the whole card past the
   edge of the screen instead of scrolling inside it. */
.sicstats-card {
	min-width: 0;
	background: var(--ss-panel);
	border: 1px solid var(--ss-line);
	border-radius: 4px;
	overflow: hidden;
}
.sicstats-card-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px 26px;
	border-bottom: 1px solid var(--ss-line);
}
.sicstats-card-label {
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--ss-muted);
}
/* Type scale for the contents of the visual only. The text column beside
   it keeps its own sizes, so changing these three values rescales charts,
   tables and the map without touching the prose. */
.sicstats-card-body {
	--ss-viz-text:  15px;   /* table cells, bar labels, map city names */
	--ss-viz-small: 13px;   /* footnotes, dates, secondary labels */
	--ss-viz-label: 12px;   /* uppercase labels and column headings */
	--ss-dot-size:  28px;   /* dot grid: diameter cap, one value to tune */

	padding: 30px 26px 26px;
	/* Content starts at the top; a short table must not float in the
	   middle of a tall card. */
	display: flex; flex-direction: column; align-items: stretch;
	min-width: 0;
	min-height: 520px;
}
.sicstats-viz { width: 100%; min-width: 0; }
/* Sits last in the card body, under the headline figure. */
.sicstats-foot { margin-top: auto; padding-top: 22px; }

/* ---- slide dots ---- */
.sicstats-nav { display: flex; align-items: center; gap: 7px; }
.sicstats-nav-dot {
	width: 8px; height: 8px; border-radius: 999px;
	border: 0; padding: 0; cursor: pointer;
	background: var(--ss-text); opacity: .2;
	transition: opacity .2s ease, background .2s ease;
}
.sicstats-nav-dot:hover { opacity: .45; }
.sicstats-nav-dot.is-active { background: var(--ss-accent); opacity: 1; }

/* ---- shared visual furniture ---- */
.sicstats-vtitle {
	margin: 0 0 18px;
	font-family: var(--sic-label-font);
	font-size: var(--ss-viz-label); letter-spacing: .18em; text-transform: uppercase;
	color: var(--ss-muted);
}
.sicstats-cap, .sicstats-foot {
	margin: 22px 0 0;
	font-size: var(--ss-viz-small); line-height: 1.5; font-style: italic;
	color: var(--ss-muted);
}

/* ---- dot grid ---- */
.sicstats-dots {
	display: grid;
	grid-template-columns: repeat(15, 1fr);
	gap: 8px;
	justify-items: center;
	padding-top: 14px;
	border-top: 2px solid var(--ss-accent);
}
.sicstats-dot {
	/* Capped rather than filling the column: without a cap the dots grow
	   with the card width until they read as blobs, and the leftover space
	   becomes spacing instead. */
	width: 100%; max-width: var(--ss-dot-size);
	aspect-ratio: 1 / 1; border-radius: 999px;
	background: var(--ss-wash);
}
/* Filled dots start empty and are switched on one by one. */
.sicstats-dot.is-fill { background: var(--ss-wash); }
.sicstats-dot.is-fill.is-on { background: var(--ss-accent); }

.sicstats-fig { margin-top: 30px; }
.sicstats-fig + .sicstats-fig { border-top: 1px solid var(--ss-line); padding-top: 24px; }
.sicstats-fig-num {
	margin: 0 0 6px;
	font-family: var(--sic-heading-font); font-weight: 500;
	font-size: clamp(34px, 4vw, 54px); line-height: 1;
	color: var(--ss-accent);
}
.sicstats-fig-lab {
	margin: 0;
	font-family: var(--sic-label-font);
	font-size: var(--ss-viz-label); letter-spacing: .14em; text-transform: uppercase;
	color: var(--ss-text);
}

/* ---- headline figure (optional, per slide) ---- */
.sicstats-figure { margin-top: 26px; }
.sicstats-value {
	margin: 0 0 6px;
	font-family: var(--sic-heading-font); font-weight: 500;
	font-size: clamp(34px, 4vw, 54px); line-height: 1;
	color: var(--ss-accent);
}
.sicstats-label {
	margin: 0;
	font-family: var(--sic-label-font);
	font-size: var(--ss-viz-label); letter-spacing: .14em; text-transform: uppercase;
	color: var(--ss-text);
}

/* ---- map ---- */
/* The map bleeds past the card padding to the card edges: it is the one
   visual whose readability depends on raw size. Everything else keeps the
   padding. */
.sicstats-mapwrap { width: auto; margin: 0 -26px; }
.sicstats-viz[data-viz="map"] { margin-top: -10px; }
.sicstats-map { width: 100%; height: auto; display: block; }
.sicstats-state {
	fill: var(--ss-wash);
	stroke: var(--ss-panel);
	stroke-width: 1;
}
.sicstats-city { fill: var(--ss-accent); }

/* A steady ring marks each city; two pulses on staggered delays expand
   out of it. Sizes are in viewBox units (960x600), so they scale with
   the map rather than with the screen.

   r is animated instead of transform: scale(). A scaled circle also
   scales its stroke, and in SVG transform-origin resolves against the
   viewBox rather than the element unless transform-box is set, which is
   what pushed the old ring off to one side of its marker. */
.sicstats-ring {
	fill: none; stroke: var(--ss-accent); stroke-width: 2; opacity: .5;
}
.sicstats-pulse {
	fill: none; stroke: var(--ss-accent); stroke-width: 2;
	animation: sicstats-ping 3.2s ease-out infinite;
}
.sicstats-pulse.is-late { animation-delay: 1.6s; }
@keyframes sicstats-ping {
	0%   { r: 12px; opacity: .55; }
	80%  { r: 34px; opacity: 0; }
	100% { r: 34px; opacity: 0; }
}
.sicstats-maplabel {
	font-family: var(--sic-body-font); font-size: 22px; font-weight: 700;
	fill: var(--ss-text);
	/* Centred on the marker it labels. */
	text-anchor: middle;
}
.sicstats-mapdate {
	font-family: var(--sic-label-font); font-size: 17px;
	text-anchor: middle;
	fill: var(--ss-muted);
}







/* ---- table and matrix ---- */
/* The table scrolls sideways within the card rather than widening it.
   -webkit-overflow-scrolling keeps the momentum on iOS. */
.sicstats-tablewrap {
	width: 100%; max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.sicstats-table, .sicstats-matrix {
	width: 100%; border-collapse: collapse; text-align: left;
}
.sicstats-table th, .sicstats-table td,
.sicstats-matrix th, .sicstats-matrix td {
	padding: 14px 16px; vertical-align: top;
	font-size: var(--ss-viz-text); line-height: 1.5;
}

/* Table: a solid accent header band, as in the reference. */
.sicstats-table thead th {
	background: var(--ss-accent); color: #ffffff;
	font-family: var(--sic-body-font); font-weight: 700;
	font-size: var(--ss-viz-text); line-height: 1.35;
}
.sicstats-table tbody tr { border-bottom: 1px solid var(--ss-line); }
.sicstats-table tbody tr:last-child { border-bottom: 0; }
.sicstats-table tbody th { font-weight: 700; color: var(--ss-text); }
.sicstats-table tbody td { color: var(--ss-muted); }

/* Matrix: no header band — a rule under the column names instead, so
   the two table types do not read as the same object. */
.sicstats-matrix thead th {
	font-family: var(--sic-label-font);
	font-size: var(--ss-viz-label); letter-spacing: .14em; text-transform: uppercase;
	color: var(--ss-text);
	border-bottom: 2px solid var(--ss-accent);
	padding-bottom: 10px;
}
.sicstats-mx-corner { width: 22%; border-bottom: 2px solid var(--ss-accent); }
.sicstats-matrix tbody tr { border-bottom: 1px solid var(--ss-line); }
.sicstats-matrix tbody tr:last-child { border-bottom: 0; }
.sicstats-mx-row { font-weight: 700; color: var(--ss-text); }
.sicstats-matrix tbody td { color: var(--ss-muted); }

/* ---- bars ---- */
.sicstats-bars { border-top: 1px solid var(--ss-line); padding-top: 22px; }
.sicstats-bar + .sicstats-bar { margin-top: 26px; }
.sicstats-bar-top {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; margin-bottom: 10px;
}
.sicstats-bar-lab { font-size: calc(var(--ss-viz-text) + 2px); color: var(--ss-text); }
.sicstats-bar-val {
	font-family: var(--sic-heading-font); font-weight: 500;
	font-size: 28px; color: var(--ss-text);
}
.sicstats-bar-track {
	height: 12px; border-radius: 2px;
	background: var(--ss-wash); overflow: hidden;
}
.sicstats-bar-fill {
	display: block; height: 100%; width: 0;
	background: var(--ss-accent);
	transition: width .9s cubic-bezier(.22,.68,.28,1);
}

.sicstats-subgrid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px;
	margin-top: 34px; padding-top: 24px;
	border-top: 1px solid var(--ss-line);
}
.sicstats-subhead {
	margin: 0 0 14px;
	font-family: var(--sic-label-font);
	font-size: var(--ss-viz-label); letter-spacing: .16em; text-transform: uppercase;
	color: var(--ss-muted);
}
.sicstats-subrow { display: flex; gap: 12px; align-items: baseline; margin-bottom: 12px; }
.sicstats-subnum {
	flex: 0 0 auto;
	font-family: var(--sic-heading-font); font-weight: 500;
	font-size: 24px; color: var(--ss-text);
}
.sicstats-sublab { font-size: var(--ss-viz-small); line-height: 1.45; color: var(--ss-muted); }

/* ---- text column ---- */
.sicstats-right { padding-top: 8px; }
/* The last block needs room beneath it, or the card unpins before the
   final slide has been read. */
.sicstats-slide:last-child { padding-bottom: 12vh; }
.sicstats-idx {
	margin: 0 0 18px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--ss-accent);
}
.sicstats-title {
	margin: 0 0 22px;
	font-family: var(--sic-heading-font); font-weight: 500;
	font-size: clamp(28px, 3.2vw, 46px); line-height: 1.1;
}
.sicstats-copy p {
	margin: 0 0 18px;
	color: var(--ss-muted);
	/* 20px default — the shared body size. A Design-tab Font size for
	   this element outranks the plain class, so a hand-set block keeps
	   its own value. */
	font-size: 20px; line-height: 1.7;
}
.sicstats-quote {
	margin: 26px 0 0; padding: 20px 24px;
	border-left: 2px solid var(--ss-accent);
	background: var(--ss-wash);
}
.sicstats-quote p {
	margin: 0 0 10px;
	font-family: var(--sic-heading-font); font-weight: 500;
	font-size: 19px; line-height: 1.45;
}
.sicstats-quote cite {
	font-family: var(--sic-label-font); font-style: normal;
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ss-muted);
}

/* Slide change: the text column lifts in, the card does not, so the
   card reads as a fixed frame whose contents swap. */
.sicstats-card.is-in { animation: sicstats-in .5s cubic-bezier(.22,.68,.28,1) both; }
@keyframes sicstats-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* ---- responsive ---- */
/* The per-slide card belongs to the stacked layout only: beside the
   prose the sticky one carries the picture. */
.sicstats-mcard { display: none; }

@media (max-width: 1000px) {
	.sicstats-top   { padding: 56px 24px 28px; }
	.sicstats-field { padding: 32px 24px 64px; }
	.sicstats-left { position: static; top: auto; }
	.sicstats-sticky {
		position: static;
		/* minmax(0,1fr), not 1fr: a plain 1fr track is minmax(auto,1fr) and
		   will not shrink below its content, so a wide table widened the
		   whole page instead of scrolling inside its card. */
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	/* Without a sticky stage there is nothing to scrub, so the steps
	   collapse and every slide is reached with the dots instead. */
	/* Stacked and not sticky here: every block is fully readable and the
	   dimming would only make the page look broken. */
	.sicstats-slide {
		min-height: 0; display: block; opacity: 1;
		padding-bottom: 40px;
	}

	/* ---- a card with each slide ----
	   The shared card can only sit at the top once the columns stack, so
	   a reader was given the first visualization and then several blocks
	   of text about ones they could no longer see. Each slide brings its
	   own instead, and scrolling moves through picture, words, picture,
	   words. */
	.sicstats-left { display: none; }
	.sicstats-mcard {
		display: block;
		/* Room between the picture and the words that belong to it, and
		   more again before the next pair, so the pairs read as pairs
		   rather than as one continuous column. */
		margin: 0 0 24px;
		/* The same card as the wide layout: white panel, hairline border,
		   not a tinted block. */
		background: var(--ss-panel);
		border: 1px solid var(--ss-line);
		border-radius: 4px;
		overflow: hidden;
	}
	/* The gap BETWEEN pairs is the slide's own padding; this keeps it
	   clearly larger than the gap inside a pair. */
	.sicstats-slide { padding-bottom: 52px; }
	.sicstats-slide:last-child { padding-bottom: 0; }
	.sicstats-mcard-head {
		padding: 14px 18px 0;
	}
	.sicstats-mcard .sicstats-card-body {
		--ss-viz-text:  14px;
		--ss-viz-small: 12px;
		--ss-viz-label: 11px;
		min-height: 0; padding: 14px 18px 20px;
	}
	/* The index label leads, then its picture, then the words: the label
	   names what follows, so a reader meets “02 — THE MAP” before the map
	   rather than after it. (Until now the card was pulled above the label
	   with order:-1, which read as a caption to something not yet
	   introduced.) Only the label moves — everything else keeps document
	   order behind it. */
	.sicstats-slide { display: flex; flex-direction: column; }
	.sicstats-slide .sicstats-idx { order: -1; }
	.sicstats-slide:last-child { padding-bottom: 0; }
	.sicstats[data-side="right"] .sicstats-left,
	.sicstats[data-side="right"] .sicstats-right { order: 0; }
	.sicstats-card-body {
		--ss-viz-text:  14px;
		--ss-viz-small: 12px;
		--ss-viz-label: 11px;
		min-height: 0; padding: 22px 18px;
	}
	.sicstats-mapwrap { margin: 0 -18px; }
	.sicstats-field { overflow-x: hidden; }
	.sicstats-dots { grid-template-columns: repeat(10, 1fr); }
	.sicstats-subgrid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.sicstats-table th, .sicstats-table td,
	.sicstats-matrix th, .sicstats-matrix td { padding: 10px 10px; }
	/* Four columns in 375px would be unreadable, so the table keeps a
	   workable width and the wrapper scrolls instead of squashing it. */
	.sicstats-table, .sicstats-matrix { min-width: 560px; }
	.sicstats-dots { gap: 7px; }
	.sicstats-dot { max-width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.sicstats-card.is-in { animation: none; }
	.sicstats-slide { transition: none; }
	.sicstats-bar-fill { transition: none; }
	.sicstats-pulse { animation: none; opacity: 0; }
}

/* ---- callout panel in the text column ----
   Sits under the body copy: a heading with an accent dot, then
   figure/description pairs on one line each. */
.sicstats-panel {
	margin: 30px 0 0;
	padding: 22px 26px;
	background: var(--ss-wash);
	border-left: 2px solid var(--ss-accent);
}
.sicstats-panel-title {
	display: flex; align-items: center; gap: 9px;
	margin: 0 0 18px;
	font-family: var(--sic-body-font); font-weight: 700;
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ss-text);
}
.sicstats-panel-dot {
	width: 7px; height: 7px; border-radius: 999px;
	background: var(--ss-accent); flex: 0 0 auto;
}
.sicstats-panel-row {
	display: flex; align-items: baseline; gap: 16px;
	padding: 7px 0;
}
.sicstats-panel-num {
	flex: 0 0 22%;
	font-family: var(--sic-heading-font); font-weight: 500;
	font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1;
	color: var(--ss-text);
}
.sicstats-panel-lab {
	font-size: 14px; line-height: 1.45;
	color: var(--ss-muted);
}
@media (max-width: 1000px) {
	.sicstats-panel { padding: 18px 18px; }
	.sicstats-panel-num { flex-basis: 30%; }
}
/* Visual type "image" — the picture fills the visual column; height
   follows the image so nothing is cropped. The card's own padding and
   the title/caption fields frame it like every other visual. */
.sicstats-img { margin: 0; }
.sicstats-img img { width: 100%; height: auto; display: block; }

/* ============================================================
   Phones: a compact dot grid
   ------------------------------------------------------------
   At tablet width the grid is ten 22px dots to a row, which on a
   375px screen leaves each row wider than the card and the whole
   figure taller than the viewport. Fifteen smaller dots to a row
   read as the same quantity in a third of the height — the point
   of the grid is the shape of the block, not the individual dot.
   Phones only: the desktop and tablet sizes are untouched.
   ============================================================ */
@media (max-width: 600px) {
	.sicstats-dots {
		grid-template-columns: repeat(15, 1fr);
		gap: 4px;
		padding-top: 10px;
	}
	.sicstats-dot { max-width: 14px; }
}