/* =============================================================================================
   designboom newsroom: charts.css (hub migration Step 4, audit G4 and G5)
   The KPI tile, the stat grid, the chart wrapper and the period bar, plus the few card pieces the
   data pages share. Same rules as hub.css: every color rgb(var(--token)), every size rem or a
   token, no px font sizes, md = 48rem. Read docs/hub-migration/README.md ("Charts and KPI tiles").
   ============================================================================================= */

/* ---- KPI tile (G5): label 12px faint, value text-2xl semibold tabular, delta with a glyph and a
        sign, optional 24px sparkline in chart-1 ------------------------------------------------ */
.hub-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); column-gap: var(--space-6); row-gap: var(--space-3); margin: 0 0 var(--space-6); font-family: var(--font-sans); }
.hub-stat-grid > * { min-width: 0; }
.hub-stat { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; padding: var(--space-4); border: 1px solid rgb(var(--line)); border-radius: var(--radius-lg); background: rgb(var(--surface)); color: rgb(var(--fg)); font-family: var(--font-sans); }
.hub-stat-label { display: flex; align-items: center; gap: 0.25rem; min-height: 1rem; font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-faint)); letter-spacing: normal; text-transform: none; }
.hub-stat-value { font: 600 1.5rem/2rem var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: rgb(var(--fg)); overflow-wrap: anywhere; }
.hub-stat-value.is-beta, .hub-stat-value.is-muted { color: rgb(var(--fg-faint)); }
.hub-stat-value small { font-size: 0.875rem; font-weight: 500; color: rgb(var(--fg-muted)); }
.hub-stat-delta { display: inline-flex; align-items: center; gap: 0.25rem; font: 500 0.75rem/1rem var(--font-sans); font-variant-numeric: tabular-nums; color: rgb(var(--fg-muted)); }
.hub-stat-delta.is-up { color: rgb(var(--success)); }
.hub-stat-delta.is-down { color: rgb(var(--danger)); }
.hub-stat-delta.is-flat { color: rgb(var(--fg-faint)); }
.hub-stat-arrow { font-weight: 600; }
.hub-stat-sub { font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-faint)); margin-top: 0.125rem; }
.hub-stat-sub strong, .hub-stat-sub b { color: rgb(var(--fg)); font-weight: 500; }
.hub-stat-sub .is-up { color: rgb(var(--success)); } .hub-stat-sub .is-down { color: rgb(var(--danger)); }
.hub-stat-spark { display: block; margin-top: 0.375rem; width: 4.5rem; height: 1.5rem; color: rgb(var(--chart-1)); }
.hub-stat .sig-dot { margin-left: 0.375rem; }
.hub-stat .info-i { margin-left: 0.25rem; }

/* ---- Chart wrapper: a fixed aspect on desktop, a min height on phones, so the canvas resizes
        cleanly (Chart.js sizes to the wrapper with maintainAspectRatio: false) ----------------- */
.hub-chart { position: relative; width: 100%; min-width: 0; height: 16rem; }
@media (min-width: 48rem) { .hub-chart { height: auto; aspect-ratio: 16 / 7; min-height: 14rem; max-height: 24rem; } }
.hub-chart.is-tall { height: 20rem; }
@media (min-width: 48rem) { .hub-chart.is-tall { height: auto; aspect-ratio: 16 / 9; max-height: 28rem; } }
.hub-chart.is-short { height: 12rem; }
@media (min-width: 48rem) { .hub-chart.is-short { height: auto; aspect-ratio: 16 / 5; min-height: 10rem; max-height: 16rem; } }
.hub-chart > canvas { display: block; width: 100% !important; height: 100% !important; }
/* An HTML legend when the legend cannot be Chart.js's own (stacked bars drawn in HTML, mixes). */
.hub-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1rem; margin: 0 0 0.75rem; font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-muted)); }
.hub-chart-legend > * { display: inline-flex; align-items: center; gap: 0.375rem; }
.hub-chart-legend i, .hub-chart-legend .swatch { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); flex: none; }
.hub-chart-legend strong, .hub-chart-legend b { color: rgb(var(--fg)); font-weight: 500; font-variant-numeric: tabular-nums; }
/* A horizontal share bar drawn in HTML (source mix, freshness, category mix): one flex row of segments. */
.hub-bar { display: flex; width: 100%; height: 1.25rem; border-radius: var(--radius-sm); overflow: hidden; background: rgb(var(--surface-2)); }
.hub-bar > * { display: block; height: 100%; min-width: 0; }
.hub-bar.is-thin { height: 0.5rem; }
/* A track with one fill (a rank bar behind a number, a goal bar). */
.hub-track { position: relative; display: block; width: 100%; height: 0.375rem; border-radius: var(--radius-full); background: rgb(var(--surface-2)); overflow: hidden; }
.hub-track > i, .hub-track > span { position: absolute; left: 0; top: 0; bottom: 0; display: block; border-radius: var(--radius-full); background: rgb(var(--chart-1)); }
.hub-table td .hub-track { width: 4rem; display: inline-block; vertical-align: middle; margin-right: 0.5rem; }
.hub-table td:has(> .hub-track) { white-space: nowrap; }

