/* JRPG Design System - weekly report editions + hub. Extracted verbatim from jrpg-design.css (L8813-9897); loads after it. */
/* ============================================================
   WEEKLY CRYPTO-GAMING REPORT — single-report.php + hub
   (inc/crypto-gaming-report.php). Adapted from the design-system
   mockup; every raw hex swapped for theme tokens. Green/red +
   ▲/▼ appear ONLY on market movement (.rpt-up / .rpt-down).
   ============================================================ */

/* Full-width route — neutralize the legacy two-column .content-area width. */
#primary.content-area.jrpg-report {
	width: 100% !important;
	float: none !important;
	max-width: 100% !important;
	margin-inline: 0 !important;
	padding: 1rem 0 5rem;
}
body.fastest-is-report #secondary.widget-area { display: none !important; }

.jrpg-report {
	--rpt-panel:     var(--bg-1);
	--rpt-line:      var(--bg-line);
	--rpt-line-soft: color-mix(in oklch, var(--bg-line) 55%, transparent);
	--rpt-track:     oklch(from var(--bg-0) calc(l - 0.03) c h);
	--rpt-pos:       var(--jrpg-success);
	--rpt-neg:       var(--jrpg-danger);
	color: var(--fg-1);
	font-family: var(--font-body);
	line-height: 1.6;
}
.jrpg-report a { color: var(--jrpg-purple-bright); text-decoration: none; }
.jrpg-report a:hover { color: var(--jrpg-gold); text-decoration: underline; text-underline-offset: 3px; }
.jrpg-report h1, .jrpg-report h2, .jrpg-report h3, .jrpg-report h4 {
	font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; line-height: 1.15; margin: 0;
}
/* style.css:299 sets `text-transform: capitalize` on bare h1-h6 sitewide. Report
   pages carry LLM-written editorial headlines, so that rule silently rewrote
   them: "Magnus Cup Crowned at Anichess" rendered as "...Crowned At Anichess"
   and "The Month in Money" as "The Month In Money". Reset the whole report
   subtree to the authored text. `.rpt-title` (8817) and the hub's section h2s
   (9125) already opted out individually; this covers the editions too.
   Deliberate uppercase treatments are re-asserted, not flattened — the only
   heading-level one is .rpt-recap h3 below, which keeps its own rule and wins
   on specificity (0,2,1 vs 0,1,1 here). */
.jrpg-report :is(h1, h2, h3, h4, h5, h6) { text-transform: none; }
.jrpg-report .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.jrpg-report .dim { color: var(--fg-3); }
.jrpg-report .rpt-gold-t { color: var(--jrpg-gold); }
.jrpg-report .rpt-purple-t { color: var(--jrpg-purple-bright); }
.jrpg-report svg { display: block; max-width: 100%; height: auto; }

/* Market-movement deltas — the only place green/red is emitted. */
.jrpg-report .rpt-delta { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jrpg-report .rpt-up   { color: var(--rpt-pos); }
.jrpg-report .rpt-down { color: var(--rpt-neg); }
.jrpg-report .rpt-flat { color: var(--fg-3); }

/* ---- Hero ---- */
.jrpg-report .rpt-hero { padding: .5rem 0 1rem; }
/* .rpt-hero-grid is single-report.php's hero: text + one narrow 340px
   sidebar glance card. Restored exactly as it was — do not repurpose this
   class for the hub, which needs a different column shape (see
   .rpt-hero-grid-hub below). Sharing one selector between "one narrow
   sidebar" and "two equal cards" is what broke every edition page in the
   first pass of this change. */
.jrpg-report .rpt-hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.25rem; align-items: end; }
@media (min-width: 1080px) { .jrpg-report .rpt-hero-grid { grid-template-columns: 1fr 340px; } }

/* Hub-only hero layout: two cadence cards, not one — a row of equal-weight
   cards under the lede instead of a narrow sidebar, so neither cadence reads
   as subordinate. Own class, own wrapper div in report-hub.php — never
   .rpt-hero-grid, which single-report.php still owns unmodified above. */
.jrpg-report .rpt-hero-grid-hub { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.jrpg-report .rpt-hero-glances { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 1080px) { .jrpg-report .rpt-hero-glances { grid-template-columns: 1fr 1fr; } }
.jrpg-report .rpt-eyebrow {
	font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase;
	color: var(--jrpg-gold); display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: 0;
}
.jrpg-report .rpt-rep { border: 1px solid var(--jrpg-gold); border-radius: 4px; padding: 2px 8px; color: var(--jrpg-gold); }
.jrpg-report .rpt-dates { color: var(--fg-3); letter-spacing: .1em; }
/* balance: the title was breaking to a lone "2026". */
.jrpg-report .rpt-title { font-size: clamp(1.9rem, 4.4vw, 3rem); margin: .9rem 0 .6rem; line-height: 1.06; max-width: 20ch; text-transform: none; text-wrap: balance; }
/* Period label beneath the MAIN route's evergreen H1 (single-report.php A3) —
   own H2, not the .rpt-rep eyebrow badge, so the page still carries exactly
   one h1 while still surfacing which edition is currently live. */
.jrpg-report .rpt-title-period { font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 500; color: var(--fg-2); text-transform: none; margin: 0 0 .6rem; }
.jrpg-report .rpt-lede { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--fg-2); max-width: 62ch; margin: 0; }
.jrpg-report .rpt-opening { font-size: 1rem; color: var(--fg-1); max-width: 62ch; margin: .75rem 0 0; }
.jrpg-report .rpt-byline { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-3); margin-top: .8rem; }
.jrpg-report .rpt-byline b { color: var(--fg-1); font-weight: 500; }

.jrpg-report .rpt-glance {
	border: 1px solid var(--rpt-line); border-radius: 8px; background: var(--rpt-panel);
	padding: 1.1rem 1.25rem; position: relative; overflow: hidden;
}
.jrpg-report .rpt-glance-head { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--jrpg-gold); margin-bottom: .6rem; }
.jrpg-report .rpt-glance-spark { width: 100%; margin-bottom: .15rem; }
.jrpg-report .rpt-glance-spark-cap { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin: 0 0 .4rem; font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.jrpg-report .rpt-glance-spark-val { font-size: var(--fs-meta); letter-spacing: normal; text-transform: none; color: var(--jrpg-gold); }
.jrpg-report .rpt-spark-line { fill: none; stroke: var(--jrpg-gold); stroke-width: 2; stroke-linejoin: round; }
.jrpg-report .rpt-spark-dot { fill: var(--jrpg-gold); }
.jrpg-report .rpt-glance-rows > div { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-top: 1px solid var(--rpt-line-soft); font-family: var(--font-mono); font-size: var(--fs-meta); }
/* Labels never wrap: "Most covered" was breaking onto two lines, doubling that row's height. */
.jrpg-report .rpt-glance-rows dt { color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; align-self: center; flex: 0 0 auto; white-space: nowrap; }
.jrpg-report .rpt-glance-rows dd { margin: 0; color: var(--fg-1); text-align: right; min-width: 0; }

/* ---- KPI grid ---- */
.jrpg-report .rpt-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin: 1.6rem 0 .5rem; }
.jrpg-report .rpt-kpi { border: 1px solid var(--rpt-line); background: var(--rpt-panel); border-radius: 8px; padding: 1rem; position: relative; overflow: hidden; }
.jrpg-report .rpt-kpi-lab { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.jrpg-report .rpt-kpi-val { font-family: var(--font-mono); font-size: 2rem; font-weight: 600; letter-spacing: -.02em; margin: .4rem 0 .1rem; color: var(--jrpg-gold); line-height: 1; }
.jrpg-report .rpt-kpi-val.rpt-plain { color: var(--fg-1); }
.jrpg-report .rpt-kpi-sub { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--fg-3); }
@media (max-width: 860px) { .jrpg-report .rpt-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .jrpg-report .rpt-kpis { grid-template-columns: 1fr; } }

/* ---- Actions ---- */
/* No rules of its own: the bottom one doubled up with the next section's
   border-top, and the top one fenced the buttons off from the hero they belong
   to. Spacing separates them instead. */
.jrpg-report .rpt-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.6rem 0 .4rem; }
.jrpg-report .rpt-btn { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .03em; border-radius: 6px; padding: .7rem 1rem; min-height: 44px; border: 1px solid var(--rpt-line); background: var(--rpt-panel); color: var(--fg-1); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: border-color .15s, background .15s; }
.jrpg-report .rpt-btn:hover { border-color: var(--jrpg-purple); text-decoration: none; color: var(--fg-1); }
.jrpg-report .rpt-btn-gold { background: var(--jrpg-gold); color: var(--jrpg-purple-ink); border-color: var(--jrpg-gold); font-weight: 600; }
.jrpg-report .rpt-btn-gold:hover { background: var(--jrpg-gold-deep); color: var(--jrpg-purple-ink); }

/* ---- Sections ---- */
.jrpg-report .rpt-section { padding: 2.75rem 0; border-top: 1px solid var(--rpt-line-soft); }
.jrpg-report .rpt-section[id] { scroll-margin-top: 90px; }
.jrpg-report .rpt-noico .rpt-ico { display: none; }
.jrpg-report .rpt-sec-head { display: flex; align-items: baseline; gap: .9rem; margin-bottom: .4rem; flex-wrap: wrap; }
.jrpg-report .rpt-section h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.jrpg-report .rpt-sec-sub-inline { color: var(--fg-3); font-family: var(--font-body); font-size: 1rem; }
.jrpg-report .rpt-sec-sub { color: var(--fg-3); max-width: 68ch; margin: .6rem 0 1.6rem; font-size: var(--fs-ui); }
.jrpg-report .rpt-moat { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--jrpg-purple-ink); background: var(--jrpg-gold); border-radius: 3px; padding: 2px 7px; font-weight: 700; align-self: center; }
.jrpg-report .rpt-moat-p { background: var(--jrpg-purple); color: var(--fg-1); }

