/*============================================================================
  v2.css - additive styles for the Dossier / Brief / Activity / Topic / Timeline
  vision components. Layers on top of tokens.css + site.css.
============================================================================*/

:root {
    --v2-accent:         var(--color-primary);
    --v2-accent-soft:    var(--color-primary-light);
    --v2-ink:            #0f172a;
    --v2-ink-muted:      #475569;
    --v2-line:           #e2e8f0;
    /* --v2-rule is the hairline divider used by .feed__masthead, pill rails,
       filter containers, etc. The var was never defined so those borders
       fell back to currentColor (slate-900) - a black 1px line on Feed and
       other pages. Alias it to --v2-line so the divider reads as a gentle
       neutral rule instead of a pitch-black bar. */
    --v2-rule:           var(--v2-line);
    --v2-surface:        #ffffff;
    --v2-surface-warm:   #fafaf7;
    --v2-pass:           #059669;
    --v2-pass-soft:      #d1fae5;
    --v2-fail:           #dc2626;
    --v2-fail-soft:      #fee2e2;
    --v2-warn:           #ca8a04;
    --v2-warn-soft:      #fef3c7;
    --v2-brief-bg:       var(--gradient-panel-cool);
    --v2-shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.06);
    --v2-shadow-md:      0 4px 12px rgba(15, 23, 42, 0.08);
    --v2-radius:         10px;
}

/* Dark-mode v2 tokens. Mirrors the structure above; flipping these
   auto-recolors every .brief-card / .activity-feed / .feed__* / etc.
   that uses var(--v2-*). Triggers match tokens.css: OS-dark unless
   user explicitly chose light, OR explicit data-theme="dark". */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --v2-ink:            #e5e7eb;
        --v2-ink-muted:      #cbd5e1;
        --v2-line:           #334155;
        --v2-surface:        #1a2438;
        --v2-surface-warm:   #1e293b;
        --v2-pass:           #34d399;
        --v2-pass-soft:      #0e3a2a;
        --v2-fail:           #fca5a5;
        --v2-fail-soft:      #3a1414;
        --v2-warn:           #fcd34d;
        --v2-warn-soft:      #3a2c08;
        --v2-brief-bg:       linear-gradient(180deg, #1f1b3a 0%, #1a1f3d 100%);
        --v2-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.4);
        --v2-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.5);
    }
}
:root[data-theme="dark"] {
    --v2-ink:            #e5e7eb;
    --v2-ink-muted:      #cbd5e1;
    --v2-line:           #334155;
    --v2-surface:        #1a2438;
    --v2-surface-warm:   #1e293b;
    --v2-pass:           #34d399;
    --v2-pass-soft:      #0e3a2a;
    --v2-fail:           #fca5a5;
    --v2-fail-soft:      #3a1414;
    --v2-warn:           #fcd34d;
    --v2-warn-soft:      #3a2c08;
    --v2-brief-bg:       linear-gradient(180deg, #1f1b3a 0%, #1a1f3d 100%);
    --v2-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.4);
    --v2-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.5);
}

/*----- BriefCard ------------------------------------------------------------*/
.brief-card {
    background: var(--v2-brief-bg);
    border: 1px solid #c7d2fe;
    border-radius: var(--v2-radius);
    padding: 1rem 1.125rem;
    margin: 1rem 0 1.5rem 0;
    box-shadow: var(--v2-shadow-sm);
}
.brief-card__label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6366f1;
    margin-bottom: 0.5rem;
}
.brief-card__kind { font-weight: 600; }
.brief-card__provenance {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.6875rem;
    color: var(--v2-ink-muted);
    font-weight: 400;
    cursor: help;
    border-bottom: 1px dotted var(--v2-ink-muted);
}
.brief-card__text {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--v2-ink);
    margin: 0;
    font-weight: 450;
}
.brief-card__text--skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: briefSkel 1.4s linear infinite;
    border-radius: 3px;
    height: 2.6em;
}
@keyframes briefSkel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/*----- ActivityFeed --------------------------------------------------------*/
.activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--v2-line);
}
.activity-feed__row {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 0.75rem 1rem;
    padding: 1rem 0.25rem;
    border-bottom: 1px solid var(--v2-line);
    align-items: baseline;
    transition: background 120ms;
}
.activity-feed__row:hover { background: var(--v2-surface-warm); }
.activity-feed__row--passed { border-left: 3px solid var(--v2-pass); padding-left: 0.75rem; }
.activity-feed__row--failed { border-left: 3px solid var(--v2-fail); padding-left: 0.75rem; }
.activity-feed__row--vetoed { border-left: 3px solid var(--v2-fail); padding-left: 0.75rem; }
.activity-feed__row--intro  { border-left: 3px solid #9ca3af; padding-left: 0.75rem; }
.activity-feed__row--tabled { border-left: 3px solid var(--v2-warn); padding-left: 0.75rem; }
.activity-feed__time {
    font-size: 0.8125rem;
    color: var(--v2-ink-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    grid-column: 1;
    grid-row: 1;
}
.activity-feed__place {
    font-size: 0.8125rem;
    color: var(--v2-ink-muted);
    font-weight: 500;
    grid-column: 1;
    grid-row: 2;
    margin-top: -0.125rem;
}
.activity-feed__place a { color: inherit; text-decoration: none; }
.activity-feed__place a:hover { color: var(--v2-accent); text-decoration: underline; }
.activity-feed__state { color: #94a3b8; }
.activity-feed__headline {
    grid-column: 2;
    grid-row: 1;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--v2-ink);
    /* Grid children default to min-width:auto (intrinsic min-content), so
       long unbroken file numbers / titles refuse to shrink and overflow
       the row by a few px on narrow viewports. Forcing min-width:0 + word
       wrap lets the headline collapse inside the 1fr column properly. */
    min-width: 0;
    overflow-wrap: anywhere;
}
.activity-feed__body { min-width: 0; overflow-wrap: anywhere; }
.activity-feed__headline a { color: var(--v2-ink); text-decoration: none; border-bottom: 1px dotted var(--v2-ink-muted); }
.activity-feed__headline a:hover { color: var(--v2-accent); border-bottom-color: var(--v2-accent); }
.activity-feed__verb {
    font-weight: 600;
    color: var(--v2-ink);
    margin-right: 0.25rem;
}
.activity-feed__row--passed .activity-feed__verb { color: var(--v2-pass); }
.activity-feed__row--failed .activity-feed__verb { color: var(--v2-fail); }
.activity-feed__row--vetoed .activity-feed__verb { color: var(--v2-fail); }
.activity-feed__tally {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    font-size: 0.75rem;
    background: var(--v2-surface-warm);
    border: 1px solid var(--v2-line);
    border-radius: 4px;
    color: var(--v2-ink-muted);
    font-variant-numeric: tabular-nums;
}
.activity-feed__body {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.8125rem;
    color: var(--v2-ink-muted);
    margin-top: -0.125rem;
}

/*----- TopicBadge ----------------------------------------------------------*/
.topic-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: var(--v2-accent-soft);
    color: var(--color-primary);
    border-radius: 999px;
    font-size: 0.8125rem;
    text-decoration: none;
    margin-right: 0.375rem;
    margin-bottom: 0.25rem;
    transition: background 120ms;
    border: 1px solid transparent;
}
.topic-badge:hover {
    background: #bfdbfe;
    border-color: #93c5fd;
}
.topic-badge__emoji { font-size: 0.875rem; }
.topic-badge__name { font-weight: 500; }

/*----- Timeline ------------------------------------------------------------*/
.timeline {
    list-style: none;
    padding: 0 0 0 1rem;
    margin: 0;
    border-left: 2px solid var(--v2-line);
}
.timeline__row {
    position: relative;
    padding: 0.5rem 0 0.5rem 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.timeline__dot {
    position: absolute;
    left: -1.55rem;
    top: 0.625rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--v2-surface);
    border: 2px solid var(--v2-ink-muted);
}
.timeline__dot--pass  { border-color: var(--v2-pass);  background: var(--v2-pass); }
.timeline__dot--fail  { border-color: var(--v2-fail);  background: var(--v2-fail); }
.timeline__dot--intro { border-color: var(--v2-accent); background: var(--v2-accent); }
.timeline__cell { flex: 1; }
.timeline__date {
    font-size: 0.75rem;
    color: var(--v2-ink-muted);
    font-variant-numeric: tabular-nums;
}
.timeline__kind {
    font-weight: 600;
    color: var(--v2-ink);
    font-size: 0.9375rem;
}
.timeline__body { font-size: 0.8125rem; color: var(--v2-ink-muted); }
.timeline__tally {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    background: var(--v2-surface-warm);
    padding: 0.0625rem 0.375rem;
    border-radius: 4px;
    border: 1px solid var(--v2-line);
    font-variant-numeric: tabular-nums;
}

/*----- AskBox --------------------------------------------------------------*/
.ask-box {
    background: var(--gradient-panel-soft);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    padding: 1rem 1.125rem;
    margin: 1.5rem 0;
}
.ask-box__label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v2-ink-muted);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.ask-box__row {
    display: flex;
    gap: 0.5rem;
}
.ask-box__input {
    flex: 1;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    border: 1px solid var(--v2-line);
    border-radius: 8px;
    background: var(--v2-surface);
    color: var(--v2-ink);
}
.ask-box__input:focus {
    outline: none;
    border-color: var(--v2-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.ask-box__submit {
    padding: 0.625rem 1.125rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: white;
    background: var(--v2-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms;
}
.ask-box__submit:hover { background: #1d4ed8; }
.ask-box__hint {
    margin: 0.5rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--v2-ink-muted);
}

/* Hero variant of <SearchBar> - mirrors the .ask-box geometry so the in-page
   home-page search uses the same component as every other page (header
   variant). Only the CSS hook differs; submit logic and scope handling are
   identical. Kept separate from .ask-box rules so removing the legacy
   AskBox component doesn't drop styles. */
.search-form--hero {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    flex-wrap: nowrap;
    background: var(--gradient-panel-soft);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    padding: 1rem 1.125rem;
    margin: 1.5rem 0;
    /* Override the .search-form base rule's `max-width: 24rem` (intended
       for the compact header variant). The hero version lives in the
       full main column on Home and should fill the column width. */
    max-width: none;
    width: 100%;
}
.search-input--hero {
    /* min-width: 0 is the flex-shrink unlock - without it the input refuses
       to shrink below its intrinsic content width and the form overflows
       the container on narrow viewports. */
    flex: 1 1 0;
    min-width: 0;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    /* Light mode: pure-white input as a clean writing surface against the
       gray hero panel chrome. Dark mode override flips to slate-200. */
    background: #ffffff;
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
.search-input--hero:focus {
    outline: none;
    background: var(--color-bg-card);
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}
.search-button--hero {
    padding: 0.625rem 1.125rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: white;
    background: var(--color-primary);
    /* Transparent 1px border so the button's box height matches the input's
       (which has a real 1px border). Without this the button rendered 2px
       shorter than the input on mobile and the text inside floated upward
       relative to the input's baseline. */
    border: 1px solid transparent;
    border-radius: 8px;
    line-height: 1.5;
    cursor: pointer;
    transition: background 120ms;
}
.search-button--hero:hover { background: var(--color-primary-dark); }

/* Mobile: tighter hero bar so it fits cleanly on narrow viewports without
   horizontal overflow. The button shrinks more aggressively than the input
   because the input is the primary interaction; the button is just the
   submit affordance. */
@media (max-width: 540px) {
    .search-form--hero { padding: 0.4rem; gap: 0.4rem; }
    .search-input--hero { padding: 0.5rem 0.65rem; font-size: 0.95rem; }
    .search-button--hero { padding: 0.5rem 0.75rem; font-size: 0.85rem; }
}
@media (max-width: 380px) {
    /* Tightest tier - phones in portrait. Button collapses to a 2-letter
       label so it stays present (clear submit cue) but stops crowding out
       the input's visible content. */
    .search-button--hero { padding: 0.5rem 0.55rem; font-size: 0.78rem; }
}

/*----- Dossier layout helpers ---------------------------------------------*/
.dossier {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem;
}
.dossier__header {
    margin: 0.5rem 0 1rem 0;
}
.dossier__headline {
    font-size: var(--route-title-size);
    font-weight: var(--route-title-weight);
    line-height: var(--route-title-line);
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
    letter-spacing: 0;
}
.dossier__sub {
    color: var(--color-text-secondary);
    font-size: var(--route-lede-size);
    line-height: var(--route-lede-line);
    max-width: 72ch;
    margin: 0;
}
.dossier__grid {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
    gap: 2rem;
    margin-top: 1.5rem;
}
.dossier__main > section { margin-bottom: 2rem; }
/* Inline link inside a hero sub paragraph - same primary-blue chrome rule
   as everywhere else; hover deepens. Without this, anchors fall back to
   user-agent blue + underline which doesn't match the rest of the site. */
.dossier__sub a {
    color: var(--color-primary);
    text-decoration: none;
}
.dossier__sub a:hover {
    /* Color-shift only; no underline (chrome rule). */
    color: var(--color-primary-dark);
    text-decoration: none;
}

.dossier__section-heading {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v2-ink-muted);
    font-weight: 600;
    /* Hairline divider under the heading - section-edge cue without the
       heaviness of the older 2px primary bar. Matches .place-section-title
       (geo pages) so every section across the site shares the same divider. */
    padding-bottom: 0.4rem;
    margin: 0 0 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--v2-line);
}
.dossier__aside > section {
    background: var(--v2-surface-warm);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    padding: 1rem 1.125rem;
    margin-bottom: 1rem;
}
.dossier__aside h3 {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--v2-ink-muted);
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}
@media (max-width: 840px) {
    .dossier__grid { grid-template-columns: 1fr; }
}

/*----- Factpill (small labeled value) --------------------------------------*/
.factpill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: 999px;
    font-size: 0.8125rem;
    margin-right: 0.375rem;
    margin-bottom: 0.375rem;
    color: var(--v2-ink);
}
.factpill__label {
    font-weight: 600;
    color: var(--v2-ink-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/*----- VoteTally mini bar --------------------------------------------------*/
.votebar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin: 0.5rem 0;
}
.votebar__for, .votebar__against, .votebar__other {
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.votebar__for     { background: var(--v2-pass-soft); color: var(--v2-pass); }
.votebar__against { background: var(--v2-fail-soft); color: var(--v2-fail); }
.votebar__other   { background: var(--v2-surface-warm); color: var(--v2-ink-muted); }

/*----- Concordance / ratio chips ------------------------------------------*/
.ratio-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}
.ratio-chip__num { font-weight: 600; color: var(--v2-ink); }
.ratio-chip__label { color: var(--v2-ink-muted); }

/*----- Topic grid on homepage -----------------------------------------------*/
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.topic-card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 1.125rem;
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    text-decoration: none;
    color: var(--v2-ink);
    transition: border-color 120ms, transform 120ms;
}
.topic-card:hover {
    border-color: var(--v2-accent);
    transform: translateY(-1px);
    box-shadow: var(--v2-shadow-md);
}
.topic-card__emoji { font-size: 1.5rem; }
.topic-card__name  { font-weight: 600; font-size: 1rem; }
.topic-card__count { font-size: 0.8125rem; color: var(--v2-ink-muted); font-variant-numeric: tabular-nums; }

/* ─── The Feed (wire service) ─────────────────────────────────────────────
   Strategic positioning per strategy/00_master_strategy.md §2.3 -
   "wire service for American local government." Typographically NYT-adjacent:
   kicker → oversized headline → tight sub → pill row → feed.
*/
/* Feed flows at the global container width now - the prior 760px cap made
   the page look visibly narrower than the header and every other list page
   (a rehearsal callout). The feed's own masthead + filter row still read
   cleanly at container width because they're flex rows, not long-copy. */
.feed { margin: 0 auto; }
.feed__masthead {
    border-bottom: 1px solid var(--v2-rule);
    padding-bottom: 1rem; margin-bottom: 1.25rem;
}
.feed__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--v2-ink-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.35rem;
}
.feed__headline {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: 0;
    margin: 0.1rem 0 0.4rem;
    font-weight: 700;
}
.feed__sub { margin: 0; color: var(--v2-ink-muted); font-size: 0.95rem; }
/* Lede - the past/future identity blurb under the headline. Same shape on
   both /feed and /newsroom. Kept just under the headline so the contrast
   with its sibling page is the first thing the reader sees. */
.feed__lede, .newsroom__lede {
    margin: 0.4rem 0 0.75rem; font-size: 0.95rem; line-height: 1.5;
}
.feed__lede strong, .newsroom__lede strong {
    color: var(--v2-ink); font-weight: 600;
}

.feed__filters {
    display: flex; flex-direction: column; gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.9rem 1rem;
    background: var(--v2-surface-warm, #fafaf8);
    border-radius: 10px;
    border: 1px solid var(--v2-rule);
}
.feed__filter-row {
    display: flex; align-items: center; gap: 0.75rem;
    flex-wrap: wrap;
}
.feed__filter-label {
    font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--v2-ink-muted); font-weight: 600;
    min-width: 3.5rem;
}
.feed__filter-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pill {
    display: inline-block;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: var(--color-bg-card);
    border: 1px solid var(--v2-rule);
    font-size: 0.82rem; font-weight: 500;
    color: var(--v2-ink-muted);
    text-decoration: none;
    transition: background 0.1s, border-color 0.1s;
    font-variant-numeric: tabular-nums;
}
.pill:hover { background: var(--v2-surface-warm); border-color: var(--v2-ink-muted); color: var(--v2-ink); }
.pill--active {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: #fff;
}
.pill--active:hover { background: var(--v2-ink); color: #fff; }

.feed__clear { font-size: 0.82rem; color: var(--v2-ink-muted); text-decoration: underline; }
.feed__clear:hover { color: var(--v2-ink); }

.feed__load-more {
    text-align: center; padding: 2rem 0; border-top: 1px dashed var(--v2-rule); margin-top: 1.5rem;
}
.feed__load-more a {
    display: inline-block; padding: 0.6rem 1.4rem;
    border: 1px solid var(--v2-rule); border-radius: 6px;
    color: var(--v2-ink); text-decoration: none; font-weight: 500;
    background: var(--color-bg-card);
}
.feed__load-more a:hover { background: var(--v2-surface-warm); border-color: var(--v2-ink-muted); }
.feed__end { text-align: center; padding: 2rem 0; font-size: 0.85rem; }

/* ─── Newsroom Assignment Desk ──────────────────────────────────────────
   Pre-meeting triage view. Layout shares masthead / filter-row / pill
   styles with .feed (above) - same visual rhythm. The distinguishing
   piece is the per-row "when | where | what" three-column grid that
   reads top-down on mobile and left-right on desktop. */
.newsroom { margin: 0 auto; }
.newsroom__masthead { border-bottom: 1px solid var(--v2-rule); padding-bottom: 1rem; margin-bottom: 1.25rem; }
.newsroom__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem; letter-spacing: 0.12em; color: var(--v2-ink-muted);
    text-transform: uppercase; display: block; margin-bottom: 0.35rem;
}
.newsroom__headline {
    font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.15;
    letter-spacing: 0; margin: 0.1rem 0 0.4rem; font-weight: 700;
}
.newsroom__sub { margin: 0; color: var(--v2-ink-muted); font-size: 0.95rem; }

.newsroom__filters {
    display: flex; flex-direction: column; gap: 0.5rem;
    margin-bottom: 1.5rem; padding: 0.9rem 1rem;
    background: var(--v2-surface-warm, #fafaf8);
    border-radius: 10px; border: 1px solid var(--v2-rule);
}
.newsroom__filter-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.newsroom__filter-label {
    font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--v2-ink-muted); font-weight: 600; min-width: 4.5rem;
}
.newsroom__filter-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.newsroom__kw-form { display: flex; gap: 0.4rem; flex: 1; min-width: 0; }
.newsroom__kw-input {
    flex: 1; min-width: 12rem;
    padding: 0.32rem 0.7rem; border-radius: 6px; border: 1px solid var(--v2-rule);
    font-size: 0.85rem; background: var(--color-bg-card);
}
.newsroom__kw-submit {
    padding: 0.32rem 0.9rem; border-radius: 6px;
    border: 1px solid var(--v2-rule); background: var(--v2-ink); color: #fff;
    font-size: 0.82rem; font-weight: 500; cursor: pointer;
}
.newsroom__kw-submit:hover { background: var(--v2-ink); opacity: 0.92; }
.newsroom__clear { font-size: 0.82rem; color: var(--v2-ink-muted); text-decoration: underline; }
.newsroom__clear:hover { color: var(--v2-ink); }