/* ---- Card head for a chart or table card: title left, meta and action right ----------------- */
.hub-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.875rem 1rem; border-bottom: 1px solid rgb(var(--line)); font-family: var(--font-sans); }
.hub-card-head.is-plain { border-bottom: 0; padding-bottom: 0.25rem; }
.hub-card-title { margin: 0; font: 500 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg)); letter-spacing: normal; text-transform: none; }
.hub-card-meta { font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-faint)); }
.hub-card-head > .btn, .hub-card-head > .hub-card-end { margin-left: auto; }
.hub-card-body { padding: 1rem; }
.hub-card-note { padding: 0.625rem 1rem 0.875rem; font: 400 0.75rem/1.125rem var(--font-sans); color: rgb(var(--fg-faint)); }
.hub-card-note strong, .hub-card-note b { color: rgb(var(--fg)); font-weight: 500; }
.card.hub-chart-card { padding: 1rem; }
.card.hub-chart-card > .hub-card-head { padding: 0 0 0.75rem; border-bottom: 0; }
/* Scoped to the data pages (2026-09-30): unscoped, `.card + .card` pushed every card but the first down 1rem
   inside any grid of cards app-wide (Home's live band, IRL Case Studies, Comebacks), so rows never lined up. */
.hub-data .card + .card, .hub-data .card + .hub-stat-grid, .hub-data .hub-stat-grid + .card, .hub-data .hub-periodbar + .card { margin-top: 1rem; }
/* Any two stacked blocks of a data page breathe, whatever the pair (2026-10-01, Timo: "no gap between boxes - fix across
   the whole newsroom"). The pairs above predate it; this is the catch-all for the ones they missed (a card above the range bar). */
.hub-data > :is(.card, .hub-card-grid, .hub-stat-grid, .hub-periodbar, .hub-filterbar, .hub-empty, .table-wrap) + :is(.card, .hub-card-grid, .hub-stat-grid, .hub-periodbar, .hub-filterbar, .hub-empty, .table-wrap) { margin-top: 1rem; }
/* Cards side by side always share a top edge (2026-09-30, Timo: "alignment of boxes always to the top border"):
   any grid or column container resets the stack margin; the class names cover every grid in the data pages. */
.hub-data :is(.hub-cards, .hub-grid, .hub-card-grid, [class*="-grid"], [class*="-cols"], [class*="-row"]) > .card + .card { margin-top: 0; }
.hub-section-title { margin: 1.5rem 0 0.75rem; font: 600 0.75rem/1rem var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--fg-faint)); }
.hub-section-title .hub-card-meta { text-transform: none; letter-spacing: normal; font-weight: 400; }