/* ---- Key findings ---- */
.jrpg-report .rpt-findings { border: 1px solid var(--rpt-line); border-radius: 10px; background: var(--rpt-panel); }
.jrpg-report .rpt-finding { display: flex; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rpt-line-soft); scroll-margin-top: 96px; transition: background-color .4s ease; }
.jrpg-report .rpt-finding:last-child { border-bottom: 0; }
/* Deep-linked finding (opened from a "Copy link" URL): persistent gold wash so
   the reader can see which stat was cited, with a one-shot entrance flash. */
.jrpg-report .rpt-finding:target { background: color-mix(in oklch, var(--jrpg-gold) 13%, transparent); }
.jrpg-report .rpt-finding:target .rpt-finding-n { border-color: var(--jrpg-gold); color: var(--jrpg-gold); }
@media (prefers-reduced-motion: no-preference) {
	.jrpg-report .rpt-finding:target { animation: rpt-target-flash 2.2s ease-out 1; }
	@keyframes rpt-target-flash {
		0%, 12% { background: color-mix(in oklch, var(--jrpg-gold) 32%, transparent); }
		100%    { background: color-mix(in oklch, var(--jrpg-gold) 13%, transparent); }
	}
}
.jrpg-report .rpt-finding-n { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--jrpg-gold); border: 1px solid var(--rpt-line); border-radius: 5px; padding: 3px 8px; height: fit-content; }
.jrpg-report .rpt-finding p { margin: 0; font-size: var(--fs-ui); }
.jrpg-report .rpt-finding b { color: var(--fg-1); }
.jrpg-report .rpt-k { color: var(--jrpg-gold); font-family: var(--font-mono); font-weight: 600; }
.jrpg-report .rpt-copylink { position: relative; margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-3); background: none; border: 1px solid var(--rpt-line-soft); border-radius: 5px; padding: 4px 9px; cursor: pointer; white-space: nowrap; height: fit-content; }
.jrpg-report .rpt-copylink:hover { color: var(--jrpg-gold); border-color: var(--jrpg-purple); }
/* Touch target: the visible pill stays 32.4px tall (unchanged design), but
   the tappable area is padded out to the 44px floor via an invisible
   overlay rather than growing the pill itself.
   Box-model note: box-sizing:border-box + 1px border means the ::after's
   `inset` resolves against the PADDING box, not the visible border box —
   1px of any inset is eaten by the border before the overlay clears the
   visible edge. Height is the binding dimension (32.4px vs a 95.6px-wide
   pill). Target: >=8px of real extension per side beyond the visible edge
   (32.4 + 2*8 = 48.4px, comfortably past the 44px floor). inset = -(8px
   real + 1px border) = -9px. */
.jrpg-report .rpt-copylink::after { content: ""; position: absolute; inset: -9px; }

/* ---- Narrative prose ---- */
.jrpg-report .rpt-prose { font-size: 1.0625rem; }
.jrpg-report .rpt-prose p { margin: 0 0 1rem; }
/* Recap: full section width (maintainer call — the readable-measure cap left
   dead space), editorial lead, subsection dividers, and a scannable story grid
   for the "Top Stories" items (see fastest_report_recap). */
.jrpg-report .rpt-recap > p { text-wrap: pretty; margin: 0 0 1rem; }
.jrpg-report .rpt-recap > p:first-of-type { font-size: 1.2rem; line-height: 1.65; color: var(--fg-2); }
.jrpg-report .rpt-recap h3 { font-family: var(--font-headline); font-weight: 600; font-size: 1.15rem; letter-spacing: .01em; text-transform: uppercase; color: var(--fg-1); margin: 2rem 0 .8rem; }
/* Columns, not a grid: story summaries vary in length, and a row-aligned grid
   sized each row to its taller cell, stranding up to 82px under the shorter
   one. Flowing them fills each column instead. DOM order is unchanged, so the
   stories still read 1-2-3-4, just down each column rather than across. */
.jrpg-report .rpt-recap-stories { column-count: 2; column-gap: 1.75rem; margin: .2rem 0 1.4rem; }
.jrpg-report .rpt-recap-stories .rpt-story { break-inside: avoid; margin-bottom: 1.1rem; }
.jrpg-report .rpt-story { padding-top: .9rem; border-top: 1px solid var(--rpt-line-soft); }
.jrpg-report .rpt-story h4 { font-family: var(--font-headline); font-weight: 600; font-size: 1.1rem; letter-spacing: .01em; color: var(--fg-1); margin: 0 0 .4rem; }
.jrpg-report .rpt-story p { margin: 0; font-size: var(--fs-ui); color: var(--fg-2); }
@media (max-width: 720px) { .jrpg-report .rpt-recap { column-count: 1; } .jrpg-report .rpt-recap-stories { column-count: 1; } .jrpg-report .rpt-recap-stories .rpt-story { margin-bottom: 0; } .jrpg-report .rpt-story { padding: .9rem 0; } }

/* ---- Layout grids ---- */
/* stretch, not start: these hold bordered cards, and `start` let a shorter one
   float with dead space beside its taller neighbour (142px in News Pulse, 85px
   under the index baskets). Equal-height cards close the gap; grids whose pairs
   already match are unaffected. */
.jrpg-report .rpt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: stretch; }
@media (max-width: 900px) { .jrpg-report .rpt-grid-2 { grid-template-columns: 1fr; } }
.jrpg-report .rpt-grid-2 > *, .jrpg-report .rpt-wash-grid > * { min-width: 0; }

.jrpg-report .rpt-card { border: 1px solid var(--rpt-line); border-radius: 10px; background: var(--rpt-panel); padding: 1.25rem; }
.jrpg-report .rpt-card h3 { font-family: var(--font-headline); font-weight: 600; font-size: 1.15rem; letter-spacing: .01em; margin-bottom: .85rem; }
.jrpg-report .rpt-h3-note { font-family: var(--font-mono); font-size: .7rem; }

/* ---- Tables ---- */
.jrpg-report .rpt-tbl-wrap { overflow-x: auto; border: 1px solid var(--rpt-line); border-radius: 10px; background: var(--rpt-panel); }
.jrpg-report .rpt-tbl-wrap table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-meta); }
.jrpg-report .rpt-tbl-wrap caption { text-align: left; font-family: var(--font-mono); font-size: .72rem; color: var(--fg-3); letter-spacing: .05em; padding: .75rem 1rem; border-bottom: 1px solid var(--rpt-line-soft); }
.jrpg-report .rpt-tbl-wrap thead th { font-weight: 600; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--rpt-line); white-space: nowrap; background: var(--bg-2); }
.jrpg-report .rpt-tbl-wrap tbody td { padding: .7rem .9rem; border-bottom: 1px solid var(--rpt-line-soft); white-space: nowrap; }
.jrpg-report .rpt-tbl-wrap tbody tr:last-child td { border-bottom: 0; }
.jrpg-report .rpt-tbl-wrap td.num, .jrpg-report .rpt-tbl-wrap th.num { text-align: right; }
/* Per-event funding bar, drawn as background geometry inside the Amount cell
   instead of a separate bars-list above the table (see .rpt-fcat below). The
   width custom property is set per-row from that category's own max, so the
   fill compares deals within one category, never across the whole section. */
.jrpg-report .rpt-tbl-wrap td.rpt-amt-cell { position: relative; }
.jrpg-report .rpt-tbl-wrap td.rpt-amt-cell::before {
	content: "";
	position: absolute;
	top: 6px; bottom: 6px; right: 0;
	width: var(--amt-w, 0%);
	background: color-mix(in oklch, var(--amt-c, var(--jrpg-gold)) 16%, transparent);
	border-radius: 4px 0 0 4px;
}
.jrpg-report .rpt-tbl-wrap td.rpt-amt-cell > * { position: relative; }

/* `table-layout: auto` gave Amount 549px of 1240, stretching the wash bar
   into a slab and spreading a row's cells too far apart to group by proximity.
   Fixed proportions + a vertical hairline restore the row. Gated at 900px so
   the narrow two-up tables keep auto sizing. */
@media (min-width: 900px) {
	.jrpg-report .rpt-fcat .rpt-tbl-wrap table { table-layout: fixed; }
	.jrpg-report .rpt-fcat .rpt-tbl-wrap thead th:nth-child(1) { width: 34%; }
	.jrpg-report .rpt-fcat .rpt-tbl-wrap thead th:nth-child(2) { width: 38%; }
	.jrpg-report .rpt-fcat .rpt-tbl-wrap thead th:nth-child(3) { width: 28%; }
	/* Recipient and Funder wrap, not truncate -- see the `white-space: normal`
	   rule further down, which already covers these two columns. A truncated
	   funder name is unrecoverable to a reader citing the table; a line isn't. */
	.jrpg-report .rpt-fcat .rpt-tbl-wrap thead th:not(:last-child),
	.jrpg-report .rpt-fcat .rpt-tbl-wrap tbody td:not(:last-child) { border-right: 1px solid var(--rpt-line-soft); }
}
/* Two-up tables (movers, holder flow) sit in half a column — compact the padding
   and let the name column wrap so dense rows don't trigger a horizontal scroll. */
.jrpg-report .rpt-grid-2 .rpt-tbl-wrap thead th,
.jrpg-report .rpt-grid-2 .rpt-tbl-wrap tbody td { padding: .5rem .55rem; }
.jrpg-report .rpt-grid-2 .rpt-tbl-wrap tbody td:first-child { white-space: normal; }
.jrpg-report .rpt-tk-name { color: var(--fg-1); font-weight: 500; }
.jrpg-report .rpt-tk-sym { color: var(--fg-3); font-size: .72rem; }
.jrpg-report a.rpt-tk-link { color: inherit; text-decoration: none; }
.jrpg-report a.rpt-tk-link:hover { color: var(--jrpg-gold); text-decoration: underline; text-underline-offset: 2px; }
.jrpg-report .rpt-conf { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--jrpg-purple-bright); border: 1px solid var(--rpt-line); border-radius: 4px; padding: 1px 6px; }

/* Visually hidden but STILL FOCUSABLE. `hidden` / `display:none` removes an
   element from the tab order entirely — on the funding disclosure that made the
   checkbox unreachable by keyboard (WCAG 2.1.1 Level A) while it gated 34 of 44
   rows, and left the <label for> orphaned. Never swap this for `hidden`. */