.newsroom__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
}
.newsroom__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--v2-rule);
}
@media (min-width: 720px) {
    .newsroom__row {
        grid-template-columns: 7rem 14rem 1fr;
        gap: 0 1.25rem;
    }
}
.newsroom__row-when { display: flex; flex-direction: column; }
.newsroom__row-date { font-weight: 600; color: var(--v2-ink); font-size: 0.92rem; }
.newsroom__row-time { color: var(--v2-ink-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.newsroom__row-where { display: flex; flex-direction: column; gap: 0.15rem; }
.newsroom__row-place a {
    color: var(--v2-ink); text-decoration: none; font-weight: 600;
}
.newsroom__row-place a:hover { text-decoration: underline; }
.newsroom__row-body { color: var(--v2-ink-muted); font-size: 0.85rem; }
.newsroom__row-what { display: flex; flex-direction: column; gap: 0.4rem; }
.newsroom__row-title {
    margin: 0; font-size: 1.0rem; font-weight: 600; line-height: 1.3;
}
.newsroom__row-title a { color: var(--v2-ink); text-decoration: none; }
.newsroom__row-title a:hover { text-decoration: underline; }
.newsroom__cancelled {
    display: inline-block; margin-left: 0.5rem;
    font-size: 0.65rem; letter-spacing: 0.08em;
    background: #c43; color: #fff; padding: 0.1rem 0.4rem; border-radius: 3px;
    font-weight: 700;
}
.newsroom__agenda {
    list-style: none; padding: 0; margin: 0.1rem 0 0;
    display: flex; flex-direction: column; gap: 0.3rem;
}
.newsroom__agenda-item {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    background: var(--v2-surface-warm, #fafaf8);
    border-radius: 6px;
    border-left: 2px solid var(--v2-rule);
}
.newsroom__agenda-title {
    font-size: 0.88rem; line-height: 1.35; color: var(--v2-ink);
}
.newsroom__agenda-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
/* Chip variants by source. 'item' / 'eventitem' = canonical LLM tag (same
   visual). 'keyword' = synthetic LIKE match (muted, dashed border) so the
   reader can tell at a glance that it's a heuristic vs a real tag. */
.chip {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 4px;
    background: var(--color-bg-card);
    border: 1px solid var(--v2-rule);
    font-size: 0.72rem; font-weight: 500;
    color: var(--v2-ink-muted);
    text-decoration: none;
}
.chip:hover { background: var(--v2-surface-warm); color: var(--v2-ink); }
.chip--item, .chip--eventitem {
    background: #eef4ff; border-color: #c4d6f3; color: #2247a8;
}
.chip--item:hover, .chip--eventitem:hover {
    background: #dbe7ff; color: #1a3478;
}
.chip--keyword {
    border-style: dashed;
    color: var(--v2-ink-muted);
    font-style: italic;
    cursor: default;
}

/* Newsroom signals (Tier 2 #8). Visually distinct from topic chips so an
   editor reading the desk can tell at a glance: signals answer "why care?",
   chips answer "what about?". Each signal has a different accent color
   tied to its semantic: returns = amber (re-do warning), ripple = blue
   (geographic spread), hot = red (high recent volume). All hyperlink-able
   when applicable; otherwise span. */
.signal {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.12rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem; font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
}
.signal--returns {
    background: #fff5e0; color: #8a5400; border-color: #f0d29c;
}
.signal--returns:hover { background: #ffeac2; }
.signal--ripple {
    background: #e7f1fc; color: #1f4a8a; border-color: #b9d3f0;
}
.signal--ripple:hover { background: #d4e6fa; color: #1f4a8a; }
.signal--hot {
    background: #fce6e6; color: #a82c1f; border-color: #efbcb5;
}
.signal--hot:hover { background: #f9d5d2; }
.signal--latefiled {
    background: #f3e8fa; color: #6b2986; border-color: #d4b8e3;
}
.signal--latefiled:hover { background: #ead2f5; }
.newsroom__row-event-signals {
    display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem;
}
.newsroom__no-agenda { font-size: 0.85rem; margin: 0.1rem 0 0; }

/* Inline "Source Pack →" CTA on each matched agenda item. Demo flow
   shortcut: Newsroom Desk → click Source Pack on a row → done, instead
   of three intermediate hops. Style: subtle until hover, becomes
   prominent. Pinned to the right of the agenda item card so it doesn't
   compete with the title. */
.newsroom__agenda-pack {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.12rem 0.55rem;
    border-radius: 4px;
    background: var(--color-bg-card);
    border: 1px solid var(--v2-rule);
    color: var(--v2-ink-muted);
    font-size: 0.75rem; font-weight: 500;
    text-decoration: none;
    transition: all 0.1s;
}
.newsroom__agenda-pack:hover {
    background: var(--v2-ink); color: #fff; border-color: var(--v2-ink);
}
/* When the agenda card has BOTH tags and a Source Pack link, lay them
   inline so the row reads: title / signals+chips / Source Pack →. */
.newsroom__agenda-item {
    align-items: baseline; flex-wrap: wrap;
}
/* Make the title link unstyled-looking; underline only on hover. */
.newsroom__agenda-title a {
    color: var(--v2-ink); text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.newsroom__agenda-title a:hover {
    border-bottom-color: var(--v2-ink-muted);
}
.newsroom__load-more {
    text-align: center; padding: 2rem 0; border-top: 1px dashed var(--v2-rule); margin-top: 1.5rem;
}
.newsroom__load-more a {
    display: inline-block; padding: 0.6rem 1.4rem;
    border: 1px solid var(--v2-rule); border-radius: 6px;
    color: var(--v2-ink); text-decoration: none; font-weight: 500;
    background: var(--color-bg-card);
}
.newsroom__load-more a:hover { background: var(--v2-surface-warm); border-color: var(--v2-ink-muted); }
.newsroom__end { text-align: center; padding: 2rem 0; font-size: 0.85rem; }

/* ─── Reporter Source Pack ─────────────────────────────────────────────
   Print-ready single-page item briefing. Layout reuses the site-wide
   .section / .section-title / .detail-title classes used on ItemDetail
   so visual rhythm is consistent - the only Source-Pack-only pieces are
   the at-a-glance stat strip, the table styling, and the print rules. */
/* Width inherited from .container (72rem) - matches the header. Previously
   capped at 56rem for prose readability, but inconsistent page widths read
   as visual noise on the home/detail/brief loop. If line length becomes a
   problem on the print stylesheet, cap there instead. */
.source-pack { margin: 0 auto; }

.source-pack__toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin: 0 0 0.75rem; padding: 0.4rem 0;
}
.source-pack__print {
    padding: 0.35rem 0.85rem; border-radius: 6px;
    border: 1px solid var(--v2-rule); background: var(--v2-ink); color: #fff;
    font-size: 0.85rem; font-weight: 500; cursor: pointer;
}
.source-pack__back {
    color: var(--v2-ink-muted); text-decoration: none; font-size: 0.88rem;
}
.source-pack__back:hover { color: var(--v2-ink); }

.source-pack__header {
    border-bottom: 1px solid var(--v2-rule); padding-bottom: 1rem; margin-bottom: 1.25rem;
}
.source-pack__eyebrow {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem; letter-spacing: 0.14em; color: var(--v2-ink-muted);
    text-transform: uppercase; display: block; margin-bottom: 0.4rem;
}
.source-pack__meta {
    display: flex; flex-wrap: wrap; gap: 0.55rem 0.75rem;
    margin-bottom: 0.4rem; align-items: baseline; font-size: 0.85rem;
}
.source-pack__meta .source-pack__key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--v2-ink); font-weight: 500;
}
.source-pack__meta .source-pack__type { color: var(--v2-ink); font-weight: 500; }
.source-pack__meta .badge {
    background: #eef4ff; color: #2247a8; border: 1px solid #c4d6f3;
    border-radius: 3px; padding: 0.05rem 0.45rem; font-size: 0.72rem; font-weight: 600;
}
/* Title compresses on Source Pack vs ItemDetail because we have many
   dense sections below; the headline shouldn't dominate two screens of
   layout space. Even 200+ char titles read well at this size. */
.source-pack__title {
    font-size: clamp(1.1rem, 2.4vw, 1.45rem) !important;
    line-height: 1.3 !important; margin: 0.25rem 0 0 !important;
    font-weight: 600 !important; letter-spacing: 0;
    color: var(--v2-ink) !important;
}

.source-pack__glance { padding-top: 0.5rem; }
.source-pack__stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.75rem; align-items: end;
}
.source-pack__stat {
    padding: 0.4rem 0.75rem;
    border-left: 3px solid var(--v2-rule);
}
.source-pack__stat-num {
    font-size: 1.5rem; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; color: var(--v2-ink);
}
.source-pack__stat-label {
    font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--v2-ink-muted); margin-top: 0.2rem;
}
/* Zero-count tile: muted treatment so the strip reads "we know there are
   none of these" rather than "the data is missing". The dash is rendered
   bigger than a hyphen by the font; the label carries the meaning. */
.source-pack__stat--zero { opacity: 0.55; }
.source-pack__stat--zero .source-pack__stat-num {
    color: var(--v2-ink-muted); font-weight: 500;
}

.source-pack__brief {
    font-size: 1.0rem; line-height: 1.55; color: var(--v2-ink); margin: 0.3rem 0 0.4rem;
}
.source-pack__cite { font-size: 0.78rem; margin: 0; }

.source-pack__list {
    list-style: none; padding: 0; margin: 0.4rem 0 0;
}
.source-pack__sponsors li, .source-pack__docs li {
    margin: 0.4rem 0; line-height: 1.5;
}
.source-pack__doc-head { display: block; }
.source-pack__doc-link { margin-left: 0.4rem; font-size: 0.78rem; }
.source-pack__doc-snippet {
    font-size: 0.82rem; line-height: 1.5; margin: 0.2rem 0 0;
    padding-left: 0.75rem; border-left: 2px solid var(--v2-rule);
}

.source-pack__table { width: 100%; border-collapse: collapse; margin-top: 0.4rem; }
.source-pack__table th {
    text-align: left; font-size: 0.7rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--v2-ink-muted); font-weight: 600;
    border-bottom: 1px solid var(--v2-rule); padding: 0.4rem 0.5rem;
}
.source-pack__table td {
    padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--v2-rule);
    font-size: 0.88rem; line-height: 1.4; vertical-align: top;
}
.source-pack__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.source-pack__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }

.source-pack__footer {
    border-top: 1px solid var(--v2-rule);
    margin-top: 1.5rem; padding-top: 0.75rem;
    color: var(--v2-ink-muted); font-size: 0.78rem;
}
.source-pack__url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--v2-ink);
}

@media print {
    .no-print, .no-print-link { display: none !important; }
    a.no-print-link, .no-print { display: none !important; }
    body, .source-pack { background: var(--color-bg-card) !important; color: #000 !important; }
    .source-pack { max-width: 100% !important; }
    .source-pack .section { page-break-inside: avoid; }
    .source-pack__table tr { page-break-inside: avoid; }
    .source-pack__toolbar { display: none !important; }
    /* Header/footer chrome strip is handled by the global print block at the
       bottom of this file - shared across source-pack, weekly-brief, and any
       future printable surface. */
}


/* ─── Weekly Regional Brief ─────────────────────────────────────────────
   Newsletter-magazine layout. Wider container, serif headline, signed
   stat cards, story cards with PASS/FAIL badges, dot-leader topic list,
   Looking-Ahead row stack. Print rules strip chrome so a station can
   save-as-PDF and email the brief without edits. */
.weekly-brief { margin: 0 auto; }

.weekly-brief__masthead {
    border-bottom: 2px solid var(--v2-ink);
    padding-bottom: 1.25rem; margin-bottom: 1.5rem;
}
.weekly-brief__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--v2-ink-muted); display: block; margin-bottom: 0.5rem;
}
/* Route headline keeps the same heading family as the rest of the site
   while retaining the weekly brief scale and rhythm. */
.weekly-brief__headline {
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 4.4vw, 2.6rem);
    line-height: 1.1; letter-spacing: 0;
    margin: 0 0 0.4rem; font-weight: 700; color: var(--v2-ink);
}
.weekly-brief__dateline {
    margin: 0; font-size: 0.95rem; color: var(--v2-ink);
}

/* Stat strip: 6 cards, equal-width on desktop, wraps on mobile. The
   pass/fail stats get a tinted background so the eye lands there
   first - they're the news. */
.weekly-brief__stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.5rem; margin: 0 0 2rem;
    border-top: 1px solid var(--v2-rule);
    border-bottom: 1px solid var(--v2-rule);
    padding: 1rem 0;
}
.weekly-brief__stat { padding: 0 0.75rem; }
.weekly-brief__stat-num {
    font-family: var(--font-heading);
    font-size: 1.7rem; line-height: 1.05; font-weight: 700;
    color: var(--v2-ink); font-variant-numeric: tabular-nums;
}
.weekly-brief__stat-label {
    font-size: 0.72rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--v2-ink-muted);
    margin-top: 0.2rem;
}
.weekly-brief__stat--good .weekly-brief__stat-num { color: #1f7a4a; }
.weekly-brief__stat--bad  .weekly-brief__stat-num { color: #c43; }

.weekly-brief__section-sub {
    margin: -0.2rem 0 1rem; font-size: 0.92rem;
}

/* Story cards: badge top-left, title prominent, source links bottom.
   Two-column grid on desktop, single column on mobile. */
.weekly-brief__stories {
    display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 720px) {
    .weekly-brief__stories { grid-template-columns: repeat(2, 1fr); }
}
.weekly-brief__story {
    padding: 0.9rem 1rem;
    border: 1px solid var(--v2-rule);
    border-left: 3px solid var(--v2-ink);
    border-radius: 4px;
    background: var(--color-bg-card);
    display: flex; flex-direction: column; gap: 0.4rem;
}
.weekly-brief__story-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    font-size: 0.85rem;
}
.weekly-brief__story-place strong { color: var(--v2-ink); }
.weekly-brief__story-date { font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.badge--pass {
    background: #e6f5ec; color: #1f7a4a; border: 1px solid #a8d9bc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 0.1rem 0.45rem; border-radius: 3px; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.04em;
}
.badge--fail {
    background: #fceaea; color: #b22222; border: 1px solid #e6b1b1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 0.1rem 0.45rem; border-radius: 3px; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.04em;
}
.weekly-brief__story-title {
    font-size: 1.05rem; line-height: 1.35; margin: 0;
    font-weight: 600; color: var(--v2-ink);
}
.weekly-brief__story-title a { color: var(--v2-ink); text-decoration: none; }
.weekly-brief__story-title a:hover { text-decoration: underline; }
.weekly-brief__story-meta {
    font-size: 0.85rem; line-height: 1.4;
    display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
}
.weekly-brief__story-links {
    display: flex; flex-wrap: wrap; gap: 0 1rem;
    font-size: 0.82rem; padding-top: 0.2rem;
    border-top: 1px dashed var(--v2-rule);
    margin-top: 0.2rem;
}
.weekly-brief__story-links a { color: var(--v2-ink-muted); text-decoration: none; }
.weekly-brief__story-links a:hover { color: var(--v2-ink); text-decoration: underline; }

/* Topic roundup: definition list with a dot leader between label and
   stats. The dot leader is what gives the section its newsletter /
   bulletin look - readers' eyes scan the labels and the right-hand
   numbers tell the spread story. */
.weekly-brief__topics {
    list-style: none; padding: 0; margin: 0;
}
.weekly-brief__topic {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--v2-rule);
    font-size: 0.95rem;
}
.weekly-brief__topic-label {
    color: var(--v2-ink); text-decoration: none; font-weight: 600;
    flex: 0 0 auto; white-space: nowrap;
}
.weekly-brief__topic-label:hover { text-decoration: underline; }
.weekly-brief__topic-leader {
    flex: 1 1 auto;
    border-bottom: 1px dotted var(--v2-rule);
    transform: translateY(-3px);
    margin: 0 0.4rem;
}
.weekly-brief__topic-stats {
    flex: 0 0 auto; font-size: 0.88rem; color: var(--v2-ink);
    font-variant-numeric: tabular-nums;
}

/* Looking ahead: 3-column row layout, when | place | what */
.weekly-brief__ahead {
    list-style: none; padding: 0; margin: 0;
}
.weekly-brief__ahead-row {
    display: grid; grid-template-columns: 1fr; gap: 0.25rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--v2-rule);
    font-size: 0.92rem;
}
@media (min-width: 720px) {
    .weekly-brief__ahead-row {
        grid-template-columns: 8rem 12rem 1fr;
        gap: 0.75rem;
        align-items: baseline;
    }
}
.weekly-brief__ahead-when {
    font-variant-numeric: tabular-nums; color: var(--v2-ink); font-weight: 500;
}
.weekly-brief__ahead-place strong { color: var(--v2-ink); }
.weekly-brief__ahead-what {
    display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline;
}
.weekly-brief__ahead-what a { color: var(--v2-ink); text-decoration: none; font-weight: 500; }
.weekly-brief__ahead-what a:hover { text-decoration: underline; }

.weekly-brief__footer {
    margin-top: 2rem; padding-top: 1rem;
    border-top: 1px solid var(--v2-rule);
    font-size: 0.88rem; color: var(--v2-ink-muted);
}