/* ---- Period bar: an overline label, a segmented control of presets, a small number field ----- */
.hub-periodbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 1rem; font-family: var(--font-sans); }
.hub-periodbar .overline { margin-right: 0.25rem; }
.hub-periodbar-presets { display: contents; }   /* the seg and the field sit in the bar's own flex row, so the seg's max-width: 100% holds on a phone */
.hub-periodbar .seg { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
.hub-periodbar .field { width: 5.5rem; }
.hub-periodbar .hub-periodbar-end, .hub-periodbar .hub-card-meta { margin-left: auto; }
.hub-periodbar .hub-check { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0 0.625rem; border: 1px solid rgb(var(--line-strong)); border-radius: var(--radius-md); background: rgb(var(--surface)); font: 400 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg-muted)); cursor: pointer; }
.hub-periodbar .hub-check input { width: 0.875rem; height: 0.875rem; margin: 0; accent-color: rgb(var(--primary)); }
.hub-filterbar .hub-check { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.625rem; border: 1px solid rgb(var(--line-strong)); border-radius: var(--radius-md); background: rgb(var(--surface)); font: 400 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg-muted)); cursor: pointer; white-space: nowrap; }
.hub-filterbar .hub-check input { width: 0.875rem; height: 0.875rem; margin: 0; accent-color: rgb(var(--primary)); }
.hub-filterbar .field.is-narrow { width: 5rem; }
.hub-filterbar .hub-filterbar-count { font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-muted)); }
/* A labelled number field inside a filter bar (Tag performance "Min articles", Article × social "Min posts"). */
.hub-filterbar .hub-inline, .hub-filter-sheet .hub-inline { display: inline-flex; align-items: center; gap: 0.5rem; font: 400 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg-muted)); white-space: nowrap; }
.hub-filterbar .hub-inline .field, .hub-filter-sheet .hub-inline .field { width: 4.5rem; }
@media (max-width: 47.99rem) {
  .hub-periodbar .seg { max-width: 100%; }
  .hub-periodbar .hub-periodbar-end { margin-left: 0; flex-basis: 100%; }
  .hub-filterbar .hub-check { min-height: 2.75rem; }
  .hub-periodbar .hub-check { min-height: 2.75rem; }
}
/* Below md the sticky period bar of the overview is static (the shell's top bar is the one sticky thing). */
.hub-periodbar.is-sticky { position: static; }

/* ---- Cards that are one unit of a chart (category cards, cohort cards, chapter summaries) ---- */
.hub-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; margin: 0 0 1.5rem; }
.hub-tile { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: var(--space-4); border: 1px solid rgb(var(--line)); border-radius: var(--radius-lg); background: rgb(var(--surface)); font-family: var(--font-sans); }
.hub-tile-head { display: flex; align-items: center; gap: 0.5rem; font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-muted)); }
.hub-tile-head::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--cc, rgb(var(--fg-faint))); }
.hub-tile-head > :last-child { margin-left: auto; font-variant-numeric: tabular-nums; color: rgb(var(--fg)); }
.hub-tile-head > :only-child { margin-left: 0; color: inherit; }
.hub-tile-value { font: 600 1.25rem/1.75rem var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: rgb(var(--fg)); }
.hub-tile-sub { font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-faint)); }
.hub-tile .hub-track { margin-top: 0.375rem; }
.hub-tile .hub-track > span { background: var(--cc, rgb(var(--chart-1))); }

/* ---- Signal rows (Smart Insights): a card list, the type in a pill and a dot, never color alone */
.hub-signal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.5rem; }
.hub-signal { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 0.75rem; border: 1px solid rgb(var(--line)); border-radius: var(--radius-md); background: rgb(var(--surface)); color: rgb(var(--fg)); text-align: left; font: inherit; cursor: pointer; transition: background-color var(--duration-fast), border-color var(--duration-fast); }
.hub-signal:hover { background: rgb(var(--surface-2)); border-color: rgb(var(--line-strong)); }
.hub-signal-dot { flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.375rem; border-radius: var(--radius-full); background: var(--sig, rgb(var(--fg-faint))); }
.hub-signal-body { flex: 1 1 auto; min-width: 0; }
.hub-signal-title { display: block; font: 500 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg)); }
.hub-signal-detail { display: block; font: 400 0.75rem/1.125rem var(--font-sans); color: rgb(var(--fg-muted)); margin-top: 0.125rem; }
.hub-signal .pill { align-self: center; flex: none; }
.hub-signal-chev { align-self: center; flex: none; color: rgb(var(--fg-faint)); }
.hub-signal-group { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0.5rem; }
.hub-signal-group:first-of-type { margin-top: 0; }
.hub-signal-summary { margin: 0.25rem 0 1rem; font: italic 400 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg-muted)); }