.jrpg-report .rpt-vh-focusable {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Per-category funding tables: show the top N, disclose the rest. Pure CSS —
   the checkbox is a PRECEDING SIBLING of both .rpt-tbl-wrap and the
   .rpt-ev-more label (all three are direct children of .rpt-fcat), so every
   `:checked ~` combinator below can reach them. One toggle PER CATEGORY BLOCK
   (see single-report.php), so this reveal logic is naturally scoped — a
   checked toggle in one .rpt-fcat never reveals rows in a sibling .rpt-fcat.
   Every event is in the DOM either way, so the full record stays citable,
   searchable (ctrl-F), and present for print.

   The label sits OUTSIDE .rpt-tbl-wrap: inside it, the horizontal scroller
   carried the control off-screen on narrow viewports (x 410-544 against a
   visible window ending at 355 on a 390px screen). */
.jrpg-report .rpt-ev-extra { display: none; }
.jrpg-report .rpt-ev-toggle:checked ~ .rpt-tbl-wrap .rpt-ev-extra { display: table-row; }
.jrpg-report .rpt-ev-toggle:checked ~ .rpt-ev-more .rpt-ev-more-show { display: none; }
.jrpg-report .rpt-ev-more-hide { display: none; }
.jrpg-report .rpt-ev-toggle:checked ~ .rpt-ev-more .rpt-ev-more-hide { display: inline; }
.jrpg-report .rpt-ev-more {
	display: flex; align-items: center; justify-content: center;
	width: 100%; min-height: 44px; margin-top: .75rem;
	cursor: pointer; user-select: none;
	padding: .6rem 1rem; text-align: center;
	border: 1px solid var(--rpt-line); border-radius: 8px;
	background: var(--rpt-panel);
	font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em;
	color: var(--fg-2);
	transition: border-color .15s, color .15s, background-color .15s;
}
.jrpg-report .rpt-ev-more:hover { color: var(--fg-1); border-color: var(--jrpg-gold); background: color-mix(in oklch, var(--jrpg-gold) 8%, transparent); }
.jrpg-report .rpt-ev-toggle:focus-visible ~ .rpt-ev-more { outline: 2px solid var(--jrpg-gold); outline-offset: 2px; border-color: var(--jrpg-gold); }
@media (prefers-reduced-motion: reduce) { .jrpg-report .rpt-ev-more { transition: none; } }
/* Print: every event reveals regardless of the toggle, and the control itself
   is chrome. The same reasoning applies to native <details>, which prints only
   its <summary> when collapsed -- the PDF was dropping both chart data tables
   and every unopened FAQ answer, 5 of 6 disclosures on a monthly edition.
   CSS alone can't fix that: without the [open] attribute a UA keeps the
   children out of the box tree entirely, so report.js sets it on beforeprint
   and restores it after. These rules just drop the now-meaningless affordances. */
@media print {
	.jrpg-report .rpt-ev-extra { display: table-row; }
	.jrpg-report .rpt-ev-more { display: none; }
	.jrpg-report details > summary { list-style: none; cursor: default; }
	.jrpg-report details > summary::-webkit-details-marker { display: none; }
	.jrpg-report .rpt-chart-data-chev { display: none; }
}

.jrpg-report .rpt-ttype { font-weight: 600; }
.jrpg-report .rpt-t-purple { color: var(--jrpg-purple-bright); }
.jrpg-report .rpt-t-gold   { color: var(--jrpg-gold); }
.jrpg-report .rpt-t-cyan   { color: var(--jrpg-cyan); }
.jrpg-report .rpt-t-bright { color: var(--jrpg-purple-bright); }
.jrpg-report .rpt-t-mute   { color: var(--fg-3); }

/* ---- Wash badges (risk ramp; only severe uses danger-red) ---- */
.jrpg-report .rpt-wb { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; border-radius: 4px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 5px; }
.jrpg-report .rpt-wb::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Score is the only token that varies row-to-row (ranked list -> repeat labels
   like "Severe"); size it to the row's own text (--fs-meta) so it reads over
   the badge label, not the reverse. */
.jrpg-report .rpt-wb-score { font-size: var(--fs-meta); letter-spacing: normal; }
.jrpg-report .rpt-wb-min  { color: var(--jrpg-cyan);   background: color-mix(in oklch, var(--jrpg-cyan) 14%, transparent); }
.jrpg-report .rpt-wb-some { color: var(--jrpg-warn);   background: color-mix(in oklch, var(--jrpg-warn) 14%, transparent); }
.jrpg-report .rpt-wb-many { color: var(--jrpg-hot);    background: color-mix(in oklch, var(--jrpg-hot) 16%, transparent); }
/* Lightened for the badge only, not via --jrpg-danger, which every other danger
   state shares. At the token value this 9.92px text measured 4.59:1 on the panel
   -- 0.09 over the AA floor, on the strongest warning the page can show. */
.jrpg-report .rpt-wb-sev  { color: color-mix(in oklch, var(--jrpg-danger) 72%, white); background: color-mix(in oklch, var(--jrpg-danger) 18%, transparent); }

.jrpg-report .rpt-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-family: var(--font-mono); font-size: var(--fs-meta); margin-top: 1rem; color: var(--fg-3); }
.jrpg-report .rpt-li { display: flex; align-items: center; gap: .45rem; }

/* ---- Charts ---- */
.jrpg-report figure { margin: 0; }
.jrpg-report figcaption { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-3); margin-top: .8rem; line-height: 1.5; }
.jrpg-report figcaption b { color: var(--jrpg-purple-bright); font-weight: 500; }
.jrpg-report .rpt-chart-box { border: 1px solid var(--rpt-line); border-radius: 10px; background: var(--rpt-panel); padding: 1.1rem; }

/* Index line chart internals */
.jrpg-report .rpt-grid { stroke: var(--rpt-line-soft); stroke-width: 1; }
.jrpg-report .rpt-axis { fill: var(--fg-3); font-family: var(--font-mono); font-size: .7rem; }
.jrpg-report .rpt-band { fill: color-mix(in oklch, var(--jrpg-gold) 9%, transparent); }
.jrpg-report .rpt-band-line { stroke: var(--jrpg-gold); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.jrpg-report .rpt-band-label { fill: var(--jrpg-gold); font-family: var(--font-mono); font-size: .66rem; letter-spacing: 1px; }
.jrpg-report .rpt-grad-top { stop-color: var(--jrpg-purple); stop-opacity: .28; }
.jrpg-report .rpt-grad-bot { stop-color: var(--jrpg-purple); stop-opacity: 0; }
.jrpg-report .rpt-line-pre { fill: none; stroke: var(--jrpg-purple-bright); stroke-width: 2; stroke-linejoin: round; }
.jrpg-report .rpt-line-rep { fill: none; stroke: var(--jrpg-gold); stroke-width: 2.6; stroke-linejoin: round; }
.jrpg-report .rpt-dot { fill: var(--jrpg-gold); }
.jrpg-report .rpt-dot-ring { fill: none; stroke: var(--jrpg-gold); stroke-width: 1; opacity: .4; }
.jrpg-report .rpt-dot-label { fill: var(--jrpg-gold); font-family: var(--font-mono); font-size: .8rem; font-weight: 700; }

/* Funding trend bar chart (Task 5b): prior periods in brand purple, the
   current period in brand gold, plus a CURRENT text tag + printed value --
   distinguished by hue AND by text, never by colour alone (same rule
   fastest_report_delta() follows for its arrow+colour chips,
   inc/crypto-gaming-report.php). Green/red and up/down arrows are reserved
   for market movement and never appear here. */
.jrpg-report .rpt-fund-bar { fill: var(--jrpg-purple-bright); }
.jrpg-report .rpt-fund-bar-cur { fill: var(--jrpg-gold); }
/* The CURRENT bar's own MARK (the bar fill above) carries identity in gold --
   the text beside it doesn't need to repeat that, and dataviz is explicit
   that text always wears a text token, never the series colour. These two
   used to fill: var(--jrpg-gold), same mistake .rpt-fund-val-quiet below was
   already fixed for. .rpt-fund-cur-tag matches every other small-caps eyebrow
   label on this page (.rpt-kpi-lab / .rpt-mini-l / .rpt-hk-lab, all --fg-3);
   .rpt-fund-val matches the page's other bold inline values (.rpt-byline b /
   .rpt-finding b / .rpt-tk-name, all --fg-1). */
.jrpg-report .rpt-fund-cur-tag { fill: var(--fg-3); font-family: var(--font-mono); font-size: .62rem; letter-spacing: 1px; }
.jrpg-report .rpt-fund-val { fill: var(--fg-1); font-family: var(--font-mono); font-size: .8rem; font-weight: 700; }
/* Prior-period value label -- shown alongside the CURRENT bar's own
   .rpt-fund-val when every bar's label fits its slot without colliding with
   its neighbour (single-report.php decides this the same way it decides
   axis-label rotation: measure, don't hardcode a bar-count threshold). Text
   NEVER wears the series colour (dataviz: a coloured mark carries identity,
   not the label beside it) -- a text token instead, quieter than the gold
   CURRENT value so the current period still reads as the one the story is
   about. */
.jrpg-report .rpt-fund-val-quiet { fill: var(--fg-2); font-family: var(--font-mono); font-size: .8rem; font-weight: 500; }
/* Per-bar hover hit target -- the FULL slot column, not just the bar
   rectangle, so a sliver bar (a tiny current-period value next to a much
   larger prior one) is still easy to land on. Transparent fill still
   receives pointer events (unlike fill:none); painted last in the SVG so it
   sits above the bar/label/axis-label geometry it overlaps. */
.jrpg-report .rpt-fund-hit { fill: transparent; cursor: pointer; }
/* Keyboard focus parity with pointer/touch hover -- each hit rect carries
   tabindex="0" (single-report.php) and report.js shows the same tooltip on
   focus that it does on pointerenter. outline-offset:-2px keeps the ring
   INSIDE the hit rect's own bounds instead of overlapping its neighbour's
   slot column. */
.jrpg-report .rpt-fund-hit:focus-visible { outline: 2px solid var(--jrpg-gold); outline-offset: -2px; }
/* Smaller than the shared .rpt-axis size (.7rem) -- the 45°-rotated labels
   below the funding chart carry a full month name or a weekly date range,
   longer than the index chart's 3-letter month ticks. */
.jrpg-report .rpt-fund-axis-lab { font-size: .58rem; }
/* DORMANT: both funding charts use .rpt-fund-chart-fill, whose
   `max-height: none` wins at equal specificity. Kept for a future caller
   that opts out of filling. Filled charts are bounded by viewBox aspect --
   see the $fc_H comment in fastest_report_fund_chart_svg(). */
.jrpg-report .rpt-fund-chart { max-height: var(--rpt-fund-height-cap, 400px); }

/* Index chart hover: crosshair + tooltip (vanilla JS, see report.js). */
.jrpg-report .rpt-chart-wrap { position: relative; }
.jrpg-report .rpt-index-chart { touch-action: pan-y; cursor: crosshair; }
.jrpg-report .rpt-hover-line { stroke: var(--jrpg-gold); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
.jrpg-report .rpt-hover-dot { fill: var(--jrpg-gold); stroke: var(--rpt-panel); stroke-width: 2; }
.jrpg-report .rpt-chart-tip {
	position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none;
	min-width: 128px; padding: .5rem .7rem; border-radius: 8px;
	background: var(--bg-3); border: 1px solid var(--rpt-line);
	box-shadow: 0 14px 34px -16px oklch(0% 0 0 / .6);
	transform: translate(-50%, -100%); margin-top: -10px;
}
.jrpg-report .rpt-chart-tip-date { display: block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: .2rem; }
/* Shared by both charts' tooltips -- text token, not the series colour (see
   .rpt-fund-val above for the same fix and reasoning); the hover DOT/bar the
   tooltip is anchored to already carries the colour identity. */
.jrpg-report .rpt-chart-tip-val { display: block; font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--fg-1); }
/* Third tip line -- deal count, shared by the funding chart's tooltip (the
   index chart's tip only ever sets date + val, so this rule is simply
   unused there, not a parallel component). */
.jrpg-report .rpt-chart-tip-meta { display: block; font-family: var(--font-mono); font-size: .68rem; color: var(--fg-3); margin-top: .25rem; }

/* Index chart data-table twin: a native <details> disclosure carrying every
   plotted value as a real <table>, so keyboard and screen-reader users reach
   the same values the pointermove/touchstart tooltip gives mouse users
   (dataviz skill: a value reachable only by hover is inaccessible). Native
   <details>/<summary> is tab-reachable and Enter/Space-operable with no JS,
   same disclosure primitive the FAQ below already uses. */
.jrpg-report .rpt-chart-data { margin-top: .9rem; }
.jrpg-report .rpt-chart-data > summary {
	position: relative;
	display: flex; align-items: center; justify-content: center; gap: .45rem;
	width: fit-content; margin: 0 auto; cursor: pointer; list-style: none;
	font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
	color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--rpt-line-soft);
	border-radius: 999px; padding: .5rem 1rem;
	transition: color .15s ease, border-color .15s ease;
}
/* Touch target: the visible pill measures ~36px tall at narrow widths (the
   binding dimension -- width, driven by the label text plus 1rem/side
   padding, already clears 44px). Tappable area padded to the 44px floor via
   an invisible overlay rather than growing the pill itself.
   Box-model note: box-sizing:border-box + 1px border means the ::after's
   `inset` resolves against the PADDING box, not the visible border box --
   1px of any inset is eaten by the border before the overlay clears the
   visible edge. Target: >=5px of real extension per side beyond the visible
   edge (36 + 2*5 = 46px, past the 44px floor). inset = -(5px real + 1px
   border) = -6px. */