/* Ask-the-record block: input + suggested-questions or grounded answer. */
.weekly-brief__ask-form {
    display: flex; gap: 0.4rem; margin-top: 0.4rem;
}
.weekly-brief__ask-input {
    flex: 1; padding: 0.5rem 0.75rem; font-size: 0.95rem;
    border: 1px solid var(--v2-rule); border-radius: 6px; background: var(--color-bg-card);
}
.weekly-brief__ask-submit {
    padding: 0.5rem 1.1rem; border-radius: 6px; border: 1px solid var(--v2-ink);
    background: var(--v2-ink); color: #fff; font-weight: 500; cursor: pointer;
    font-size: 0.9rem;
}
.weekly-brief__ask-status { margin-top: 0.6rem; font-size: 0.9rem; }
.weekly-brief__ask-suggested {
    list-style: none; padding: 0; margin: 0.5rem 0 0;
    display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline;
    font-size: 0.85rem;
}
.weekly-brief__ask-suggested li:first-child { padding-right: 0.2rem; }
.weekly-brief__ask-suggested a {
    background: var(--color-bg-card); border: 1px solid var(--v2-rule); border-radius: 999px;
    padding: 0.2rem 0.65rem; color: var(--v2-ink-muted); text-decoration: none;
}
.weekly-brief__ask-suggested a:hover { color: var(--v2-ink); border-color: var(--v2-ink-muted); }
.weekly-brief__ask-answer {
    margin-top: 0.8rem; padding: 0.9rem 1rem;
    background: var(--v2-surface-warm, #fafaf8);
    border-left: 3px solid var(--v2-ink); border-radius: 4px;
}
.weekly-brief__ask-question { margin: 0 0 0.4rem; font-size: 0.92rem; color: var(--v2-ink-muted); }
.weekly-brief__ask-text {
    font-size: 1rem; line-height: 1.55; color: var(--v2-ink);
    white-space: pre-wrap;
}
.weekly-brief__ask-sources {
    margin-top: 0.6rem; padding-top: 0.6rem;
    border-top: 1px solid var(--v2-rule);
}
.weekly-brief__ask-sources summary {
    cursor: pointer; font-weight: 600; font-size: 0.88rem;
    color: var(--v2-ink); padding: 0.2rem 0;
}
.weekly-brief__ask-sources ol { margin: 0.4rem 0 0; padding-left: 1.5rem; }
.weekly-brief__ask-sources li { margin: 0.4rem 0; line-height: 1.4; }
.weekly-brief__ask-snippet {
    margin: 0.2rem 0 0; font-size: 0.85rem; line-height: 1.45;
    padding-left: 0.5rem; border-left: 2px solid var(--v2-rule);
}

/* Print: lighten borders, expand max-width. The header/footer chrome strip
   is in the global print block at the bottom of this file. */
@media print {
    .weekly-brief { max-width: 100% !important; }
    .weekly-brief__story { page-break-inside: avoid; }
    .weekly-brief__footer { display: none !important; }
}


/* ─── Item Lifecycle Alerts ────────────────────────────────────────────
   Compact panel on ItemDetail with checkbox rows + save button. Stays
   in the standard .section / .section-title rhythm so it visually slots
   between the existing item-detail sections. */
.item-alerts__intro { margin: -0.2rem 0 0.75rem; font-size: 0.92rem; }
.item-alerts__banner {
    display: block; padding: 0.7rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    font-size: 0.92rem;
}
.item-alerts__banner--saved {
    background: #e6f5ec; color: #1f7a4a; border: 1px solid #a8d9bc;
}
.item-alerts__banner strong { color: inherit; }
.item-alerts__banner a { color: inherit; text-decoration: underline; }
.item-alerts__list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.item-alerts__row {
    border-bottom: 1px solid var(--v2-rule);
    padding: 0.55rem 0;
}
.item-alerts__row:last-child { border-bottom: none; }
.item-alerts__check {
    display: flex; align-items: flex-start; gap: 0.6rem;
    cursor: pointer; padding: 0.2rem 0;
}
.item-alerts__check input[type=checkbox] {
    margin-top: 0.25rem;
    width: 1.05rem; height: 1.05rem;
    accent-color: var(--v2-ink);
    flex: 0 0 auto;
}
.item-alerts__check-body { display: flex; flex-direction: column; }
.item-alerts__check-title {
    font-weight: 600; font-size: 0.95rem; color: var(--v2-ink);
}
.item-alerts__check-desc { font-size: 0.85rem; line-height: 1.4; }
.item-alerts__actions {
    display: flex; align-items: center; gap: 1rem;
    padding-top: 0.4rem;
}
.item-alerts__counter { font-size: 0.85rem; }

/* "Following" pill in the section header when user has a saved sub.
   Subtle dot + text; not a button. Reads as state, not as action. */
.item-alerts__following-pill {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: #e6f5ec;
    color: #1f7a4a;
    border: 1px solid #a8d9bc;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    vertical-align: middle;
}

/* Highlight enabled rows so the user can scan their selections at a
   glance. Subtle warm background; left border picks up. */
.item-alerts__row--enabled {
    background: var(--v2-surface-warm, #fafaf8);
    margin-left: -0.6rem;
    padding-left: 0.6rem;
    border-radius: 4px;
    border-bottom: 1px solid var(--v2-rule);
}

/* Cadence radio pills - one of three. Same look as the .pill class on
   /feed but with built-in radio. */
.item-alerts__cadence-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin: 0.5rem 0;
    font-size: 0.85rem;
}
/* .item-alerts__cadence-pill: definition consolidated to the
   canonical-primitives block at end of v2.css */

.item-alerts__unfollow-wrap {
    margin-left: auto; padding-left: 1rem;
}
.item-alerts__unfollow {
    color: #c43;
    font-size: 0.85rem;
}
.item-alerts__unfollow:hover { color: #a52a18; }

/* Generic small button used by the alerts panel + sign-in CTA. Same
   visual as the existing .meeting-artifact--ai but without the artifact
   row context - a standalone primary button. */
.btn {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem; font-weight: 500;
    text-decoration: none; cursor: pointer;
    border: 1px solid var(--color-primary);
    background: var(--color-bg-card);
    color: var(--color-primary);
}
.btn:hover {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    text-decoration: none;
}
.btn--primary {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}
.btn--disabled,
.btn--disabled:hover {
    background: #f3f4f6;
    color: var(--v2-ink-muted);
    border-color: var(--v2-rule);
    cursor: default;
    opacity: 0.85;
}
.for-newsrooms__status {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.12rem 0.45rem;
    border: 1px solid var(--v2-rule);
    border-radius: 999px;
    color: var(--v2-ink-muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
}


/* ─── /my/alerts dashboard ─────────────────────────────────────────── */
.my-alerts__list { list-style: none; padding: 0; margin: 0; }
.my-alerts__row {
    padding: 0.75rem 0; border-bottom: 1px solid var(--v2-rule);
}
.my-alerts__row-head {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
}
.my-alerts__row-title { color: var(--v2-ink); font-weight: 600; text-decoration: none; }
.my-alerts__row-title:hover { text-decoration: underline; }
.my-alerts__chips {
    list-style: none; padding: 0; margin: 0.4rem 0 0;
    display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.my-alerts__last { margin: 0.3rem 0 0; font-size: 0.82rem; }


/* ─── Embed widget ──────────────────────────────────────────────────────
   /embed/* pages render inside an <iframe> on station newsroom sites.
   Self-contained styling - no dependency on site-chrome classes. Tight
   typography, fits comfortably 380-700px wide, scales gracefully wider.
   Light theme by default; ?theme=dark flips for dark-background hosts.

   Visual cue: a hairline border + small card lift so the widget reads
   as "embedded content" not "blends into your page". */
.embed-shell {
    margin: 0; padding: 0;
    background: transparent;
    font-family: var(--font-sans);
    color: var(--color-text);
    line-height: 1.5; font-size: 14px;
}
.embed-shell * { box-sizing: border-box; }

.embed-widget {
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: var(--color-bg-card);
    overflow: hidden;
}
.embed-widget--dark {
    background: #1a1a1a; color: #f0f0f0;
    border-color: #333;
}

.embed-widget__head {
    padding: 0.7rem 0.9rem 0.55rem;
    border-bottom: 1px solid #e3e3e0;
}
.embed-widget--dark .embed-widget__head { border-color: #333; }

.embed-widget__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: #6a6a68;
}
.embed-widget--dark .embed-widget__kicker { color: #a0a0a0; }

.embed-widget__title {
    margin: 0.2rem 0 0; font-size: 1rem; font-weight: 600; line-height: 1.25;
    letter-spacing: 0;
}

.embed-widget__list {
    list-style: none; padding: 0; margin: 0;
}
.embed-row {
    display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid #f0eee9;
    font-size: 0.86rem;
}
.embed-widget--dark .embed-row { border-color: #2a2a2a; }
.embed-row:last-child { border-bottom: none; }
.embed-row__when {
    font-variant-numeric: tabular-nums;
    color: #444;
    font-weight: 500;
    font-size: 0.78rem;
    padding-top: 0.05rem;
}
.embed-widget--dark .embed-row__when { color: #c0c0c0; }
.embed-row__what { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.embed-row__title {
    font-weight: 600; line-height: 1.3;
    overflow-wrap: anywhere;
}
.embed-row__title a { color: var(--color-text); text-decoration: none; }
.embed-widget--dark .embed-row__title a { color: #f0f0f0; }
.embed-row__title a:hover { text-decoration: underline; }
.embed-row__meta {
    font-size: 0.78rem; color: #6a6a68;
    display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: baseline;
}
.embed-widget--dark .embed-row__meta { color: #a0a0a0; }
.embed-row__place strong { color: var(--color-text); font-weight: 500; }
.embed-widget--dark .embed-row__place strong { color: #f0f0f0; }
.embed-row__state {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem; padding: 0.05rem 0.3rem;
    border: 1px solid #e3e3e0; border-radius: 3px;
    color: #6a6a68; margin-left: 0.25rem;
}
.embed-widget--dark .embed-row__state { border-color: #444; color: #a0a0a0; }

.embed-row__chips { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.1rem; }
.embed-chip {
    background: #eef4ff; color: #2247a8; border: 1px solid #c4d6f3;
    font-size: 0.7rem; padding: 0.05rem 0.4rem; border-radius: 3px; font-weight: 500;
}
.embed-widget--dark .embed-chip {
    background: #1f2c44; color: #8db0ff; border-color: #2c4068;
}

.embed-widget__more {
    display: block; padding: 0.55rem 0.9rem;
    background: #fafaf8; color: var(--color-text);
    text-decoration: none;
    font-size: 0.82rem; font-weight: 500;
    border-top: 1px solid #e3e3e0;
    text-align: center;
}
.embed-widget--dark .embed-widget__more {
    background: #222; color: #f0f0f0; border-color: #333;
}
.embed-widget__more:hover { background: #f0eee9; }
.embed-widget--dark .embed-widget__more:hover { background: #2a2a2a; }

.embed-attrib {
    text-align: right;
    font-size: 0.7rem; color: #999;
    margin-top: 0.4rem;
    padding: 0 0.2rem;
}
.embed-attrib a { color: inherit; text-decoration: none; }
.embed-attrib a:hover { color: #2247a8; }
.embed-attrib strong { color: var(--color-text); font-weight: 600; }

.embed-loading, .embed-error, .embed-empty {
    padding: 1rem; font-size: 0.88rem; color: #6a6a68;
    border: 1px solid #e3e3e0; border-radius: 8px; background: #fafaf8;
}
.embed-empty p { margin: 0; }
.embed-empty__hint { margin-top: 0.3rem !important; font-size: 0.8rem; }


/* ─── For Newsrooms landing page ─────────────────────────────────────── */
.for-newsrooms { margin: 0 auto; }
.for-newsrooms__masthead {
    border-bottom: 1px solid var(--v2-rule);
    padding-bottom: 1.25rem; margin-bottom: 1.75rem;
}
.for-newsrooms__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--v2-ink-muted); display: block; margin-bottom: 0.5rem;
}
.for-newsrooms__headline {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    line-height: 1.15; letter-spacing: 0;
    margin: 0 0 0.6rem; font-weight: 700; color: var(--v2-ink);
}
.for-newsrooms__lede {
    margin: 0; font-size: 1.05rem; line-height: 1.55;
    color: var(--v2-ink);
}
.for-newsrooms__lede a { color: var(--v2-ink); }

.for-newsrooms__grid {
    display: grid; grid-template-columns: 1fr; gap: 1rem;
    margin-top: 0.75rem;
}
@media (min-width: 720px) {
    .for-newsrooms__grid { grid-template-columns: repeat(2, 1fr); }
}

.for-newsrooms__card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--v2-rule); border-left: 3px solid var(--v2-ink);
    border-radius: 6px; background: var(--color-bg-card);
    display: flex; flex-direction: column; gap: 0.5rem;
}
.for-newsrooms__card-eyebrow {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--v2-ink-muted);
}
.for-newsrooms__card-title { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.for-newsrooms__card-title a { color: var(--v2-ink); text-decoration: none; }
.for-newsrooms__card-title a:hover { text-decoration: underline; }
.for-newsrooms__card p { margin: 0; line-height: 1.5; font-size: 0.92rem; }
.for-newsrooms__card .signal { margin-right: 0.2rem; }
.for-newsrooms__card-actions {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
    margin-top: 0.4rem;
    padding-top: 0.5rem; border-top: 1px dashed var(--v2-rule);
}
.for-newsrooms__bullets { padding-left: 1.2rem; margin: 0.4rem 0; line-height: 1.6; font-size: 0.92rem; }
.for-newsrooms__bullets li { margin: 0.2rem 0; }
.for-newsrooms__bullets code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem; padding: 0.05rem 0.35rem;
    background: var(--v2-surface-warm, #fafaf8);
    border: 1px solid var(--v2-rule); border-radius: 3px;
}
.for-newsrooms__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem; line-height: 1.5;
    background: var(--v2-surface-warm, #fafaf8);
    border: 1px solid var(--v2-rule); border-radius: 4px;
    padding: 0.6rem 0.8rem; margin: 0.3rem 0;
    white-space: pre-wrap; word-break: break-all;
    color: var(--v2-ink);
}
.for-newsrooms__pricing { background: var(--v2-surface-warm, #fafaf8); padding: 1rem 1.25rem; border-radius: 6px; }

.weekly-brief__footer-hint { margin-top: 0.4rem !important; font-size: 0.85rem; }


/* ─── Coverage Gaps ──────────────────────────────────────────────────── */
.coverage-gaps { margin: 0 auto; }
.coverage-gaps__masthead {
    border-bottom: 1px solid var(--v2-rule);
    padding-bottom: 1rem; margin-bottom: 1.25rem;
}
.coverage-gaps__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--v2-ink-muted); display: block; margin-bottom: 0.4rem;
}
.coverage-gaps__headline {
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
    line-height: 1.2; letter-spacing: 0;
    margin: 0 0 0.4rem; font-weight: 700;
}
.coverage-gaps__topic-label { color: #2247a8; }
.coverage-gaps__lede { margin: 0 0 0.4rem; font-size: 0.95rem; }
.coverage-gaps__caveat { font-size: 0.85rem; line-height: 1.45; margin: 0; }

.coverage-gaps__pair {
    display: grid; grid-template-columns: 1fr; gap: 1.25rem;
    margin-top: 1rem;
}
@media (min-width: 720px) {
    .coverage-gaps__pair { grid-template-columns: 1fr 1fr; }
}

.coverage-gaps__column {
    padding: 0.75rem 1rem;
    background: var(--v2-surface-warm, #fafaf8);
    border-radius: 6px;
    border: 1px solid var(--v2-rule);
}
.coverage-gaps__column--with {
    border-left: 3px solid #1f4a8a;
}
.coverage-gaps__column--without {
    border-left: 3px solid #6b2986;
}
.coverage-gaps__col-title {
    margin: 0 0 0.6rem; font-size: 1.0rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem;
}
.coverage-gaps__list {
    list-style: none; padding: 0; margin: 0;
}
.coverage-gaps__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--v2-rule);
    font-size: 0.9rem;
    align-items: baseline;
}
.coverage-gaps__row:last-child { border-bottom: none; }
.coverage-gaps__row-place {
    color: var(--v2-ink); text-decoration: none; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coverage-gaps__row-place:hover { text-decoration: underline; }
.coverage-gaps__row-state {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
}
.coverage-gaps__row-meta {
    font-size: 0.78rem;
    color: var(--v2-ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.coverage-gaps__never-divider {
    margin-top: 0.6rem; padding-top: 0.4rem;
    border-top: 1px dashed var(--v2-rule);
    font-size: 0.82rem; color: var(--v2-ink-muted);
    font-weight: 500;
}
.coverage-gaps__row--never {
    opacity: 0.85;
}
.coverage-gaps__more {
    margin-top: 0.4rem; font-size: 0.82rem;
}

.coverage-gaps__footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--v2-rule);
    font-size: 0.9rem;
}


/* ─── Motion Search ──────────────────────────────────────────────────── */
.motion-search { margin: 0 auto; }
.motion-search__masthead {
    border-bottom: 1px solid var(--v2-rule);
    padding-bottom: 1rem; margin-bottom: 1.25rem;
}
.motion-search__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--v2-ink-muted); display: block; margin-bottom: 0.4rem;
}
.motion-search__headline {
    font-size: clamp(1.4rem, 3.4vw, 1.95rem);
    line-height: 1.2; letter-spacing: 0;
    margin: 0 0 0.5rem; font-weight: 700;
}
.motion-search__lede { margin: 0; font-size: 0.95rem; line-height: 1.55; }

.motion-search__form {
    display: flex; flex-direction: column; gap: 0.5rem;
    background: var(--v2-surface-warm, #fafaf8);
    padding: 0.85rem 1rem;
    border: 1px solid var(--v2-rule);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}
.motion-search__row {
    display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
}
.motion-search__label {
    font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--v2-ink-muted); font-weight: 600; min-width: 4rem;
}
.motion-search__label--narrow { min-width: auto; }
.motion-search__input {
    flex: 1; padding: 0.5rem 0.75rem;
    border: 1px solid var(--v2-rule); border-radius: 6px;
    font-size: 0.95rem; background: var(--color-bg-card);
    min-width: 14rem;
}
.motion-search__state, .motion-search__days {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--v2-rule); border-radius: 6px;
    background: var(--color-bg-card);
    font-size: 0.9rem;
}

.motion-search__suggested { font-size: 0.85rem; }
.motion-search__suggested-pill {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: var(--color-bg-card);
    border: 1px solid var(--v2-rule);
    color: var(--v2-ink-muted);
    text-decoration: none;
    margin: 0 0.2rem 0.2rem 0;
}
.motion-search__suggested-pill:hover {
    color: var(--v2-ink); border-color: var(--v2-ink-muted);
}

.motion-search__hint { font-style: italic; }
.motion-search__resultmeta {
    margin: 0.75rem 0;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-card);
    border-left: 3px solid var(--v2-ink);
    font-size: 0.92rem;
}

.motion-search__list { list-style: none; padding: 0; margin: 0; }
.motion-search__hit {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--v2-rule);
}
.motion-search__hit-head {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
    font-size: 0.85rem; margin-bottom: 0.35rem;
}
.motion-search__hit-date {
    font-variant-numeric: tabular-nums;
    color: var(--v2-ink); font-weight: 500;
    min-width: 6rem;
}
.motion-search__hit-snippet {
    margin: 0.3rem 0; line-height: 1.55; font-size: 0.92rem;
    color: var(--v2-ink);
}
.motion-search__hit-snippet mark {
    background: #fff5b3; color: var(--v2-ink); font-weight: 600;
    padding: 0 2px; border-radius: 2px;
}
.motion-search__hit-links {
    margin-top: 0.4rem;
    display: flex; gap: 1rem;
    font-size: 0.82rem;
}
.motion-search__hit-links a { color: var(--v2-ink-muted); text-decoration: none; }
.motion-search__hit-links a:hover { color: var(--v2-ink); text-decoration: underline; }


/* ─── Topic Vocabulary cloud ─────────────────────────────────────────── */
.topic-vocab__caveat {
    margin: 0 0 0.75rem; font-size: 0.88rem; line-height: 1.5;
}
.topic-vocab__cloud {
    display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--v2-surface-warm, #fafaf8);
    border: 1px solid var(--v2-rule); border-radius: 6px;
    align-items: baseline;
}
.topic-vocab__word {
    color: var(--color-primary); text-decoration: none; font-weight: 500;
    line-height: 1.4;
    border-bottom: 1px dotted transparent;
}
.topic-vocab__word:hover {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary-dark);
}
.topic-vocab__word--xl { font-size: 1.5rem; font-weight: 700; }
.topic-vocab__word--lg { font-size: 1.2rem; font-weight: 600; }
.topic-vocab__word--md { font-size: 1.0rem; font-weight: 500; }
.topic-vocab__word--sm { font-size: 0.85rem; font-weight: 400; }


/* ─── My Alerts dashboard + Digest Preview ─────────────────────────────── */
.my-alerts__row-actions {
    display: flex; gap: 1rem; align-items: center;
    margin-top: 0.4rem; font-size: 0.85rem;
}
.my-alerts__row-actions a { color: var(--v2-ink-muted); text-decoration: none; }
.my-alerts__row-actions a:hover { color: var(--v2-ink); text-decoration: underline; }
.link-button {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--v2-ink-muted); text-decoration: none; font-size: inherit;
    font-family: inherit;
}
.link-button:hover { color: var(--v2-ink); text-decoration: underline; }
.my-alerts__channel {
    background: var(--v2-surface-warm, #fafaf8);
    border: 1px solid var(--v2-rule); border-radius: 3px;
    padding: 0.05rem 0.4rem; font-size: 0.78rem;
    margin-right: 0.3rem;
}
.my-alerts__phaseb {
    background: var(--v2-surface-warm, #fafaf8); padding: 0.9rem 1.1rem;
    border-radius: 6px; margin-top: 1rem;
}

.digest-preview { margin: 0 auto; }
.digest-preview__masthead {
    border-bottom: 1px solid var(--v2-rule);
    padding-bottom: 1rem; margin-bottom: 1.25rem;
}
.digest-preview__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--v2-ink-muted); display: block; margin-bottom: 0.4rem;
}
.digest-preview__headline {
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    line-height: 1.25; letter-spacing: 0; margin: 0 0 0.5rem;
    font-weight: 700;
}
.digest-preview__resultmeta {
    margin: 0.75rem 0; padding: 0.5rem 0.75rem;
    background: var(--color-bg-card); border-left: 3px solid var(--v2-ink);
    font-size: 0.92rem;
}
.digest-preview__resultmeta .chip { margin-left: 0.3rem; }
.digest-preview__table { width: 100%; border-collapse: collapse; margin-top: 0.4rem; }
.digest-preview__table th {
    text-align: left; font-size: 0.72rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--v2-ink-muted); font-weight: 600;
    border-bottom: 1px solid var(--v2-rule); padding: 0.4rem 0.5rem;
}
.digest-preview__table td {
    padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--v2-rule);
    font-size: 0.88rem; line-height: 1.4; vertical-align: top;
}
.digest-preview__table .num {
    text-align: right; font-variant-numeric: tabular-nums;
    color: var(--v2-ink-muted); font-size: 0.78rem;
}
.digest-preview__footer {
    margin-top: 1.5rem; padding-top: 1rem;
    border-top: 1px solid var(--v2-rule);
    font-size: 0.9rem;
}
.digest-preview__footer code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem; padding: 0.05rem 0.3rem;
    background: var(--v2-surface-warm, #fafaf8);
    border: 1px solid var(--v2-rule); border-radius: 3px;
}




/* ─── File-type badges (replaces "Click Here To Download" buttons) ───
   Per strategy doc §3 antipatterns: dated CTA verbs out, typographic file-type badges in.
*/
.file-badge {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--v2-surface-warm, #f5f4f0);
    color: var(--v2-ink);
    border: 1px solid var(--v2-rule);
}
/* Class names match the FileKind values returned by AttachmentDto.FileKind so the same
   vocabulary flows from sync (FileKindClassifier) -> API DTO -> Razor -> CSS. */
.file-badge--pdf   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.file-badge--docx,
.file-badge--doc   { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.file-badge--xlsx,
.file-badge--xls   { background: #dcfce7; color: #166534; border-color: #86efac; }
.file-badge--pptx,
.file-badge--ppt   { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.file-badge--image { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.file-badge--video { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.file-badge--audio { background: #fce7f3; color: #9d174d; border-color: #f9a8d4; }
.file-badge--html,
.file-badge--text  { background: #f1f5f9; color: var(--color-text-secondary); border-color: #cbd5e1; }
.file-badge--archive       { background: #f5f5f4; color: #44403c; border-color: #d6d3d1; }
.file-badge--external-link { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.file-badge--unknown       { background: var(--v2-surface-warm, #f5f4f0); color: var(--v2-ink); border-color: var(--v2-rule); }

/* Lightweight inline type label used inside attachment pills (ItemDetail). Just
   colored bold text - no border, no background, no padding. The full .file-badge
   style is reserved for the AttachmentLanding header where a single big badge
   reads as a primary attribute. Inside dense pill grids it's visual noise. */
.attach-pill__type {
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.attach-pill__type--pdf   { color: #991b1b; }
.attach-pill__type--docx,
.attach-pill__type--doc   { color: #1e40af; }
.attach-pill__type--xlsx,
.attach-pill__type--xls   { color: #166534; }
.attach-pill__type--pptx,
.attach-pill__type--ppt   { color: #9a3412; }
.attach-pill__type--image { color: #92400e; }
.attach-pill__type--video { color: #5b21b6; }
.attach-pill__type--audio { color: #9d174d; }
.attach-pill__type--html,
.attach-pill__type--text  { color: var(--color-text-secondary); }
.attach-pill__type--archive       { color: #44403c; }
.attach-pill__type--external-link { color: #155e75; }
.attach-pill__type--unknown       { color: var(--v2-ink-soft, #555); }

/* ─── Attachment Landing tabs (Text / Preview) ───────────────────────────────
   CSS-only tabs via radio inputs. Both panes are in the DOM; :checked + ~
   selectors flip visibility. Works with pure SSR, no JS needed.
   Default checked input wins on page load; the user can switch tabs without
   any server round-trip. */
.attach-tabs { position: relative; }
.attach-tabs__radio {
    /* Visually hidden but keyboard-focusable. Selecting via labels updates the
       radio state, which our :checked rules then key off. */
    position: absolute; opacity: 0; pointer-events: none;
    width: 1px; height: 1px;
}
.attach-tabs__bar {
    display: flex; align-items: stretch; gap: 0;
    border-bottom: 1px solid var(--v2-rule);
    margin-bottom: 0.75rem;
}
.attach-tabs__btn {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-top-left-radius: 6px; border-top-right-radius: 6px;
    margin-bottom: -1px;
    cursor: pointer; user-select: none;
    color: var(--v2-ink-soft, #555);
    font-weight: 500; font-size: 0.95rem;
    background: transparent;
}
.attach-tabs__btn:hover { color: var(--v2-ink); background: var(--v2-surface-warm, #f5f4f0); }
.attach-tabs__download {
    margin-left: auto;
    padding: 0.5rem 0.85rem;
    align-self: center;
    color: var(--v2-ink-soft, #555);
    font-size: 0.9rem;
    text-decoration: none;
}
.attach-tabs__download:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* Active-tab styling (border, weight, background) when its radio is checked. */
#attach-tab-text:checked    ~ .attach-tabs__bar label[for="attach-tab-text"],
#attach-tab-preview:checked ~ .attach-tabs__bar label[for="attach-tab-preview"] {
    color: var(--v2-ink);
    font-weight: 600;
    background: var(--v2-surface-warm, #f5f4f0);
    border-color: var(--v2-rule);
}

/* Pane visibility. All hidden by default; the matching :checked input
   flips one to display:block. */
.attach-tabs__pane { display: none; }
#attach-tab-text:checked    ~ .attach-tabs__pane--text    { display: block; }
#attach-tab-preview:checked ~ .attach-tabs__pane--preview { display: block; }


/* ─── Global typography reset: tabular numerals everywhere numbers happen ───
   Per strategy doc §8. Any column of numbers (vote tallies, row counts, dates)
   aligns cleanly. Free prestige; negative-cost. */
body, .inline-stat, .state-count, .activity-feed__tally, .topic-card__count,
.feed__filter-label, .file-badge {
    font-variant-numeric: tabular-nums;
}

/* ─── Vote outcome + visual tally (per strategy doc §6 ItemDetail "money shot") ─── */
.vote-outcome-row {
    display: flex; align-items: center; gap: 0.75rem;
    margin: 0.5rem 0 0.75rem;
    font-variant-numeric: tabular-nums;
}
.outcome-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.1em;
}
.outcome-badge--passed { background: #16a34a; color: #fff; }
.outcome-badge--failed { background: #dc2626; color: #fff; }
.vote-summary { font-size: 1.1rem; }
.vote-summary strong { font-weight: 700; }

/* Horizontal proportional bar. Each segment's width set inline from computed pct. */
.vote-bar {
    display: flex;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0.5rem 0 1.25rem;
    box-shadow: inset 0 0 0 1px var(--v2-rule);
}
.vote-bar__seg {
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: 0.85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: none;
    font-variant-numeric: tabular-nums;
}
.vote-bar__seg--for     { background: #16a34a; }
.vote-bar__seg--against { background: #dc2626; }
.vote-bar__seg--neither { background: #6b7280; }

/* Vote groups - who voted which way, chip cloud. */
.vote-groups { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.vote-group {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--v2-rule);
    background: var(--color-bg-card);
}
.vote-group__head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.vote-group__label { font-weight: 600; font-size: 0.95rem; }
.vote-group__count {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem; color: var(--v2-ink-muted); background: var(--v2-surface-warm);
    padding: 0.1rem 0.4rem; border-radius: 3px;
}
.vote-group--for     .vote-group__label { color: #16a34a; }
.vote-group--against .vote-group__label { color: #dc2626; }
.vote-group--neither .vote-group__label { color: #6b7280; }

.vote-group__names { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; }

/* Vote chips are now <a> elements (rendered by <PersonChip>) so the person
   name links to PersonDetail. Strip the default underline and color so the
   bucket-colored variant below stays the dominant visual. Keep the existing
   chip layout (border + bucket colors apply via .vote-group--for/against/
   neither selectors below). */
a.vote-chip { text-decoration: none; }
a.vote-chip:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.08); cursor: pointer; }

/* Generic person chip used in attendance tables, mover/seconder lines, and
   anywhere else we render a "person reference". Pill shape (border-radius
   999px) matches sponsor-chip site-wide so any "person/sponsor as a chip"
   surface looks uniform regardless of the section it lives in. Inline
   variant strips the pill chrome so the link sits naturally inside table
   cells / dl/dd rows without looking like a button. */
.person-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 999px;
    background: var(--color-bg-card);
    color: var(--color-text, #1f2937);
    text-decoration: none;
    font-size: var(--text-sm, 0.875rem);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.person-chip:hover {
    border-color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    text-decoration: none;
}
.person-chip__name { font-weight: 500; }
/* Unlinked fallback (no PublicId): same pill shape, muted color, no pointer. */
.person-chip--unlinked {
    color: var(--v2-ink-muted, #6b7280); cursor: default;
}

/* Vote chip is the bucket-colored variant of person-chip used inside the
   For / Against / Recorded blocks. Same pill geometry as person-chip and
   sponsor-chip so the three chip surfaces feel like the same component
   site-wide; the bucket coloring (.vote-group--for/against/neither selectors
   below) is the only visual differentiator. */
.vote-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    background: var(--color-bg-card);
    border-radius: 999px;
    font-size: var(--text-sm, 0.875rem);
    border: 1px solid var(--color-border, #e5e7eb);
}
.vote-chip__val {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem; color: var(--v2-ink-muted);
    padding: 0.05rem 0.4rem; background: rgba(0,0,0,0.06); border-radius: 999px;
}

/* Color each chip by its parent group's bucket. Green=For, Red=Against,
   Amber=Neither (abstain / absent / recused). Default "Recorded" (used while
   TallyBucket is unresolved) falls through to the neutral base style. */
.vote-group--for .vote-chip {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}
.vote-group--for .vote-chip__val { background: #d1fae5; color: #065f46; }

.vote-group--against .vote-chip {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}
.vote-group--against .vote-chip__val { background: #fee2e2; color: #991b1b; }

.vote-group--neither .vote-chip {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #854d0e;
}
.vote-group--neither .vote-chip__val { background: #fef3c7; color: #854d0e; }


/* ─── The Brief card (answer-first AI summary) ─────────────────────────────
   Strategic positioning per strategy/00_master_strategy.md §2.1. Highest wow-
   to-effort feature. Visually distinct from official summary so reader knows
   it's synthesized. Grounded call-out in the kicker line.
*/
.brief-card {
    margin: 1.25rem 0;
    padding: 1.1rem 1.25rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #f5f9ff 0%, #fafafa 100%);
    border: 1px solid #d9e3f5;
    position: relative;
}
.brief-card__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: #2f4a7d;
    margin-bottom: 0.45rem;
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
}
.brief-card__byline {
    font-family: inherit; font-size: 0.65rem; letter-spacing: 0.04em; text-transform: none;
    color: var(--v2-ink-muted, #6b7280);
    font-style: italic;
}
.brief-card__text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--v2-ink, #1a1a1a);
}
.brief-card--ungenerated {
    background: linear-gradient(135deg, #fafbfc 0%, #fafafa 100%);
    border-style: dashed;
}
.brief-card__generate {
    margin: 0;
}
.brief-card__button {
    font-size: 0.9rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid #6b7280;
    background: var(--color-bg-card);
    color: var(--color-text);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}
.brief-card__button:hover {
    background: #f3f4f6;
}


/* ─── Ask About This (per-item RAG) ─────────────────────────────────────── */
.ask-about {
    background: var(--v2-surface-warm, #fafaf8);
    border: 1px solid var(--v2-rule);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    margin: 1.5rem 0;
}
.ask-about__form {
    display: flex; gap: 0.5rem; margin-bottom: 0.5rem;
}
.ask-about__input {
    flex: 1; padding: 0.6rem 0.9rem;
    border-radius: 8px; border: 1px solid var(--v2-rule);
    font-size: 1rem; font-family: inherit;
    background: var(--color-bg-card);
}
.ask-about__input:focus { outline: 2px solid var(--v2-accent, #0a5cff); outline-offset: 1px; }
.ask-about__submit {
    padding: 0.6rem 1.2rem;
    background: var(--v2-ink, #111);
    color: #fff;
    border: 0; border-radius: 8px;
    font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.ask-about__submit:hover { background: #333; }

.ask-about__status { margin: 0.75rem 0 0; font-size: 0.9rem; font-style: italic; }

.ask-about__answer { margin-top: 1rem; }
.ask-about__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem; letter-spacing: 0.12em; color: var(--v2-accent, #2f4a7d);
    margin-bottom: 0.4rem;
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
}
.ask-about__text {
    margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.55;
    padding: 0.8rem 1rem; background: var(--color-bg-card); border-left: 3px solid var(--v2-accent, #0a5cff);
    border-radius: 0 6px 6px 0;
}
a.source-ref {
    display: inline-block; margin: 0 0.1em;
    color: var(--v2-accent, #0a5cff); font-weight: 600; text-decoration: none;
    font-size: 0.85em;
    padding: 0 0.25em; border-radius: 3px;
    background: rgba(10, 92, 255, 0.08);
}
a.source-ref:hover { background: rgba(10, 92, 255, 0.18); }

.ask-about__sources { display: flex; flex-direction: column; gap: 0.5rem; }
.source-card {
    padding: 0.7rem 1rem; border: 1px solid var(--v2-rule);
    background: var(--color-bg-card); border-radius: 6px;
    scroll-margin-top: 1rem;  /* nice offset when jumping to a source via fragment */
}
.source-card:target { border-color: var(--v2-accent, #0a5cff); box-shadow: 0 0 0 2px rgba(10, 92, 255, 0.15); }
.source-card__head {
    display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.source-card__num {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem; font-weight: 700;
    color: var(--v2-accent, #0a5cff);
}
.source-card__page { font-size: 0.78rem; color: var(--v2-ink-muted); font-variant-numeric: tabular-nums; }
.source-card__snippet { margin: 0; font-size: 0.9rem; color: var(--v2-ink-muted); line-height: 1.5; }


/* ─── Cross-City Comparator (Kill Shot #4) ─────────────────────────────────
   Strategic positioning per strategy doc §5.3 ("only we can answer" queries).
   Card grid, one per city. Answered cards visually distinct from declined cards
   so the audience sees at a glance which places DO vs DON'T have policy.
*/
.compare { max-width: 1200px; margin: 0 auto; }
.compare__masthead {
    border-bottom: 1px solid var(--v2-rule);
    padding-bottom: 1rem; margin-bottom: 1.25rem;
}
.compare__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem; letter-spacing: 0.12em; color: var(--v2-accent, #0a5cff);
    text-transform: uppercase; display: block; margin-bottom: 0.35rem;
}
.compare__headline {
    font-size: clamp(1.4rem, 3.5vw, 1.95rem); line-height: 1.2;
    letter-spacing: 0; margin: 0.1rem 0 0.4rem; font-weight: 700;
}
.compare__sub { margin: 0; color: var(--v2-ink-muted); font-size: 0.95rem; max-width: 70ch; }

.compare__topics {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.compare__status { margin-top: 2rem; font-style: italic; }

.compare__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.compare-card {
    padding: 1rem 1.1rem;
    border-radius: 10px;
    border: 1px solid var(--v2-rule);
    background: var(--color-bg-card);
    display: flex; flex-direction: column; gap: 0.6rem;
}
.compare-card--answered { border-left: 3px solid #16a34a; }
.compare-card--declined { border-left: 3px solid #d1d5db; opacity: 0.9; }

.compare-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.compare-card__city { margin: 0; font-size: 1.1rem; font-weight: 600; }
.compare-card__city a { color: var(--v2-ink); text-decoration: none; }
.compare-card__city a:hover { text-decoration: underline; }
.compare-card__state {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem; color: var(--v2-ink-muted); letter-spacing: 0.08em;
}

.compare-card__answer { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.compare-card__decline { margin: 0; font-size: 0.9rem; color: var(--v2-ink-muted); line-height: 1.5; }
.compare-card__decline strong { color: var(--v2-ink); font-weight: 600; }
.compare-card__err { margin: 0; font-size: 0.9rem; }

.compare-card__sources {
    font-size: 0.82rem; margin-top: auto;
    border-top: 1px solid var(--v2-rule); padding-top: 0.5rem;
}
.compare-card__sources summary {
    cursor: pointer; color: var(--v2-ink-muted); list-style: revert;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem; letter-spacing: 0.04em;
}
.compare-card__sources ul { margin: 0.5rem 0 0; padding-left: 1rem; }
.compare-card__sources li { margin: 0.35rem 0; color: var(--v2-ink-muted); }

.compare__footer {
    margin-top: 2rem; padding-top: 1rem;
    border-top: 1px dashed var(--v2-rule);
    text-align: center; font-size: 0.85rem;
}


/* ─── Redlined text versions (Kill Shot #5) ────────────────────────────── */
.redline__count {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: #0a5cff;
    background: rgba(10, 92, 255, 0.08);
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    vertical-align: 2px;
}
.redline__versions {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    counter-reset: ver;
}
.redline__version {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    background: var(--v2-surface-warm, #fafaf8);
    border: 1px solid var(--v2-rule);
    font-size: 0.9rem;
}
.redline__version--from { border-left: 3px solid #dc2626; }
.redline__version--to   { border-left: 3px solid #16a34a; }
/* Row currently rendered by Full text - latest by default, or ?version=X. Gets a blue
   accent + the CURRENT/VIEWING pill; no Read/FROM/TO action since we're already there. */
.redline__version--current { border-left: 3px solid #2563eb; background: #eff6ff; }
.redline__label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 0.85rem;
}
.redline__pill {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    vertical-align: 2px;
    font-weight: 700;
}
.redline__pill--from { background: #dc2626; color: #fff; }
.redline__pill--to   { background: #16a34a; color: #fff; }
.redline__pill--current { background: #2563eb; color: #fff; }
.redline__actions {
    display: flex;
    gap: 0.75rem;
    font-size: 0.82rem;
}
.redline__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0.5rem;
    padding: 0.6rem 0.8rem;
    background: var(--v2-surface-warm);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
}
.redline__from-label { color: #dc2626; font-weight: 600; }
.redline__to-label   { color: #16a34a; font-weight: 600; }
.redline__arrow      { color: var(--v2-ink-muted); margin: 0 0.5rem; }
.redline__summary    { font-family: inherit; }

.redline__pane {
    padding: 1rem 1.25rem;
    border: 1px solid var(--v2-rule);
    border-radius: 6px;
    background: var(--color-bg-card);
    max-height: 600px;
    overflow-y: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.redline__pane ins.diff-ins {
    background: #dcfce7;
    color: #166534;
    text-decoration: none;
    padding: 0.05rem 0.15rem;
    border-radius: 2px;
}
.redline__pane del.diff-del {
    background: #fee2e2;
    color: #991b1b;
    text-decoration: line-through;
    text-decoration-color: #dc2626;
    padding: 0.05rem 0.15rem;
    border-radius: 2px;
}
.redline__pane span { display: block; }  /* each line on its own row */


/* ── Incumbent Scorecard ────────────────────────────────────────────────── */
.scorecard__byline { font-size: 0.75rem; color: var(--muted, #6b7280); font-weight: 400; margin-left: 0.75rem; letter-spacing: normal; text-transform: none; }
.scorecard__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem; margin: 0.75rem 0 1.5rem;
}
.scorecard__stat {
    padding: 1rem 1.1rem; border-radius: 10px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e5e7eb;
}
.scorecard__stat-num { font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-text); }
.scorecard__unit { font-size: 1.1rem; font-weight: 500; color: var(--color-text-muted); margin-left: 0.1rem; }
.scorecard__stat-label { font-size: 0.85rem; color: var(--color-text-secondary); margin-top: 0.4rem; font-weight: 500; }
.scorecard__stat-sub { font-size: 0.72rem; color: #94a3b8; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.scorecard__stat--rubber { background: linear-gradient(180deg, #fffbea 0%, #fef3c7 100%); border-color: #fde68a; }
.scorecard__stat--rubber .scorecard__stat-num { color: #b45309; }
.scorecard__stat--dissent { background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%); border-color: #c7d2fe; }
.scorecard__stat--dissent .scorecard__stat-num { color: #4338ca; }

.scorecard__bar-wrap { margin: 0 0 0.5rem; }
.scorecard__bar {
    display: flex; width: 100%; height: 12px; border-radius: 6px; overflow: hidden;
    background: #f1f5f9; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.scorecard__bar-seg { display: inline-block; height: 100%; }
.scorecard__bar-seg--for     { background: #16a34a; }
.scorecard__bar-seg--against { background: #dc2626; }
.scorecard__bar-seg--other   { background: #94a3b8; }
.scorecard__bar-legend {
    display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem;
    font-size: 0.8rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
}
.scorecard__legend-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.35rem;
    vertical-align: baseline;
}

/* Recent close votes list */
.scorecard-contested__list { list-style: none; padding: 0; margin: 0; }
.scorecard-row {
    padding: 0.75rem 0.9rem; margin-bottom: 0.5rem;
    border: 1px solid #e5e7eb; border-radius: 8px; background: var(--color-bg-card);
}
.scorecard-row--dissent {
    border-left: 4px solid #4338ca; background: #fafaff;
}
.scorecard-row__head {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.35rem;
    font-size: 0.85rem;
}
.scorecard-row__date { color: var(--color-text-muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.scorecard-row__tally { font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: 600; }
.scorecard-row__their { margin-left: auto; color: var(--color-text-secondary); }
.scorecard-row__their strong { color: var(--color-text); }
.scorecard-row__body { font-size: 0.92rem; color: var(--color-text); line-height: 1.45; }
.scorecard-row__body a { color: var(--color-primary); text-decoration: none; }
.scorecard-row__body a:hover { text-decoration: underline; }

.badge-dissent { background: #4338ca; color: #fff; padding: 0.15rem 0.45rem; border-radius: 4px; font-size: 0.7rem; letter-spacing: 0.04em; }

/* Dark mode pairs */

/* ── Incumbents / Weak-Seat Leaderboard ────────────────────────────────── */
.incumbents__sorts { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 1rem 0 0.5rem; }
.incumbents__sort-label { font-size: 0.8rem; color: var(--color-text-secondary); margin-right: 0.35rem; }
.incumbents__sort {
    padding: 0.35rem 0.8rem; border-radius: 6px; border: 1px solid #e5e7eb;
    color: var(--color-text-secondary); font-size: 0.82rem; text-decoration: none; background: #f8fafc;
}
.incumbents__sort:hover { background: #e2e8f0; }
.incumbents__sort--active { background: #0f172a; color: #f1f5f9; border-color: #0f172a; }

/* Filter row (body dropdown + min-votes). onchange submits the parent form
   so the page reloads with the new filter + the preserved sort. */
.incumbents__filters { margin-bottom: 0.75rem; }
.incumbents__filter-row {
    display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
    margin-top: 0.5rem;
}
.incumbents__filter { display: flex; align-items: center; gap: 0.4rem; }
.incumbents__filter-label {
    font-size: 0.78rem; color: var(--color-text-secondary); text-transform: uppercase;
    letter-spacing: 0.04em; font-weight: 600;
}
.incumbents__filter-select {
    padding: 0.35rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: 0.85rem; background: var(--color-bg-card); color: var(--color-text); min-width: 10rem;
    /* Native <select> widens to fit the widest <option>. Long body names
       overflow the mobile viewport without this cap. */
    max-width: 100%;
}
/* When the parent flex label is itself the overflowing element on narrow
   viewports, give it room to shrink alongside the select. */
.incumbents__filter { min-width: 0; flex-wrap: wrap; }
.incumbents__filter-select:focus { outline: 2px solid #2563eb; outline-offset: 1px; }

.incumbents__table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.incumbents__table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9rem; }
.incumbents__table th, .incumbents__table td {
    padding: 0.65rem 0.75rem; text-align: left;
    border-bottom: 1px solid #e5e7eb;
}
.incumbents__table thead th {
    background: #f1f5f9; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--color-text-secondary);
}
.incumbents__table th.num, .incumbents__table td.num {
    text-align: right; font-variant-numeric: tabular-nums;
}
.incumbents__table tbody tr:hover { background: #f8fafc; }
.incumbents__name a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.incumbents__name a:hover { text-decoration: underline; }

.cell-warn { color: #b45309; font-weight: 600; background: #fffbea; }
.cell-soft { color: #78350f; background: #fef3c7; }


/* ── Challenger Platform ──────────────────────────────────────────────── */
.platform__kicker {
    display:inline-block; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
    color:#3730a3; background:#eef2ff; padding:0.25rem 0.55rem; border-radius:4px; font-weight:600;
    margin-bottom:0.35rem;
}
.platform__angles { list-style: none; padding: 0; margin: 1.5rem 0 0; counter-reset: angle; }
.platform__angle {
    display: grid; grid-template-columns: 52px 1fr; gap: 1rem;
    padding: 1.25rem 1.25rem 1.25rem 0.5rem; margin-bottom: 0.9rem;
    border: 1px solid #e5e7eb; border-radius: 10px; background: var(--color-bg-card);
    transition: box-shadow 0.2s;
}
.platform__angle:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.platform__angle-num {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: #fff; font-weight: 700; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0.15rem auto 0;
}
.platform__issue {
    margin: 0 0 0.75rem 0; font-size: 1.25rem; font-weight: 600; color: var(--color-text);
    line-height: 1.25;
}
.platform__row { margin: 0.5rem 0; }
.platform__label {
    display: block; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
    font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.2rem;
}
.platform__text { font-size: 0.95rem; line-height: 1.5; color: var(--color-text); }
.platform__text--small { font-size: 0.82rem; color: var(--color-text-secondary); }
.platform__row--challenger {
    background: #f0fdf4; border-left: 3px solid #16a34a;
    padding: 0.6rem 0.8rem; border-radius: 0 6px 6px 0; margin-top: 0.6rem;
}
.platform__row--challenger .platform__label { color: #15803d; }
.platform__row--challenger .platform__text { color: #14532d; }
.platform__evidence {
    margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px dashed #e2e8f0;
}
.platform__date { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-text); }


.platform__cta {
    float: right; font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 6px;
    background: var(--color-primary); color: #fff; text-decoration: none; font-weight: 500;
}
.platform__cta:hover { background: var(--color-primary-dark); }

/* ── Coverage page ─────────────────────────────────────────────────────── */
.coverage__hero { padding: 1.25rem 0 1.5rem; }
.coverage__title {
    font-size: var(--route-title-size);
    font-weight: var(--route-title-weight);
    margin: 0 0 0.75rem;
    line-height: var(--route-title-line);
    color: var(--color-text);
}
.coverage__subtitle {
    font-size: var(--route-lede-size);
    line-height: var(--route-lede-line);
    color: var(--color-text-secondary);
    margin: 0 0 1.25rem;
    max-width: 72ch;
}
.coverage__stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem; margin: 1rem 0;
}
.coverage__stat {
    padding: 0.9rem 1rem; background: var(--color-bg-card);
    border: 1px solid var(--color-border); border-radius: 8px;
}
.coverage__num { font-size: var(--route-metric-size); font-weight: 700; color: var(--color-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.coverage__lbl { font-size: 0.72rem; color: var(--color-text-secondary); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 0.25rem; }
.coverage__grid-heading { margin-top: 2rem; }

/* Scope switcher (US / North America / Canada). Larger and more prominent
   than .coverage__sort because it gates the entire page's data, not just
   the card ordering. Same primary-color palette so the chrome stays
   consistent. */
.coverage__scopes { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0 1.5rem; }
.coverage__scope {
    padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid var(--color-border);
    color: var(--color-primary); font-size: 0.92rem; font-weight: 500;
    text-decoration: none; background: var(--color-bg-card);
}
.coverage__scope:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.coverage__scope--active,
.coverage__scope--active:hover {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}

.coverage__sorts { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.5rem 0 1rem; }
.coverage__sort-label { font-size: 0.8rem; color: var(--color-text-secondary); margin-right: 0.35rem; }
/* Pill-style sort buttons. Inactive = primary text on white; active =
   white on primary. Matches the 3-color palette (--color-primary for
   clickable, --color-secondary for chrome) rather than the dark-navy
   pill used on /scorecards (.incumbents__sort--active). */
.coverage__sort {
    padding: 0.35rem 0.8rem; border-radius: 6px; border: 1px solid var(--color-border);
    color: var(--color-primary); font-size: 0.82rem; text-decoration: none; background: var(--color-bg-card);
}
.coverage__sort:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.coverage__sort--active,
.coverage__sort--active:hover {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}

.coverage__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem;
}
/* Whole-card link wrapper. Keeps the card's existing visual styling and
   adds a hover affordance so clickability is obvious. */
.coverage__card-link { display: block; color: inherit; text-decoration: none; }
.coverage__card-link:hover .coverage__card {
    border-color: var(--color-primary);
    box-shadow: 0 1px 4px rgba(36, 108, 173, 0.15);
}
.coverage__card {
    padding: 0.9rem 1rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-card);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.coverage__card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.55rem; }
.coverage__state { font-size: 1.2rem; font-weight: 700; color: var(--color-text); letter-spacing: 0; }
.coverage__card-num { font-size: 0.82rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.coverage__card-stats { margin: 0; padding: 0; font-size: 0.82rem; }
.coverage__card-stats > div { display: flex; justify-content: space-between; padding: 0.18rem 0; border-bottom: 1px dashed #f1f5f9; }
.coverage__card-stats > div:last-child { border-bottom: none; }
.coverage__card-stats dt { color: var(--color-text-muted); margin: 0; }
.coverage__card-stats dd { margin: 0; color: var(--color-text); font-variant-numeric: tabular-nums; }


/* ── Dossier (print-optimized) ────────────────────────────────────────── */
.dossier__toolbar { display: flex; gap: 0.75rem; margin: 0.5rem 0 1.5rem; align-items: center; }
.dossier__print {
    padding: 0.5rem 1rem; border-radius: 6px; border: none; cursor: pointer;
    background: #0f172a; color: #fff; font-weight: 500; font-size: 0.9rem;
}
.dossier__print:hover { background: #1e293b; }
.dossier__back { color: var(--color-primary); text-decoration: none; font-size: 0.9rem; }
.dossier__back:hover { text-decoration: underline; }

.dossier { max-width: 820px; font-family: var(--font-sans); line-height: 1.55; color: var(--color-text); }
/* Header block above dossier content. The original rule drew a 2px slate-900
   rule under the heading as a visual divider; users read it as an unwanted
   "dark bar" so it's been dropped. Keep the spacing the border was providing
   (padding-bottom + margin-bottom) so sections below don't collapse upward. */
.dossier__header { padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
.dossier__eyebrow { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.15em; color: var(--color-text-muted); font-weight: 600; margin-bottom: 0.4rem; }
.dossier__name { font-size: 2.5rem; margin: 0; font-weight: 700; line-height: 1.05; letter-spacing: 0; }
.dossier__meta { font-size: 0.95rem; color: var(--color-text-secondary); margin-top: 0.4rem; display: flex; gap: 0.7rem; flex-wrap: wrap; }
.dossier__sourceline { font-size: 0.78rem; color: #94a3b8; margin-top: 0.5rem; font-style: italic; }

.dossier__section { margin: 1.75rem 0; page-break-inside: avoid; }
.dossier__section h2 { font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 1px solid #e5e7eb; padding-bottom: 0.35rem; margin-bottom: 0.9rem; }
.dossier__brief { font-size: 1.08rem; line-height: 1.6; }

.dossier__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.dossier__stats > div { padding: 0.75rem 0; border-left: 3px solid #0f172a; padding-left: 1rem; }
.dossier__stats strong { display: block; font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.dossier__stats span { display: block; font-size: 0.82rem; color: var(--color-text-secondary); margin-top: 0.3rem; font-family: var(--font-sans); }

.dossier__list { margin: 0; padding-left: 1.2rem; }
.dossier__list li { margin-bottom: 0.35rem; font-size: 0.95rem; }

.dossier__table { width: 100%; border-collapse: collapse; font-size: 0.88rem; font-family: var(--font-sans); }
.dossier__table th { text-align: left; padding: 0.45rem 0.6rem; background: #f1f5f9; font-weight: 600; font-size: 0.78rem; border-bottom: 2px solid #0f172a; }
.dossier__table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.dossier__dissent { background: #fefce8; }
.dossier__dissent td:last-child { font-weight: 500; }

.dossier__platform { list-style-type: decimal; padding-left: 1.3rem; }
.dossier__platform li { margin-bottom: 1.1rem; page-break-inside: avoid; }
.dossier__platform h3 { font-family: var(--font-heading); font-size: 1.1rem; margin: 0 0 0.35rem; font-weight: 600; }
.dossier__platform p { margin: 0.3rem 0; font-size: 0.93rem; }
.dossier__cite { font-size: 0.78rem; color: var(--color-text-secondary); }

.dossier__footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; font-size: 0.75rem; color: var(--color-text-muted); font-family: var(--font-sans); }
.dossier__url { font-family: ui-monospace, SFMono-Regular, monospace; word-break: break-all; }

/* Print: hide chrome, format for letter */
@media print {
    body * { visibility: hidden; }
    .dossier, .dossier * { visibility: visible; }
    .dossier__toolbar { display: none !important; }
    .dossier { position: absolute; left: 0; top: 0; max-width: none; width: 100%; padding: 0.5in; }
    header[class*="site-header"], footer, nav, aside, .breadcrumb { display: none !important; }
    a { color: #000 !important; text-decoration: none !important; }
    .dossier__dissent { background: #fefce8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { margin: 0.5in; }
}


/* ── Serve digest ──────────────────────────────────────────────────────── */
.serve__kicker {
    display:inline-block; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
    color:#065f46; background:#d1fae5; padding:0.25rem 0.55rem; border-radius:4px; font-weight:600;
    margin-bottom:0.35rem;
}
.serve__items { margin-top: 1.5rem; }
.serve__item { padding: 1.25rem; margin-bottom: 1rem; border: 1px solid #e5e7eb; border-radius: 10px; background: var(--color-bg-card); }
.serve__item-title { margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 600; color: var(--color-text); line-height: 1.3; }
.serve__plain { margin: 0 0 0.8rem; color: var(--color-text); line-height: 1.55; }
.serve__questions { padding: 0.75rem 0.9rem; background: #f0fdf4; border-left: 3px solid #16a34a; border-radius: 0 6px 6px 0; }
.serve__q-label { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: #15803d; font-weight: 600; margin-bottom: 0.3rem; }
.serve__questions ul { margin: 0; padding-left: 1.2rem; font-size: 0.92rem; color: #14532d; }
.serve__questions li { margin-bottom: 0.25rem; }

/* ── Data Depth Badge ─────────────────────────────────────────────────── */
/* Reworded + de-loudified 2026-04-24. Single muted chip with no per-tier
   color coding - was five tiers in green/yellow/amber/red which read as
   verdict on the city ("your town is a RED city"). The neutral facts-label
   treatment says what we have without ranking the place. */
.depth-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.18rem 0.55rem; border-radius: 4px;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.01em;
    background: #f4f4f5; color: var(--color-text-secondary);
    border: 1px solid #e5e5e5;
    vertical-align: middle;
    cursor: help;
}
.depth-badge__label { font-weight: 500; }
.depth-badge__counts {
    font-weight: 400; color: inherit; opacity: 0.8;
    display: inline-flex; gap: 0.3rem; font-variant-numeric: tabular-nums;
}

/* Legacy per-tier modifier classes kept as aliases for any callsite that
   still passes them. All render the same neutral style now. Can be removed
   once closure grep confirms no consumers. */
.depth-badge--t1,
.depth-badge--t2,
.depth-badge--t3,
.depth-badge--t4,
.depth-badge--t5 {
    background: #f4f4f5; color: var(--color-text-secondary); border-color: #e5e5e5;
}
.depth-badge__dot { display: none; }


/* ── Campaign Finance Panel ────────────────────────────────────────────── */
.finance__cycle { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 400; margin-left: 0.75rem; letter-spacing: normal; }
.finance__hero { margin: 0.5rem 0 1rem; }
.finance__total { font-size: 2.25rem; font-weight: 700; color: var(--color-text); line-height: 1; font-variant-numeric: tabular-nums; }
.finance__total-sub { font-size: 0.82rem; color: var(--color-text-secondary); margin-top: 0.3rem; }
.finance__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.finance__split > div { padding: 0.7rem 0.9rem; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; }
.finance__split span { display: block; font-size: 0.72rem; color: var(--color-text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.finance__split strong { display: block; font-size: 1.2rem; font-weight: 600; margin-top: 0.2rem; font-variant-numeric: tabular-nums; color: var(--color-text); }
.finance__donors { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 0.5rem; }
.finance__donors th, .finance__donors td { padding: 0.4rem 0.6rem; text-align: left; border-bottom: 1px solid #e5e7eb; }
.finance__donors th { background: #f1f5f9; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-secondary); }
.finance__donors td.num, .finance__donors th.num { text-align: right; font-variant-numeric: tabular-nums; }


/* ── Your Government (voter address lookup) ───────────────────────────── */
.yg__hero { padding: 1.5rem 0 2rem; text-align: left; max-width: 760px; }
.yg__kicker {
    display: inline-block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: #065f46; background: #d1fae5; padding: 0.2rem 0.55rem; border-radius: 4px; font-weight: 600;
    margin-bottom: 0.4rem;
}
.yg__form { display: flex; gap: 0.5rem; margin: 1.25rem 0; flex-wrap: wrap; }
.yg__input {
    flex: 1; min-width: 260px; padding: 0.65rem 0.9rem; border: 2px solid #cbd5e1; border-radius: 8px;
    font-size: 1rem;
}
.yg__input:focus { border-color: #0f172a; outline: none; }
.yg__btn {
    padding: 0.65rem 1.25rem; border: none; background: #0f172a; color: #fff;
    font-size: 0.95rem; font-weight: 600; border-radius: 8px; cursor: pointer;
}
.yg__btn:hover { background: #1e293b; }

.yg__result { margin: 1.5rem 0 1rem; padding: 1rem 1.2rem; background: #f0fdf4; border-left: 4px solid #16a34a; border-radius: 0 8px 8px 0; }
.yg__officials { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.6rem; }
.yg__officials li { padding: 0.65rem 0.9rem; border: 1px solid #e5e7eb; border-radius: 6px; background: var(--color-bg-card); }
.yg__official-name { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.yg__official-name:hover { text-decoration: underline; }


/* ── Global search: place cards ───────────────────────────────────────── */
.gsearch__places-header, .gsearch__content-header {
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-text-muted); font-weight: 600; margin: 1rem 0 0.5rem;
}

/* Object-type tabs. Horizontal pills with per-tab counts. */
.gsearch__tabs {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin: 0.5rem 0 1.25rem; padding-bottom: 0.6rem;
    border-bottom: 1px solid #e5e7eb;
}
.gsearch__tab {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.4rem 0.85rem; border-radius: 999px;
    background: #f1f5f9; color: var(--color-text-secondary); font-size: 0.85rem; font-weight: 500;
    text-decoration: none; border: 1px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.gsearch__tab:hover { background: #e2e8f0; color: var(--color-text); text-decoration: none; }
.gsearch__tab--active { background: #eff6ff; color: var(--color-primary); border-color: #bfdbfe; }
.gsearch__tab--active:hover { background: #dbeafe; color: var(--color-primary-dark); }
.gsearch__tab-count {
    font-variant-numeric: tabular-nums; font-size: 0.75rem;
    padding: 0.1rem 0.45rem; border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
}
.gsearch__tab--active .gsearch__tab-count { background: rgba(36, 108, 173, 0.12); color: var(--color-primary); }

/* SearchContentStream skeleton: shown while the slow chunk-search task
   is in flight, replaced by the real subtitle / tabs / cards when the
   task awaits out. Place / person did-you-mean cards above are already
   real (parent flushes them in its own render cycle). */
.gsearch__subtitle--loading {
    color: #94a3b8; font-style: italic;
}
.gsearch__content-header--loading {
    color: #94a3b8;
}
.gsearch__loading-cards {
    display: flex; flex-direction: column; gap: 0.6rem;
    margin-top: 0.5rem;
}
.resultcard--skeleton {
    display: block; padding: 0.85rem 1rem;
    background: var(--color-bg-card); border: 1px solid #e5e7eb; border-radius: 8px;
}
.skel--card-title {
    display: block; height: 1.1rem; width: 65%;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px; margin-bottom: 0.45rem;
}
.skel--card-meta {
    display: block; height: 0.75rem; width: 30%;
    background: #f1f5f9; border-radius: 4px; margin-bottom: 0.45rem;
}
.skel--card-snippet {
    display: block; height: 2.4rem; width: 100%;
    background: #f8fafc; border-radius: 4px;
}
@keyframes skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Search-results subtitle directly under the H1. Counts + timing + freshness
   reading-aid line. Tabular nums so the count digit width doesn't reflow
   when streaming SSR fills in the response and the number jumps from 0. */
.gsearch__subtitle {
    margin: 0.15rem 0 1rem; color: var(--color-text-secondary); font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}
.gsearch__subtitle strong { color: var(--color-text); }
.gsearch__subtitle-dim { color: #94a3b8; }

/* Echo of the query inside the H1 so the term the search ran on stands
   out from the fixed "Results for" prefix. Keeps the heading scannable
   when titles get long. overflow-wrap: anywhere lets quoted multi-word
   queries break inside the quote so the H1 doesn't blow past narrow
   viewports (mobile 360-390px). */
.gsearch__query-echo {
    color: var(--color-primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Responsive sizing for the /search h1. Base h1 is --text-3xl (30px)
   which crowds long result-state titles ("Results for 'Tenant
   refrigerator' in New York") past mobile viewport widths. clamp() scales
   down to ~22px on narrow screens, restores to 30px on tablet+. Also
   allows wrapping inside the title via the .gsearch__query-echo
   overflow-wrap rule above. */
.gsearch__h1 {
    font-size: clamp(1.35rem, 4.5vw, 1.875rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Toolbar row: tabs left, freshness segmented control right. Wraps to
   stacked rows under 720px. */
.gsearch__toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.6rem; margin: 0.5rem 0 1.25rem; padding-bottom: 0.6rem;
    border-bottom: 1px solid #e5e7eb;
}
/* Override the standalone .gsearch__tabs's margin/border - toolbar owns
   them now so two underlines don't stack. */
.gsearch__toolbar .gsearch__tabs {
    margin: 0; padding-bottom: 0; border-bottom: none;
}
.gsearch__freshness {
    display: inline-flex; align-items: center; gap: 0.15rem;
    padding: 0.15rem; background: #f1f5f9; border-radius: 8px;
    font-size: 0.8rem;
}
.gsearch__fresh-opt {
    padding: 0.3rem 0.7rem; border-radius: 6px;
    color: var(--color-text-secondary); text-decoration: none; font-weight: 500;
    transition: background 0.12s, color 0.12s;
}
.gsearch__fresh-opt:hover { background: #e2e8f0; color: var(--color-text); text-decoration: none; }
.gsearch__fresh-opt--active {
    background: var(--color-bg-card); color: var(--color-text);
    box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}

/* Landing (no-query) layout. Hero + suggested chips + 2-col module row. */
.gsearch__landing { margin-top: 1rem; }
.gsearch__hero { margin-bottom: 2rem; }
.gsearch__hero .search-form--hero { margin: 0.5rem 0 0.75rem; }
.gsearch__suggested {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    margin: 0.5rem 0 0;
}
.gsearch__suggested-label {
    font-size: 0.85rem; color: var(--color-text-muted); font-weight: 500; margin-right: 0.25rem;
}
.gsearch__chip {
    display: inline-block; padding: 0.4rem 0.8rem; border-radius: 999px;
    background: var(--color-bg-card); color: var(--color-primary); border: 1px solid #cbd5e1;
    font-size: 0.85rem; font-weight: 500; text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.gsearch__chip:hover {
    background: #eff6ff; border-color: #93c5fd; color: var(--color-primary-dark);
    text-decoration: none;
}
.gsearch__landing-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
    align-items: start;
}
.gsearch__landing-col {
    padding: 1rem; background: #f8fafc; border-radius: 10px;
    border: 1px solid #e5e7eb;
}
@media (max-width: 840px) {
    .gsearch__landing-grid { grid-template-columns: 1fr; }
}

/* ── Passages view ─────────────────────────────────────────────────
   Find-in-document layout used by /search when scope narrows to a
   single item / agenda item / attachment. Reads as a numbered list
   of passages with location label + snippet body, not as repeating
   result cards. */
.passages {
    margin-top: 0.5rem;
}
.passages__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem; padding-bottom: 0.5rem;
    border-bottom: 1px dashed #cbd5e1;
    color: var(--color-text-secondary); font-size: 0.85rem;
}
.passages__count { font-variant-numeric: tabular-nums; font-weight: 500; }
.passages__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.85rem;
}
.passage {
    padding: 0.85rem 1rem;
    background: var(--color-bg-card); border: 1px solid #e5e7eb; border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.passage:hover { border-color: #cbd5e1; box-shadow: 0 1px 4px rgba(15,23,42,0.05); }
.passage__header {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 0.4rem; font-size: 0.85rem;
}
.passage__index {
    font-variant-numeric: tabular-nums; color: #94a3b8; font-weight: 600;
    min-width: 1.5rem;
}
.passage__loc-label {
    color: var(--color-primary); font-weight: 600;
}
.passage__loc-link {
    color: var(--color-primary); font-weight: 600; text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.12s;
}
.passage__loc-link:hover { border-bottom-color: #93c5fd; text-decoration: none; }
.passage__loc-detail {
    color: var(--color-text-muted); font-size: 0.8rem;
}
.passage__open {
    margin-left: auto; color: var(--color-primary); font-size: 0.8rem;
    text-decoration: none; font-weight: 500;
    padding: 0.15rem 0.55rem; border-radius: 4px;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.passage__open:hover {
    background: #eff6ff; border-color: #bfdbfe; text-decoration: none;
}
/* Secondary "View item" link sits next to the primary "View source"
   when both are useful (attachment passages: PDF + parent item). The
   margin-left:auto on the primary already pushes the pair to the right
   edge; the secondary just gets a slim left margin so the two read as
   a pair rather than colliding. */
.passage__open--secondary {
    margin-left: 0.4rem; color: var(--color-text-secondary);
}
.passage__open--secondary:hover {
    background: #f1f5f9; border-color: #cbd5e1; color: var(--color-text);
}
.passage__body {
    color: var(--color-text); font-size: 0.95rem; line-height: 1.55;
    /* Snippet text from PDF extraction can be one giant unwrapped line;
       normal whitespace + word-wrap keeps long passages readable without
       triggering horizontal scroll on narrow viewports. */
    white-space: normal; overflow-wrap: anywhere;
}
.passage__body mark {
    background: #fef08a; color: inherit; padding: 0 1px; border-radius: 2px;
    font-weight: 500;
}

/* Smarter no-results panel. Replaces the generic <EmptyState> with a */
   nudge layout: lead sentence ("did you mean…" / "no results"), an
   optional "expand window" suggestion, then example chips. */
.gsearch__no-results {
    margin-top: 1.5rem; padding: 1.25rem 1.5rem;
    background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px;
}
.gsearch__no-results-lead {
    margin: 0 0 0.5rem; font-size: 1rem; color: var(--color-text);
}
.gsearch__no-results-suggest {
    margin: 0.4rem 0 0.6rem; color: var(--color-text-secondary); font-size: 0.9rem;
}
.gsearch__no-results-link {
    margin-left: 0.4rem; color: var(--color-primary); font-weight: 500; text-decoration: none;
}
.gsearch__no-results-link:hover { text-decoration: underline; }
.gsearch__content-header { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }

.gsearch__places { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.place-card {
    display: block; padding: 1rem 1.1rem; border-radius: 10px; border: 2px solid #e5e7eb;
    text-decoration: none; color: inherit; background: var(--color-bg-card);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.place-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.08); border-color: #94a3b8; }
/* Indexed / non-indexed cards used to diverge sharply (solid green
   border vs dashed slate). Once both cards point to the same PlaceHome
   route - which morphs based on coverage - visual consistency outweighs
   the at-a-glance differentiation; the "Not indexed yet" pill in the
   meta row carries the indexing signal. */

.place-card__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; }
.place-card__name { font-size: 1.1rem; font-weight: 700; color: var(--color-text); line-height: 1.2; }
.place-card__state { font-size: 0.82rem; color: var(--color-text-secondary); font-weight: 600; letter-spacing: 0.05em; }
.place-card__meta { display: flex; gap: 0.5rem; align-items: center; font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 0.4rem; }
.place-card__not-indexed-badge {
    background: #f1f5f9; color: var(--color-text-secondary); padding: 0.15rem 0.5rem; border-radius: 4px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
}
.place-card__cta { font-size: 0.82rem; color: var(--color-primary); font-weight: 500; margin-top: 0.4rem; }

/* ── Global search: people did-you-mean cards ─────────────────────────────
   Parallel to .gsearch__places + .place-card. Same grid + card chrome,
   different accent (slate instead of green) so the two panels read as
   distinct surfaces. Show on All + People tabs. */
.gsearch__people-header { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; margin: 1rem 0 0.5rem; }
.gsearch__people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.person-card {
    display: block; padding: 1rem 1.1rem; border-radius: 10px;
    border: 2px solid #cbd5e1; background: var(--color-bg-card);
    text-decoration: none; color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.person-card:hover { border-color: #64748b; box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.person-card__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; gap: 0.5rem; }
.person-card__name { font-size: 1.05rem; font-weight: 700; color: var(--color-text); line-height: 1.2; }
.person-card__icon { margin-right: 0.3rem; }
.person-card__serving {
    background: #dcfce7; color: #166534; padding: 0.15rem 0.5rem; border-radius: 4px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; flex-shrink: 0;
}
.person-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; font-size: 0.8rem; color: var(--color-text-secondary); }
.person-card__role { color: var(--color-text); font-weight: 500; }
.person-card__body { color: var(--color-text-muted); }
.person-card__place { color: var(--color-text-muted); font-style: italic; }

/* Scrape-flag banner - shown above page content when
   ScrapeDetectionMiddleware flags the current request. Reads as "warning,
   not error" (the user can still browse). Form layout stacks vertically on
   narrow screens; widens to side-by-side on desktop.

   Palette: tokens.css gives us --color-warning (#92400e, deep) and
   --color-warning-light (#fffbeb, very pale). The mid-amber band the
   banner needs (border #fcd34d, accent/button #f59e0b, hover/active
   shades, code-chip #fef3c7) has no corresponding token, so those values
   stay literal. If/when warning gains a mid-tone, swap them in here. */
.scrape-flag-banner {
    margin: 1rem 0 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--color-warning-light);
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    color: var(--color-warning);
    font-size: 0.95rem;
    line-height: 1.5;
}
.scrape-flag-banner__inner {
    display: flex; flex-direction: column; gap: 0.85rem;
}
@media (min-width: 768px) {
    .scrape-flag-banner__inner { flex-direction: row; align-items: flex-start; gap: 1.25rem; }
    .scrape-flag-banner__copy  { flex: 1; }
    .scrape-flag-banner__form  { flex: 0 0 auto; }
}
.scrape-flag-banner__copy strong { color: var(--color-warning); font-weight: 700; margin-right: 0.25rem; }
.scrape-flag-banner__ref {
    display: block; margin-top: 0.5rem;
    font-size: 0.8rem; color: var(--color-warning); opacity: 0.8;
}
.scrape-flag-banner__ref code {
    background: #fef3c7; padding: 0.05rem 0.35rem; border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem;
}
.scrape-flag-banner__form {
    display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start;
}
.scrape-flag-banner__btn {
    background: #f59e0b; color: #fff; border: 0;
    padding: 0.55rem 1.1rem; border-radius: 6px;
    font-weight: 600; font-size: 0.9rem; cursor: pointer;
    transition: background 0.15s ease;
}
.scrape-flag-banner__btn:hover  { background: #d97706; }
.scrape-flag-banner__btn:active { background: #b45309; }

/* TeaserBlur (T19 2026-05-08) - Advanced-feature gate primitive. Renders
   the inner component blurred with a CTA overlay; one consistent upgrade
   narrative across every A-tier feature. See Components/Shared/TeaserBlur.razor. */
.teaser-blur { position: relative; display: block; isolation: isolate; }
.teaser-blur__inner {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
    /* Slight transform-translate keeps Safari from defaulting to GPU-rasterize
       at 1× scale, which can produce edge-jitter on the blur radius. */
    transform: translate3d(0, 0, 0);
}
.teaser-blur__overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.85) 100%);
    z-index: 1;
}
.teaser-blur__overlay-card {
    background: var(--color-bg-card);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    max-width: 22rem;
    text-align: center;
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.18);
}
.teaser-blur__lock-icon {
    color: #f59e0b; margin-bottom: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem;
    background: #fef3c7; border-radius: 50%;
}
.teaser-blur__cta-text {
    margin: 0 0 0.85rem 0;
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.4;
}
.teaser-blur__cta-btn {
    display: inline-block;
    background: #1f2937; color: #fff;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}
.teaser-blur__cta-btn:hover { background: #0f172a; }

/* List-page filters (T26 2026-05-08) - shared bar at top of BodyList /
   EventList / ItemList. Form-GET + native selects + onchange auto-submit
   keeps the SSR contract (no JS required) and produces shareable URLs. */
.list-filters {
    display: flex; flex-wrap: wrap; gap: 0.85rem 1.25rem;
    align-items: flex-end; margin: 0.5rem 0 1rem 0;
    padding: 0.7rem 0.9rem;
    background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 0.9rem;
}
.list-filters__label {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.list-filters__label > span {
    font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.list-filters__label--inline {
    flex-direction: row; align-items: center; gap: 0.4rem;
    padding-bottom: 0.35rem;
}
.list-filters__label select,
.list-filters__label input[type="date"] {
    border: 1px solid #cbd5e1; border-radius: 5px;
    padding: 0.35rem 0.55rem; background: var(--color-bg-card); font-size: 0.9rem;
}
.list-filters__clear {
    color: var(--color-text-muted); font-size: 0.8rem; padding-bottom: 0.35rem;
    text-decoration: underline;
}
.list-filters__clear:hover { color: var(--color-text); }
.list-filters__count {
    margin: 0.25rem 0 0.85rem 0; font-size: 0.85rem;
}

/* Per-page technical footer - used by PlaceHome, Coverage, and detail
   pages to surface freshness/source attribution metadata. Editorial
   principle: all technical info lives in footers, not in the page body,
   so trust signals don't compete with content. */
.page-footer-meta {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}
.page-footer-meta strong { color: var(--color-text-secondary); font-weight: 600; }
.page-footer-meta time { color: inherit; }
.page-footer-meta__row { margin-bottom: 0.25rem; }
.page-footer-meta__row:last-child { margin-bottom: 0; }

/* State coverage snapshot - PlaceHome's non-indexed branch shows it so
   the user sees "we cover X of Y places in this state (Z%)" instead of
   just an empty page when their place isn't indexed. */
.coverage-snapshot {
    margin: 1.5rem 0; padding: 1rem 1.25rem;
    background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px;
}
.coverage-snapshot__h {
    font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-text-muted); font-weight: 600; margin: 0 0 0.5rem;
}
.coverage-snapshot__line { color: var(--color-text); font-size: 0.95rem; margin: 0 0 0.5rem; }
.coverage-snapshot__bar { width: 100%; height: 10px; background: #f1f5f9; border-radius: 5px; overflow: hidden; }
.coverage-snapshot__bar > span { display: block; height: 100%; background: linear-gradient(90deg, #4ade80 0%, #16a34a 100%); }


/* ── County linkage on place cards (inline italic county name in meta) ── */
.place-card__county { font-size: 0.75rem; color: var(--color-text-secondary); font-style: italic; }


/* ── Place type variants on place cards ───────────────────────────────── */
.place-card__icon { margin-right: 0.2rem; font-size: 0.95rem; }
.place-card__type {
    background: #e2e8f0; color: var(--color-text-secondary); padding: 0.12rem 0.45rem; border-radius: 3px;
    font-size: 0.68rem; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 600;
}
.place-card__grades {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.75rem; color: var(--color-text-secondary); padding: 0.1rem 0.4rem;
    background: #fef3c7; border-radius: 3px; font-variant-numeric: tabular-nums;
}
/* Variant accent borders - color-codes the type at a glance */
.place-card--schoolunified, .place-card--schoolelementary, .place-card--schoolsecondary {
    border-left: 4px solid #7c3aed;
}
.place-card--county { border-left: 4px solid #0891b2; }
.place-card--countysubdivision { border-left: 4px solid #6b7280; border-style: dashed; }


/* ── Home page - two-column layout ────────────────────────────────────────
   Main (left) = search + browse surfaces. Aside (right) = promos + cross-city.
   Collapses to single column below the medium breakpoint so mobile users see
   main content first, aside below. */
.home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2.5rem;
    margin-top: 1.5rem;
    align-items: start;
}
.home-layout__main {
    min-width: 0;
    /* Reserve roughly the height of the loaded BROWSE-BY-PLACE + categories
       content so the streaming-mode skeleton→data swap doesn't grow the
       page and push the footer down (CLS source #1 on Home: ~0.14 of 0.15).
       Tuned empirically: ~1900px covers US states + Canada + category grid.
       The aside is sticky so it doesn't participate. */
    min-height: 1900px;
}
.home-layout__aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}
@media (max-width: 960px) {
    .home-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .home-layout__aside { position: static; }
}

/* ── Home aside - quick-access cards + promo callout ─────────────────────
   Match the AskBox visual (light gradient, thin border) so the sidebar reads
   as related surfaces to Search rather than separate dark panels. No
   prefers-color-scheme override - these always stay light, matching AskBox. */
.home-aside__card {
    display: block;
    padding: 0.9rem 1rem;
    border: 1px solid var(--v2-line, #e5e7eb);
    border-radius: var(--v2-radius, 10px);
    text-decoration: none;
    color: inherit;
    background: var(--gradient-panel-soft);
    transition: border-color 0.15s, transform 0.15s;
}
.home-aside__card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
    transform: translateY(-1px);
}
.home-aside__card-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
    /* Title carries the primary-blue link color per the chrome rule
       (clickable -> primary). Description stays slate-secondary. */
    color: var(--color-primary);
}
.home-aside__card-desc {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--color-text-secondary, #6b7280);
}

/* Modifier: visually distinct "feature" card (used for the lone Advanced
   features link on Home aside, replacing the old 5-card stack). Primary
   accent border + slightly larger title nudge it from "one of many" to
   "the main link out of the aside". */
.home-aside__card--feature {
    border-color: var(--color-primary);
    background: linear-gradient(180deg, var(--color-primary-light, #e8f0f7) 0%, #f1f5f9 100%);
}
.home-aside__card--feature .home-aside__card-title {
    font-size: 1.02rem;
}
.home-aside__card--feature:hover {
    border-color: var(--color-primary-dark);
}

.home-aside__promo {
    background: linear-gradient(180deg, #eff6ff 0%, #f1f5f9 100%);
    border: 1px solid #c7dcff;
    border-radius: var(--v2-radius, 10px);
    padding: 0.9rem 1rem;
    margin-top: 0.5rem;
}
.home-aside__promo-kicker {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: #0a5cff;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.home-aside__promo-text {
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 0.4rem;
    color: #0f1a2d;
}
.home-aside__promo-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* Compare form - three fields + submit, stacked on mobile, inline on wider. */
.compare__form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 0.75rem;
    align-items: end;
    margin: 1.5rem 0 1rem;
    padding: 1rem 1.1rem;
    background: var(--gradient-panel-soft);
    border: 1px solid var(--v2-line, #e5e7eb);
    border-radius: var(--v2-radius, 10px);
}
.compare__field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.compare__field label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v2-ink-muted, #6b7280);
    font-weight: 600;
}
.compare__field input[type="text"] {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--v2-line, #e5e7eb);
    border-radius: 6px;
    background: var(--color-bg-card);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--v2-ink, #111827);
    width: 100%;
}
.compare__field input[type="text"]:focus {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    border-color: transparent;
}
.compare__submit button {
    padding: 0.55rem 1.1rem;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.compare__submit button:hover { background: var(--color-primary-dark); }
.compare__hint { font-size: 0.78rem; margin: 0.25rem 0 1rem; }
.compare__hint code { font-size: 0.75rem; background: #f3f4f6; padding: 0.05rem 0.35rem; border-radius: 3px; }

@media (max-width: 720px) {
    .compare__form { grid-template-columns: 1fr; }
}

/* Synthesis block - sits below the two position cards. */
.compare__synthesis {
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
    background: #fafbfc;
    border: 1px solid var(--v2-line, #e5e7eb);
    border-radius: var(--v2-radius, 10px);
}
.compare__synth-para {
    margin: 0 0 0.6rem 0;
    font-size: 0.95rem;
    line-height: 1.55;
}
.compare__synth-para:last-child { margin-bottom: 0; }
.compare__synth-para strong {
    color: #0a5cff;
    font-weight: 600;
    margin-right: 0.3rem;
}

/* ============================================================
   CANONICAL PRIMITIVES (consolidated 2026-04-26)
   The page-eyebrow ("kicker"), the filter row + label + pills,
   and the cadence pill all started life as bespoke per-page
   classes. They render identically. New code should use
   .page-kicker, .filter-row, .filter-label, .filter-pills, .pill.
   The legacy bespoke selectors below are kept so existing markup
   keeps working; they get the same treatment as the canonical.
   This block lives at the end of v2.css so it overrides the
   tiny size/letter-spacing variations the bespoke definitions
   originally shipped with.
   ============================================================ */

.page-kicker,
.feed__kicker,
.newsroom__kicker,
.weekly-brief__kicker,
.embed-widget__kicker,
.for-newsrooms__kicker,
.coverage-gaps__kicker,
.motion-search__kicker,
.digest-preview__kicker,
.brief-card__kicker,
.ask-about__kicker,
.compare__kicker,
.trending-ripples__kicker,
.featured-topics__kicker,
.ripple-bellwether__kicker,
.category-hero__kicker,
.place-tools__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v2-ink-muted);
    display: block;
    margin-bottom: 0.4rem;
}

.filter-row,
.feed__filter-row,
.newsroom__filter-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.filter-label,
.feed__filter-label,
.newsroom__filter-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-ink-muted);
    font-weight: 600;
    min-width: 4.5rem;
}

.filter-pills,
.feed__filter-pills,
.newsroom__filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Cadence pill (radio-as-pill in ItemAlertsPanel) tracks .pill
   exactly: same height, padding, hover and selected treatment.
   The two were drifting; this aligns them. */
.item-alerts__cadence-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: var(--color-bg-card);
    border: 1px solid var(--v2-rule);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--v2-ink-muted);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.item-alerts__cadence-pill input[type=radio] { margin: 0; accent-color: var(--v2-ink); }
.item-alerts__cadence-pill:hover {
    background: var(--v2-surface-warm);
    border-color: var(--v2-ink-muted);
    color: var(--v2-ink);
}
.item-alerts__cadence-pill--selected {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: #fff;
}
.item-alerts__cadence-pill--selected:hover { background: var(--v2-ink); color: #fff; }

/* ============================================================
   NAV PROGRESS BAR
   3px tall fixed bar that animates from 0 to ~80% over 800ms
   when an internal link or form is activated, then snaps to
   100% on pageshow. SSR full-page-reload UX needs this because
   the click → render gap on cold endpoints is too long for
   "trust the browser favicon spinner" to feel responsive.
   ============================================================ */
.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0;
    background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 60%, #60a5fa 100%);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.55);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    /* Width transition only applies to the CSS-driven 0->80 sweep; the JS
       trickle past 80 sets width inline at a 200ms cadence, which would
       compound badly with a slow easing here. Opacity stays transition-managed. */
    transition: width 0.8s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.2s linear;
}
.nav-progress--active {
    opacity: 1;
    width: 80%;
}
.nav-progress--done {
    width: 100%;
    /* During --done we want a fast snap-to-100 then fade. Override the
       slow easing the inline-style trickle was using. */
    transition: width 0.2s linear, opacity 0.25s linear 0.2s;
    opacity: 0;
}

/* Streaming-render skeleton blocks. Used during the first SSR flush
   while OnInitializedAsync's parallel API calls are still in flight.
   Single shimmer animation, neutral palette - this is "the shape of
   what's coming", not "the content". */
.skel {
    display: inline-block;
    background: linear-gradient(90deg,
        #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel--chip   { width: 4.5rem; height: 1.1rem; margin-right: 0.5rem; }
.skel--state  { width: 5.5rem; height: 1.6rem; margin: 0 0.4rem 0.4rem 0; border-radius: 999px; }
/* Side-aside HotTopicsPanel rows: a label-shaped bar that mimics one row.
   Width varied across the 8 emitted rows would be visually richer, but a
   uniform width is simpler and reads cleanly against the column edge. */
.skel--hot-row  { display: block; width: 100%; height: 1.1rem; margin: 0.35rem 0; }
/* CategoryGrid 3x6 tile placeholders. The empty <div class="category-card
   category-card--skeleton"> reserves the tile shape from the existing
   .category-card rules; these inner skel slabs occupy the icon/name/meta
   regions so the layout doesn't reflow when real content arrives. */
.skel--cat-icon { width: 1.5rem; height: 1.5rem; border-radius: 50%; }
.skel--cat-name { display: block; width: 70%; height: 0.95rem; margin-bottom: 0.35rem; }
.skel--cat-meta { display: block; width: 45%; height: 0.75rem; }
@keyframes skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.home-browse__skeleton { margin-top: 0.75rem; }
.home-browse__skel-stats { margin-bottom: 0.85rem; }
.home-browse__skel-list { line-height: 0; }

/* Page-wide nav-in-flight hint. Pairs with the top progress bar:
   the bar is peripheral, this is what the user sees if their eye
   is on the link they just clicked. Subtle on purpose - this is a
   "something's happening" signal, not a modal blocker. */
body.is-navigating {
    cursor: progress;
}
body.is-navigating .site-main {
    opacity: 0.55;
    transition: opacity 0.15s linear 0.05s;
    pointer-events: none;
}
body.is-navigating a,
body.is-navigating button {
    cursor: progress;
}

/* ============================================================
   /data-feed page
   ============================================================ */
.data-feed {
    max-width: 1080px;
    margin: 0 auto;
}
.data-feed__masthead {
    padding: 1rem 0 2rem;
    border-bottom: 1px solid var(--v2-rule);
}
.data-feed__headline {
    font-family: var(--font-heading);
    font-size: var(--route-title-size);
    font-weight: var(--route-title-weight);
    line-height: var(--route-title-line);
    margin: 0.35rem 0 1rem;
    color: var(--v2-ink);
    max-width: 960px;
}
.data-feed__lede {
    font-size: var(--route-lede-size);
    line-height: var(--route-lede-line);
    color: var(--color-text-secondary);
    max-width: 72ch;
}
.data-feed__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.4rem;
}

.data-feed__proof-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 1.75rem 0 3rem;
    border: 1px solid var(--v2-rule);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-card);
}
.data-feed__proof-row div {
    padding: 1rem 1.1rem;
    border-right: 1px solid var(--v2-rule);
}
.data-feed__proof-row div:last-child {
    border-right: 0;
}
.data-feed__proof-row strong {
    display: block;
    color: var(--color-text);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    line-height: 1.1;
    margin-bottom: 0.4rem;
}
.data-feed__proof-row span {
    color: var(--v2-ink-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.data-feed__section {
    margin-top: 3.25rem;
}
.data-feed__section-head {
    max-width: 820px;
}
.data-feed__section-head h2 {
    font-size: var(--route-section-title-size);
    line-height: 1.18;
    font-weight: var(--route-title-weight);
    margin: 0.35rem 0 0.75rem;
    color: var(--color-text);
}
.data-feed__section-head p {
    color: var(--v2-ink);
    line-height: 1.65;
    margin: 0;
}

.data-feed__inventory {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
.data-feed__inventory li,
.data-feed__value-card,
.data-feed__guarantees article,
.data-feed__channel {
    border: 1px solid var(--v2-rule);
    border-radius: 8px;
    background: var(--color-bg-card);
}
.data-feed__inventory li {
    padding: 1rem 1.1rem;
}
.data-feed__inventory strong {
    display: block;
    color: var(--color-text);
    margin-bottom: 0.3rem;
}
.data-feed__inventory span {
    display: block;
    color: var(--v2-ink-muted);
    line-height: 1.5;
}

.data-feed__value-grid,
.data-feed__guarantees,
.data-feed__channels {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}
.data-feed__value-grid,
.data-feed__channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.data-feed__guarantees {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.data-feed__value-card,
.data-feed__guarantees article,
.data-feed__channel {
    padding: 1.15rem 1.2rem;
}
.data-feed__value-card h3,
.data-feed__guarantees h3,
.data-feed__channel-title {
    font-size: 1.08rem;
    line-height: 1.25;
    font-weight: 650;
    margin: 0 0 0.45rem;
    color: var(--color-text);
}
.data-feed__value-card p,
.data-feed__guarantees p,
.data-feed__channel p {
    font-size: 0.94rem;
    line-height: 1.58;
    margin: 0;
    color: var(--v2-ink);
}
.data-feed__channel-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v2-ink-muted);
    margin: 0 0 0.75rem;
}

.data-feed__contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: end;
    margin-top: 3.25rem;
    padding: 1.5rem;
    background: var(--v2-surface-warm);
    color: var(--v2-ink);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
}
.data-feed__contact .page-kicker {
    color: var(--v2-ink-muted);
}
.data-feed__contact-headline {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 700;
    margin: 0.35rem 0 0.65rem;
    color: var(--color-text);
}
.data-feed__contact p {
    line-height: 1.62;
    margin: 0.5rem 0;
    color: var(--v2-ink);
    max-width: 76ch;
}
.data-feed__contact .muted {
    color: var(--v2-ink-muted);
}
.data-feed__contact a:not(.btn) {
    color: var(--color-primary);
    text-decoration: underline;
}
.data-feed__contact a:not(.btn):hover {
    color: var(--color-primary-dark);
}
.data-feed__contact-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 14rem;
}
.data-feed__contact-actions .btn {
    text-align: center;
}

@media (max-width: 840px) {
    .data-feed__proof-row,
    .data-feed__inventory,
    .data-feed__value-grid,
    .data-feed__guarantees,
    .data-feed__channels,
    .data-feed__contact {
        grid-template-columns: 1fr;
    }
    .data-feed__proof-row div {
        border-right: 0;
        border-bottom: 1px solid var(--v2-rule);
    }
    .data-feed__proof-row div:last-child {
        border-bottom: 0;
    }
    .data-feed__contact-actions {
        min-width: 0;
        align-items: stretch;
    }
}

/* ============================================================
   /api page
   ============================================================ */
.api-page {
    max-width: 1080px;
    margin: 0 auto;
}
.api-page__masthead {
    padding: 1rem 0 2rem;
    border-bottom: 1px solid var(--v2-rule);
}
.api-page__headline {
    font-family: var(--font-heading);
    font-size: var(--route-title-size);
    font-weight: var(--route-title-weight);
    line-height: var(--route-title-line);
    margin: 0.35rem 0 1rem;
    color: var(--v2-ink);
    max-width: 960px;
}
.api-page__lede {
    font-size: var(--route-lede-size);
    line-height: var(--route-lede-line);
    color: var(--color-text-secondary);
    max-width: 74ch;
}
.api-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.4rem;
}
.api-page__proof-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 1.75rem 0 3rem;
    border: 1px solid var(--v2-rule);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-card);
}
.api-page__proof-row div {
    padding: 1rem 1.1rem;
    border-right: 1px solid var(--v2-rule);
}
.api-page__proof-row div:last-child {
    border-right: 0;
}
.api-page__proof-row strong {
    display: block;
    color: var(--color-text);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    line-height: 1.1;
    margin-bottom: 0.4rem;
}
.api-page__proof-row span {
    color: var(--v2-ink-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}
.api-page__section {
    margin-top: 3.25rem;
}
.api-page__section-head {
    max-width: 840px;
}
.api-page__section-head h2,
.api-page__auth-grid h2,
.api-page__formats h2 {
    font-size: var(--route-section-title-size);
    line-height: 1.18;
    font-weight: var(--route-title-weight);
    margin: 0.35rem 0 0.75rem;
    color: var(--color-text);
}
.api-page__section-head p,
.api-page__auth-grid p,
.api-page__formats p {
    color: var(--v2-ink);
    line-height: 1.65;
    margin: 0;
}
.api-page code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--color-text);
    background: #f3f4f6;
    border: 1px solid var(--v2-rule);
    border-radius: 4px;
    padding: 0.08rem 0.28rem;
}
.api-page__steps {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    counter-reset: api-step;
}
.api-page__steps li {
    counter-increment: api-step;
    border: 1px solid var(--v2-rule);
    border-radius: 8px;
    background: var(--color-bg-card);
    padding: 1rem 1.1rem;
    position: relative;
}
.api-page__steps li::before {
    content: counter(api-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.86rem;
    margin-bottom: 0.7rem;
}
.api-page__steps strong {
    display: block;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}
.api-page__steps span {
    display: block;
    color: var(--v2-ink-muted);
    line-height: 1.5;
    font-size: 0.94rem;
}
.api-page__auth-grid,
.api-page__formats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.74fr);
    gap: 1.25rem;
    align-items: start;
}
.api-page__code {
    margin: 0;
    background: #111827;
    color: #f9fafb;
    border-radius: 8px;
    padding: 1.1rem;
    overflow-x: auto;
    line-height: 1.55;
    font-size: 0.9rem;
}
.api-page__code code {
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
}
.api-page__capabilities,
.api-page__plans {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}
.api-page__capabilities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.api-page__plans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.api-page__capabilities article,
.api-page__plan {
    border: 1px solid var(--v2-rule);
    border-radius: 8px;
    background: var(--color-bg-card);
    padding: 1.15rem 1.2rem;
}
.api-page__capabilities h3,
.api-page__plan h3 {
    font-size: 1.08rem;
    line-height: 1.25;
    font-weight: 650;
    margin: 0 0 0.45rem;
    color: var(--color-text);
}
.api-page__capabilities p,
.api-page__plan p {
    font-size: 0.94rem;
    line-height: 1.58;
    margin: 0;
    color: var(--v2-ink);
}
.api-page__plan {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.api-page__plan--highlight {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px rgba(36, 108, 173, 0.1);
}
.api-page__plan--current {
    border-color: #111827;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.12);
}
.api-page__plan-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}
.api-page__plan-topline h3 {
    margin: 0;
}
.api-page__plan-topline span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 999px;
    background: var(--color-bg-secondary);
    color: var(--v2-ink-muted);
    font-size: 0.72rem;
    font-weight: 650;
    padding: 0.18rem 0.5rem;
}
.api-page__plan-topline span.api-page__plan-badge--current {
    background: #111827;
    color: #fff;
}
.api-page__plan-topline span.api-page__plan-badge--upgrade {
    background: #f3f4f6;
    color: var(--color-text);
}
.api-page__plan-topline span.api-page__plan-badge--included {
    background: #f8fafc;
    color: var(--v2-ink-muted);
}
.api-page__plan-price {
    font-size: clamp(1.25rem, 2.4vw, 1.75rem) !important;
    font-weight: 750;
    color: var(--color-text) !important;
    margin: 0.35rem 0 0.45rem !important;
}
.api-page__plan-fit {
    color: var(--v2-ink-muted) !important;
    min-height: 4.45rem;
}
.api-page__plan-state {
    margin: 0.75rem 0 0 !important;
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
    background: #f8fafc;
    color: var(--v2-ink-muted) !important;
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
}
.api-page__plan-state--current {
    background: #f3f4f6;
    color: var(--color-text) !important;
}
.api-page__plan-state--upgrade {
    background: var(--color-bg-card);
    border: 1px solid var(--v2-rule);
    color: var(--color-text) !important;
}
.api-page__plan-entitlements {
    display: grid;
    gap: 0.55rem;
    margin: 0.9rem 0 0;
    padding: 0.8rem 0;
    border-top: 1px solid var(--v2-rule);
    border-bottom: 1px solid var(--v2-rule);
}
.api-page__plan-entitlements p {
    margin: 0 !important;
}
.api-page__plan-entitlements strong {
    display: block;
    color: var(--color-text);
    font-size: 0.78rem;
    margin-bottom: 0.12rem;
}
.api-page__plan-entitlements span {
    display: block;
    color: var(--v2-ink-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}
.api-page__plan ul {
    margin: 1rem 0 1.15rem;
    padding-left: 1.1rem;
    color: var(--v2-ink);
    line-height: 1.5;
    font-size: 0.92rem;
}
.api-page__plan li {
    margin-bottom: 0.4rem;
}
.api-page__plan-actions {
    margin-top: auto;
    display: grid;
    gap: 0.5rem;
}
.api-page__checkout-form {
    margin: 0;
}
.api-page__plan .btn,
.api-page__checkout-form .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}
.api-page__checkout-form .btn {
    cursor: pointer;
}
.api-page__pricing-note {
    color: var(--v2-ink-muted);
    line-height: 1.55;
    margin: 1rem 0 0;
    max-width: 78ch;
    font-size: 0.94rem;
}
.api-page__notice {
    margin: 1.25rem 0 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--v2-rule);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-bg-card);
    color: var(--v2-ink);
    line-height: 1.55;
}
.api-page__notice--success {
    border-left-color: var(--color-accent);
    background: var(--color-accent-light);
}
.api-page__current-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.api-page__current-plan div {
    display: grid;
    gap: 0.2rem;
}
.api-page__current-plan span {
    color: var(--v2-ink-muted);
    font-size: 0.92rem;
}
.pricing-page__plans {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.api-page__formats ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}
.api-page__formats li {
    border: 1px solid var(--v2-rule);
    border-radius: 8px;
    background: var(--color-bg-card);
    padding: 0.9rem 1rem;
}
.api-page__formats strong {
    display: block;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}
.api-page__formats span {
    display: block;
    color: var(--v2-ink-muted);
    line-height: 1.5;
    font-size: 0.92rem;
}
.api-page__contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: end;
    margin-top: 3.25rem;
    padding: 1.5rem;
    background: var(--v2-surface-warm);
    color: var(--v2-ink);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
}
.api-page__contact h2 {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 700;
    margin: 0.35rem 0 0.65rem;
    color: var(--color-text);
}
.api-page__contact p {
    line-height: 1.62;
    margin: 0.5rem 0;
    color: var(--v2-ink);
    max-width: 76ch;
}
.api-page__contact-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 14rem;
}
.api-page__contact-actions .btn {
    text-align: center;
}

@media (max-width: 980px) {
    .api-page__plans,
    .pricing-page__plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .api-page__plan-fit {
        min-height: 0;
    }
}
@media (max-width: 840px) {
    .api-page__proof-row,
    .api-page__steps,
    .api-page__auth-grid,
    .api-page__capabilities,
    .api-page__formats,
    .api-page__contact {
        grid-template-columns: 1fr;
    }
    .api-page__proof-row div {
        border-right: 0;
        border-bottom: 1px solid var(--v2-rule);
    }
    .api-page__proof-row div:last-child {
        border-bottom: 0;
    }
    .api-page__contact-actions {
        min-width: 0;
        align-items: stretch;
    }
}
@media (max-width: 560px) {
    .api-page__plans,
    .pricing-page__plans {
        grid-template-columns: 1fr;
    }
    .api-page__code {
        font-size: 0.8rem;
    }
}

/* ============================================================
   Beat subscriptions: Save-this-beat on Newsroom Desk + /my/beats
   ============================================================ */
.newsroom__beat-row {
    margin-top: 0.5rem; padding-top: 0.6rem;
    border-top: 1px dashed var(--v2-rule);
}
.newsroom__beat-form { display: inline-flex; align-items: center; gap: 0.5rem; }
.newsroom__beat-save { font-size: 0.85rem; padding: 0.32rem 0.85rem; }
.newsroom__beat-link { font-size: 0.85rem; }

.my-beats__list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.85rem; }
.my-beats__row {
    border: 1px solid var(--v2-rule); border-radius: 6px;
    padding: 0.85rem 1rem; background: var(--color-bg-card);
}
.my-beats__row-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.my-beats__row-title {
    font-size: 1.05rem; font-weight: 600; color: var(--v2-ink);
    text-decoration: none;
}
.my-beats__row-title:hover { text-decoration: underline; }
.my-beats__chips { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; }
.my-beats__chip-group { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.my-beats__chip-label {
    font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
    min-width: 4.5rem;
}
.my-beats__meta { font-size: 0.85rem; margin: 0.6rem 0 0; }
.my-beats__row-actions {
    display: flex; gap: 1.25rem; flex-wrap: wrap;
    margin-top: 0.75rem; padding-top: 0.55rem;
    border-top: 1px solid var(--v2-rule);
    font-size: 0.9rem;
}
.my-beats__row-actions .link-button {
    color: #c33; background: none; border: none;
    cursor: pointer; padding: 0; font: inherit;
    text-decoration: underline;
}
.my-beats__phaseb { margin-top: 2rem; }


/* ─── Global print chrome strip ─────────────────────────────────────────
   Applies to every printable surface (source-pack, weekly-brief, anything
   else added later). Strips the MainLayout header/footer/nav so the
   printed page is just the content. Per-section @media print blocks above
   keep their own section-specific rules (page-break, max-width, etc.) and
   don't repeat this strip.

   Dossier print (around line 2572) uses a stricter `body * { visibility: hidden }`
   isolation strategy and doesn't conflict - this rule is additive. */
@media print {
    body > header, body > footer, .header-nav, .header-right { display: none !important; }
}

/* ─── /stats - Palantir-style mission-control console ────────────────────────
   Full-viewport-width dark theme. Escapes MainLayout's centered content box
   so the page reads as "operator console" rather than "marketing site".
   Map is the centerpiece; data panels hug it on left, right, and below.
   Design language: sharp 1px borders (no rounded corners on most chrome),
   tabular-nums monospace for numbers, ALL-CAPS labels with letter-spacing,
   cyan accent (#67e8f9), zero drop shadows. Hovers shift border color, not
   elevation. Everything is information density first, aesthetics second
   (which is itself the aesthetic).

   Color tokens (kept inline so they're trivially audit-able):
     bg          #06090f   page background, near-black with a hint of blue
     panel       #0b111d   panel surface
     border      #1f2937   panel borders, 1px sharp
     accent      #67e8f9   cyan - LIVE, active links, hot accents
     accent-2    #22d3ee   cyan-hover
     amber       #fbbf24   "soon" badge
     ink         #e2e8f0   primary body text
     ink-mute    #94a3b8   secondary text
     ink-dim     #64748b   labels, axis text
     green       #34d399   "live" pulse + passed-outcome bar segment
     consent     #818cf8   consent-outcome segment
     fail        #f87171   failed-outcome segment
*/
.nerds-page {
    /* ── Themed chrome tokens ─────────────────────────────────────────
       Light defaults reuse the global tokens so the page feels like part
       of the site. Dark overrides (further down) restore the bespoke
       terminal palette - bright cyan accents on near-black panels.
       Semantic outcome colors (pass/consent/fail) stay hardcoded in
       the rules; they're data encoding, not chrome. */
    --nerds-bg:           var(--color-bg);
    --nerds-bg-panel:     var(--color-bg-card);
    --nerds-bg-map:       var(--color-bg-secondary);
    --nerds-border:       var(--color-border);
    --nerds-sep:          var(--color-border-light);
    --nerds-text:         var(--color-text);
    --nerds-text-bright:  var(--color-text);
    --nerds-text-soft:    var(--color-text);
    --nerds-text-mute:    var(--color-text-secondary);
    --nerds-text-dim:     var(--color-text-muted);
    --nerds-text-dimmer:  var(--color-text-muted);
    --nerds-accent:       #0e7490;  /* cyan-700 - reads on white */
    --nerds-accent-2:     #0891b2;  /* cyan-600 - hover */
    --nerds-warn:         #b45309;  /* amber-700 - reads on white */

    /* Break out of MainLayout's centered content container. The article
       paints the full viewport background and supplies its own padding. */
    max-width: none !important;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 1.25rem clamp(1rem, 3vw, 2.25rem) 4rem;
    background: var(--nerds-bg);
    color: var(--nerds-text);
    font-family: var(--font-sans);
    min-height: 100vh;
    box-sizing: border-box;
}

/* TOP BAR - thin tracker strip with breadcrumb + live status */
.nerds-topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0; margin-bottom: 1rem;
    border-bottom: 1px solid var(--nerds-border);
    font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--nerds-text-dim);
}
.nerds-topbar__left a { color: var(--nerds-text-mute); text-decoration: none; }
.nerds-topbar__left a:hover { color: var(--nerds-accent); text-decoration: none; }
.nerds-topbar__sep { margin: 0 0.5rem; color: var(--nerds-sep); }
.nerds-topbar__node { color: var(--nerds-text); }
.nerds-topbar__right { display: flex; align-items: center; gap: 0.6rem; }
.nerds-topbar__pulse {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    animation: nerds-pulse 1.8s ease-out infinite;
}
@keyframes nerds-pulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.65); }
    70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.nerds-topbar__label { color: #34d399; font-weight: 600; }

/* HERO */
.nerds-hero {
    padding: 1.5rem 0 1.75rem;
    border-bottom: 1px solid var(--nerds-border);
}
.nerds-hero__kicker {
    font-size: 0.7rem; letter-spacing: 0.22em; color: var(--nerds-accent);
    margin-bottom: 0.65rem; font-weight: 600;
}
.nerds-hero__shock {
    /* Pulled down 2026-05-23 from clamp(3.5..9rem). The original "shock"
       sizing was magazine-cover scale - appropriate for the bespoke /stats
       dark-terminal context but loud on /moments where it now lives.
       Calmer scale that still reads as the page's anchor numeral but
       leaves room for the headline below it. */
    font-size: clamp(2.25rem, 5.5vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--nerds-text-bright);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-heading);
    margin: 0 0 0.5rem;
}
.nerds-hero__label {
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    font-weight: 500;
    color: var(--nerds-text-soft);
    margin-bottom: 1.25rem;
    line-height: 1.3;
}
.nerds-hero__sub {
    max-width: 65ch;
    color: var(--nerds-text-mute);
    line-height: 1.55;
    font-size: 0.95rem;
    margin: 0;
}

/* COUNTERS chip strip - dense, single-row on desktop */
.nerds-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    background: var(--nerds-bg-panel);
    border: 1px solid var(--nerds-border);
    margin: 1.25rem 0 1.5rem;
}
.nerds-counters__cell {
    padding: 0.85rem 1rem;
    border-right: 1px solid var(--nerds-border);
    position: relative;
}
.nerds-counters__cell:last-child { border-right: none; }
.nerds-counters__num {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--nerds-text-bright);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.nerds-counters__lbl {
    font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--nerds-text-dim);
    margin-top: 0.35rem;
}
.nerds-counters__cell.is-dim { opacity: 0.45; }
.nerds-counters__soon {
    display: inline-block;
    font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--nerds-warn);
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 0.08rem 0.4rem;
    margin-top: 0.35rem;
    font-weight: 600;
}

/* PANEL - the reusable chrome */
.nerds-panel {
    background: var(--nerds-bg-panel);
    border: 1px solid var(--nerds-border);
    margin-bottom: 1rem;
}
.nerds-panel--map { padding: 0; overflow: hidden; }
.nerds-panel__head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--nerds-border);
    background: linear-gradient(180deg, rgba(31, 41, 55, 0.4) 0%, transparent 100%);
}
.nerds-panel__title {
    font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--nerds-accent); font-weight: 700;
}
.nerds-panel__sub {
    font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--nerds-text-dim);
}
.nerds-panel__head + * { padding: 1rem; }
.nerds-panel ul, .nerds-panel ol, .nerds-panel dl,
.nerds-panel .nerds-funnel,
.nerds-panel .nerds-table,
.nerds-panel .nerds-rank { padding: 1rem; margin: 0; }
.nerds-panel ul + table,
.nerds-panel .nerds-grid4 + ul,
.nerds-panel .nerds-grid4 + table,
.nerds-panel .nerds-table + .nerds-span-line,
.nerds-panel .nerds-outcome + h4 { padding-top: 0; }

.nerds-fullband { margin-bottom: 1rem; }

/* CONSOLE 3-column grid */
.nerds-console {
    display: grid;
    grid-template-columns: minmax(280px, 22%) 1fr minmax(280px, 22%);
    gap: 1rem;
    margin-bottom: 1rem;
}
.nerds-console__col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.nerds-console__col .nerds-panel { margin-bottom: 0; }
@media (max-width: 1100px) {
    .nerds-console { grid-template-columns: 1fr; }
}

/* RIGHT NOW stack */
.nerds-rn { padding: 0.5rem 0; }
.nerds-rn__row {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--nerds-border);
}
.nerds-rn__row:last-child { border-bottom: none; }
.nerds-rn__num {
    font-size: 1.75rem; font-weight: 700; line-height: 1;
    color: var(--nerds-text-bright);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.nerds-rn__lbl {
    font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--nerds-text-dim);
    margin-top: 0.3rem;
}

/* MAP centerpiece. Header gets a metric strip so "11,355 jurisdictions /
   63 states / 8,200 geocoded" reads as part of the map, not a separate
   counter row. */
.nerds-panel__head--stacked { padding: 0.65rem 1rem; display: block; }
.nerds-map-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.nerds-map-head__metrics { display: flex; gap: 1.5rem; }
.nerds-map-head__metric { display: flex; flex-direction: column; line-height: 1; }
.nerds-map-head__num {
    font-size: 1.25rem; font-weight: 700; color: var(--nerds-text-bright);
    font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.nerds-map-head__lbl {
    font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--nerds-text-dim);
    margin-top: 0.2rem;
}
.nerds-map {
    height: clamp(420px, 70vh, 720px);
    width: 100%;
    background: var(--nerds-bg-map);
    position: relative;
}
.nerds-map--placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--nerds-text-dimmer); font-size: 0.85rem;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.nerds-map__legend {
    padding: 0.6rem 1rem;
    font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--nerds-text-dim);
    border-top: 1px solid var(--nerds-border);
    display: flex; align-items: center; gap: 0.6rem;
    flex-wrap: wrap;
}
.nerds-map__legend a { color: var(--nerds-accent); text-decoration: none; }
.nerds-map__legend a:hover { text-decoration: underline; }
.nerds-map__dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--nerds-accent);
    box-shadow: 0 0 6px rgba(103, 232, 249, 0.8);
}
.nerds-map__sep { color: var(--nerds-sep); }
/* Leaflet popup re-skin for dark theme */
.nerds-page .leaflet-popup-content-wrapper {
    background: var(--nerds-bg-panel); color: var(--nerds-text); border-radius: 4px;
    border: 1px solid var(--nerds-border);
}
.nerds-page .leaflet-popup-tip { background: var(--nerds-bg-panel); }
.nerds-page .leaflet-popup-content a { color: var(--nerds-accent); }
/* Cluster bubble for nerds-console */
.nerd-cluster-wrap { background: none; }
.nerd-cluster {
    border-radius: 50%;
    background: rgba(103, 232, 249, 0.18);
    border: 1px solid rgba(103, 232, 249, 0.55);
    color: var(--nerds-text-bright); font-weight: 600;
    text-align: center;
    font-size: 0.78rem;
    box-shadow: 0 0 12px rgba(103, 232, 249, 0.25);
    font-variant-numeric: tabular-nums;
}

/* TICKER (console log style) */
.nerds-ticker {
    list-style: none; padding: 0.5rem 0 !important; margin: 0;
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    max-height: 280px; overflow-y: auto;
}
.nerds-ticker__row {
    padding: 0.3rem 1rem;
    border-bottom: 1px solid rgba(31, 41, 55, 0.5);
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0.5rem;
    align-items: baseline;
    line-height: 1.4;
}
.nerds-ticker__row:last-child { border-bottom: none; }
.nerds-ticker__time { color: var(--nerds-text-dimmer); font-size: 0.7rem; }
.nerds-ticker__place {
    color: var(--nerds-accent); text-decoration: none; font-weight: 600;
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nerds-ticker__place:hover { text-decoration: underline; }
.nerds-ticker__title {
    color: var(--nerds-text-mute);
    grid-column: 2; font-size: 0.7rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: block;
}

/* CIVIC PULSE stories */
.nerds-stories { list-style: none; padding: 0.25rem 0 !important; margin: 0; }
.nerds-stories__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(31, 41, 55, 0.5);
    text-decoration: none;
    color: var(--nerds-text-soft);
    align-items: center;
    font-size: 0.78rem;
    line-height: 1.45;
    transition: background 0.12s ease, color 0.12s ease;
}
.nerds-stories li:last-child .nerds-stories__row { border-bottom: none; }
.nerds-stories__row:hover {
    background: rgba(103, 232, 249, 0.05);
    color: var(--nerds-text);
    text-decoration: none;
}
.nerds-stories__arrow { color: var(--nerds-accent); font-weight: 700; }

/* TOP TAGS list */
.nerds-tags { list-style: none; padding: 0.25rem 0 !important; margin: 0; }
.nerds-tags__row {
    display: grid; grid-template-columns: 1fr auto; gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(31, 41, 55, 0.5);
    text-decoration: none;
    color: var(--nerds-text-soft);
    align-items: center;
    font-size: 0.78rem;
    transition: background 0.12s ease;
}
.nerds-tags li:last-child .nerds-tags__row { border-bottom: none; }
.nerds-tags__row:hover { background: rgba(103, 232, 249, 0.05); text-decoration: none; }
.nerds-tags__name { color: var(--nerds-text); font-weight: 500; }
.nerds-tags__spread {
    display: flex; gap: 0.6rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem; color: var(--nerds-text-dim);
    font-variant-numeric: tabular-nums;
}
.nerds-tags__spread strong { color: var(--nerds-accent); font-weight: 600; margin-right: 1px; }

/* FRESHNESS RADAR */
.nerds-fresh {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--nerds-border);
}
.nerds-fresh__stat {
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--nerds-border);
}
.nerds-fresh__stat:last-child { border-right: none; }
.nerds-fresh__num {
    font-size: 2rem; font-weight: 700; line-height: 1; color: var(--nerds-text-bright);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.nerds-fresh__lbl {
    font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--nerds-text-dim);
    margin-top: 0.35rem;
}
.nerds-meeting-refs { padding: 0 !important; margin: 0; }
.nerds-meeting-refs__row {
    display: grid; grid-template-columns: 180px 1fr;
    gap: 1rem;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid rgba(31, 41, 55, 0.5);
    font-size: 0.85rem;
}
.nerds-meeting-refs__row:last-child { border-bottom: none; }
.nerds-meeting-refs dt {
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--nerds-text-dim); font-weight: 600;
}
.nerds-meeting-refs dd { margin: 0; color: var(--nerds-text-soft); }
.nerds-meeting-refs dd a { color: var(--nerds-accent); }
.nerds-meeting-refs dd a:hover { color: var(--nerds-accent-2); }

/* PIPELINE FUNNEL - horizontal bars, log-scaled */
.nerds-funnel { list-style: none; }
.nerds-funnel__row {
    display: grid;
    grid-template-columns: 280px 1fr 180px;
    gap: 1rem; align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(31, 41, 55, 0.5);
}
.nerds-funnel__row:last-child { border-bottom: none; }
.nerds-funnel__name {
    font-size: 0.82rem;
    color: var(--nerds-text-soft);
}
.nerds-funnel__row.is-dim .nerds-funnel__name { color: var(--nerds-text-dim); }
.nerds-funnel__track {
    background: rgba(31, 41, 55, 0.5);
    height: 10px;
    overflow: hidden;
    position: relative;
}
.nerds-funnel__bar {
    height: 100%;
    background: linear-gradient(90deg, #0891b2 0%, var(--nerds-accent) 100%);
    box-shadow: 0 0 8px rgba(103, 232, 249, 0.4);
    transition: width 600ms ease;
}
.nerds-funnel__row.is-dim .nerds-funnel__bar {
    background: linear-gradient(90deg, var(--nerds-text-dimmer), var(--nerds-text-mute));
    box-shadow: none;
}
.nerds-funnel__count {
    text-align: right;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nerds-text-bright);
    font-variant-numeric: tabular-nums;
}
.nerds-funnel__row.is-dim .nerds-funnel__count { color: var(--nerds-text-dim); font-weight: 400; }
.nerds-soon {
    display: inline-block;
    font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--nerds-warn);
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 0.05rem 0.4rem;
    margin-left: 0.4rem;
    vertical-align: middle;
    font-weight: 600;
}
@media (max-width: 720px) {
    .nerds-funnel__row { grid-template-columns: 1fr; gap: 0.2rem; }
    .nerds-funnel__count { text-align: left; }
}

/* Row 2: SEARCH + PEOPLE&VOTES side-by-side */
.nerds-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.nerds-row2 .nerds-panel { margin-bottom: 0; }
@media (max-width: 980px) {
    .nerds-row2 { grid-template-columns: 1fr; }
}

/* 4-tile grid inside panels */
.nerds-grid4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--nerds-border);
    padding: 0 !important;
}
.nerds-grid4--two { grid-template-columns: 1fr 1fr; }
.nerds-grid4--three { grid-template-columns: repeat(3, 1fr); }
.nerds-grid4__cell {
    padding: 0.85rem 1rem;
    border-right: 1px solid var(--nerds-border);
    border-bottom: 1px solid var(--nerds-border);
}
.nerds-grid4__cell:last-child { border-right: none; }
.nerds-grid4__cell.is-dim { opacity: 0.5; }
.nerds-grid4__num {
    font-size: 1.55rem; font-weight: 700; line-height: 1;
    color: var(--nerds-text-bright); font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.nerds-grid4__lbl {
    font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--nerds-text-dim);
    margin-top: 0.3rem;
}

/* TABLE (mime breakdown) */
.nerds-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.82rem;
}
.nerds-table th {
    text-align: left; padding: 0.5rem 1rem;
    font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--nerds-text-dim); font-weight: 600;
    border-bottom: 1px solid var(--nerds-border);
    background: rgba(31, 41, 55, 0.25);
}
.nerds-table td {
    padding: 0.45rem 1rem;
    border-bottom: 1px solid rgba(31, 41, 55, 0.4);
    color: var(--nerds-text-soft);
}
.nerds-table td.num, .nerds-table th.num {
    text-align: right; font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.nerds-table code {
    color: var(--nerds-accent);
    background: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
}
.nerds-span-line {
    margin: 0 !important;
    padding: 0.65rem 1rem !important;
    font-size: 0.78rem;
    color: var(--nerds-text-mute);
    background: rgba(103, 232, 249, 0.04);
    border-top: 1px solid var(--nerds-border);
    letter-spacing: 0.04em;
}
.nerds-span-line strong { color: var(--nerds-accent); font-weight: 600; }

/* OUTCOMES bar */
.nerds-outcome { padding: 1rem !important; border-bottom: 1px solid var(--nerds-border); }
.nerds-outcome__bar {
    display: flex;
    height: 12px;
    overflow: hidden;
    background: var(--nerds-border);
    margin-bottom: 0.75rem;
}
.nerds-outcome__seg { display: block; height: 100%; }
.nerds-outcome__seg--passed { background: #34d399; }
.nerds-outcome__seg--consent { background: #818cf8; }
.nerds-outcome__seg--failed { background: #f87171; }
.nerds-outcome__legend {
    list-style: none; padding: 0 !important; margin: 0;
    display: flex; flex-wrap: wrap; gap: 0.85rem;
    font-size: 0.78rem; color: var(--nerds-text-mute);
}
.nerds-outcome__legend strong {
    color: var(--nerds-text-bright); font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-right: 0.2rem;
}
.nerds-outcome__legend .dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 0.35rem; vertical-align: 1px;
}
.dot--passed { background: #34d399; }
.dot--consent { background: #818cf8; }
.dot--failed { background: #f87171; }
.dot--voted { background: var(--nerds-accent); }
.nerds-subhead {
    font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--nerds-accent);
    margin: 1rem 1rem 0.5rem !important;
    padding: 0 !important;
    font-weight: 700;
}
.nerds-rank { list-style: none; counter-reset: rank; }
.nerds-rank li {
    counter-increment: rank;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(31, 41, 55, 0.5);
    font-size: 0.82rem;
    align-items: baseline;
}
.nerds-rank li:last-child { border-bottom: none; }
.nerds-rank li::before {
    content: counter(rank);
    color: var(--nerds-text-dimmer);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.nerds-rank__name { color: var(--nerds-accent); text-decoration: none; font-weight: 600; }
.nerds-rank__name:hover { color: var(--nerds-accent-2); text-decoration: underline; }
.nerds-rank__place {
    color: var(--nerds-text-dim); font-size: 0.75rem;
    display: block;
    grid-column: 2;
    margin-top: 0.1rem;
}
.nerds-rank__num {
    grid-row: 1; grid-column: 3;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--nerds-text-bright); font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* WEIRD-BUT-TRUE */
.nerds-weird {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.6rem;
    padding: 1rem !important;
}
.nerds-weird__card {
    background: rgba(31, 41, 55, 0.25);
    border: 1px solid var(--nerds-border);
    border-left: 3px solid var(--nerds-accent);
    padding: 0.85rem 1rem;
}
.nerds-weird__lede {
    color: var(--nerds-text-bright); font-weight: 600;
    font-size: 0.92rem; line-height: 1.4;
    margin-bottom: 0.25rem;
}
.nerds-weird__detail {
    color: var(--nerds-text-mute); font-size: 0.8rem;
    line-height: 1.45;
}
.nerds-weird__link {
    display: inline-block; margin-top: 0.4rem;
    font-size: 0.65rem; letter-spacing: 0.12em;
    color: var(--nerds-accent); text-decoration: none;
    font-weight: 700;
}
.nerds-weird__link:hover { color: var(--nerds-accent-2); text-decoration: underline; }

/* TRY IT */
.nerds-try { background: var(--nerds-bg-panel); border: 1px solid var(--nerds-border); }
.nerds-try__form {
    display: flex; gap: 0.5rem; padding: 1rem !important;
    border-bottom: 1px solid var(--nerds-border);
}
.nerds-try__input {
    flex: 1;
    background: var(--nerds-bg);
    color: var(--nerds-text-bright);
    border: 1px solid var(--nerds-border);
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    font-family: inherit;
}
.nerds-try__input::placeholder { color: var(--nerds-text-dimmer); }
.nerds-try__input:focus {
    outline: none;
    border-color: var(--nerds-accent);
    box-shadow: 0 0 0 1px var(--nerds-accent);
}
.nerds-try__btn {
    padding: 0.85rem 1.4rem;
    background: var(--nerds-accent);
    color: var(--nerds-bg);
    border: 1px solid var(--nerds-accent);
    font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s ease;
}
.nerds-try__btn:hover { background: var(--nerds-accent-2); border-color: var(--nerds-accent-2); }
.nerds-try__examples {
    padding: 0.85rem 1rem 1rem !important;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.nerds-try__chip {
    background: rgba(103, 232, 249, 0.04);
    border: 1px solid var(--nerds-border);
    color: var(--nerds-text-mute);
    padding: 0.45rem 0.8rem;
    font-size: 0.78rem;
    text-decoration: none;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
    display: inline-flex; flex-direction: column; gap: 0.15rem;
    line-height: 1.25;
}
.nerds-try__chip-label { color: var(--nerds-text-soft); font-weight: 500; }
.nerds-try__chip-stat {
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    color: var(--nerds-text-dim);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.nerds-try__chip:hover {
    border-color: var(--nerds-accent); text-decoration: none;
    background: rgba(103, 232, 249, 0.1);
}
.nerds-try__chip:hover .nerds-try__chip-label { color: var(--nerds-text-bright); }
.nerds-try__chip:hover .nerds-try__chip-stat { color: var(--nerds-text-mute); }

/* FOOTER */
.nerds-footer {
    margin-top: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--nerds-border);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--nerds-text-dimmer);
    flex-wrap: wrap; gap: 0.5rem;
}
.nerds-footer a { color: var(--nerds-accent); text-decoration: none; }
.nerds-footer a:hover { text-decoration: underline; color: var(--nerds-accent-2); }
.nerds-footer strong { color: var(--nerds-text-soft); font-weight: 500; }
.nerds-footer__sep { color: var(--nerds-border); margin: 0 0.4rem; }

/* Featured chip on /stats Try-It - the canonical "mayor lone dissent" CTA
   that routes to /moments. Carries the cyan accent border + slightly larger
   type so it visually anchors above the generic topic chips below it. */
.nerds-try__chip--feature {
    border: 1px solid var(--nerds-accent) !important;
    background: rgba(103, 232, 249, 0.08) !important;
    padding: 0.6rem 1rem !important;
    flex-basis: 100%;
}
.nerds-try__chip--feature .nerds-try__chip-label {
    color: var(--nerds-text-bright) !important;
    font-weight: 600;
    font-size: 0.92rem;
}
.nerds-try__chip--feature .nerds-try__chip-stat {
    color: var(--nerds-accent) !important;
}

/* Subhead used in moments hero when filter is text-heavy (replaces the
   numeric shock with a phrase). */
.nerds-hero__shock--text {
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: 0;
}

/* ─── /moments feed page ─────────────────────────────────────────────────
   Reuses the .nerds-page / .nerds-panel / .nerds-topbar chrome from /stats
   (same Palantir aesthetic) and adds feed-specific row + filter styles.
   Mayor rows get a subtle highlight so the canonical "mayor as lone dissent"
   rows stand out without ruining the scannable rhythm.
*/
.moments-filter { padding: 1rem !important; display: flex; flex-direction: column; gap: 0.75rem; }
.moments-filter__group { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.moments-filter__lbl {
    font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--nerds-text-dim); font-weight: 600;
    margin-right: 0.5rem; min-width: 50px;
}
.moments-filter__chip {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--nerds-border);
    background: rgba(31, 41, 55, 0.3);
    color: var(--nerds-text-mute);
    font-size: 0.75rem;
    text-decoration: none;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.moments-filter__chip:hover {
    border-color: var(--nerds-accent);
    color: var(--nerds-text-bright);
    background: rgba(103, 232, 249, 0.08);
    text-decoration: none;
}
.moments-filter__chip.is-active {
    border-color: var(--nerds-accent);
    background: rgba(103, 232, 249, 0.15);
    color: var(--nerds-text-bright);
    font-weight: 600;
}

.moments-feed {
    list-style: none; padding: 0; margin: 0 0 1rem;
    background: var(--nerds-bg-panel);
    border: 1px solid var(--nerds-border);
}
.moments-feed__row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--nerds-border);
    transition: background 0.12s ease;
}
.moments-feed__row:last-child { border-bottom: none; }
.moments-feed__row:hover { background: rgba(103, 232, 249, 0.03); }
.moments-feed__row--mayor {
    border-left: 3px solid var(--nerds-accent);
    padding-left: calc(1.25rem - 3px);
    background: rgba(103, 232, 249, 0.025);
}
.moments-feed__date {
    color: var(--nerds-text-dim); font-size: 0.78rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    padding-top: 0.1rem;
}
.moments-feed__body { min-width: 0; }
.moments-feed__head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; margin-bottom: 0.25rem;
    flex-wrap: wrap;
}
.moments-feed__place { font-size: 0.85rem; color: var(--nerds-text-soft); }
.moments-feed__place a { color: var(--nerds-accent); text-decoration: none; font-weight: 600; }
.moments-feed__place a:hover { text-decoration: underline; }
.moments-feed__state { color: var(--nerds-text-dim); }
.moments-feed__tally {
    font-size: 0.78rem; color: var(--nerds-text-mute);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.moments-feed__tally strong { color: var(--nerds-text-bright); }
.moments-feed__against { color: #f87171 !important; }
.moments-feed__title {
    color: var(--nerds-text-bright);
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0.25rem 0 0.4rem;
}
.moments-feed__foot {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem;
    font-size: 0.78rem; color: var(--nerds-text-mute);
    flex-wrap: wrap;
}
.moments-feed__person a { color: var(--nerds-text-soft); text-decoration: none; font-weight: 500; }
.moments-feed__person a:hover { color: var(--nerds-accent); text-decoration: underline; }
.moments-feed__role {
    display: inline-block;
    margin: 0 0.35rem;
    padding: 0.05rem 0.45rem;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: var(--nerds-text-soft);
    font-size: 0.65rem; letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}
.moments-feed__role--mayor {
    background: rgba(103, 232, 249, 0.14);
    border-color: rgba(103, 232, 249, 0.45);
    color: var(--nerds-accent);
}
.moments-feed__link {
    color: var(--nerds-accent);
    text-decoration: none;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    white-space: nowrap;
}
.moments-feed__link:hover { color: var(--nerds-accent-2); text-decoration: underline; }

.moments-more { padding: 1.25rem 0; text-align: center; }
.moments-more__btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    background: rgba(103, 232, 249, 0.08);
    border: 1px solid var(--nerds-accent);
    color: var(--nerds-accent);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: background 0.12s ease;
}
.moments-more__btn:hover {
    background: rgba(103, 232, 249, 0.2);
    color: var(--nerds-text-bright);
    text-decoration: none;
}

.moments-empty { padding: 2rem 1.5rem !important; color: var(--nerds-text-mute); text-align: center; }
.moments-empty p { margin: 0; }

@media (max-width: 720px) {
    .moments-feed__row { grid-template-columns: 1fr; }
    .moments-feed__date { padding-top: 0; font-size: 0.7rem; }
}

/* ── Dark mode for /stats and /moments ───────────────────────────────────
   Restores the bespoke terminal palette: bright cyan accents (#67e8f9),
   near-black panels (#06090f / #0b111d), slate borders. Triggers match
   tokens.css: OS-dark unless user explicitly chose light, OR explicit
   data-theme="dark". Both blocks duplicate the same overrides since
   the @media query and the attribute selector can't be combined inline. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nerds-page {
        --nerds-bg:           #06090f;
        --nerds-bg-panel:     #0b111d;
        --nerds-bg-map:       #0a0f1a;
        --nerds-border:       #1f2937;
        --nerds-sep:          #334155;
        --nerds-text:         #e2e8f0;
        --nerds-text-bright:  #f8fafc;
        --nerds-text-soft:    #cbd5e1;
        --nerds-text-mute:    #94a3b8;
        --nerds-text-dim:     #64748b;
        --nerds-text-dimmer:  #475569;
        --nerds-accent:       #67e8f9;
        --nerds-accent-2:     #22d3ee;
        --nerds-warn:         #fbbf24;
    }
}
:root[data-theme="dark"] .nerds-page {
    --nerds-bg:           #06090f;
    --nerds-bg-panel:     #0b111d;
    --nerds-bg-map:       #0a0f1a;
    --nerds-border:       #1f2937;
    --nerds-sep:          #334155;
    --nerds-text:         #e2e8f0;
    --nerds-text-bright:  #f8fafc;
    --nerds-text-soft:    #cbd5e1;
    --nerds-text-mute:    #94a3b8;
    --nerds-text-dim:     #64748b;
    --nerds-text-dimmer:  #475569;
    --nerds-accent:       #67e8f9;
    --nerds-accent-2:     #22d3ee;
    --nerds-warn:         #fbbf24;
}

/* ============================================================
   Unified route heading typography
   ============================================================ */
.site-main :is(h1, h2, h3, h4, h5, h6),
:where(
    .activity-feed__headline,
    .nerds-hero__shock,
    .compare-card__city,
    .ripple-summary__headline
) {
    font-family: var(--font-heading);
    letter-spacing: 0;
}

/* ============================================================
   SaveButton  (Components/Shared/SaveButton.razor)
   ------------------------------------------------------------
   Shipped class-only with NO matching rule (feature was flagged
   off - "invisible until v1.1" per the component header); the
   flag went live and it rendered unstyled on all 8 detail pages
   that host it. NOT related to the M1 auth work - pre-existing.

   Deliberately a 1:1 visual MATCH of its literal sibling on the
   place-header row, .set-as-my-place (place-chooser.css): same
   sizing/tokens, the neutral outlined --btn treatment for
   unsaved/anon, and the same green "active/pinned" treatment
   .set-as-my-place--current uses for the saved state. Icon is a
   currentColor SVG, NOT an emoji - emoji bookmark/star drag in
   platform red/pink that fights the slate palette (the exact
   reason SetAsMyPlaceButton dropped its red 📍 for an SVG).
   Keep these values in lockstep with .set-as-my-place if that
   one ever changes.
   ============================================================ */
/* align-self: center so this matches its header-row sibling
   .set-as-my-place regardless of the row's `align-items: baseline`
   (form vs bare-element baseline synthesis differ - see the
   .set-as-my-place-form note in place-chooser.css). */
.save-button-form { margin: 0; display: inline-flex; align-self: center; }

.save-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-md);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}

.save-button__icon {
    display: inline-flex;
    align-items: center;
}

/* Not-yet-saved + anonymous "Sign in to save": identical to
   .set-as-my-place--btn (neutral border, white bg, primary text). */
.save-button--unsaved,
.save-button--anon {
    background: var(--color-bg-card);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}
.save-button--unsaved:hover,
.save-button--anon:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

/* Anon variant is a bare <a> (the flex item itself, not form-wrapped),
   so it needs align-self directly - the --saved/--unsaved states are
   inside .save-button-form which already carries it. */
.save-button--anon { align-self: center; }

/* Saved: the same "active/pinned" affordance as
   .set-as-my-place--current (green-tinted, settled - not a CTA). */
.save-button--saved {
    background: var(--color-accent-light);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.save-button:active { transform: scale(0.98); }

.save-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================================
   MySaved list  (Components/Pages/MySaved.razor)
   ------------------------------------------------------------
   Same pre-existing root cause as SaveButton: the Saved v1
   feature shipped class-only and these .my-saved__* rules were
   never authored. With no layout, Razor trims the whitespace
   around the skipped @if (place suffix) block, so the title
   and the "saved <date>" span rendered with NO separator
   ("Milwaukeesaved 2026-05-15"). flex + gap fixes the run-
   together regardless of source whitespace; the date is pushed
   to the row end. Authored 2026-05-15. Section chrome
   (.section / .section-title / .sec-count) is already styled.
   ============================================================ */
.my-saved__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.my-saved__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border-light);
}
.my-saved__row:last-child { border-bottom: 0; }

.my-saved__link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.my-saved__link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.my-saved__title {
    color: var(--color-text);
    font-weight: 600;
}

.my-saved__place { font-size: var(--text-sm); }

/* Pushed to the row end so it reads "Title .... saved 2026-05-15".
   .muted (already on the span) supplies the dimmed color. */
.my-saved__date {
    margin-left: auto;
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* ============================================================
   EventDetail action row + AI Summary panel
   ------------------------------------------------------------
   The Agenda/Minutes/Video pills (.meeting-artifacts), the
   Generate-AI-Summary CTA (AiBriefPanel), the optional Deep
   Analysis buttons, and Save used to stack on separate lines
   with Save floating mid-page. Wrap them in one flex row so
   they read as a single matched pill set. Inner pill gap
   (0.4rem) vs row gap (0.5rem) is imperceptible.
   ============================================================ */
.event-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.event-action-row .meeting-artifacts,
.event-action-row .save-button-form,
.event-action-row .ai-brief-panel { margin: 0; }
/* Expanded summary breaks to its own full-width line below the pills
   instead of stretching the row. */
.event-action-row .ai-brief-panel--open { flex: 1 1 100%; margin-top: 0.25rem; }

/* AI Summary panel - .ai-brief-panel* shipped class-only with no rule
   (same pre-existing bug as SaveButton / MySaved). The collapsed CTA is a
   .meeting-artifact pill (set in AiBriefPanel.razor); only the expanded
   panel needs styling - a light token card so the summary is readable. */
.ai-brief-panel--open {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    padding: 0.85rem 1rem;
}
.ai-brief-panel__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
}
.ai-brief-panel__body {
    color: var(--color-text);
    line-height: 1.6;
    white-space: pre-wrap;
}
.ai-brief-panel__body--loading,
.ai-brief-panel__body--empty { color: var(--color-text-muted); }

/* ── AI-operation wait overlay (wwwroot/js/ai-wait.js) ─────────────────────
   Shown over any <form data-ai-wait> while its SSR POST blocks server-side
   on a live LLM call (~15-30s). In v2.css on purpose: site.css class names
   are per-deploy obfuscated but the JS hard-codes these, so they must live
   in the non-obfuscated sheet. Self-contained keyframe (don't depend on
   site.css's serve-spin, which may be obfuscated). Palette-only - this is
   chrome, not file-type iconography, so the house palette rule applies. */
@keyframes ai-wait-spin { to { transform: rotate(360deg); } }
.ai-wait-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ai-wait-overlay[hidden] { display: none; }
.ai-wait__card {
    background: var(--color-bg-card); border-radius: 0.6rem; padding: 1.5rem 1.75rem;
    max-width: 23rem; margin: 1rem; text-align: center;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.28);
    display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
}
.ai-wait__spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--color-border, #e2e8f0);
    border-top-color: var(--color-primary, #246cad);
    animation: ai-wait-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .ai-wait__spinner { animation-duration: 2.4s; }
}
.ai-wait__msg {
    font-size: 0.95rem; font-weight: 600;
    color: var(--color-text, #1e293b); line-height: 1.45;
}
.ai-wait__sub {
    font-size: 0.8rem; color: var(--color-text-muted, #64748b);
}

/* ============================================================================
   /stats - light, in-fold. Replaces the retired dark nerds-* console block.
   Site tokens only; clickable elements use the global a{} primary rule (no
   per-element color overrides). KPI grids reuse the shared .stats-row /
   .stat-card from site.css; the classes below are layout-only supporting
   pieces (funnel bars, outcome bar, ranked lists, weird cards).
   ========================================================================== */
.stats-hero { margin: 1rem 0 2rem; }
.stats-hero__sub { max-width: 70ch; margin: .5rem 0 0; }

.stats-section { margin: 2.25rem 0; }
.stats-section__sub { margin: -.25rem 0 1rem; }
.stats-subhead {
    font-size: 1rem; font-weight: 600; color: var(--color-text);
    margin: 1.5rem 0 .65rem;
}

/* Auto-fit modifier on the shared 4-col .stats-row so a section with any
   number of cards stays even instead of leaving ragged trailing gaps. */
.stats-row--auto {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* Meeting reference rows (next up / furthest future / oldest indexed). */
.stats-refs { margin: 1.25rem 0 0; display: grid; gap: .5rem; }
.stats-refs__row {
    display: grid; grid-template-columns: 9rem 1fr; gap: .75rem;
    align-items: baseline;
    padding: .5rem 0; border-bottom: 1px solid var(--color-border-light);
}
.stats-refs dt {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-text-secondary); font-weight: 600;
}
.stats-refs dd { margin: 0; }

/* Generic linked list (ticker, stories, topics, busiest bodies, moments). */
.stats-list { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .15rem; }
.stats-list__row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
    padding: .5rem .25rem; border-bottom: 1px solid var(--color-border-light);
}
.stats-list--rank .stats-list__row { counter-increment: statsrank; }
.stats-list__meta {
    font-variant-numeric: tabular-nums; color: var(--color-text-muted);
    font-size: .8rem; min-width: 7rem;
}
/* Row-metric number: ONE consistent treatment across lists, the funnel,
   and tables (the recurring "some bold some not" inconsistency). 600,
   default ink, tabular - never the clickable primary color. */
.stats-list__num,
.stats-funnel__count,
.stats-table .num {
    font-weight: 600; color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.stats-list__num { margin-left: auto; }

/* Ingestion pipeline funnel - log-scaled bars. */
.stats-funnel { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.stats-funnel__row {
    display: grid; grid-template-columns: 15rem 1fr 7rem;
    align-items: center; gap: 1rem;
}
/* Names/labels are normal weight; the NUMBER carries the emphasis (600).
   Strict page scale: 400 body+names, 600 headings+metrics, 700 only the
   KPI .stat-card .value. Nothing else is bold. */
.stats-funnel__name { font-weight: 400; }
.stats-funnel__track {
    height: .65rem; background: var(--color-bg-secondary);
    border-radius: 999px; overflow: hidden;
}
.stats-funnel__bar {
    height: 100%; background: var(--color-primary);
    border-radius: 999px; transition: width .25s ease-out;
}
/* weight/color/tabular come from the shared row-metric rule above. */
.stats-funnel__count { text-align: right; }
.stats-funnel__row.is-dim { opacity: .55; }
.stats-funnel__row.is-dim .stats-funnel__bar { background: var(--color-bg-tertiary); }
.stats-soon {
    display: inline-block; margin-left: .4rem; font-size: .65rem;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
    color: var(--color-warning); background: var(--color-warning-light);
    padding: .1rem .35rem; border-radius: var(--radius-sm);
}

.stats-span-line { margin: 1rem 0; font-size: .95rem; }
/* Bold, NOT primary - static text never wears the clickable color. */
.stats-span-line strong { font-weight: 600; }

/* MIME breakdown table. */
.stats-table { width: 100%; border-collapse: collapse; margin: 1rem 0 0; font-size: .9rem; }
.stats-table th, .stats-table td {
    text-align: left; padding: .45rem .6rem;
    border-bottom: 1px solid var(--color-border-light);
}
.stats-table th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-text-secondary);
}
.stats-table .num { text-align: right; }
.stats-table code {
    font-family: var(--font-mono); font-size: .85em;
    background: var(--color-bg-secondary); padding: .1rem .35rem;
    border-radius: var(--radius-sm);
}

/* Vote-outcome stacked bar. */
.stats-outcome { margin: 1.25rem 0 0; }
.stats-outcome__bar {
    display: flex; height: .9rem; border-radius: 999px; overflow: hidden;
    background: var(--color-bg-secondary);
}
.stats-outcome__seg { display: block; height: 100%; }
.stats-outcome__seg--passed  { background: var(--color-accent); }
.stats-outcome__seg--consent { background: var(--color-primary); }
.stats-outcome__seg--failed  { background: var(--color-danger); }
.stats-outcome__legend {
    list-style: none; padding: 0; margin: .75rem 0 0;
    display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .9rem;
}
/* Legend counts are metric numbers -> 600, not the browser-default 700
   that <strong> gives (that was the visible "some bolder than others"). */
.stats-outcome__legend strong { font-weight: 600; }
.stats-outcome__legend .dot {
    display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
    margin-right: .4rem; vertical-align: baseline;
}
.dot--passed  { background: var(--color-accent); }
.dot--consent { background: var(--color-primary); }
.dot--failed  { background: var(--color-danger); }
.dot--voted   { background: var(--color-text-muted); }

/* Weird-but-true cards. */
.stats-weird {
    display: grid; gap: 1rem; margin: 1rem 0 0;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.stats-weird__card {
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 1.1rem 1.2rem;
}
.stats-weird__lede { font-weight: 600; margin-bottom: .35rem; }
.stats-weird__detail { font-size: .9rem; }
.stats-weird__link { display: inline-block; margin-top: .6rem; font-weight: 600; }

/* Distinct coverage-map call-to-action, first thing in Executive summary.
   It IS a link, so the global primary color is correct here. */
.stats-cta { margin: .35rem 0 1.25rem; font-weight: 600; font-size: 1.05rem; }

/* Interesting-moments cards: one block per kind, count + 2 examples. */
.stats-moments { display: grid; gap: 1.25rem; margin: 1rem 0 0; }
.stats-moment {
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-bg-card); padding: 1rem 1.15rem;
}
.stats-moment__head {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: .35rem 1rem; margin-bottom: .65rem;
}
.stats-moment__title { font-size: 1rem; font-weight: 600; margin: 0; }
.stats-moment__all { font-weight: 600; white-space: nowrap; }
.stats-moment__ex { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.stats-moment__ex > li {
    padding-bottom: .55rem; border-bottom: 1px solid var(--color-border-light);
}
.stats-moment__ex > li:last-child { border-bottom: 0; padding-bottom: 0; }
.stats-moment__ex-title { font-weight: 400; }
.stats-moment__ex-meta { font-size: .85rem; margin-top: .15rem; }


/*============================================================================
  DARK MODE OVERRIDES
  ============================================================================
  Catches surfaces that use HARDCODED color literals (#fff, #f8fafc, #0f172a,
  etc.) instead of var(--color-*) or var(--v2-*) tokens. Token-using surfaces
  flip automatically via tokens.css and the v2-token block at the top of this
  file - those don't need to appear here.

  IMPORTANT: the `.nerds-page` / `.stats-*` styles starting around line 4440
  are INTENTIONALLY DARK in both themes (data-vis page). They are NOT listed
  here on purpose - leave them alone.

  Strategy: one selector per common surface pattern. Both triggers (explicit
  data-theme="dark" AND OS-dark-unless-light-override) get the same rules.
  This is a first-pass: known remaining surfaces include some pastel chip
  backgrounds (success/warn/info badges) that look washed out on dark; we'll
  address those as users surface them rather than rewriting all 400+ literals
  pre-emptively.
============================================================================*/

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .__lgd-dark-marker { display: none; }
}

/* Helper: every selector below is duplicated for the two trigger paths.
   Listed as a single comma-separated selector group to keep the override
   table readable. If you add a new surface, add it to BOTH the media-query
   and the data-theme blocks. */

/* === Cards, panels, popovers - common surfaces using hardcoded #fff === */
:root[data-theme="dark"] .featured-topic,
:root[data-theme="dark"] .resultcard,
:root[data-theme="dark"] .compare-picker__row:hover,
:root[data-theme="dark"] .events-day-card,
:root[data-theme="dark"] .attach-card,
:root[data-theme="dark"] .attach-card--hit .attach-pill,
:root[data-theme="dark"] .ec-card,
:root[data-theme="dark"] .pick-card,
:root[data-theme="dark"] .scope-card,
:root[data-theme="dark"] .feed-card,
:root[data-theme="dark"] .feed__filter-bar,
:root[data-theme="dark"] .topic-card,
:root[data-theme="dark"] .topic-detail,
:root[data-theme="dark"] .topic-section,
:root[data-theme="dark"] .ripple-card,
:root[data-theme="dark"] .ripple-summary,
:root[data-theme="dark"] .crystal-card,
:root[data-theme="dark"] .crystal-factor,
:root[data-theme="dark"] .brief-shell,
:root[data-theme="dark"] .dossier-shell,
:root[data-theme="dark"] .compare-shell,
:root[data-theme="dark"] .newsroom-shell,
:root[data-theme="dark"] .askbox,
:root[data-theme="dark"] .askbox__panel,
:root[data-theme="dark"] .search-summary,
:root[data-theme="dark"] .auth-shell,
:root[data-theme="dark"] .auth-form,
:root[data-theme="dark"] .profile-shell,
:root[data-theme="dark"] .profile-section {
    background: var(--color-bg-card);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* === Pastel chip + code + mark + disabled-pill catch-all ===
   These elements use hardcoded light pastel backgrounds + dark text
   that the bulk text-color flip turned light, making them invisible
   in dark mode. Re-apply a tinted-dark bg with appropriate fg so they
   read as chips/highlights/code in both themes. */
:root[data-theme="dark"] code,
:root[data-theme="dark"] .resultcard__type,
:root[data-theme="dark"] .resultcard__outcome,
:root[data-theme="dark"] .gsearch__tab,
:root[data-theme="dark"] .gsearch__freshness,
:root[data-theme="dark"] .tag-chips-inline__chip,
:root[data-theme="dark"] .btn--disabled,
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .person-card,
:root[data-theme="dark"] .people-filter,
:root[data-theme="dark"] .api-page__plan,
:root[data-theme="dark"] .api-page__proof-row,
:root[data-theme="dark"] .for-newsrooms__card,
:root[data-theme="dark"] .about-signal-strip,
:root[data-theme="dark"] .about-proof-card,
:root[data-theme="dark"] .list-filters {
    background: var(--color-bg-secondary) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
/* mark = search highlight. Keep a yellow-ish bg signal (data encoding),
   pair with dark text so it pops as "this matched your query." Common
   pattern (Notion, Linear). */
:root[data-theme="dark"] mark {
    background: #fcd34d !important;
    color: #0f172a !important;
    padding: 0 0.15em;
    border-radius: 2px;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) code,
    :root:not([data-theme="light"]) .resultcard__type,
    :root:not([data-theme="light"]) .resultcard__outcome,
    :root:not([data-theme="light"]) .gsearch__tab,
    :root:not([data-theme="light"]) .gsearch__freshness,
    :root:not([data-theme="light"]) .tag-chips-inline__chip,
    :root:not([data-theme="light"]) .btn--disabled,
    :root:not([data-theme="light"]) .pill,
    :root:not([data-theme="light"]) .chip,
    :root:not([data-theme="light"]) .person-card,
    :root:not([data-theme="light"]) .people-filter,
    :root:not([data-theme="light"]) .api-page__plan,
    :root:not([data-theme="light"]) .api-page__proof-row,
    :root:not([data-theme="light"]) .for-newsrooms__card,
    :root:not([data-theme="light"]) .about-signal-strip,
    :root:not([data-theme="light"]) .about-proof-card,
    :root:not([data-theme="light"]) .list-filters {
        background: var(--color-bg-secondary) !important;
        color: var(--color-text) !important;
        border-color: var(--color-border) !important;
    }
    :root:not([data-theme="light"]) mark {
        background: #fcd34d !important;
        color: #0f172a !important;
        padding: 0 0.15em;
        border-radius: 2px;
    }
}

/* === Form inputs - light gray fill, dark text ===
   Inputs stay LIGHT GRAY in dark mode too. The reasoning: an input is
   where the user writes content, and the typed text needs to read like
   text-on-paper. Slate-200 background with slate-900 text gives the
   high-contrast "writing surface" feel against the dark page chrome -
   common modern-dark-UI pattern (Twitter compose, Linear's filters).
   The :root[data-theme="dark"] selector overrides --color-text inside
   these rules so the text stays dark even though the page text token
   is light. Placeholder also uses a darker muted slate. */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .search-input,
:root[data-theme="dark"] .search-input--hero {
    background: #e2e8f0 !important;     /* slate-200 - light gray writing surface */
    color: #0f172a !important;          /* slate-900 - dark text on light input */
    border-color: #475569 !important;   /* slate-600 - visible against panel chrome */
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-muted) !important;   /* slate-500 - readable muted on slate-200 */
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-muted);
}

/* === Soft-tinted panels (slate-50 / gray-100 / etc.) === */
:root[data-theme="dark"] .home-aside__card,
:root[data-theme="dark"] .module-card,
:root[data-theme="dark"] .summary-block,
:root[data-theme="dark"] .compare-side,
:root[data-theme="dark"] .timeline-row,
:root[data-theme="dark"] .meta-row {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* === Pastel semantic chip backgrounds (success/warn/info/danger) ===
   These are visible on most pages (status badges, action chips). Light
   pastels go washed-out on dark; flip to deep-tinted versions. Keeps
   the same hue family so the semantic association stays intact. */
:root[data-theme="dark"] [class*="--success"],
:root[data-theme="dark"] [class*="--pass"],
:root[data-theme="dark"] [class*="--adopted"],
:root[data-theme="dark"] [class*="--approved"] {
    background-color: #0e3a2a !important;
    color: #6ee7b7 !important;
}
:root[data-theme="dark"] [class*="--danger"],
:root[data-theme="dark"] [class*="--fail"],
:root[data-theme="dark"] [class*="--rejected"],
:root[data-theme="dark"] [class*="--vetoed"] {
    background-color: #3a1414 !important;
    color: #fca5a5 !important;
}
:root[data-theme="dark"] [class*="--warning"],
:root[data-theme="dark"] [class*="--warn"],
:root[data-theme="dark"] [class*="--pending"],
:root[data-theme="dark"] [class*="--tabled"] {
    background-color: #3a2c08 !important;
    color: #fcd34d !important;
}

/* Mirror the entire block for OS-dark users (no explicit override). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .featured-topic,
    :root:not([data-theme="light"]) .resultcard,
    :root:not([data-theme="light"]) .compare-picker__row:hover,
    :root:not([data-theme="light"]) .events-day-card,
    :root:not([data-theme="light"]) .attach-card,
    :root:not([data-theme="light"]) .attach-card--hit .attach-pill,
    :root:not([data-theme="light"]) .ec-card,
    :root:not([data-theme="light"]) .pick-card,
    :root:not([data-theme="light"]) .scope-card,
    :root:not([data-theme="light"]) .feed-card,
    :root:not([data-theme="light"]) .feed__filter-bar,
    :root:not([data-theme="light"]) .topic-card,
    :root:not([data-theme="light"]) .topic-detail,
    :root:not([data-theme="light"]) .topic-section,
    :root:not([data-theme="light"]) .ripple-card,
    :root:not([data-theme="light"]) .ripple-summary,
    :root:not([data-theme="light"]) .crystal-card,
    :root:not([data-theme="light"]) .crystal-factor,
    :root:not([data-theme="light"]) .brief-shell,
    :root:not([data-theme="light"]) .dossier-shell,
    :root:not([data-theme="light"]) .compare-shell,
    :root:not([data-theme="light"]) .newsroom-shell,
    :root:not([data-theme="light"]) .askbox,
    :root:not([data-theme="light"]) .askbox__panel,
    :root:not([data-theme="light"]) .search-summary,
    :root:not([data-theme="light"]) .auth-shell,
    :root:not([data-theme="light"]) .auth-form,
    :root:not([data-theme="light"]) .profile-shell,
    :root:not([data-theme="light"]) .profile-section {
        background: var(--color-bg-card);
        color: var(--color-text);
        border-color: var(--color-border);
    }
    :root:not([data-theme="light"]) input[type="text"],
    :root:not([data-theme="light"]) input[type="email"],
    :root:not([data-theme="light"]) input[type="password"],
    :root:not([data-theme="light"]) input[type="search"],
    :root:not([data-theme="light"]) input[type="number"],
    :root:not([data-theme="light"]) input[type="date"],
    :root:not([data-theme="light"]) input[type="url"],
    :root:not([data-theme="light"]) textarea,
    :root:not([data-theme="light"]) select,
    :root:not([data-theme="light"]) .search-input,
    :root:not([data-theme="light"]) .search-input--hero {
        background: #e2e8f0 !important;
        color: #0f172a !important;
        border-color: #475569 !important;
    }
    :root:not([data-theme="light"]) input::placeholder,
    :root:not([data-theme="light"]) textarea::placeholder {
        color: var(--color-text-muted) !important;
    }
    :root:not([data-theme="light"]) input::placeholder,
    :root:not([data-theme="light"]) textarea::placeholder {
        color: var(--color-text-muted);
    }
    :root:not([data-theme="light"]) .home-aside__card,
    :root:not([data-theme="light"]) .module-card,
    :root:not([data-theme="light"]) .summary-block,
    :root:not([data-theme="light"]) .compare-side,
    :root:not([data-theme="light"]) .timeline-row,
    :root:not([data-theme="light"]) .meta-row {
        background: var(--color-bg-secondary);
        color: var(--color-text);
        border-color: var(--color-border);
    }
    :root:not([data-theme="light"]) [class*="--success"],
    :root:not([data-theme="light"]) [class*="--pass"],
    :root:not([data-theme="light"]) [class*="--adopted"],
    :root:not([data-theme="light"]) [class*="--approved"] {
        background-color: #0e3a2a !important;
        color: #6ee7b7 !important;
    }
    :root:not([data-theme="light"]) [class*="--danger"],
    :root:not([data-theme="light"]) [class*="--fail"],
    :root:not([data-theme="light"]) [class*="--rejected"],
    :root:not([data-theme="light"]) [class*="--vetoed"] {
        background-color: #3a1414 !important;
        color: #fca5a5 !important;
    }
    :root:not([data-theme="light"]) [class*="--warning"],
    :root:not([data-theme="light"]) [class*="--warn"],
    :root:not([data-theme="light"]) [class*="--pending"],
    :root:not([data-theme="light"]) [class*="--tabled"] {
        background-color: #3a2c08 !important;
        color: #fcd34d !important;
    }
}