/* ---- The Insights drawer's article list ------------------------------------------------------ */
.hub-ins-detail { margin: 0 0 0.75rem; font: 400 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg-muted)); }
.hub-ins-list { display: flex; flex-direction: column; }
.hub-ins-item { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid rgb(var(--line)); }
.hub-ins-item:first-child { border-top: 0; }
.hub-ins-main { min-width: 0; font: 400 0.875rem/1.25rem var(--font-sans); }
.hub-ins-main a { color: rgb(var(--fg)); text-decoration: none; }
.hub-ins-main a:hover { text-decoration: underline; text-underline-offset: 2px; }
.hub-ins-sub { font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-faint)); margin-top: 0.125rem; }
.hub-ins-stat { flex: none; font: 500 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-muted)); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Filter groups drawn as segmented controls (Needs attention: State, Team, Flag) ---------- */
.hub-seg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0 0 1rem; font-family: var(--font-sans); }
.hub-seg-group { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; max-width: 100%; }
.hub-seg-group .seg { min-width: 0; }
.seg-item .hub-seg-n { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: rgb(var(--fg-faint)); }
.seg-item.seg-on .hub-seg-n { color: rgb(var(--fg-muted)); }
.hub-attn-head { margin: 0 0 1rem; font: 400 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg-muted)); }
.hub-attn-head strong { color: rgb(var(--fg)); font-weight: 600; }
.hub-attn-rollup { margin: 0 0 1rem; }
.hub-attn-rollup .hub-attn-kind { margin: 0.5rem 0 0.25rem; font: 400 0.875rem/1.25rem var(--font-sans); }
.hub-attn-rollup ul { margin: 0; padding-left: 1.125rem; font: 400 0.875rem/1.375rem var(--font-sans); color: rgb(var(--fg-muted)); }
.hub-flag-title .pill { margin-right: 0.25rem; vertical-align: 0.0625rem; }

/* ---- A lead sentence above a data page's cards (Benchmarks): reading type, capped at 68ch ---- */
.hub-lead { margin: 0 0 1rem; max-width: var(--prose-max); font: 400 1rem/1.5rem var(--font-sans); color: rgb(var(--fg)); }
.hub-lead strong { font-weight: 600; }
.hub-lead:empty { display: none; }
@media (min-width: 48rem) { .hub-table td.bench-title { max-width: 17.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.hub-tile-value small { font-size: 0.75rem; font-weight: 400; }

/* ---- Cards in the flag queue (Needs attention): tone on a modifier, never a hard border --------- */
.hub-flag { border: 1px solid rgb(var(--line)); border-radius: var(--radius-lg); background: rgb(var(--surface)); padding: 1rem; font-family: var(--font-sans); }
.hub-flag.is-danger { border-color: rgb(var(--danger) / 0.3); background: rgb(var(--danger-subtle)); }
.hub-flag.is-warning { border-color: rgb(var(--warning) / 0.3); background: rgb(var(--warning-subtle)); }
.hub-flag.is-settled { opacity: 0.72; }
.hub-flag-title { font: 500 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg)); margin: 0 0 0.25rem; }
.hub-flag-detail { font: 400 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg-muted)); margin: 0 0 0.5rem; }
.hub-flag-fix { font: 400 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg)); }
.hub-flag-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.hub-flag-actions .field { flex: 1 1 14rem; width: auto; min-width: 10rem; }
.hub-flag-err { font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--danger)); }
.hub-flag-settled { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid rgb(var(--line)); font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-faint)); }
.hub-flag-settled strong { color: rgb(var(--fg-muted)); font-weight: 500; }
.hub-flag-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.5rem 0 1.5rem; }

/* ---- Static report frame: the server-injected report inside a card with an overline ---------- */
.hub-report { padding: 0; overflow: hidden; }
.hub-report > .hub-card-head { padding: 0.75rem 1rem; }
.hub-report .report-mount { margin: 0; padding: 0.5rem; }
.hub-report .report-frame { border: 0; }
.hub-report .report-ph { border: 0; padding: 2.5rem 1rem; font: 400 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg-faint)); text-align: center; }

/* ---- A page's action row (Social priority content: the generate button and its note) ------- */
.hub-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 1rem; font-family: var(--font-sans); }

/* ---- Two cards side by side from md, stacked on a phone (Social performance: kinds, formats) --- */
.hub-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.hub-card-grid > .card { margin-top: 0; min-width: 0; }
.hub-card-grid + .card { margin-top: 1rem; }
.hub-lead.hub-lead-sm { font-size: 0.875rem; line-height: 1.375rem; color: rgb(var(--fg-muted)); }
.hub-lead.hub-lead-sm strong { color: rgb(var(--fg)); }
.hub-data .hub-table td .hub-cell-note { display: block; font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-faint)); white-space: normal; }