.jrpg-report .rpt-chart-data > summary::after { content: ""; position: absolute; inset: -6px; }
.jrpg-report .rpt-chart-data > summary::-webkit-details-marker { display: none; }
.jrpg-report .rpt-chart-data > summary::marker { content: ""; }
.jrpg-report .rpt-chart-data > summary:hover,
.jrpg-report .rpt-chart-data > summary:focus-visible { color: var(--fg-1); border-color: var(--jrpg-purple-bright); }
.jrpg-report .rpt-chart-data-chev { transition: transform .2s ease; }
.jrpg-report .rpt-chart-data[open] .rpt-chart-data-chev { transform: rotate(180deg); }
.jrpg-report .rpt-chart-data .rpt-tbl-wrap { margin-top: .9rem; max-height: 340px; overflow-y: auto; }
/* The date column is a <th scope="row"> for correct table semantics (a
   screen reader announces it as the row's header, not just a data cell);
   without this it inherits the browser's UA default bold-centered <th>
   look, unlike every td-first-column table elsewhere on the report. */
.jrpg-report .rpt-chart-data tbody th[scope="row"] { text-align: left; font-weight: 400; }

/* Mini KPI row */
/* auto-fit, not repeat(4): monthly editions render 3 tiles (the period delta IS
   the month delta there, so there is no second "Month over Month" cell) and a
   fixed 4-track grid left an empty column. */
.jrpg-report .rpt-mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.jrpg-report .rpt-mini { border: 1px solid var(--rpt-line-soft); border-radius: 8px; padding: .75rem .9rem; background: var(--bg-2); }
.jrpg-report .rpt-mini-l { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.jrpg-report .rpt-mini-v { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; margin-top: .3rem; }
@media (max-width: 700px) { .jrpg-report .rpt-mini-kpis { grid-template-columns: repeat(2, 1fr); } }

/* Index basket comparison strip (GTI-20 / Top 100 / Composite) */
/* Same card, radius and padding as .rpt-mini above it -- without a visible
   label the two rows read as one repeated thing, not flagship stats vs.
   three index variants (GTI-20 here even repeats the Close value above). */
.jrpg-report .rpt-basket-lede { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 .5rem; }
.jrpg-report .rpt-basket-strip { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.5rem; }
.jrpg-report .rpt-basket { flex: 1 1 200px; display: flex; align-items: center; gap: .55rem; border: 1px solid var(--rpt-line-soft); border-radius: 8px; padding: .65rem .9rem; background: var(--bg-2); font-family: var(--font-mono); }
.jrpg-report .rpt-basket-flag { border-color: var(--jrpg-gold); }
.jrpg-report .rpt-basket-lab { display: flex; align-items: center; gap: .4rem; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.jrpg-report .rpt-basket-tag { font-size: .58rem; letter-spacing: .05em; color: var(--jrpg-purple-ink); background: var(--jrpg-gold); border-radius: 3px; padding: 1px 5px; font-weight: 700; }
.jrpg-report .rpt-basket-val { font-size: 1.05rem; font-weight: 600; color: var(--fg-1); margin-left: auto; }
.jrpg-report .rpt-basket-wow.rpt-delta { font-size: .78rem; }
@media (max-width: 560px) { .jrpg-report .rpt-basket { flex: 1 1 100%; } }

/* Money-section subsection blocks. Flat, full-width, one per row, in
   amount-desc order -- DOM order IS rank order, no mobile reordering step.
   A two-column layout can't render each subsection's 1200px-viewBox trend
   chart legibly at a ~607px column width. */
.jrpg-report .rpt-fcat-grid { display: flex; flex-direction: column; gap: 1.6rem; align-items: stretch; margin-top: 1.75rem; }
/* Per-category funding block */
.jrpg-report .rpt-fcat { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--rpt-line-soft); }
/* Head row carries ONLY the title now. It used to also carry the composition
   pie beside it (a full-width row cost +130-140px per category); the pie's
   replacement — a full-width composition BAR — needs the block's whole width
   to lay segments out linearly, so it can no longer live in this row and
   instead sits on its own line below (see .rpt-comp-bar). */
.jrpg-report .rpt-fcat-head { margin-bottom: .1rem; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; }
/* This heads the whole block (title + table + total), not a nested card, so
   it gets the same subsection-title treatment as .rpt-recap h3 rather than
   the browser's unstyled ~16px default it was rendering at (2026-07-31). */
.jrpg-report .rpt-fcat-head h3 { display: flex; align-items: center; gap: .55rem; margin: 0; font-family: var(--font-headline); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.55rem); letter-spacing: .015em; text-transform: uppercase; color: var(--fg-1); }
.jrpg-report .rpt-fcat-note { margin: .6rem 0 1rem; color: var(--fg-2); max-width: 70ch; }

/* Same panel as the headline chart's .rpt-chart-box, so drawing + caption
   read as one figure. */
.jrpg-report .rpt-fcat-chart { margin: 1rem 0 1.2rem; border: 1px solid var(--rpt-line); border-radius: 10px; background: var(--rpt-panel); padding: 1.1rem; }
/* Fills the column instead of the builder's max_w, which stranded ~419px
   once blocks went full-width. max-height must be cleared explicitly or the
   generic .rpt-fund-chart rule's 400px fallback letterboxes the drawing. */
.jrpg-report .rpt-fund-chart-fill { width: 100%; max-width: 100%; height: auto; max-height: none; }
/* figure/figcaption supply family/size/colour/line-height (see
   ".jrpg-report figcaption" above); sits inside the panel with a hairline. */
.jrpg-report .rpt-fcat-chart-cap { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rpt-line-soft); }

/* Per-category composition BAR: this category's OWN total split across its
   individual deals ("is this one dominant deal, or spread evenly?") — not
   the removed section-level donut, which compared categories against EACH
   OTHER, and not the small 64px composition PIE this replaced (2026-07-31;
   see $comp_bar_inner in single-report.php and composition-bars-report.md
   for the full "why a ring was wrong here" writeup). A single 100%-stacked
   row, full block width, no card/border (the enclosing .rpt-fcat is already
   a plain flow block, not a card).

   DISTINCT FROM THE TWO OTHER BARS ALREADY IN THIS BLOCK, on purpose:
     - .rpt-cat-t (Coverage-by-category, News Pulse) is a single-hue MAGNITUDE
       gauge — one accent fill in a track, comparing rows to each other.
     - .rpt-amt-cell::before (the per-event table row) is a translucent WASH
       behind the amount text, comparing this deal to the category max.
     - .rpt-comp-bar below is the only one of the three that is CATEGORICAL
       (multiple brand hues, one per deal) and PART-TO-WHOLE (segments sum to
       100% of the category, not scaled to an independent max). Solid
       saturated fills (not a wash), real segments (not one fill in a track),
       and direct labels are what keep it from reading as the same chart
       shown twice.

   flex-grow (not width:%) drives each segment's share — see the PHP
   comment on $comp_bar_inner — so the 2px `gap` between segments is real
   subtracted track space, never a border drawn over the fills (the
   mechanism dataviz/anti-patterns calls for instead of a stroke). That gap
   is what separates three equal segments (Tournament Prizes: three deals at
   14.6% each) that a ring could not tell apart. overflow:hidden on the
   bar itself (not on any one segment) only clips the OUTER corners round —
   it never touches a label's text box, so it does not create the "clipped
   label" anti-pattern. */
.jrpg-report .rpt-comp { margin: .7rem 0 1.1rem; }
.jrpg-report .rpt-comp-bar { display: flex; gap: 2px; height: 26px; border-radius: 6px; overflow: hidden; background: var(--rpt-track); }
.jrpg-report .rpt-comp-seg { flex-basis: 0; min-width: 0; transition: opacity .15s; }
.jrpg-report .rpt-comp-bar:hover .rpt-comp-seg:not(:hover) { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .jrpg-report .rpt-comp-seg { transition: none; } }
/* The legend, not the segments, carries identity — see $comp_bar_inner for
   why direct labels lost. It wraps rather than scrolls or truncates, which
   stays cheap because the entry count is bounded at six (top 5 + "Other"):
   measured, that is two rows in a two-up desktop column and four at 390px.
   The share rides in the entry because it is the one value the bar itself
   can only approximate. */
.jrpg-report .rpt-comp-key { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .55rem 0 0; padding: 0; list-style: none; }
.jrpg-report .rpt-comp-key li { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: var(--fs-meta); line-height: 1.3; }
.jrpg-report .rpt-comp-key-sw { flex: none; width: .6rem; height: .6rem; border-radius: 2px; }
.jrpg-report .rpt-comp-key-n { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jrpg-report .rpt-comp-key-p { flex: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-1); }

/* The category total is a SUM of the table's rows, so it now lives in a real
   <tfoot> row instead of a caption-like block floating above the table (see
   markup) -- structurally and visually part of the table it summarises. */
.jrpg-report .rpt-tbl-wrap tfoot th,
.jrpg-report .rpt-tbl-wrap tfoot td { padding: .75rem .9rem; border-top: 1px solid var(--rpt-line); background: var(--bg-2); font-family: var(--font-mono); white-space: nowrap; }
.jrpg-report .rpt-tbl-wrap tfoot th[scope="row"] { text-align: left; font-weight: 600; font-size: var(--fs-meta); letter-spacing: normal; text-transform: none; color: var(--fg-1); }
.jrpg-report .rpt-fcat-foot-count { display: block; margin-top: .15rem; font-weight: 400; font-size: .72rem; color: var(--fg-3); }
.jrpg-report .rpt-fcat-foot-amt { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.jrpg-report .rpt-tbl-wrap tfoot td.num { text-align: right; }
.jrpg-report .rpt-tbl-wrap tfoot .rpt-delta { font-size: var(--fs-meta); }
/* Task 4 / Step 2: the Amount column is the widest natural column (the tfoot
   total renders full precision, e.g. "$5,100,000.00", never the compact
   display string body rows get — see $fnum vs amount_usd_display in
   single-report.php), so on narrow viewports the 3-column table's total
   preferred width exceeds .rpt-tbl-wrap's scrollport and the total sits
   past the right edge at scrollLeft:0 (measured: 396px table in a 335px
   wrapper on the June monthly's Venture Rounds block at 390px -- 63px of
   the tfoot total clipped, reading as a rendering glitch rather than "scroll
   for more"). Pinning ONLY the total cell to the scrollport's right edge
   keeps the one figure that matters always in view without reflowing the
   table or touching any figure it displays; it is a no-op once the table
   fits without scrolling (desktop two-up grid, 1440px). */
.jrpg-report .rpt-fcat-grid .rpt-tbl-wrap tfoot td.num { position: sticky; right: 0; z-index: 1; box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .35); }
/* Compact padding + let Recipient/Game and Funder wrap instead of scrolling.
   `white-space: normal` stands on its own merit: at the fixed 34/38/28
   proportions above, the longest funder ("Outlaw Troopers and Alien Worlds")
   still exceeds its column, and wrapping beats truncating a name a reader may
   want to cite. Measured (21-row Tournament Prizes): 680px avoids a wrapped
   2nd line, but two 680px columns don't fit ~1240px content width; 550px
   keeps wrap-induced growth to 2 of 21 rows vs. 9-of-21 at 480px. */
.jrpg-report .rpt-fcat-grid .rpt-tbl-wrap thead th,
.jrpg-report .rpt-fcat-grid .rpt-tbl-wrap tbody td,
.jrpg-report .rpt-fcat-grid .rpt-tbl-wrap tfoot th,
.jrpg-report .rpt-fcat-grid .rpt-tbl-wrap tfoot td { padding: .5rem .55rem; }
.jrpg-report .rpt-fcat-grid .rpt-tbl-wrap tbody td:nth-child(1),
.jrpg-report .rpt-fcat-grid .rpt-tbl-wrap tbody td:nth-child(2) { white-space: normal; }

/* Top-event callout */
.jrpg-report .rpt-callout { border: 1px solid var(--jrpg-gold); border-radius: 10px; background: color-mix(in oklch, var(--jrpg-gold) 6%, transparent); padding: 1.25rem; margin-top: 1.25rem; }
.jrpg-report .rpt-callout-kick { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--jrpg-gold); }
.jrpg-report .rpt-callout-big { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; color: var(--jrpg-gold); margin: .5rem 0 .1rem; line-height: 1; }
.jrpg-report .rpt-callout h3 { font-family: var(--font-headline); font-weight: 600; letter-spacing: .01em; margin: .6rem 0 .4rem; font-size: 1.2rem; }
.jrpg-report .rpt-callout p { margin: 0; font-size: var(--fs-meta); color: var(--fg-2); }
/* Lead callout: full-width banner at the top of the section (big figure beside title). */
.jrpg-report .rpt-callout-lead { margin: 0 0 1.5rem; }
/* Two columns: the amount in its own fixed column, the title + description in
   the second. Was a centred flex that wrapped, so on narrow widths the
   amount and the text ran together instead of reading as two fields. */
.jrpg-report .rpt-callout-headline { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .4rem 1.75rem; margin-top: .6rem; }
.jrpg-report .rpt-callout-lead .rpt-callout-big { margin: 0; font-size: 2.4rem; align-self: center; }
.jrpg-report .rpt-callout-headline > div { min-width: 0; }
.jrpg-report .rpt-callout-lead h3 { margin: 0 0 .25rem; }

/* ---- Wash watch ---- */
.jrpg-report .rpt-wash-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.6rem; align-items: start; }
@media (max-width: 900px) { .jrpg-report .rpt-wash-grid { grid-template-columns: 1fr; } }
.jrpg-report .rpt-stat-huge { font-family: var(--font-mono); font-size: 4.5rem; font-weight: 700; color: var(--jrpg-gold); line-height: .95; letter-spacing: -.03em; }
.jrpg-report .rpt-wash-lede { margin: .5rem 0 0; font-size: var(--fs-meta); }
.jrpg-report .rpt-wash-tiers { margin-top: 1.1rem; display: flex; gap: 1.1rem; flex-wrap: wrap; }
.jrpg-report .rpt-tier { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-3); text-transform: uppercase; letter-spacing: .06em; }
.jrpg-report .rpt-tier b { font-weight: 700; }
.jrpg-report .rpt-tier-sev  { color: var(--jrpg-danger); }
.jrpg-report .rpt-tier-many { color: var(--jrpg-hot); }
.jrpg-report .rpt-tier-some { color: var(--jrpg-warn); }
.jrpg-report .rpt-tier-min  { color: var(--jrpg-cyan); }
.jrpg-report .rpt-wash-note { font-size: var(--fs-meta); margin-top: 1rem; }
.jrpg-report .rpt-offenders { list-style: none; margin: 0; padding: 0; }
.jrpg-report .rpt-offenders li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--rpt-line-soft); font-family: var(--font-mono); font-size: var(--fs-meta); }
.jrpg-report .rpt-offenders li:last-child { border-bottom: 0; }
.jrpg-report .rpt-rank { color: var(--fg-3); width: 22px; }
.jrpg-report .rpt-off-nm { color: var(--fg-1); flex: 1; }
.jrpg-report .rpt-off-sym { color: var(--fg-3); font-size: .72rem; }
/* The flag reason, not the badge, is what separates one offender from the next:
   the list is ranked by composite score, so the top rows routinely all read
   "SEVERE · 100" and the badge column stops discriminating. This was the row's
   smallest, faintest text while the redundant badge carried the weight. Now at
   row size and mid ink -- still quieter than the name, no longer a footnote. */
.jrpg-report .rpt-off-flag { color: var(--fg-2); font-size: var(--fs-meta); letter-spacing: .02em; }

.jrpg-report .rpt-cat-bars { display: flex; flex-direction: column; gap: .55rem; margin-top: .4rem; }
.jrpg-report .rpt-cat { display: grid; grid-template-columns: 150px 1fr 42px; gap: .75rem; align-items: center; font-family: var(--font-mono); font-size: .72rem; }
/* Task 4 / Step 1: was nowrap + ellipsis with no escape hatch -- "Esports &
   Tournaments" (145px needed) truncated to "Esports & T…" in the 110px
   column at 390px and stayed that way; a title attribute is not a real
   route here either (this codebase already treats hover-only title as a
   non-fix for touch/keyboard -- see $comp_bar_inner's per-segment title
   comment). Wrapping instead of truncating costs a taller row on the
   handful of longer category names and nothing on the short ones. */