/* ---- Social priority content: one hub card per story, the generated hook and caption inside --- */
.hub-social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.hub-social-grid > .card { margin-top: 0; }
.hub-social-card { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; padding: var(--space-4) var(--space-6) var(--space-6); font-family: var(--font-sans); }
.hub-social-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hub-social-views { margin-left: auto; font: 600 0.875rem/1.25rem var(--font-sans); font-variant-numeric: tabular-nums; color: rgb(var(--fg)); }
.hub-social-title { margin: 0; font: 500 1rem/1.5rem var(--font-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-social-title a { color: rgb(var(--fg)); text-decoration: none; }
.hub-social-title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.hub-social-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.hub-social-stats .hub-stat-value { font-size: 1.125rem; line-height: 1.75rem; }
.hub-social-stats .hub-stat-label { white-space: nowrap; }
.hub-social-angles { border-top: 1px solid rgb(var(--line)); padding-top: 0.75rem; min-height: 1.25rem; }
.hub-social-block + .hub-social-block { margin-top: 0.75rem; }
.hub-social-block p { margin: 0.25rem 0 0; font: 400 0.875rem/1.375rem var(--font-sans); color: rgb(var(--fg-muted)); }
.hub-social-block .hub-social-caption { color: rgb(var(--fg)); white-space: pre-wrap; }
.hub-social-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.hub-social-err { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font: 400 0.875rem/1.25rem var(--font-sans); color: rgb(var(--danger)); }
@media (max-width: 47.99rem) { .hub-social-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-social-card { padding: var(--space-4); } }

/* ---- Editor cards (Editors): a card each, the avatar and numbers on the hub type ------------- */
.hub-person { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; padding: var(--space-4); border: 1px solid rgb(var(--line)); border-radius: var(--radius-lg); background: rgb(var(--surface)); color: rgb(var(--fg)); text-align: left; font: inherit; font-family: var(--font-sans); cursor: pointer; transition: border-color var(--duration-fast), background-color var(--duration-fast); }
.hub-person:hover { border-color: rgb(var(--line-strong)); background: rgb(var(--surface-2)); }
.hub-person-head { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.hub-person-head .avatar { flex: none; width: 2.25rem; height: 2.25rem; font: 600 0.75rem/1 var(--font-sans); }
.hub-person-name { font: 500 0.875rem/1.25rem var(--font-sans); color: rgb(var(--fg)); }
/* The name is the button that opens the breakdown drawer (the card itself holds no role). */
.hub-person-open { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.hub-person-open:hover .hub-person-name { text-decoration: underline; text-underline-offset: 2px; }
.hub-person-open:focus-visible { outline: 2px solid rgb(var(--ring)); outline-offset: 2px; }
@media (max-width: 47.99rem) { .hub-person-open { min-height: 0; } }
.hub-person-role { font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-faint)); }
.hub-person-hero .hub-stat-value { font-size: 1.5rem; line-height: 2rem; }
.hub-person-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.75rem; }
.hub-person-grid .hub-stat-value { font-size: 1rem; line-height: 1.5rem; }
.hub-person-micro { display: flex; gap: 0.75rem; padding-top: 0.625rem; border-top: 1px solid rgb(var(--line)); }
.hub-person-micro > div { flex: 1 1 0; min-width: 0; }
.hub-person-micro .hub-stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hub-person-micro .hub-stat-value { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.hub-person-foot { margin-top: auto; padding-top: 0.625rem; border-top: 1px solid rgb(var(--line)); font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-faint)); }
.hub-person:hover .hub-person-foot { color: rgb(var(--fg)); }
.hub-person-grid-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; margin: 0 0 1.5rem; }
.hub-group-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0.5rem 0 0; font: 600 0.75rem/1rem var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--fg-faint)); }
.hub-group-head .n { font-weight: 400; letter-spacing: normal; text-transform: none; color: rgb(var(--fg-faint)); }
.hub-group-head.is-major { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgb(var(--line)); }
.hub-table tr.grp-row td, .hub-table td.is-card-full { background: rgb(var(--surface-2)); font: 600 0.75rem/1rem var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--fg-faint)); height: 2.25rem; padding: 0.375rem 1rem; }
@media (max-width: 47.99rem) { .hub-table.is-responsive td.is-card-full { display: block; text-align: left; border: 0; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); } .hub-table.is-responsive td.is-card-full::before { display: none; } }