.jrpg-report .rpt-cat-n { color: var(--fg-3); text-align: right; white-space: normal; overflow-wrap: break-word; }
.jrpg-report .rpt-cat-t { height: 10px; background: var(--rpt-track); border-radius: 5px; overflow: hidden; }
.jrpg-report .rpt-cat-f { display: block; height: 100%; background: linear-gradient(90deg, var(--jrpg-purple), var(--jrpg-purple-bright)); border-radius: 5px; }
.jrpg-report .rpt-cat-v { color: var(--fg-1); text-align: right; }
/* .rpt-gold-t marks the top-ranked value, but at equal specificity the rule
   above wins on source order and the highlight rendered identically to every
   other row. Same fix already applied to .rpt-hk-val.rpt-gold-t below. */
.jrpg-report .rpt-cat-v.rpt-gold-t { color: var(--jrpg-gold); }
@media (max-width: 520px) { .jrpg-report .rpt-cat { grid-template-columns: 110px 1fr 34px; } }

/* ---- Methodology / cite ---- */
.jrpg-report .rpt-method-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.5rem; }
/* 720, not 700: print resolves this against the page box, and A4 less
   margins is ~703px -- 700px missed it by 3px and stayed 2x315px in the PDF. */
@media (max-width: 720px) { .jrpg-report .rpt-method-list { grid-template-columns: 1fr; } }
.jrpg-report .rpt-method-list h3 { font-size: .82rem; color: var(--jrpg-gold); font-family: var(--font-mono); letter-spacing: .05em; margin-bottom: .4rem; }
.jrpg-report .rpt-method-list p { margin: 0; font-size: var(--fs-meta); color: var(--fg-2); }
.jrpg-report .rpt-cite-grid { align-items: start; }
.jrpg-report .rpt-cite-box { border: 1px dashed var(--rpt-line); border-radius: 10px; background: var(--rpt-track); padding: 1.1rem 1.25rem; }
.jrpg-report .rpt-cite-lab { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: .6rem; }
.jrpg-report .rpt-cite-text { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-2); line-height: 1.65; }
.jrpg-report .rpt-cite-text b { color: var(--fg-1); }
.jrpg-report .rpt-cite-copy { margin-top: .9rem; }
.jrpg-report .rpt-cite-note, .jrpg-report .rpt-embed-lead, .jrpg-report .rpt-embed-contact { font-size: .72rem; margin-top: .75rem; }

/* ---- Archive ---- */
.jrpg-report .rpt-archive { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
@media (max-width: 900px) { .jrpg-report .rpt-archive { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .jrpg-report .rpt-archive { grid-template-columns: 1fr; } }
.jrpg-report .rpt-arc { border: 1px solid var(--rpt-line); border-radius: 8px; background: var(--rpt-panel); padding: .95rem 1rem; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; }
.jrpg-report a.rpt-arc:hover { border-color: var(--jrpg-purple); text-decoration: none; transform: translateY(-2px); }
.jrpg-report .rpt-arc-rn { font-family: var(--font-mono); font-size: .66rem; color: var(--fg-3); letter-spacing: .08em; }
.jrpg-report .rpt-arc-dt { font-family: var(--font-display); font-size: .95rem; color: var(--fg-1); margin: .5rem 0; }
.jrpg-report .rpt-arc-idx { font-family: var(--font-mono); font-size: .78rem; color: var(--fg-3); }
.jrpg-report .rpt-arc-idx b { color: var(--jrpg-gold); }
.jrpg-report .rpt-arc-current { border-color: var(--jrpg-gold); background: color-mix(in oklch, var(--jrpg-gold) 6%, transparent); }
.jrpg-report .rpt-arc-current .rpt-arc-rn { color: var(--jrpg-gold); }

/* C1: archive group heading — mono uppercase tracked label (also the hub table groups). */
.jrpg-report .rpt-arc-group-h { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin: 1.75rem 0 .6rem; }
.jrpg-report .rpt-arc-group-h:first-of-type { margin-top: .25rem; }
/* Report-page archive: weekly/monthly groups are two separate .rpt-archive grids
 * (card format, unlike the hub's table). Inter-group spacing comes free from the
 * h3.rpt-arc-group-h margin between them; the trailing "Full archive" grid has no
 * heading of its own, so it needs an explicit gap or it reads as glued to the group
 * above it. */
.jrpg-report .rpt-archive-tail { margin-top: 1.4rem; }

/* ============================================================
   HUB — design/UX overhaul (Bundles A2/B/C/D)
   Scoped to .jrpg-report-hub so edition pages are untouched.
   ============================================================ */
/* C2 / C7: hub section h2s move to Barlow Condensed, sentence case, a touch larger.
   Audiowide stays on the page h1 only; the hero glance value styling is unchanged. */
.jrpg-report-hub .rpt-section h2 { font-family: var(--font-headline); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: .01em; text-transform: none; }
/* C3: eyebrow chip drops gold for a purple border + muted text (gold = CTAs + data). */
.jrpg-report-hub .rpt-rep { border-color: var(--jrpg-purple-bright); color: var(--fg-2); }
/* C3 + A5: methodology headings drop gold for fg-1 with a cyan chevron accent. */
.jrpg-report-hub .rpt-method-list h3 { color: var(--fg-1); }
.jrpg-report-hub .rpt-method-list h3 .rpt-ico { color: var(--jrpg-cyan); }

/* B: hero glance panel — bled header band (edition name + date range) gives the
   card an actual title bar instead of a floating hairline + tiny label. The
   band bleeds to the card's outer edge via negative margins matching
   .rpt-glance's own padding/radius/overflow:hidden (all inherited, untouched —
   see the shared-class note above .rpt-glance-head), so it's clipped to the
   card's rounded corners for free. Tint + rule reuse the same gold-6% wash
   already used for .rpt-arc-current elsewhere on this page. */
.jrpg-report .rpt-hero-glance { align-self: stretch; display: flex; flex-direction: column; }
.jrpg-report .rpt-hero-glance .rpt-glance-head {
	margin: -1.1rem -1.25rem 1.1rem; padding: .95rem 1.25rem;
	background: color-mix(in oklch, var(--jrpg-gold) 6%, transparent);
	border-bottom: 2px solid var(--jrpg-gold);
	display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; row-gap: .1rem;
	font-family: var(--font-headline); font-size: var(--fs-md); font-weight: 600;
	text-transform: none; letter-spacing: .01em; color: var(--fg-1);
}
.jrpg-report .rpt-hero-glance .rpt-glance-head a { color: var(--fg-1); }
.jrpg-report .rpt-hero-glance .rpt-glance-head a:hover { color: var(--jrpg-gold); }
.jrpg-report .rpt-hero-glance .rpt-glance-range {
	font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 400;
	letter-spacing: .02em; color: var(--fg-3);
}

/* Primacy between the two cadence cards: report-hub.php sets one of
   .rpt-hero-glance-latest / -secondary per card from $card['is_latest'],
   which is itself derived from $latest_id (newest period_end across BOTH
   cadences — see the PHP comment there). Never assume weekly or monthly.
   Cards stay the same size and padding either way; only color/weight signal
   which one is newest, so a plain gold-button-vs-gold-button standoff
   doesn't out-shout the H1. The secondary card keeps the site's existing
   purple "live/interactive" accent (same accent used on links and hover
   states elsewhere) instead of fading toward gray, so it still reads as a
   current edition and not a deprecated one. */
.jrpg-report .rpt-hero-glance-latest { border-color: var(--jrpg-gold); }
.jrpg-report .rpt-hero-glance-secondary .rpt-glance-head {
	background: color-mix(in oklch, var(--jrpg-purple-bright) 6%, transparent);
	border-bottom-color: var(--jrpg-purple-bright);
}
.jrpg-report .rpt-hero-newest {
	margin-left: auto;
}
/* Secondary CTA: same .rpt-btn shell used elsewhere on report pages (PDF
   download, Past Editions, Copy citation), not a new button style — but
   with a purple border so it still reads as a live, brand-colored action
   rather than a disabled control. Solid gold stays exclusive to the
   newest edition's CTA. */
.jrpg-report .rpt-hero-glance-secondary .rpt-hero-cta {
	border-color: var(--jrpg-purple-bright);
}
.jrpg-report .rpt-hero-glance-secondary .rpt-hero-cta:hover {
	background: color-mix(in oklch, var(--jrpg-purple-bright) 14%, transparent);
	border-color: var(--jrpg-purple-bright);
}
/* 3 KPIs, not 4 — wash-flags dropped from the hero cards (see report-hub.php:
   3 divides evenly into one row at hero-card width; a 4th orphans onto its
   own row with two empty cells beside it and adds ~40% to card height for
   one number. The full wash-flags figure is one click away on the edition
   itself. Cards are wide enough now that 3 fit one row instead of the old
   2x2 sidebar layout. */
.jrpg-report .rpt-hero-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem 1rem; margin: 0 0 1.15rem; }
@media (max-width: 460px) { .jrpg-report .rpt-hero-kpis { grid-template-columns: 1fr 1fr; } }
.jrpg-report .rpt-hk-lab { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); line-height: 1.25; }
.jrpg-report .rpt-hk-lab a { color: var(--fg-3); border-bottom: 1px dotted var(--fg-3); }
.jrpg-report .rpt-hk-lab a:hover { color: var(--jrpg-gold); border-bottom-color: var(--jrpg-gold); }
.jrpg-report .rpt-hk-val { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; margin: .35rem 0 .2rem; color: var(--fg-1); }
/* .rpt-hk-val and .rpt-gold-t were both two-class selectors tied on
   specificity, so source order silently let fg-1 win and the JRPG Gaming
   Index value (the flagship figure, marked up with rpt-gold-t) rendered
   identical to Funding and Market Cap beside it. Three-class selector wins
   outright and restores the intended emphasis, on both cards. */
.jrpg-report .rpt-hk-val.rpt-gold-t { color: var(--jrpg-gold); }
.jrpg-report .rpt-hk-sub { font-family: var(--font-mono); font-size: .72rem; color: var(--fg-3); }
.jrpg-report .rpt-hk-sub .rpt-delta { font-size: .72rem; }
.jrpg-report .rpt-hero-cta { margin-top: auto; width: 100%; }

/* A2: hero legend — spells out WoW and anchors the rebased index. */
.jrpg-report .rpt-hero-legend { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-3); margin: 1.4rem 0 0; max-width: 72ch; }
.jrpg-report .rpt-hero-legend b { color: var(--fg-2); font-weight: 600; }

/* D1: archive-as-tables markers + honest-note. */
.jrpg-report .rpt-arc-latest { color: var(--jrpg-gold); font-size: .72rem; white-space: nowrap; }
.jrpg-report .rpt-arc-row-latest td { background: color-mix(in oklch, var(--jrpg-gold) 6%, transparent); }
.jrpg-report .rpt-arc-note { margin-top: 1.1rem; }
.jrpg-report .rpt-arc-note kbd { font-family: var(--font-mono); font-size: .8em; border: 1px solid var(--rpt-line); border-radius: 4px; padding: 1px 5px; background: var(--rpt-track); }
/* Each archive metric now stacks value over its period-over-period change, so
   the table dropped its single trailing WoW/MoM column: the delta sits with
   the number it belongs to instead of only ever describing the index. The
   change line is deliberately quieter than the value — it's context, not the
   figure being read down the column. Only the index and market-cap changes
   are green/red; funding and items-reviewed reuse .rpt-att (neutral, signed,
   no ▲/▼) because neither is market movement. */
.jrpg-report .rpt-arc-v { display: block; font-size: .95rem; line-height: 1.15; color: var(--fg-1); font-variant-numeric: tabular-nums; }
/* The change is subordinate to the figure it annotates, so it reads at ~2/3
   the size on a tight leading — stacked, the two lines have to resolve as one
   unit, not as two numbers competing down the column. */
.jrpg-report .rpt-delta.rpt-arc-cmp { display: block; margin-top: .12rem; font-size: .68rem; line-height: 1.2; font-weight: 500; }
.jrpg-report .rpt-arc-cmp-na { display: block; margin-top: .12rem; font-family: var(--font-mono); font-size: .68rem; line-height: 1.2; color: var(--fg-mute); }
/* Two-line cells doubled the row height, which flattened the table into a list
   of loose blocks. Pulling the vertical padding back in restores the density
   the rest of the report's tables read at. */
.jrpg-report #archive .rpt-tbl-wrap tbody td { padding-top: .5rem; padding-bottom: .5rem; }
/* One hairline between the identity columns and the four metric columns — the
   numbers are the block being scanned, and at this density a single rule
   anchors them without boxing every column. Which column carries it depends
   on whether Dates is still present at this width (see below). */
@media (min-width: 841px) {
	.jrpg-report #archive .rpt-tbl-wrap th:nth-child(2),
	.jrpg-report #archive .rpt-tbl-wrap td:nth-child(2) { border-right: 1px solid var(--rpt-line-soft); }
}
/* Between the mobile two-column view and ~840px, six columns only fit if the
   dates wrap — and every row wrapping to two lines is uglier than the scroll
   it was meant to fix. Dropping Dates instead costs nothing: the edition
   label ("Week 30, 2026" / "July 2026") already carries the period, which is
   the same reason the mobile rule drops it. */
@media (min-width: 641px) and (max-width: 840px) {
	.jrpg-report #archive .rpt-tbl-wrap th:nth-child(2),
	.jrpg-report #archive .rpt-tbl-wrap td:nth-child(2) { display: none; }
	.jrpg-report #archive .rpt-tbl-wrap th:nth-child(1),
	.jrpg-report #archive .rpt-tbl-wrap td:nth-child(1) { border-right: 1px solid var(--rpt-line-soft); }
}
/* A change line is wider than the value it sits under ("+2,532%" vs "2,711"),
   so the six columns now overflow .rpt-tbl-wrap by ~40px between 640px (where
   the mobile rule below drops to two columns) and ~840px. Tightening the
   gutters buys back more than that: an inner scrollbar this shallow reads as
   a clipped table, not as "scroll for more". */
@media (max-width: 1024px) {
	.jrpg-report #archive .rpt-tbl-wrap th,
	.jrpg-report #archive .rpt-tbl-wrap td { padding-left: .55rem; padding-right: .55rem; }
	/* "Items reviewed" and "Market cap" are wider than any figure beneath them,
	   so at this size the headers, not the data, are what force the scroll.
	   Letting the two-word ones wrap costs a line of header height and buys
	   back the last ~70px. */
	.jrpg-report #archive .rpt-tbl-wrap thead th { white-space: normal; }
}

/* E2: attention movers — neutral signed delta chip (attention isn't market movement,
   so no green/red and no ▲/▼; the sign carries the direction). */
.jrpg-report .rpt-delta.rpt-att { color: var(--fg-2); }
/* E2: News Pulse extras — styled to the section's existing card patterns. */
/* The corpus total ("N items reviewed") is the WHOLE that the three tier
   cells sum to, not a fourth peer of them -- it sits outside their role=list,
   set off by a hairline divider (not a coloured stripe: a plain 1px
   --rpt-line-soft rule, same divider token used by .rpt-fcat) and given a
   bigger, uppercase-label treatment so it reads as "this is the whole, these
   three are its breakdown" (2026-07-31). */
.jrpg-report .rpt-shape { display: flex; align-items: stretch; gap: 1.5rem; margin: 1.25rem 0 1.75rem; }
.jrpg-report .rpt-shape-total { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; min-width: 8rem; padding-right: 1.5rem; border-right: 1px solid var(--rpt-line-soft); }
.jrpg-report .rpt-shape-total-num { font-family: var(--font-mono); font-size: clamp(1.9rem, 4.5vw, 2.5rem); font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--fg-1); }
.jrpg-report .rpt-shape-total-lab { font-size: var(--fs-meta); color: var(--fg-3); text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; }
.jrpg-report .rpt-shape-tiers { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.jrpg-report .rpt-shape-cell { padding: .9rem 1rem; border: 1px solid var(--rpt-line-soft); border-radius: .5rem; }
.jrpg-report .rpt-shape-num { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; line-height: 1.1; }
.jrpg-report .rpt-shape-lab { font-weight: 600; margin-top: .15rem; }
.jrpg-report .rpt-shape-sub { font-size: var(--fs-meta); color: var(--fg-2); margin-top: .1rem; }
.jrpg-report .rpt-shape-d, .jrpg-report .rpt-shape-total-d { font-size: var(--fs-meta); margin-top: .3rem; }
@media (max-width: 640px) {
	.jrpg-report .rpt-shape { flex-direction: column; gap: .9rem; }
	.jrpg-report .rpt-shape-total { border-right: 0; border-bottom: 1px solid var(--rpt-line-soft); padding-right: 0; padding-bottom: .9rem; min-width: 0; }
}
@media (max-width: 560px) { .jrpg-report .rpt-shape-tiers { grid-template-columns: 1fr; } }
.jrpg-report .rpt-covered, .jrpg-report .rpt-movers { list-style: none; margin: .25rem 0 0; padding: 0; }
.jrpg-report .rpt-covered li, .jrpg-report .rpt-movers li { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--rpt-line-soft); font-size: var(--fs-ui); }
.jrpg-report .rpt-covered li:first-child, .jrpg-report .rpt-movers li:first-child { border-top: 0; }
.jrpg-report .rpt-cov-title, .jrpg-report .rpt-mv-nm { color: var(--fg-1); flex: 1; min-width: 0; }
.jrpg-report .rpt-cov-meta { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; flex: none; }
.jrpg-report .rpt-cov-badge { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--jrpg-purple-bright); border: 1px solid var(--rpt-line); border-radius: 4px; padding: 1px 6px; }
.jrpg-report .rpt-mv-ment { font-family: var(--font-mono); font-size: .72rem; color: var(--fg-3); white-space: nowrap; flex: none; }
.jrpg-report .rpt-movers .rpt-delta { flex: none; }

/* E3: vertical touch-drags scroll the page while the crosshair still tracks (the
   touchstart listener is passive, so this CSS is what frees pan-y scrolling). */
.jrpg-report .rpt-chart-wrap { touch-action: pan-y; }

/* ---- FAQ ---- */
.jrpg-report .rpt-faq details { border: 1px solid var(--rpt-line-soft); border-radius: 8px; background: var(--rpt-panel); margin-bottom: .6rem; padding: 0 1.1rem; }
.jrpg-report .rpt-faq summary { font-family: var(--font-display); font-size: .95rem; padding: 1rem 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.jrpg-report .rpt-faq summary::-webkit-details-marker { display: none; }
.jrpg-report .rpt-faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--jrpg-gold); font-size: 1.25rem; }
.jrpg-report .rpt-faq details[open] summary::after { content: "–"; }
.jrpg-report .rpt-faq details p { margin: 0 0 1rem; color: var(--fg-3); font-size: var(--fs-ui); max-width: 90ch; text-wrap: pretty; }

/* ---- Toast ---- */
.jrpg-report .rpt-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--jrpg-gold); color: var(--jrpg-purple-ink); font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 600; padding: .7rem 1.25rem; border-radius: 8px; z-index: 100; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.jrpg-report .rpt-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.jrpg-report .rpt-btn, .jrpg-report a.rpt-arc, .jrpg-report .rpt-toast { transition: none; }
}

/* ---- Inline icons (report) ---- */
.jrpg-report .rpt-ico { width: .95em; height: .95em; vertical-align: -0.1em; flex: none; }
.jrpg-report .rpt-btn .rpt-ico { margin-right: .1rem; }