/* ---- A table footer (totals, goals) as one more card below md, labelled like the rows ------- */
@media (max-width: 47.99rem) {
  .hub-table.is-responsive tfoot { display: block; }
  .hub-table.is-responsive tfoot tr { margin: 0.75rem 0 0; padding: 0.75rem 1rem; border: 1px solid rgb(var(--line-strong)); border-radius: var(--radius-lg); background: rgb(var(--surface-2)); }
  .hub-table.is-responsive tfoot td { display: flex; justify-content: space-between; gap: 0.75rem; height: auto; padding: 0.1875rem 0; border: 0; text-align: right; }
  .hub-table.is-responsive tfoot td::before { content: attr(data-label); flex: none; color: rgb(var(--fg-faint)); text-align: left; font-weight: 400; }
  .hub-table.is-responsive tfoot td:not([data-label])::before, .hub-table.is-responsive tfoot td.is-primary::before { display: none; }
  .hub-table.is-responsive tfoot td.is-primary { display: block; padding: 0 0 0.375rem; font-weight: 600; text-align: left; }
  .hub-table.is-responsive tfoot td.is-card-hidden, .hub-table.is-responsive tfoot td:empty { display: none; }
}
.hub-tile.is-warning { border-color: rgb(var(--warning) / 0.3); background: rgb(var(--warning-subtle)); }

/* ---- The migrated data pages set Inter on the section; small helpers they share -------------- */
.hub-data { font-family: var(--font-sans); }
.hub-data .eyebrow .note { font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-faint)); letter-spacing: normal; text-transform: none; }
.hub-data .mono, .hub-data .mono-label, .hub-data .chart-src, .hub-data .muted { font-family: var(--font-sans); }
.hub-data .table-wrap { max-height: none; }
.hub-data .table-wrap thead th { box-shadow: none; }
.hub-data .chip { font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-muted)); background: rgb(var(--surface-2)); border: 0; border-radius: var(--radius-md); padding: 0.125rem 0.5rem; }
.hub-data .cat-b { font: 500 0.75rem/1rem var(--font-sans); padding: 0.125rem 0.5rem; border-radius: var(--radius-md); border: 1px solid currentColor; }
.hub-data .chan-b { font: 400 0.75rem/1rem var(--font-sans); color: rgb(var(--fg-muted)); }
.hub-data .ed-badge { font: 400 0.6875rem/1rem var(--font-sans); border-radius: var(--radius-sm); }
.hub-data .score-b { font: 500 0.75rem/1rem var(--font-sans); min-width: 2rem; padding: 0.125rem 0.5rem; border-radius: var(--radius-full); }
.hub-data .beta-tag { font-family: var(--font-sans); font-size: 0.6875rem; letter-spacing: 0.02em; padding: 0.0625rem 0.3125rem; border-radius: var(--radius-sm); background: rgb(var(--surface-2)); color: rgb(var(--fg-faint)); border: 1px solid rgb(var(--line)); }
.hub-data .art-link { color: rgb(var(--fg)); }
.hub-data .hub-table td a:not(.btn) { color: inherit; text-decoration: none; }
.hub-data .hub-table td a:not(.btn):hover { text-decoration: underline; text-underline-offset: 2px; }
.hub-data .hub-table td a.text-faint { color: rgb(var(--fg-faint)); }
.hub-data .text-faint { color: rgb(var(--fg-faint)); }
.hub-data .text-muted { color: rgb(var(--fg-muted)); }
.hub-data .disc > summary { font: 500 0.875rem/1.25rem var(--font-sans); }
.hub-data .disc-body { border-radius: var(--radius-lg); border-color: rgb(var(--line)); }
.hub-data .hub-empty { margin: 0.5rem 0; }
/* The articles table keeps its own movable columns (a table-layout:fixed with px widths from
   setupArticleCols); on a phone the cards must not inherit that width. */
@media (max-width: 47.99rem) {
  .hub-data table.hub-table.is-responsive[style] { width: auto !important; table-layout: auto !important; }
  .hub-data table.hub-table.is-responsive colgroup { display: none; }
  .hub-data .hub-table.is-responsive thead th[draggable] { display: none; }
}

/* Editor Activity cards with room (2026-09-30): wider columns, more padding, labels on one line. */
#sec-editors .hub-person-grid-wrap { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
#sec-editors .hub-person { padding: 1.25rem; gap: 1rem; }
#sec-editors .hub-person-grid { gap: 0.875rem 1.25rem; }
#sec-editors .hub-person-grid .hub-stat-label, #sec-editors .hub-person-hero .hub-stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sec-editors .hub-group-head { grid-column: 1 / -1; }