/* ---- Mobile fixes (Fable review P0-2 / P1-2 / P2-7) ---- */
@media (max-width: 640px) {
	/* Key Findings: text on its own line, not ~3-word wraps beside chip+button. */
	.jrpg-report .rpt-finding { flex-wrap: wrap; }
	.jrpg-report .rpt-finding p { flex: 1 1 100%; order: 3; }
	/* Top Movers: drop Price so the wash-risk badge (the section's point) stays on screen. */
	.jrpg-report #top-movers .rpt-tbl-wrap th:nth-child(2),
	.jrpg-report #top-movers .rpt-tbl-wrap td:nth-child(2) { display: none; }
}
@media (max-width: 480px) {
	/* Below 480px, Token+%+Mcap+Wash Risk still overrun a 320px wrap by ~86px
	   (measured 406.5px content in 320px wrap at 375px) and clip the wash-risk
	   badge the section is about. Drop Mcap too -- it's on the row above the fold. */
	.jrpg-report #top-movers .rpt-tbl-wrap th:nth-child(4),
	.jrpg-report #top-movers .rpt-tbl-wrap td:nth-child(4) { display: none; }
}
@media (max-width: 640px) {
	/* Editions archive: 6 columns (Edition/Dates/Index/Funding/Market cap/Items
	   reviewed, each number now stacked over its own period change) don't fit a
	   390px wrap even two at a time — Edition+Dates alone already exceed it.
	   Rather than leave every number behind an undiscoverable inner scrollbar,
	   drop to Edition (row nav) + Funding (the headline verifiable fact this
	   table exists to surface). Dates is redundant with the edition label
	   ("Week 30 · 2026" / "July 2026" already carries the period); Index is the
	   proprietary number readers understand least and is already shown in the
	   hero above; Market cap and Items reviewed don't fit alongside Funding
	   without reintroducing scroll. */
	.jrpg-report #archive .rpt-tbl-wrap th:nth-child(2),
	.jrpg-report #archive .rpt-tbl-wrap td:nth-child(2),
	.jrpg-report #archive .rpt-tbl-wrap th:nth-child(3),
	.jrpg-report #archive .rpt-tbl-wrap td:nth-child(3),
	.jrpg-report #archive .rpt-tbl-wrap th:nth-child(5),
	.jrpg-report #archive .rpt-tbl-wrap td:nth-child(5),
	.jrpg-report #archive .rpt-tbl-wrap th:nth-child(6),
	.jrpg-report #archive .rpt-tbl-wrap td:nth-child(6) { display: none; }
	/* Index chart: pan instead of shrinking axis labels to ~4px. */
	.jrpg-report #gaming-index .rpt-chart-box { overflow-x: auto; }
	.jrpg-report #gaming-index .rpt-index-chart { min-width: 560px; }
	/* Funding trend chart: same reasoning -- pan instead of shrinking rotated
	   full month-name / weekly date-range labels to illegible size. Width no
	   longer scales with bar count (single-report.php: $fc_W is now a
	   constant 1200, not derived from a 5-slot floor) -- it's a fixed viewBox
	   at every bar count, so this min-width applies uniformly rather than
	   only mattering at low counts.
	   The scroll/clip boundary is .rpt-chart-scroll (an inner div around just
	   the <svg>), NOT .rpt-chart-box -- overflow-x here without overflow-y
	   forces overflow-y: auto too (CSS quirk, see the PHP-side comment above
	   .rpt-chart-scroll), which used to clip the hover tooltip's
	   translate(-50%,-100%) pop-up above the box with no scrollbar able to
	   reach it. Scoping the clip to the inner div, with the tooltip rendered
	   as its SIBLING outside it, lets the tooltip escape while the chart
	   still pans.
	   min-width is a CSS custom property (--rpt-fund-mobile-min-w), not a
	   literal 560px copied from the index chart above -- this chart's
	   viewBox is 1200 wide, not 960, so the SAME 560px number would put it at
	   a different (and, before this fix, much smaller) on-screen SCALE than
	   the index chart's 560/960: single-report.php derives the matching
	   scale against $fc_W instead. */
	.jrpg-report #week-in-money .rpt-chart-scroll { overflow-x: auto; }
	.jrpg-report .rpt-fund-chart { min-width: var(--rpt-fund-mobile-min-w, 700px); }
}

/* ============================================================
   WEEKLY REPORT — PRINT / SAVE-AS-PDF
   "Download PDF" button calls window.print(); this sheet strips
   the site chrome and remaps the dark tokens to light-on-white,
   so every descendant (inline-SVG charts included) recolours from
   the variables. print-color-adjust:exact keeps fills/badges.
   ============================================================ */
@media print {
	#wpadminbar,
	#masthead, .site-header-f,
	.tk-track-wrap,
	#secondary,
	.site-footer,
	.fastest-breadcrumbs,
	.rpt-toast,
	.rpt-actions,
	.rpt-copylink,
	.rpt-cite-copy { display: none !important; }

	html, body { background: #ffffff !important; }

	.jrpg-report {
		--bg-0: #ffffff; --bg-1: #ffffff; --bg-2: #f5f5f7; --bg-3: #eeeef1;
		--bg-line: #d4d4d8;
		--fg-1: #18181b; --fg-2: #3f3f46; --fg-3: #52525b; --fg-mute: #71717a;
		--jrpg-gold: #9a6a00; --jrpg-gold-deep: #7a5400;
		--jrpg-purple: #5b21b6; --jrpg-purple-bright: #6d28d9; --jrpg-purple-ink: #ffffff;
		--jrpg-success: #15803d; --jrpg-danger: #b91c1c;
		--rpt-pos: #15803d; --rpt-neg: #b91c1c;
		color: var(--fg-1); background: #ffffff; font-size: 10.5pt;
		-webkit-print-color-adjust: exact; print-color-adjust: exact;
	}
	.jrpg-report a { color: #5b21b6; text-decoration: none; }

	@page { margin: 14mm 12mm; }

	/* Type shrinks for paper, but it shrank UNEVENLY: title -39%, h2 -34%, body
	   -24%, flattening the page's hierarchy in the PDF (title/body fell from 2.5x
	   on screen to 2.0x, h2/body from 1.58x to 1.36x). Holding body at 11pt and
	   raising the other two restores 2.36x / 1.55x.
	   Title wrapping is governed by `.rpt-title`'s `max-width: 20ch`, not by these
	   sizes -- the measure scales with the font, so the title breaks across the
	   same number of lines in both media whatever size it is set at. */
	.jrpg-report .rpt-title { font-size: 26pt; line-height: 1.1; }
	.jrpg-report .rpt-section h2 { font-size: 17pt; }
	.jrpg-report .rpt-lede { font-size: 11pt; }
	.jrpg-report .rpt-kpi-val { font-size: 16pt; }
	/* Width-based media queries resolve against the PAGE BOX when printing, not
	   the window: A4 portrait less 12mm side margins is ~703px, so every desktop
	   breakpoint on this page (1080px hero, 1130px money grid, 900px tables)
	   fails and the PDF silently renders the MOBILE layout. The KPI row below was
	   already patched for this; these restore the rest.
	   Note this is invisible in devtools print emulation at a desktop window,
	   which keeps the wide layout -- it only shows in real paginated output. */
	.jrpg-report .rpt-kpis { grid-template-columns: repeat(4, 1fr); }
	/* The at-a-glance card is a compact aside. Stacked, it became a full-width
	   648px slab under the title, which is the first thing you see in the PDF.
	   240px keeps it in the corner and still leaves the lede ~52 characters of
	   measure; the card does not overflow at any width from 180px up. */
	.jrpg-report .rpt-hero-grid { grid-template-columns: 1fr 240px; align-items: start; }
	/* The money tables deliberately keep `table-layout: auto` here, unlike the
	   screen's fixed 34/38/28. Those proportions exist because Amount took 44% of
	   a 1240px canvas; at a 648px page it needs proportionally more, and pinning
	   it to 28% (181px) cannot hold the footer's nowrap
	   "$97,650.81 +926.01% MoM" (205px) -- measured, that spilled 48px past the
	   page edge, where paper has no scroll to recover it. Widening the column
	   does not resolve it either. A slightly loose Amount column beats content
	   printed off the sheet. */
	/* The two-up movers/holder tables are deliberately NOT restored to two
	   columns: at ~320px each, five columns of prices and percentages would clip,
	   and .rpt-tbl-wrap's overflow-x cannot be scrolled on paper. Stacked full
	   width is the correct print layout for those, even though it differs from
	   the page. */

	.jrpg-report .rpt-chart-box,
	.jrpg-report figure,
	.jrpg-report .rpt-card,
	.jrpg-report .rpt-kpi,
	.jrpg-report .rpt-finding,
	.jrpg-report .rpt-callout,
	.jrpg-report .rpt-arc,
	.jrpg-report .rpt-fcat-chart,
	.jrpg-report .rpt-faq details { break-inside: avoid; }
	.jrpg-report .rpt-sec-head,
	.jrpg-report h2, .jrpg-report h3, .jrpg-report h4 { break-after: avoid; }

	.jrpg-report .rpt-tbl-wrap { overflow: visible; }
	.jrpg-report table { break-inside: auto; }
	.jrpg-report thead { display: table-header-group; }
	.jrpg-report tr { break-inside: avoid; }

	.jrpg-report .rpt-grad-top { stop-opacity: .18; }
	.jrpg-report .rpt-grid { stroke: #d4d4d8; }
}

@media (max-width: 560px) { .jrpg-report .rpt-callout-headline { grid-template-columns: minmax(0, 1fr); } }
/* An accent in the category's own colour, so the heading reads as a
   CATEGORY label rather than as prose -- 'Other' sat directly above a note
   opening 'astra-nova...' and the two ran together. Ties the heading to the
   same colour used by this category's in-table amount bars
   (--amt-c, .rpt-amt-cell::before -- both draw from $cat['color']).
   Task 4 / Step 4: this used to be a small SQUARE dot, same shape/size
   family as .rpt-comp-key-sw a few pixels below it -- two unrelated colour
   systems (category identity here vs. per-DEAL rank in the composition
   bar's validated palette) reading as one shared key. The composition bar
   segments are validated for colour-vision deficiency and are NOT
   repainted; instead this became a vertical rule, a shape with no legend
   connotation, so proximity no longer implies a relationship that isn't
   there. */
.jrpg-report .rpt-fcat-head h3::before { content: ''; flex: none; width: .3rem; height: 1.05em; border-radius: 2px; background: var(--fcat-c, var(--fg-3)); }
/* The event type on its own line under the name: it was concatenated onto
   the game name, so the raw enum read as part of it -- "astra-nova Other".
   Now a labelled, de-emphasised second line via the human type label. */
.jrpg-report .rpt-callout-type { display: block; font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 400; text-transform: none; letter-spacing: .02em; color: var(--fg-2); margin-top: .15rem; }
.jrpg-report .rpt-fcat-foot-d { margin-left: .6rem; font-size: var(--fs-meta); }