/* ── Base ── */

:root {
    --font-family: var(--md-ref-typeface-plain);
    --pico-font-family: var(--font-family);
    --pico-font-size: 15px;
}

body {
    font-family: var(--font-family);
    background: var(--surface-container-low);
    color: var(--on-surface);
}

/* ── Nav (legacy, kept for non-sidebar pages) ── */

.brand {
    color: inherit;
    text-decoration: none;
    font-size: 1.25rem;
}

.muted {
    color: var(--pico-muted-color);
}

/* ── Filter bar (M3 chips) ── */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

/* Visually separate filters from sort with explicit "FILTER" / "SORT" mini
   labels so users see two distinct groups, not one row of chips. */
.filter-bar::before {
    content: "Filter";
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin-right: 0.25rem;
    align-self: center;
}

.filter-bar > .filter-pill:has(select[name="sort"]) {
    /* Reserve room for: [gap] | [gap] SORT [gap] sort-chip
       Total ~72px (4rem margin + 0.5rem flex gap). */
    margin-left: 4rem;
    position: relative;
}

.filter-bar > .filter-pill:has(select[name="sort"])::before {
    content: "Sort";
    position: absolute;
    right: calc(100% + 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    white-space: nowrap;
    pointer-events: none;
}

/* Vertical divider between the filter chips and the SORT label. Use the
   higher-contrast `outline` (vs `outline-variant`) so the 1px line is
   actually visible against the surface in dark mode. */
.filter-bar > .filter-pill:has(select[name="sort"])::after {
    content: "";
    position: absolute;
    right: calc(100% + 3.5rem);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 65%;
    background: var(--outline);
    pointer-events: none;
}

@media (max-width: 480px) {
    .filter-bar::before {
        display: none;
    }
    .filter-bar > .filter-pill:has(select[name="sort"]) {
        margin-left: 0;
    }
    .filter-bar > .filter-pill:has(select[name="sort"])::before {
        display: none;
    }
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem 0.4rem 0.85rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--md-shape-corner-small);
    background: var(--surface);
    color: var(--on-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    height: 2.5rem;
}

.filter-pill:hover {
    background: color-mix(in srgb, var(--on-surface) 5%, var(--surface));
    border-color: var(--outline);
}

.filter-pill:focus-within {
    border-color: var(--primary);
    background: var(--surface);
}

.filter-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
    flex-shrink: 0;
    color: var(--on-surface-variant);
}

.filter-pill select {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    appearance: auto;
    color: inherit;
    min-width: 0;
    max-width: 180px;
}

.filter-pill select:focus {
    outline: none;
    box-shadow: none;
}

/* Locked market pill — non-superusers can't switch markets. The select is
   disabled (still readable, no caret/hover) and a small lock icon sits to
   the right so the locked state reads at a glance. */
.filter-pill-locked {
    cursor: not-allowed;
    background: var(--surface-container-low);
}

.filter-pill-locked:hover {
    background: var(--surface-container-low);
    border-color: var(--outline-variant);
}

.filter-pill-locked select {
    cursor: not-allowed;
    color: var(--on-surface-variant);
    appearance: none;
    padding-right: 0;
}

.filter-pill-locked select::-ms-expand {
    display: none;
}

.filter-lock-icon {
    font-size: 16px;
    color: var(--on-surface-variant);
    flex-shrink: 0;
}


/* Tom Select inside pills */
.filter-pill .ts-wrapper,
.feed-filter .ts-wrapper {
    min-width: 120px;
    max-width: 200px;
    font-size: 0.875rem;
}

.filter-pill .ts-wrapper .ts-control,
.feed-filter .ts-wrapper .ts-control {
    border: none;
    background: transparent;
    padding: 0 0.25rem;
    min-height: auto;
    box-shadow: none;
    cursor: pointer;
}

.filter-pill .ts-wrapper .ts-control input,
.feed-filter .ts-wrapper .ts-control input {
    font-size: 0.875rem;
}

.filter-pill .ts-wrapper .ts-control,
.feed-filter .ts-wrapper .ts-control,
.filter-pill .ts-wrapper .ts-control input,
.feed-filter .ts-wrapper .ts-control input {
    color: var(--on-surface);
}

.filter-pill .ts-wrapper .ts-dropdown,
.feed-filter .ts-wrapper .ts-dropdown {
    font-size: 0.875rem;
    border-radius: var(--md-shape-corner-small);
    margin-top: 0.35rem;
    background: var(--surface-container-high);
    border: 1px solid var(--outline-variant);
    box-shadow: var(--md-elevation-2);
    color: var(--on-surface);
}

/* Date inputs inside filter pills.
   - color-scheme makes the native date control (value text, calendar icon,
     picker popup) render in the active theme; without it Chrome uses light
     scheme and the value is invisible on a dark surface.
   - Explicit `color: var(--on-surface)` instead of `inherit` because some
     Chromium versions ignore inherited color on the value text inside
     <input type=date>. */
/* Ensure the pill that contains the date range is wide enough to show both
   date values. Beer CSS aggressively shrinks unstyled flex children, so we
   pin a min-width on the pill itself and on each date-input. */
.filter-pill:has(.date-input) {
    min-width: 22rem;
}

/* Beer CSS targets bare `input` with a floating-label pattern that
   absolute-positions the input over a wrapper and sets opacity to 0 until
   focused. That pattern doesn't fit our inline filter pill — we override
   position + opacity + Beer's reset of height/padding. */
/* Each date sits in its own subtle sub-pill so the two inputs read as
   discrete clickable fields rather than one continuous string with "to"
   in the middle. Border + soft tint give the boundary cheaply. */
.filter-bar .filter-pill .date-input,
.filter-pill .date-input {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    opacity: 1 !important;
    border: 1px solid var(--outline-variant);
    background: color-mix(in srgb, var(--on-surface) 4%, transparent);
    padding: 0.3rem 0.55rem;
    margin: 0;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    color: var(--on-surface);
    color-scheme: light dark;
    width: 8.5rem;
    min-width: 8.5rem;
    flex: 0 0 auto;
    border-radius: var(--md-shape-corner-extra-small);
    height: auto;
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
}

.filter-pill .date-input:hover {
    background: color-mix(in srgb, var(--on-surface) 8%, transparent);
    border-color: var(--outline);
}

.filter-pill .date-input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Slightly stronger separator so "to" reads as a connector between two
   distinct fields, not just another piece of text. cursor: default so it
   doesn't look interactive — the parent .filter-pill sets cursor: pointer
   which would otherwise cascade in and make "to" look clickable. */
.filter-pill .date-separator {
    padding: 0 0.4rem;
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    cursor: default;
    user-select: none;
}

/* Same reasoning for the leading calendar SVG icon — it visually belongs
   to the chip, but the actual click target is the date input next to it.
   Letting clicks pass through avoids "icon catches click, picker doesn't
   open" surprises. */
.filter-pill:has(.date-input) > .filter-icon {
    pointer-events: none;
}

/* Hide the native calendar picker icon — the pill already shows a custom
   SVG calendar icon, two natives would be visual clutter. Clicking
   anywhere in the input still opens the native picker. */
.filter-pill .date-input::-webkit-calendar-picker-indicator {
    display: none;
}

.filter-pill .findings-input {
    border: none;
    background: transparent;
    width: 2.5rem;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    font-family: inherit;
}

.filter-pill .findings-input:focus {
    outline: none;
    box-shadow: none;
}

.filter-pill .findings-label {
    font-size: 0.8rem;
    color: var(--pico-muted-color);
}

/* ── Tabs ── */

.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--outline-variant);
    margin-bottom: 1rem;
}

/* Dashboard format toggle pins below the topic-filter toolbar so users can
   flip Longform/Shorts after scrolling deep into the findings grid without
   scrolling back up. z-index sits one below the toolbar so the toolbar wins
   when they momentarily overlap. */
.dashboard-tabs > .tab-bar {
    position: sticky;
    top: 56px;
    z-index: 4;
    background: var(--surface-container-low);
    padding-top: 0.25rem;
}

.tab {
    position: relative;
    cursor: pointer;
    margin: 0;
    text-decoration: none;
    color: inherit;
}

.tab input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tab span {
    display: block;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--on-surface-variant);
    border-bottom: 3px solid transparent;
    border-radius: var(--md-shape-corner-extra-small) var(--md-shape-corner-extra-small) 0 0;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.tab span:hover {
    color: var(--on-surface);
    background: color-mix(in srgb, var(--on-surface) 6%, transparent);
}

.tab input[type="radio"]:checked + span {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab input[type="radio"]:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* Anchor tabs — the Attention format toggle (Longform / Shortform). They
   reuse the radio tabs' pill styling above but stay <a> links: a hidden form
   field kept winning the click on those pages (the old dead-tab bug). Same
   active + focus treatment as the Trends-table tabs, so the two read
   identically across the app. */
.tab.is-active > span {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab:focus-visible > span {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* ── HTMX loading ── */

.htmx-indicator {
    display: none;
    text-align: center;
    padding: 1rem;
    color: var(--pico-muted-color);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: block;
}

.htmx-request #results {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ── Attention slice-change loader ──
   The Attention controls (Market, format tabs, date arrows, category) each
   trigger a full-page reload, so the HTMX indicator above doesn't cover them.
   This scrim + "Loading…" chip appears the moment one is used and rides out
   until the next page paints — the same dim-and-indicate feedback the Trends
   table gives on an HTMX swap, wired up by attention_loading.js. */
.attention-loading {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.attention-loading.is-active {
    display: flex;
}

.attention-loading-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--on-surface);
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-md);
    box-shadow: var(--tt-shadow-sm);
    padding: 0.5rem 0.9rem;
}

.attention-loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--outline-variant);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: attention-spin 0.7s linear infinite;
}

@keyframes attention-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Results count ── */

.result-count {
    font-size: 0.8rem;
    color: var(--pico-muted-color);
    margin-bottom: 0.5rem;
}

/* ── Last updated indicator ── */

.last-updated {
    font-size: 0.75rem;
    color: var(--pico-muted-color);
    margin-bottom: 0.5rem;
    text-align: right;
}

.tooltip-wrap {
    position: relative;
    cursor: default;
}

.tooltip-text {
    visibility: hidden;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.tooltip-wrap:hover .tooltip-text {
    visibility: visible;
}

/* Table-header tooltips share the visual language with the `.started-header`
   tooltip — light surface, generous padding, soft shadow, opacity fade —
   so adjacent column tooltips look like the same component. The
   text-transform: none override stops the th's uppercase from cascading
   into the tooltip body. The same body styling is reused for the Topic
   filter pill's help tooltip — anchored to the pill so it drops cleanly
   below the filter bar instead of above the icon. */
th.tooltip-wrap .tooltip-text,
.filter-pill .pill-help .tooltip-text {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    position: absolute;
    left: 0;
    bottom: auto;
    top: 100%;
    transform: none;
    z-index: 50;
    width: 280px;
    padding: 0.75rem 0.85rem;
    background: var(--inverse-surface);
    color: var(--inverse-on-surface);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: normal;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}

th.tooltip-wrap:hover .tooltip-text,
.filter-pill .pill-help:hover .tooltip-text {
    opacity: 1;
}

/* Anchor the tooltip to the pill (not the inline icon span) so the
   tooltip drops below the filter bar at the pill's left edge —
   matching the way the column tooltips drop below their th. Pull the
   icon span tight against the dropdown so the icon reads as part of
   the pill instead of dangling at the edge. */
.filter-pill:has(.pill-help) {
    position: relative;
    padding-right: 0.55rem;
}

.filter-pill .pill-help {
    position: static;
    display: inline-flex;
    align-items: center;
    margin-left: -0.2rem;
}

.filter-pill .pill-help .tooltip-text {
    margin-top: 6px;
}

.filter-pill .pill-help .col-info-icon {
    margin-left: 0;
}

/* Small info indicator next to column titles that carry a tooltip.
   Force fill: none — Pico (or an inherited rule) defaults SVG fill to the
   text color, which would render the circle as a solid disc and hide the
   stroke-drawn question mark inside. */
.col-info-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    color: var(--pico-muted-color, currentColor);
    opacity: 0.65;
    cursor: help;
    fill: none;
    stroke: currentColor;
}

th.tooltip-wrap {
    cursor: help;
}

/* ── Table ── */

.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border-radius: var(--md-shape-corner-medium);
    border: 1px solid var(--outline-variant);
}

.video-table {
    margin-bottom: 0;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.video-table thead th {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pico-muted-color);
    border-bottom: 2px solid var(--pico-muted-border-color);
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.video-table tbody td {
    padding: 0.5rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--outline-variant);
}

.video-table tbody tr {
    transition: background 0.12s;
}

.video-table tbody tr:hover {
    background: color-mix(in srgb, var(--on-surface) 5%, transparent);
}

.video-table tbody tr:last-child td {
    border-bottom: none;
}

/* Thumbnail */
.thumbnail-cell {
    padding: 0.5rem 0 0.5rem 1rem;
    width: 120px;
    min-width: 80px;
}

.thumbnail-cell img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Video info (title + channel stacked) */
.video-info {
    padding-left: 0;
}

.video-title {
    display: block;
    font-weight: 500;
    color: var(--on-surface);
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.video-title:hover {
    color: var(--primary);
}

.video-channel {
    display: block;
    font-size: 0.75rem;
    color: var(--pico-muted-color);
}

/* Numeric columns */
.views-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.date-cell {
    white-space: nowrap;
}

.started-cell {
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--on-surface-variant);
}

.trend-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 500;
}

.trend-active {
    color: var(--rising);
}

.trend-lasted {
    color: var(--on-surface-variant);
}

/* Sparkline column */
.sparkline-header {
    text-align: right;
}

.sparkline-cell {
    padding: 0.25rem 0.75rem;
    width: 140px;
    min-width: 100px;
}

.sparkline-cell canvas {
    display: block;
}

.sparkline-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: block;
    line-height: 0;
}

.sparkline-btn:hover canvas {
    opacity: 0.85;
}

/* Topics column */
.topics-cell {
    font-size: 0.875rem;
    color: var(--on-surface);
    line-height: 1.45;
    max-width: 260px;
}

.topic-chip {
    display: inline;
    margin-right: 0.15rem;
    color: inherit;
    text-decoration: none;
    /* Button-element overrides so a <button class="topic-chip"> renders the
       same as the prior <a class="topic-chip">. */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.topic-chip:hover {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.topic-sep {
    margin-right: 0.25rem;
    color: var(--on-surface-variant);
}

.topic-more-btn {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.25rem;
    color: var(--pico-primary);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.topic-more-btn:hover {
    color: #1d4ed8;
}

/* Trend detail drawer */
body.trend-drawer-open .video-table {
    opacity: 0.45;
    pointer-events: none;
}

.trend-scrim {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--scrim) 32%, transparent);
    z-index: 90;
    opacity: 0;
    transition: opacity 0.2s var(--md-motion-easing-standard);
}

.trend-scrim.open { opacity: 1; }

.trend-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100vw);
    background: var(--surface-container-low);
    border-left: 1px solid var(--outline-variant);
    box-shadow: var(--md-elevation-3);
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s var(--md-motion-easing-emphasized-decelerate);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.trend-drawer.open { transform: translateX(0); }

.trend-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    flex-shrink: 0;
}

.trend-drawer-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--on-surface);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.trend-drawer-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--pico-muted-color);
    cursor: pointer;
    padding: 0 0.25rem;
}

.trend-drawer-close:hover { color: inherit; }

.trend-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 2rem;
    -webkit-overflow-scrolling: touch;
}

.trend-drawer-chart-wrap {
    height: 240px;
    margin-bottom: 1.5rem;
}

.trend-drawer-chart {
    width: 100% !important;
    height: 100% !important;
}

.trend-drawer-section-heading {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pico-muted-color);
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.trend-drawer-topics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.trend-drawer-topic {
    font-size: 0.9rem;
    color: var(--on-surface);
    border-bottom: 1px dotted var(--outline);
    padding-bottom: 1px;
}

@media (max-width: 768px) {
    .trend-drawer { width: 100vw; }
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--pico-muted-color);
}

/* ── Search bar ── */

.search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 2rem;
    background: var(--surface-container-lowest);
    margin-bottom: 0.75rem;
    transition: border-color 0.15s;
}

.search-bar:focus-within {
    border-color: var(--pico-primary);
}

.search-bar input[type="search"] {
    border: none;
    background: transparent;
    padding: 0.25rem 0;
    margin: 0;
    font-size: 1rem;
    font-family: inherit;
    flex: 1;
    outline: none;
}

.search-bar input[type="search"]:focus {
    box-shadow: none;
}

/* ── Primary button (filled, readable on dark + light) ──
   In dark mode M3 --primary is a pastel; use --inverse-primary (resolves to
   the light-scheme #2e5da8 navy) with white text so the CTA stays vivid. */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.7rem 1.6rem;
    border: 1px solid var(--primary);
    border-radius: var(--md-shape-corner-full);
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s, box-shadow 0.15s;
    margin: 0;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

html.dark .btn-primary,
body.dark .btn-primary {
    background: var(--inverse-primary);
    border-color: var(--inverse-primary);
    color: #ffffff;
}

.btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

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

.insight-submit {
    margin-top: 1.25rem;
}

/* ── Track button ── */

.track-btn {
    flex-shrink: 0;
    padding: 0.35rem 1rem;
    border: 1px solid var(--pico-primary);
    border-radius: 2rem;
    background: var(--pico-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
    margin: 0;
    line-height: 1.4;
}

.track-btn:hover {
    opacity: 0.85;
}

.track-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Tracked section ── */

.tracked-section {
    margin-bottom: 1.5rem;
}

.tracked-section h4 {
    margin-bottom: 0.75rem;
}

/* Related query pills */
.related-queries-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.related-query-pill {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 2rem;
    background: var(--surface-container-lowest);
    font-size: 0.8rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.related-query-pill:hover {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}

/* Momentum direction arrows */
.momentum-direction {
    font-size: 0.875rem;
}

.arrow-up {
    color: #22c55e;
}

.arrow-down {
    color: #ef4444;
}

.arrow-flat {
    color: #6c757d;
}

/* Creator thumbnails */
.creator-thumb {
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* HTMX loading for tracked results */
.htmx-request #tracked-results {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ── Explore: attention-flow multi-line chart ── */

.attention-flow-wrap {
    background: var(--surface-container-lowest);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.attention-flow-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.attention-flow-headline {
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 0;
    color: var(--on-surface);
}

.attention-flow-headline-search {
    font-weight: 500;
}

.attention-flow-leader {
    font-weight: 700;
}

.attention-flow-leader-change {
    color: var(--pico-muted-color);
    font-size: 0.92rem;
    font-weight: 500;
}

.attention-flow-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.4rem;
    align-items: center;
}

.attention-flow-tokens-label {
    color: var(--pico-muted-color);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 0.25rem;
}

.attention-flow-token {
    padding: 0.15rem 0.6rem;
    background: var(--surface-variant);
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--on-surface);
    white-space: nowrap;
}

.attention-flow-volume {
    font-size: 0.92rem;
    color: var(--pico-muted-color);
    margin: 0;
}

.attention-flow-volume-value {
    color: var(--on-surface);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.attention-chart {
    width: 100%;
    height: auto;
    display: block;
    font-family: inherit;
    margin-bottom: 0.25rem;
}

.attention-chart-grid {
    stroke: #f1f5f9;
    stroke-width: 1;
}

.attention-chart-axis-label {
    font-size: 11px;
    fill: var(--pico-muted-color);
}

.attention-chart-line {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: stroke-width 0.15s;
}

.attention-chart-line-hit {
    cursor: pointer;
    pointer-events: stroke;
}

.attention-chart-line-hit:hover + .attention-chart-line {
    stroke-width: 3;
}

.attention-chart-marker {
    cursor: pointer;
    transition: r 0.15s;
}

.attention-chart-marker:hover {
    r: 5;
}

.attention-chart-caption {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    color: var(--pico-muted-color);
    text-align: center;
}

.attention-chart-spike-marker {
    stroke: #fff;
    stroke-width: 2;
    pointer-events: none;
}

.attention-chart-spike-pointer {
    stroke: #475569;
    stroke-width: 1;
    stroke-dasharray: 2 2;
    opacity: 0.7;
    pointer-events: none;
}

.attention-chart-spike-label {
    font-size: 12px;
    font-weight: 500;
    fill: var(--on-surface);
    pointer-events: none;
}

.attention-chart-legend {
    list-style: none;
    margin: 0.25rem 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--on-surface-variant);
}

.attention-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    transition: background 0.15s;
}

.attention-chart-legend-item:hover {
    background: var(--surface-variant);
}

.attention-chart-legend-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
}

/* Band videos drawer — hover panel slides in from the right of the chart. */

.band-videos-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.25);
    z-index: 90;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.band-videos-scrim.open { opacity: 1; }

.band-videos-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 100vw);
    background: var(--surface-container-lowest);
    border-left: 1px solid var(--pico-muted-border-color);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow: hidden;
}

.band-videos-drawer.open {
    transform: translateX(0);
}

.band-videos-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    flex-shrink: 0;
}

.band-videos-drawer-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--on-surface);
}

.band-videos-drawer-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--pico-muted-color);
    cursor: pointer;
    padding: 0 0.25rem;
    margin: 0;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.band-videos-drawer-close:hover {
    color: var(--on-surface);
    background: var(--surface-variant);
}

.band-videos-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
}

.band-videos-hint,
.band-videos-empty {
    margin: 0;
    color: var(--pico-muted-color);
    font-size: 0.88rem;
}

.band-videos-error {
    margin: 0;
    color: #78350f;
    font-size: 0.88rem;
}

.band-videos-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 2rem 1rem;
    color: var(--pico-muted-color);
}

.band-videos-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--pico-primary);
    border-radius: 50%;
    animation: band-videos-spin 0.8s linear infinite;
}

.band-videos-loading-text {
    margin: 0;
    font-size: 0.88rem;
}

@keyframes band-videos-spin {
    to { transform: rotate(360deg); }
}

.band-videos-heading {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--on-surface);
}

.band-videos-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.band-videos-item {
    line-height: 1.35;
}

.band-videos-link {
    display: flex;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
    padding: 0.25rem;
    border-radius: 6px;
    transition: background 0.15s;
}

.band-videos-link:hover {
    background: var(--surface-variant);
}

.band-videos-thumb {
    flex-shrink: 0;
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    background: #e2e8f0;
}

.band-videos-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.band-videos-title {
    font-weight: 500;
    color: var(--on-surface);
    font-size: 0.88rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.band-videos-link:hover .band-videos-title {
    text-decoration: underline;
}

.band-videos-meta {
    color: var(--pico-muted-color);
    font-size: 0.8rem;
}

.band-videos-delta {
    color: var(--on-surface);
    font-variant-numeric: tabular-nums;
}

.attention-flow-empty,
.attention-flow-error,
.attention-flow-skeleton {
    background: var(--surface-container-lowest);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--pico-muted-color);
    font-size: 0.9rem;
}

.attention-flow-loader-title {
    margin: 0 0 0.75rem;
    color: var(--on-surface);
    font-size: 1rem;
    font-weight: 600;
    animation: attention-flow-loader-pulse 1.6s ease-in-out infinite;
}

.attention-flow-loader-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.attention-flow-loader-steps li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.88rem;
    color: var(--pico-muted-color);
    opacity: 0;
    animation: attention-flow-loader-step 4.8s ease-in-out infinite;
}

.attention-flow-loader-steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--pico-primary);
}

/* Staggered fade-in for each step so the user reads them in sequence. */
.attention-flow-loader-steps li:nth-child(1) { animation-delay: 0s; }
.attention-flow-loader-steps li:nth-child(2) { animation-delay: 0.6s; }
.attention-flow-loader-steps li:nth-child(3) { animation-delay: 1.2s; }
.attention-flow-loader-steps li:nth-child(4) { animation-delay: 1.8s; }

@keyframes attention-flow-loader-pulse {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

@keyframes attention-flow-loader-step {
    0% { opacity: 0; transform: translateX(-4px); }
    15%, 85% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0.35; transform: translateX(0); }
}

/* Related panels — Rising / Top themes inside the attention-chart card. */

.related-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pico-muted-border-color);
}

.related-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.related-panel-heading {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--on-surface);
}

.related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.related-row {
    display: grid;
    grid-template-columns: minmax(0, 6rem) 1fr auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    line-height: 1.3;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    transition: background 0.15s;
}

.related-row:hover {
    background: var(--surface-variant);
}

.related-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--on-surface);
}

.related-bar {
    height: 8px;
    background: var(--surface-variant);
    border-radius: 4px;
    overflow: hidden;
}

.related-bar-fill {
    height: 100%;
    border-radius: 4px;
}

.related-share {
    font-variant-numeric: tabular-nums;
    color: var(--on-surface);
    font-weight: 500;
    min-width: 2.5rem;
    text-align: right;
}

.related-change {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    min-width: 3rem;
    text-align: right;
}

.related-change-up {
    color: #16a34a;
}

.related-empty {
    color: var(--pico-muted-color);
    font-size: 0.85rem;
    margin: 0;
}

@media (max-width: 768px) {
    .related-panels { grid-template-columns: 1fr; }
}


.compare-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Compare chart ── */

.compare-chart-wrap {
    background: var(--surface-container-lowest);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    height: 400px;
}

.compare-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.compare-legend-pill {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 2rem;
    background: var(--surface-container-lowest);
    font-size: 0.8rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.compare-legend-pill:hover {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}

.compare-legend-original {
    border-width: 2px;
    border-color: var(--pico-primary);
    font-weight: 500;
}

/* ── Tab separator ── */

.tab-separator {
    flex: 1;
}

/* ── HTMX loading for explore ── */

.htmx-request #explore-results {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ── Insight success banner ── */

.insight-success {
    padding: 0.75rem 1rem;
    background: var(--rising-container);
    color: var(--on-rising-container);
    border: 1px solid color-mix(in srgb, var(--rising) 30%, transparent);
    border-radius: var(--md-shape-corner-small);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* ── Insight running / failed states ── */

.insight-running,
.insight-failed {
    padding: 1.5rem;
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    border-radius: var(--md-shape-corner-medium);
    margin-bottom: 1rem;
    color: var(--on-surface);
}

.insight-failed {
    background: var(--falling-container);
    border-color: color-mix(in srgb, var(--falling) 30%, transparent);
    color: var(--on-falling-container);
}

.insight-running-header h3 {
    margin: 0 0 0.25rem;
}

.insight-running-footnote {
    margin-top: 1.25rem;
    margin-bottom: 0;
    font-size: 0.8125rem;
}

/* ── Insight generation pipeline animation ── */

.insight-pipeline {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1rem;
    border-radius: 10px;
    background:
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.08), transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.08), transparent 60%),
        radial-gradient(circle at 80% 50%, rgba(34, 197, 94, 0.08), transparent 60%);
    overflow: hidden;
}

.pipeline-step {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1;
    opacity: 0.45;
    transform: translateY(0);
    animation: pipeline-step-cycle 4.2s ease-in-out infinite;
    animation-delay: var(--step-delay, 0s);
}

.pipeline-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--on-surface-variant);
    letter-spacing: 0.01em;
    transition: color 0.4s ease;
}

.pipeline-orb {
    position: relative;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    animation: pipeline-orb-cycle 4.2s ease-in-out infinite;
    animation-delay: var(--step-delay, 0s);
}

.pipeline-orb::before,
.pipeline-orb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: pipeline-orb-ring 4.2s ease-out infinite;
    animation-delay: var(--step-delay, 0s);
    opacity: 0;
}

.pipeline-orb::after {
    animation-delay: calc(var(--step-delay, 0s) + 0.4s);
}

@keyframes pipeline-step-cycle {
    0%, 100% { opacity: 0.45; transform: translateY(0); }
    20%      { opacity: 1;    transform: translateY(-2px); }
    40%      { opacity: 0.7;  transform: translateY(0); }
    50%      { opacity: 0.45; transform: translateY(0); }
}

@keyframes pipeline-orb-cycle {
    0%, 100% {
        background: #94a3b8;
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        transform: scale(1);
    }
    20% {
        background: #3b82f6;
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.18);
        transform: scale(1.25);
    }
    40% {
        background: #94a3b8;
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        transform: scale(1);
    }
}

@keyframes pipeline-orb-ring {
    0%   { transform: scale(1);   opacity: 0.55; border: 1.5px solid rgba(59, 130, 246, 0.6); }
    60%  { transform: scale(2.4); opacity: 0;    border: 1.5px solid rgba(59, 130, 246, 0); }
    100% { transform: scale(2.4); opacity: 0;    border: 1.5px solid rgba(59, 130, 246, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pipeline-step,
    .pipeline-orb,
    .pipeline-orb::before,
    .pipeline-orb::after {
        animation: none;
    }
    .pipeline-step { opacity: 0.85; }
}

.status-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #e2e8f0;
    color: #334155;
}

.status-pending,
.status-running {
    background: #dbeafe;
    color: #1e40af;
}

.status-success {
    background: #dcfce7;
    color: #166534;
}

.status-failed {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Insight ── */

.insight {
    max-width: 900px;
}

.insight-header {
    margin-bottom: 1.5rem;
}

.insight-header h3 {
    margin-bottom: 0.25rem;
}

.insight-section {
    background: var(--surface-container-lowest);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.change-up {
    color: #22c55e;
}

.change-down {
    color: #ef4444;
}

/* Theme cards */
.insight-theme-card {
    border: 1px solid var(--outline-variant);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.insight-theme-card:last-child {
    margin-bottom: 0;
}

.insight-theme-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
}

.insight-theme-keyword {
    font-weight: 600;
    font-size: 1rem;
}

.insight-theme-narrative {
    font-size: 0.875rem;
    color: var(--pico-muted-color);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.insight-theme-card .table-wrap {
    margin-top: 0.5rem;
}

/* Format tab panels */
.format-tab-panel {
    margin-top: 1rem;
}

/* Horizontal video scroll */
.insight-video-scroll {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.insight-video-card {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-decoration: none;
    color: inherit;
}

.insight-video-card:hover .insight-video-card-title {
    color: var(--pico-primary);
}

.insight-video-card img {
    width: 100%;
    border-radius: 6px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.insight-video-card-title {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.15s;
}

.insight-video-card-channel {
    font-size: 0.7rem;
    color: var(--pico-muted-color);
}

.insight-video-card-views {
    font-size: 0.7rem;
    color: var(--pico-muted-color);
    font-variant-numeric: tabular-nums;
}

/* Opportunities */
.insight-opportunities-list {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 0;
}

.insight-opportunity {
    margin-bottom: 0.75rem;
}

.insight-opportunity:last-child {
    margin-bottom: 0;
}

.insight-opportunity-reasoning {
    font-size: 0.875rem;
    color: var(--pico-muted-color);
    line-height: 1.6;
}

.insight-opportunity-reasoning p {
    margin: 0.25rem 0;
}

.insight-opportunity-reasoning ul {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

.insight-opportunity-reasoning a {
    color: var(--pico-primary);
}

.insight-format-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 2rem;
    background: #e8f4fd;
    color: var(--pico-primary);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Audience Behaviour */
.insight-audience {
    border-left: 4px solid var(--pico-primary);
}

.insight-audience-body p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.insight-audience-body p:last-child {
    margin-bottom: 0;
}

.insight-audience-body ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.insight-audience-body li {
    margin-bottom: 0.35rem;
    line-height: 1.55;
    font-size: 0.9rem;
}

.insight-audience-body li:last-child {
    margin-bottom: 0;
}

/* Insight filter bar */
.finding-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.finding-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem 0.4rem 1rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--md-shape-corner-full);
    background: var(--surface);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: all 0.15s;
    margin: 0;
}

.finding-filter:hover {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}

.finding-filter.active {
    background: var(--pico-primary);
    border-color: var(--pico-primary);
    color: #fff;
}

.finding-filter-count {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    background: var(--pico-muted-border-color);
    color: var(--pico-muted-color);
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.5;
    transition: background 0.15s, color 0.15s;
}

.finding-filter:hover .finding-filter-count {
    background: rgba(0, 0, 0, 0.05);
    color: var(--pico-primary);
}

.finding-filter.active .finding-filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Insight filter status line */
.finding-status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
}

.finding-status strong {
    color: var(--pico-color);
    font-weight: 500;
}

.finding-status-all .finding-status-suffix,
.finding-status-all .finding-status-clear {
    display: none;
}

.finding-status-clear {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.25rem;
    color: var(--pico-primary);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.finding-status-clear:hover {
    text-decoration: none;
}

/* Insight category tag (shared by teaser + detail) */
.finding-category-tag {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 2rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.finding-tag-rising_topics { background: #dcfce7; color: #166534; }
.finding-tag-trending_formats { background: #dbeafe; color: #1e40af; }
.finding-tag-creator_signals { background: #f3e8ff; color: #6b21a8; }
.finding-tag-audience_shifts { background: #fef3c7; color: #92400e; }
.finding-tag-repeated_patterns { background: #fee2e2; color: #991b1b; }

/* Summary strip — at-a-glance category counts */
.finding-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.75rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    font-size: 0.8rem;
}

.insight-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 2rem;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.insight-summary-item strong {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Attention map — typographic treemap.
   All tiles share a near-white cream background; the squarified layout
   carries weight, the serif label carries story. Trajectory is a single
   coloured accent strip + arrow rather than a tile fill — so the grid
   reads like an editorial spread, not a stoplight panel. */
.attention-map-section {
    margin-top: 1.5rem;
}

.attention-map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 380px;
    background: #ece8df;
    border-radius: 0.5rem;
    overflow: hidden;
    container-type: inline-size;
    transition: opacity 0.2s ease;
}

.attention-tile {
    position: absolute;
    /* CRITICAL: <button> defaults to box-sizing: content-box. The squarified-
       treemap JS sets width/left as percentages assuming border-box semantics
       (specified width == rendered width). Without this, the 37.5px of
       horizontal padding extends *outside* the JS-calculated box, pushing the
       left-column tiles 37px past the map's left edge — the map's
       overflow:hidden then clips the first 1–2 characters of the title.
       That's what produced "Playoff → layoff", "Analysis → analysis", and
       "Esports → orts" on the affected column. */
    box-sizing: border-box;
    background: #fbf9f4;
    color: var(--on-surface);
    cursor: pointer;
    text-align: left;
    padding: 1rem 1.125rem 0.875rem 1.375rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    gap: 0.25rem 0.5rem;
    font-family: inherit;
    /* Each tile is its own query container so the title font and the chrome
       (tag / share / arrow) scale to the tile's real size, not the whole map.
       Without this, a 60px tile and a 400px tile got identical type and the
       small ones overflowed. */
    container-type: size;
    container-name: tile;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    /* Thin inset border + page-coloured outer ring carves a 2px gutter;
       a soft drop shadow gives the card a subtle lift off the page. */
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.06),
        0 1px 2px rgba(20, 24, 31, 0.04),
        0 0 0 2px #ece8df;
}

.attention-tile::before {
    /* Trajectory accent strip — runs floor-to-ceiling on the left edge.
       Vertical gradient inside the strip itself (deeper at top, fading
       slightly toward the bottom) gives the accent a hand-drawn quality. */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(
        180deg,
        var(--tile-accent, transparent) 0%,
        var(--tile-accent-soft, var(--tile-accent, transparent)) 100%
    );
}

.attention-tile::after {
    /* Subtle radial highlight at the top-left corner — adds depth and
       focuses the eye toward the strip + tag without being a literal
       shadow. Tints with the trajectory accent at low opacity. */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 60%;
    background: radial-gradient(
        circle at top left,
        var(--tile-glow, transparent) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* Jewel-toned edge accent + a confidently-tinted tile body that reads as
   sage / clay / taupe at a glance. Strip + arrow share the deeper accent
   colour; tile body uses a soft gradient (wash fades toward off-white so
   the long label area stays comfortable to read). */
.attention-tile--rising {
    --tile-accent: #1f7050;
    background:
        linear-gradient(135deg, #d4e8d5 0%, #ecf3ea 55%, #f7f5ef 100%);
}

.attention-tile--declining {
    --tile-accent: #b54a30;
    background:
        linear-gradient(135deg, #f4d6c5 0%, #f6e5d8 55%, #faf2ea 100%);
}

.attention-tile--stable {
    --tile-accent: #5d544a;
    background:
        linear-gradient(135deg, #e2dccc 0%, #ece6d8 55%, #f5f0e4 100%);
}

/* Attention treemap — dark scheme: deep paper + brightened jewel washes so
   the editorial "paper with sage/clay/taupe washes" idea survives in dark. */
html.dark .attention-map,
body.dark .attention-map {
    background: var(--surface-container);
}

html.dark .attention-tile,
body.dark .attention-tile {
    background: var(--surface-container-high);
    color: var(--on-surface);
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 0.05),
        0 1px 2px rgb(0 0 0 / 0.35),
        0 0 0 2px var(--surface-container);
}

html.dark .attention-tile--rising,
body.dark .attention-tile--rising {
    --tile-accent: #6ee7a8;
    background: linear-gradient(135deg,
        color-mix(in srgb, #6ee7a8 30%, var(--surface-container-high)) 0%,
        color-mix(in srgb, #6ee7a8 8%, var(--surface-container-high)) 60%,
        var(--surface-container-high) 100%);
}

html.dark .attention-tile--declining,
body.dark .attention-tile--declining {
    --tile-accent: #ffb59e;
    background: linear-gradient(135deg,
        color-mix(in srgb, #ffb59e 30%, var(--surface-container-high)) 0%,
        color-mix(in srgb, #ffb59e 8%, var(--surface-container-high)) 60%,
        var(--surface-container-high) 100%);
}

html.dark .attention-tile--stable,
body.dark .attention-tile--stable {
    --tile-accent: #cdbfa8;
    background: linear-gradient(135deg,
        color-mix(in srgb, #cdbfa8 26%, var(--surface-container-high)) 0%,
        color-mix(in srgb, #cdbfa8 7%, var(--surface-container-high)) 60%,
        var(--surface-container-high) 100%);
}

/* Tile text + interaction states in dark (the title/tag/share carry their own
   light-scheme colors that would otherwise stay dark-on-dark). */
html.dark .attention-tile-label,
body.dark .attention-tile-label {
    color: var(--on-surface);
}

html.dark .attention-tile-tag,
body.dark .attention-tile-tag,
html.dark .attention-tile-share,
body.dark .attention-tile-share {
    color: var(--on-surface-variant);
}

html.dark .attention-tile-share-unit,
body.dark .attention-tile-share-unit {
    color: color-mix(in srgb, var(--on-surface-variant) 70%, transparent);
}

html.dark .attention-tile:hover,
body.dark .attention-tile:hover {
    background: var(--surface-container-highest);
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 0.10),
        0 10px 24px rgb(0 0 0 / 0.45),
        0 0 0 2px var(--surface-container);
}

html.dark .attention-tile--rising:hover,
body.dark .attention-tile--rising:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, #6ee7a8 24%, var(--surface-container-highest)) 0%,
        var(--surface-container-highest) 65%);
}
html.dark .attention-tile--declining:hover,
body.dark .attention-tile--declining:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, #ffb59e 24%, var(--surface-container-highest)) 0%,
        var(--surface-container-highest) 65%);
}
html.dark .attention-tile--stable:hover,
body.dark .attention-tile--stable:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, #cdbfa8 22%, var(--surface-container-highest)) 0%,
        var(--surface-container-highest) 65%);
}

html.dark .attention-tile:focus-visible,
body.dark .attention-tile:focus-visible {
    outline-color: var(--primary);
}

.attention-tile--rising:hover {
    background:
        linear-gradient(135deg, #c8e2c9 0%, #e2eddf 55%, #f0eee7 100%);
}
.attention-tile--declining:hover {
    background:
        linear-gradient(135deg, #efc9b3 0%, #eedaca 55%, #f4ebde 100%);
}
.attention-tile--stable:hover {
    background:
        linear-gradient(135deg, #d8d2c0 0%, #e3dccc 55%, #ede7d8 100%);
}

.attention-tile:hover {
    background: #fdfbf6;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.12),
        0 10px 24px rgba(20, 24, 31, 0.10),
        0 0 0 2px #ece8df;
    transform: translateY(-1px);
    z-index: 2;
}

.attention-tile:focus-visible {
    outline: 2px solid var(--on-surface);
    outline-offset: -4px;
    z-index: 1;
}

.attention-tile-tag {
    grid-row: 1;
    grid-column: 1;
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: rgba(31, 41, 55, 0.5);
    background: transparent;
    align-self: start;
    padding: 0;
    border-radius: 0;
}

.attention-tile-arrow {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--tile-accent, #6a6358);
}

.attention-tile-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.attention-tile-label {
    grid-row: 2;
    grid-column: 1 / -1;
    /* Centre the title in the 1fr row so overflow (when a title is genuinely
       taller than the row) splits evenly between top + bottom. End-alignment
       was making the *first* lines fall outside the row, where they got
       shaved by overflow:hidden — that's what made "Esports" read as "orts".
       Centre is dynamic with tile size: large tiles let the full title sit
       comfortably; small tiles still clip equally on top + bottom rather
       than amputating the beginning. */
    align-self: center;
    justify-self: stretch;
    font-family: "Iowan Old Style", "Charter", "Source Serif Pro", Georgia, serif;
    /* Scale by the finding's share-of-attention (set as --tile-share on each
       tile, unitless). Two tiles with the same share render at the same size
       regardless of aspect ratio — cqmin made wide/short tiles read tiny while
       narrow/tall siblings of the same share looked 70% bigger. */
    font-size: clamp(0.95rem, calc(0.85rem + var(--tile-share, 8) * 0.04rem), 1.875rem);
    font-weight: 500;
    letter-spacing: -0.018em;
    /* Tiny inset so the serif's left side-bearing (K, F, p, b) isn't shaved
       by the label's overflow:hidden when text wraps flush to the column edge. */
    padding-left: 0.15em;
    /* 1.22 (vs the previous 1.14) gives the serif W / K / A enough top room
       that the ascender isn't shaved by overflow:hidden on the tile. */
    line-height: 1.22;
    color: #14181f;
    /* Plain flex column. Each text node is one flex item that lays out
       naturally; we limit visible height with max-height + overflow:hidden
       so the *bottom* lines get clipped if the title is too tall, never the
       start. Avoids the -webkit-box + line-clamp interaction that, in this
       Chromium version, was rendering only the tail of long titles. */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    max-height: calc(1.22em * 3);
    text-overflow: clip;
    word-break: normal;
    text-align: left;
}

.attention-tile-share {
    grid-row: 3;
    grid-column: 1 / -1;
    align-self: end;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    /* Bumped from 0.55 → 0.85 alpha so the percentage actually reads against
       the tile wash without the user having to hover the preview card. */
    color: rgba(31, 41, 55, 0.85);
    line-height: 1;
}

.attention-tile-share-unit {
    font-weight: 500;
    margin-left: 0.0625em;
    color: rgba(31, 41, 55, 0.4);
}

/* ── Small-tile degradation ──
   As a tile shrinks, shed chrome in priority order so the title always wins
   the remaining space. The full detail for any tile is still one hover (the
   preview card) or one click (the drawer) away. */

/* Compact: drop the category tag, tighten padding, cap the title at two lines,
   shrink the type ramp so the 2 lines actually fit inside the tile. */
@container tile (max-height: 132px) or (max-width: 188px) {
    .attention-tile {
        padding: 0.65rem 0.7rem 0.6rem 0.85rem;
        gap: 0.15rem 0.4rem;
    }
    .attention-tile-tag {
        display: none;
    }
    .attention-tile-label {
        -webkit-line-clamp: 2;
        /* Font-size left to the main rule so same-share tiles render at the
           same size regardless of whether they fall into this breakpoint. */
    }
    .attention-tile-share {
        margin-top: 0.25rem;
    }
}

/* Mini: drop the trajectory arrow but keep the share %. Centre the title in
   the remaining 1fr row so any unavoidable overflow splits evenly between
   top + bottom rather than shaving the serif ascenders off the top line. */
@container tile (max-height: 92px) or (max-width: 128px) {
    .attention-tile {
        padding: 0.4rem 0.45rem 0.4rem 0.6rem;
    }
    .attention-tile-arrow {
        display: none;
    }
    .attention-tile-label {
        align-self: center;
        line-height: 1.15;
        -webkit-line-clamp: 2;
        /* Cap the share-driven size on truly tiny tiles so the title still
           fits inside two lines; the floor stays consistent with the main rule. */
        font-size: clamp(0.95rem, calc(0.85rem + var(--tile-share, 8) * 0.04rem), 1.05rem);
    }
}

/* Only the truly tiny tiles drop the share %. The earlier 64×90 threshold
   stripped percentages from too many tiles; 44×60 keeps it visible on
   almost everything and only hides it where there is genuinely no room. */
@container tile (max-height: 44px) or (max-width: 60px) {
    .attention-tile-share {
        display: none;
    }
    .attention-tile-label {
        align-self: center;
    }
}

.attention-tile[data-hidden="true"] {
    opacity: 0.35;
    pointer-events: none;
}

.attention-tile[data-hidden="true"]::before {
    opacity: 0.3;
}

/* ── Tile hover-preview card ──
   A single shared card (one per page) that JS repositions and refills on
   hover/focus of any tile. Lives on <body> with position:fixed so it escapes
   the map's overflow:hidden and the tile container blocks. Clicking it opens
   the same finding drawer as the tile. */
.attention-tile-preview {
    position: fixed;
    z-index: 60;
    width: max-content;
    max-width: min(240px, calc(100vw - 1rem));
    padding: 0.5rem 0.7rem 0.5rem 0.8rem;
    background: #fbf9f4;
    border-radius: 0.5rem;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.06),
        0 14px 34px rgba(20, 24, 31, 0.18),
        0 0 0 1px rgba(20, 24, 31, 0.04);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.13s ease, transform 0.13s ease;
    overflow: hidden;
}

.attention-tile-preview.is-visible {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

.attention-tile-preview::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--tile-accent, #5d544a);
}

.attention-tile-preview--rising {
    --tile-accent: #1f7050;
}
.attention-tile-preview--declining {
    --tile-accent: #b54a30;
}
.attention-tile-preview--stable {
    --tile-accent: #5d544a;
}

.attention-preview-title {
    font-family: "Iowan Old Style", "Charter", "Source Serif Pro", Georgia, serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.18;
    color: #14181f;
}

.attention-preview-share {
    font-size: 0.6875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: rgba(31, 41, 55, 0.55);
}

/* Newsroom grid */
.finding-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    transition: opacity 0.2s ease;
}

/* Newspaper hierarchy: the lead story spans both columns and gets a slightly
   bigger signal so it reads as the day's top finding, with the remaining
   cards flowing below in the regular two-column rhythm. */
.finding-grid > :first-child {
    grid-column: 1 / -1;
}

.finding-grid > :first-child .finding-signal,
.finding-grid > :first-child .finding-card-link-reason {
    font-size: 1.1rem;
}

@media (max-width: 600px) {
    .finding-grid > :first-child {
        grid-column: auto;
    }
    .finding-grid > :first-child .finding-signal,
    .finding-grid > :first-child .finding-card-link-reason {
        font-size: inherit;
    }
}

/* Teaser card */
.finding-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--pico-muted-border-color);
    border-left: 4px solid var(--pico-muted-border-color);
    border-radius: 8px;
    padding: 1rem 1.15rem;
    text-align: left;
    font-family: inherit;
    color: var(--pico-color);
    cursor: pointer;
    margin: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.finding-card:hover,
.finding-card:focus-visible {
    border-color: var(--pico-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    outline: none;
}

.finding-card[data-category="rising_topics"]    { border-left-color: #22c55e; }
.finding-card[data-category="trending_formats"] { border-left-color: #3b82f6; }
.finding-card[data-category="creator_signals"]  { border-left-color: #a855f7; }
.finding-card[data-category="audience_shifts"]  { border-left-color: #f59e0b; }
.finding-card[data-category="repeated_patterns"]{ border-left-color: #ef4444; }

.finding-card .finding-signal {
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.finding-card-context {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--pico-muted-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.finding-card-context p { margin: 0; }

.finding-card-footer {
    margin-top: auto;
    padding-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--pico-muted-color);
    font-weight: 500;
}

.finding-card template { display: none; }

.finding-empty {
    grid-column: 1 / -1;
    padding: 2rem 0;
    text-align: center;
    color: var(--pico-muted-color);
    font-size: 0.875rem;
}

/* Dim left side when drawer is open */
body.finding-drawer-open .finding-grid,
body.finding-drawer-open .finding-summary-strip,
body.finding-drawer-open .finding-filter-bar,
body.finding-drawer-open .finding-status,
body.finding-drawer-open .insight-audience,
body.finding-drawer-open .top-picks-grid,
body.finding-drawer-open .dashboard-donuts {
    opacity: 0.35;
    pointer-events: none;
}

/* Scrim */
.finding-scrim {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--scrim) 32%, transparent);
    z-index: 90;
    opacity: 0;
    transition: opacity 0.2s var(--md-motion-easing-standard);
}

.finding-scrim.open { opacity: 1; }

/* Drawer */
.finding-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100vw);
    background: var(--surface-container-low);
    border-left: 1px solid var(--outline-variant);
    box-shadow: var(--md-elevation-3);
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s var(--md-motion-easing-emphasized-decelerate);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.finding-drawer.open { transform: translateX(0); }

.finding-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    flex-shrink: 0;
}

.finding-drawer-back {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--pico-primary);
    cursor: pointer;
}

.finding-drawer-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--pico-muted-color);
    cursor: pointer;
    padding: 0 0.25rem;
}

.finding-drawer-close:hover { color: inherit; }

.finding-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 2rem;
    -webkit-overflow-scrolling: touch;
}

.finding-detail-signal {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 1.25rem 0 1rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* Context — main editorial body (Axios-style scannable prose) */
.finding-detail-context {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--pico-color);
}

.finding-detail-context p {
    margin: 0 0 0.85rem 0;
}

.finding-detail-context p:last-child {
    margin-bottom: 0;
}

.finding-detail-context strong {
    font-weight: 500;
    color: var(--on-surface);
}

.finding-detail-context a {
    color: var(--pico-primary);
}

.finding-detail-context ul {
    margin: 0.5rem 0 0.85rem 0;
    padding-left: 1.25rem;
}

.finding-detail-context li {
    margin-bottom: 0.35rem;
}

/* Implication — labeled callout, hairline-separated from context */
.finding-detail-implication {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pico-muted-border-color);
}

.finding-detail-implication-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pico-muted-color);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.finding-detail-implication-body {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--pico-color);
}

.finding-detail-implication-body p {
    margin: 0 0 0.5rem 0;
}

.finding-detail-implication-body p:last-child {
    margin-bottom: 0;
}

.finding-detail-implication-body strong {
    font-weight: 500;
    color: var(--on-surface);
}

.finding-detail-implication-body a {
    color: var(--pico-primary);
}

.finding-detail-evidence-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pico-muted-color);
    margin: 1.5rem 0 0.5rem;
}

.finding-detail-evidence {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.finding-detail-evidence .insight-video-card { flex: none; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .finding-grid { grid-template-columns: 1fr; }
    .finding-drawer { width: 100vw; }
    .finding-detail-evidence { grid-template-columns: 1fr; }
}

/* ── App layout ── */

.app-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 100vh;
    height: 100vh;
    overflow: hidden;
    transition: grid-template-columns 0.2s ease;
}

.app-layout.sidebar-collapsed {
    grid-template-columns: 0px 1fr;
}

.app-layout.sidebar-collapsed .app-sidebar {
    visibility: hidden;
    border-right: none;
}

.app-layout.sidebar-collapsed .sidebar-expand {
    display: flex;
}

.app-layout.sidebar-collapsed .app-main {
    padding-left: 2.5rem;
}

/* ── Sidebar (design system app chrome) ──
   Navy chrome from design_system/ui_kits/app/shell.jsx. These --tt-sidebar-*
   tokens are single-value by design: the sidebar stays navy in both light and
   dark, so it does not follow the M3 surface roles the rest of the app uses. */

.app-sidebar {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    background: var(--tt-sidebar-bg);
    border-right: 1px solid var(--tt-sidebar-border);
    overflow: hidden;
    min-width: 0;
}

/* ── Sidebar toggle ── */

.sidebar-toggle {
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    color: var(--tt-sidebar-text);
    border-radius: var(--md-shape-corner-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s, background 0.12s;
}

.sidebar-toggle:hover {
    color: var(--tt-sidebar-text-active);
    background: var(--tt-sidebar-item-hover);
}

.sidebar-expand {
    display: none;
    position: absolute;
    top: 0.65rem;
    left: 0.5rem;
    z-index: 100;
    background: var(--surface-container-high);
    border: 1px solid var(--outline-variant);
    padding: 0.4rem;
    cursor: pointer;
    color: var(--on-surface-variant);
    border-radius: var(--md-shape-corner-full);
    align-items: center;
    justify-content: center;
    transition: color 0.12s, background 0.12s;
    box-shadow: var(--md-elevation-1);
}

.sidebar-expand:hover {
    color: var(--on-surface);
    background: var(--surface-container-highest);
}

/* Floating theme toggle pinned to the top-right of the main area. */
.app-theme-toggle-top {
    position: absolute;
    top: 0.85rem;
    right: 1.25rem;
    z-index: 50;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--md-shape-corner-full);
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.app-theme-toggle-top:hover {
    background: color-mix(in srgb, var(--on-surface-variant) 10%, var(--surface-container-low));
    color: var(--on-surface);
    box-shadow: var(--md-elevation-1);
}

.app-theme-toggle-top .material-symbols-outlined {
    font-size: 22px;
}

.app-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 1rem 1.5rem;
}

.app-sidebar-brand a {
    color: var(--tt-sidebar-text-active);
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.app-sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0.75rem;
}

.app-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    height: 2.75rem;
    padding: 0 1rem;
    border: none;
    /* 3px leading rule: transparent when idle, indigo when active — the kit's
       active affordance. Declared on every item so nothing shifts on select. */
    border-left: 3px solid transparent;
    border-radius: var(--tt-r-app-md);
    text-decoration: none;
    text-align: left;
    color: var(--tt-sidebar-text);
    font-family: var(--tt-font-label);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background 0.12s var(--md-motion-easing-standard), color 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.app-nav-link:hover {
    background: var(--tt-sidebar-item-hover);
    color: var(--tt-sidebar-text-active);
}

.app-nav-link:focus-visible {
    outline: none;
    background: var(--tt-sidebar-item-hover);
    color: var(--tt-sidebar-text-active);
}

.app-nav-link.active {
    border-left-color: var(--tt-accent);
    background: var(--tt-sidebar-item-active);
    color: var(--tt-sidebar-text-active);
    font-weight: 500;
}

.app-nav-link.active:hover {
    background: color-mix(in srgb, var(--tt-sidebar-item-hover) 100%, var(--tt-sidebar-item-active));
}

.app-nav-link .material-symbols-outlined,
.app-nav-section .material-symbols-outlined {
    /* inline-flex so width/height actually apply (default <i> is inline) and
       the glyph centres inside a uniform 24px box regardless of its own width. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.app-nav-link.active .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.app-nav-section {
    /* align-self:stretch + width:100% override whatever the global Beer rule
       on <nav> children does (sections were rendering at ~50px instead of the
       container edge, throwing the icon column off). */
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem 0.35rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tt-sidebar-text);
    opacity: 0.72;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-nav-section .material-symbols-outlined {
    opacity: 0.85;
}

/* Hierarchy — children sit indented under the section label, not just under
   the section icon. Section icon ~16px + 22px + 12px gap → ~52px, so children
   start their icon ~3.25rem in. */
.app-nav-link.app-nav-child {
    padding-left: 3.25rem;
}

.app-sidebar-spacer {
    flex: 1;
}

.app-sidebar-bottom {
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--tt-sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-theme-toggle {
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* --tt-error, not --error: the M3 role flips to a pale red in dark mode, but
   the sidebar is navy in both themes, so it needs the fixed brand red. */
.app-logout-link {
    color: var(--tt-error);
}

.app-logout-link:hover {
    color: var(--tt-error);
    background: color-mix(in srgb, var(--tt-error) 14%, transparent);
}

.app-logout-form {
    margin: 0;
}

.app-logout-form .app-logout-link {
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

/* ── Top bar (conversations dropdown) ── */

.chat-topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--outline-variant);
    flex-shrink: 0;
}

.chat-conv-picker {
    position: relative;
}

button.chat-conv-toggle {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.1rem;
    height: 2.4rem !important;
    padding: 0 0.95rem !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: var(--md-shape-corner-full) !important;
    background: var(--surface-container-low) !important;
    font-size: 0.88rem !important;
    font-weight: 500;
    font-family: inherit;
    color: var(--on-surface) !important;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    margin: 0 !important;
    line-height: 1;
    width: auto !important;
    box-shadow: none !important;
}

.chat-conv-toggle:hover {
    border-color: var(--outline);
    background: color-mix(in srgb, var(--on-surface) 6%, var(--surface-container-low)) !important;
}

.chat-conv-toggle .chat-toggle-arrow {
    font-size: 1.1rem;
    line-height: 1;
    transform: translateY(3px);
}

.chat-toggle-arrow {
    transition: transform 0.2s var(--md-motion-easing-standard);
}

.chat-conv-picker.open .chat-toggle-arrow {
    transform: rotate(180deg);
}

.chat-conv-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface-container-high);
    border: 1px solid var(--outline-variant);
    border-radius: var(--md-shape-corner-medium);
    box-shadow: var(--md-elevation-2);
    z-index: 50;
    padding: 0.35rem;
}

.chat-conv-picker.open .chat-conv-dropdown {
    display: block;
}

.chat-conv-option {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--md-shape-corner-small);
    text-decoration: none;
    color: var(--on-surface);
    font-size: 0.82rem;
    transition: background 0.1s;
}

.chat-conv-option:hover {
    background: color-mix(in srgb, var(--on-surface) 8%, transparent);
}

.chat-conv-option.active {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    font-weight: 500;
}

.chat-conv-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.chat-conv-option small {
    font-size: 0.7rem;
    color: var(--on-surface-variant);
    white-space: nowrap;
    flex-shrink: 0;
}

.chat-conv-empty {
    padding: 1rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--on-surface-variant);
}

.chat-new-form {
    margin: 0 !important;
}

button.chat-new-btn {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.4rem !important;
    height: 2.4rem !important;
    min-width: 2.4rem !important;
    flex-shrink: 0;
    border: none !important;
    border-radius: var(--md-shape-corner-full) !important;
    background: var(--primary-container) !important;
    color: var(--on-primary-container) !important;
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

button.chat-new-btn .material-symbols-outlined {
    font-size: 1.25rem;
}

button.chat-new-btn:hover {
    background: color-mix(in srgb, var(--on-primary-container) 8%, var(--primary-container)) !important;
    box-shadow: var(--md-elevation-1) !important;
}

/* ── Main area ── */

.app-main {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--surface);
}

.app-main > .container {
    padding-left: 2.5rem;
}

/* Attention pages are full-bleed dashboards: lift theme.css's centered
   1280px column so the heading-line date control reaches the true right
   edge of the screen. Other pages keep the column. */
.app-main > .container:has(.attention-page) {
    max-width: none;
    margin-inline: 0;
}

/* ── Empty state ── */

.chat-empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-empty-inner {
    text-align: center;
    max-width: 360px;
}

.chat-empty-icon {
    color: var(--outline);
    margin-bottom: 1rem;
}

.chat-empty-inner h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--on-surface);
}

.chat-empty-inner p {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    margin: 0;
}

/* ── Conversation ── */

.chat-conversation {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.chat-conv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--outline-variant);
    flex-shrink: 0;
}

.chat-conv-title h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--on-surface);
}

.chat-conv-model-select {
    all: unset;
    font-size: 0.72rem;
    color: var(--on-surface-variant);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: inherit;
    transition: border-color 0.12s;
}

.chat-conv-model-select:hover:not(:disabled) {
    border-color: #d1d5db;
}

.chat-conv-model-select:disabled {
    cursor: default;
    color: var(--on-surface-variant);
    opacity: 0.7;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.chat-share-form {
    margin: 0;
}

button.chat-share-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 6px !important;
    background: var(--surface) !important;
    color: var(--on-surface-variant) !important;
    font-size: 0.72rem !important;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.12s;
    margin: 0 !important;
    line-height: 1;
    width: auto !important;
    box-shadow: none !important;
}

button.chat-share-btn:hover {
    border-color: var(--outline) !important;
    background: var(--surface-container-high) !important;
    color: var(--on-surface) !important;
}

button.chat-share-copied {
    border-color: var(--rising) !important;
    background: var(--rising-container) !important;
    color: var(--on-rising-container) !important;
    transition: all 0.2s;
}

/* ── Messages area ── */

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-bubble {
    /* Cap line length at ~85ch for readability; 72% still wins on narrow viewports. */
    max-width: min(72%, 680px);
    padding: 0.7rem 1rem;
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.65;
}

.chat-bubble-content p:last-child {
    margin-bottom: 0;
}

.chat-bubble-content code {
    font-size: 0.8em;
    background: color-mix(in srgb, var(--on-surface) 8%, transparent);
    padding: 0.15em 0.35em;
    border-radius: 4px;
}

.chat-user {
    align-self: flex-end;
    background: var(--primary);
    color: var(--on-primary);
    border-bottom-right-radius: 6px;
}

.chat-user .chat-bubble-content code {
    background: rgba(255, 255, 255, 0.18);
}

.chat-assistant {
    align-self: flex-start;
    background: var(--surface-container-high);
    color: var(--on-surface);
    border-bottom-left-radius: 6px;
}

.chat-bubble-content a {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}

.chat-bubble-content a:hover {
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}

.chat-action {
    align-self: flex-start;
    max-width: 85%;
    font-size: 0.78rem;
    color: var(--on-surface-variant);
}

.chat-action details {
    border: none;
    padding: 0;
}

.chat-action details summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--on-surface-variant);
    font-weight: 500;
    user-select: none;
    padding: 0.25rem 0;
    list-style: none;
}

.chat-action details summary::-webkit-details-marker {
    display: none;
}

.chat-action details summary::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid #9ca3af;
    border-bottom: 1.5px solid #9ca3af;
    transform: rotate(-45deg);
    transition: transform 0.15s;
    margin-left: 0.15rem;
}

.chat-action details[open] summary::after {
    transform: rotate(45deg);
}

.chat-action details summary svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.chat-action pre {
    margin: 0.5rem 0 0;
    font-size: 0.72rem;
    overflow-x: auto;
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    color: var(--on-surface-variant);
}

.chat-action .table-wrap {
    margin-top: 0.5rem;
    max-height: 260px;
    overflow-y: auto;
    border-radius: 6px;
}

.chat-action .video-table {
    font-size: 0.72rem;
}

/* ── Model badge ── */

.chat-model-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 2rem;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

select.chat-model-select-header {
    all: unset;
    display: inline-block;
    padding: 0.2rem 1.4rem 0.2rem 0.6rem;
    border-radius: 2rem;
    background: #eff6ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.5rem center;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid #93c5fd;
    transition: border-color 0.12s, background-color 0.12s;
}

select.chat-model-select-header:hover {
    border-color: #60a5fa;
    background-color: #dbeafe;
}

/* Space the model and region pickers (and their locked badges) down from the
   conversation title above and apart from each other. */
select.chat-model-select-header,
.chat-model-badge {
    margin-top: 0.5rem;
}

select.chat-model-select-header + select.chat-model-select-header,
.chat-model-badge + .chat-model-badge {
    margin-left: 0.6rem;
}

/* ── Composer — aggressive Pico overrides ── */

.chat-composer-wrap {
    padding: 0.6rem 1.5rem 0.6rem;
    border-top: 1px solid var(--outline-variant);
    flex-shrink: 0;
}

.chat-composer-wrap form {
    margin: 0 !important;
}

.chat-composer {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 0.5rem;
    background: var(--surface-container-high);
    border: 1px solid var(--outline-variant);
    border-radius: var(--md-shape-corner-large);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    transition: border-color 0.15s;
}

.chat-composer:focus-within {
    border-color: var(--primary);
}

.chat-composer textarea,
textarea.chat-composer-input {
    flex: 1 !important;
    width: auto !important;
    display: block !important;
    border: none !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    resize: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0.2rem 0 !important;
    margin: 0 !important;
    max-height: 160px;
    overflow-y: auto;
    color: var(--on-surface) !important;
    caret-color: var(--primary);
    -webkit-appearance: none !important;
}

.chat-composer textarea::placeholder {
    color: var(--on-surface-variant);
}

.chat-composer button[type="submit"],
button.chat-send-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex-shrink: 0 !important;
    border-radius: var(--md-shape-corner-full) !important;
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    cursor: pointer !important;
    transition: background 0.12s, box-shadow 0.12s !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.chat-composer button[type="submit"]:hover,
button.chat-send-btn:hover {
    background: color-mix(in srgb, var(--on-primary) 8%, var(--primary)) !important;
    box-shadow: var(--md-elevation-1) !important;
}

.chat-send-btn svg {
    width: 14px;
    height: 14px;
}


.chat-messages-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-surface-variant);
    font-size: 0.875rem;
}

/* New conversation: center the composer vertically */
.chat-conversation--new .chat-messages {
    display: none;
}

.chat-conversation--new .chat-composer-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: none;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

/* ── Failed message + retry ── */

.chat-failed {
    border: 1px solid #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.chat-failed p {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
}

button.chat-retry-btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    background: var(--surface-container-lowest);
    color: #dc2626;
    font-size: 0.78rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
}

button.chat-retry-btn:hover {
    background: #fef2f2;
}

/* ── Charts in chat ── */

.chat-chart-wrap {
    align-self: stretch;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 10px;
    padding: 1rem;
}

.chat-chart {
    max-height: 300px;
}

/* ── Video cards in chat ── */

.chat-video-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.chat-video-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    transition: border-color 0.12s, box-shadow 0.12s;
}

.chat-video-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.chat-video-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.chat-video-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.6rem 0.5rem;
}

.chat-video-card-title {
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.chat-video-card-channel {
    font-size: 0.7rem;
    color: var(--on-surface-variant);
}

.chat-video-card-views {
    font-size: 0.68rem;
    color: var(--on-surface-variant);
    font-variant-numeric: tabular-nums;
}

/* ── Citations carousel (cite_videos tool result) ── */

.chat-citation-carousel {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 0.25rem 0.1rem 0.6rem;
    margin: 0.4rem 0 0.6rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Prevent the parent column flex from shrinking the carousel
       vertically, which would clip card content. */
    flex-shrink: 0;
    align-items: flex-start;
}

.chat-citation-carousel::-webkit-scrollbar {
    height: 6px;
}

.chat-citation-carousel::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: 3px;
}

.chat-citation-carousel .chat-video-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
}

/* ── Streaming / thinking state ── */

#stream-content,
#stream-content p,
#stream-content li,
#stream-content td,
#stream-content th,
#stream-content strong,
#stream-content em {
    color: #6b7280 !important;
    font-style: italic;
    font-size: 0.82rem;
}

#stream-content::after {
    content: "\25AE";
    animation: cursorBlink 1s step-end infinite;
    margin-left: 2px;
    color: var(--on-surface-variant);
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.chat-thinking {
    color: var(--on-surface-variant);
    font-style: italic;
    font-size: 0.82rem;
    background: var(--surface-container);
    border-color: var(--outline-variant);
}

.chat-composer-disabled textarea,
.chat-composer-disabled button {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Typing indicator ── */

.chat-generating {
    align-self: flex-start;
    padding: 0.5rem 0;
}

.chat-typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.6rem 1rem;
    background: var(--surface-container-high);
    border-radius: 16px 16px 16px 6px;
}

.chat-typing-indicator span {
    width: 7px;
    height: 7px;
    background: var(--on-surface-variant);
    border-radius: 50%;
    animation: chatTyping 1.4s infinite;
}

.chat-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatTyping {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1); }
}

/* ── Mobile ── */

@media (max-width: 768px) {
    :root {
        --pico-font-size: 14px;
    }

    .filter-bar {
        gap: 0.4rem;
    }

    .filter-pill select {
        max-width: 140px;
    }

    .video-table thead th,
    .video-table tbody td {
        padding: 0.4rem 0.5rem;
    }

    .thumbnail-cell {
        width: 80px;
        min-width: 60px;
        padding: 0.4rem 0 0.4rem 0.5rem;
    }

    .sparkline-cell {
        width: 100px;
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-pill {
        width: 100%;
    }

    .filter-pill select {
        max-width: none;
        flex: 1;
    }
}

/* ── System insights landing ── */

.system-insights {
    /* Hard cap horizontal extent so a misbehaving inner grid (e.g. the
       dashboard donuts squeezed into a narrow viewport) can never push the
       whole page sideways into a horizontal scrollbar. */
    max-width: 100%;
    overflow-x: clip;
}

.day-nav {
    /* Pico styles `<nav>` as flex with `justify-content: space-between`,
       which would push prev/next to opposite ends — override so the two
       buttons sit together on the left with breathing room between them. */
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.day-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--md-shape-corner-full);
    border: 1px solid var(--outline-variant);
    background: var(--surface);
    color: var(--on-surface-variant);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.day-nav-btn:hover {
    background: color-mix(in srgb, var(--on-surface) 6%, var(--surface));
    border-color: var(--outline);
    color: var(--on-surface);
    text-decoration: none;
}

/* ── Page masthead (shared across redesigned pages) ── */

.page-masthead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.page-kicker {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.5rem;
    padding: 0.2rem 0.7rem 0.2rem 0.55rem;
    border-radius: var(--md-shape-corner-full);
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.page-kicker-pulse {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55);
    animation: page-kicker-pulse 2s ease-out infinite;
}

@keyframes page-kicker-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
    70%  { box-shadow: 0 0 0 0.5rem rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.page-title {
    margin: 0 0 0.4rem;
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--on-surface);
    line-height: 1.15;
}

.page-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: var(--on-surface-variant);
    font-weight: 500;
    max-width: 60rem;
    line-height: 1.5;
}

/* ── Editorial masthead ── */

.system-insights-masthead {
    margin: 0 0 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.system-insights-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.45rem;
    padding: 0.2rem 0.65rem 0.2rem 0.55rem;
    border-radius: var(--md-shape-corner-full);
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.system-insights-pulse {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55);
    animation: system-insights-pulse 2s ease-out infinite;
}

@keyframes system-insights-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
    70%  { box-shadow: 0 0 0 0.5rem rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.system-insights-title {
    margin: 0 0 0.35rem;
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--on-surface);
    line-height: 1.1;
}

.system-insights-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: var(--on-surface-variant);
    font-weight: 500;
}

.system-insights-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--on-surface-variant);
    background: var(--surface-container);
    border: 1px dashed var(--outline-variant);
    border-radius: var(--md-shape-corner-medium);
}

.system-insights-empty p {
    margin: 0;
    font-size: 1rem;
}

/* ── Top picks ── */

.top-picks {
    margin: 0 0 2rem;
    padding: 1.25rem 1.4rem 1.4rem;
    background: linear-gradient(135deg, #fffbeb 0%, #fff 70%);
    border: 1px solid #fde68a;
    border-radius: 14px;
}

.top-picks-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    margin-bottom: 0.9rem;
}

.top-picks-heading {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #92400e;
}

.top-picks-heading::before {
    content: "★ ";
    color: #f59e0b;
}

.top-picks-sub {
    font-size: 0.82rem;
    color: #78716c;
    font-style: italic;
}

.top-picks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.85rem;
}

.top-pick-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
    border: 1px solid #fcd34d;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, border-color 0.15s;
}

.top-pick-card:hover {
    border-color: #f59e0b;
    text-decoration: none;
}

.top-pick-signal {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    color: #1e293b;
}

.top-pick-reason {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--on-surface-variant);
    font-style: italic;
}

/* Top picks — dark scheme: deep amber wash preserving the "gold highlight"
   editorial intent against a dark page. */
html.dark .top-picks,
body.dark .top-picks {
    background: linear-gradient(135deg,
        color-mix(in srgb, #f59e0b 12%, var(--surface-container)) 0%,
        var(--surface-container) 65%);
    border-color: color-mix(in srgb, #f59e0b 30%, var(--outline-variant));
}
html.dark .top-pick-card,
body.dark .top-pick-card {
    background: linear-gradient(135deg,
        color-mix(in srgb, #f59e0b 14%, var(--surface-container-high)) 0%,
        var(--surface-container-high) 70%);
    border-color: color-mix(in srgb, #f59e0b 35%, var(--outline-variant));
}
html.dark .top-pick-card:hover,
body.dark .top-pick-card:hover {
    border-color: #fbce6a;
}
html.dark .top-pick-signal,
body.dark .top-pick-signal {
    color: var(--on-surface);
}
html.dark .top-pick-reason,
body.dark .top-pick-reason {
    color: var(--on-surface-variant);
}
html.dark .top-picks-heading,
body.dark .top-picks-heading {
    color: #fbce6a;
}

.top-pick-meta {
    margin: 0;
    font-size: 0.8rem;
    margin-top: auto;
}

/* ── Insight feed ── */

.feed-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 -0.25rem 1.25rem;
    padding: 0.6rem 0.25rem;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.feed-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Pico's sibling-spacing rule adds margin-block-start to the topic form once
   the region form precedes it in the toolbar, knocking the two pills out of
   horizontal alignment. The toolbar's flex gap already spaces them, so cancel
   that margin. Scoped by id to outrank Pico's high-specificity selector. */
#feed-filter-form {
    margin-block-start: 0;
}

.feed-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--md-shape-corner-full);
    padding: 0.35rem 0.85rem 0.35rem 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.feed-filter:hover,
.feed-filter:focus-within {
    border-color: var(--outline);
    box-shadow: var(--md-elevation-1);
}

.feed-filter-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-variant);
    margin: 0;
}

.feed-filter select {
    border: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.1rem 0.25rem;
    margin: 0;
    color: var(--on-surface);
    cursor: pointer;
}

.feed-filter select:focus {
    outline: none;
}

/* ── Dashboard loading indicator (topic switch) ── */

.dashboard-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    border-radius: var(--md-shape-corner-medium);
    font-size: 0.88rem;
    color: var(--on-surface-variant);
}

.htmx-request.dashboard-loading {
    display: flex;
}

.dashboard-loading-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--outline-variant);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: dashboard-loading-spin 0.8s linear infinite;
}

@keyframes dashboard-loading-spin {
    to { transform: rotate(360deg); }
}

#feed-filter-form.htmx-request ~ #dashboard-area,
#dashboard-loading.htmx-request ~ #dashboard-area {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* ── Summary strip — color-coded counts above the feed ── */

.feed-summary-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
    margin: 0 0 1.5rem;
    padding: 0.65rem 0.85rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--md-shape-corner-medium);
}

.feed-summary-total {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--on-surface-variant);
}

.feed-summary-total strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--on-surface);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.feed-summary-divider {
    width: 1px;
    align-self: stretch;
    background: var(--pico-muted-border-color);
    margin: 0 0.15rem;
}

.feed-summary-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.feed-summary-chip strong {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Category-grouped feed ── */

.feed-groups {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.feed-category {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.feed-category-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.feed-category-rule {
    width: 0.25rem;
    height: 1rem;
    border-radius: 2px;
    background: var(--pico-muted-border-color);
}

.feed-category-header-rising_topics     .feed-category-rule { background: #22c55e; }
.feed-category-header-trending_formats  .feed-category-rule { background: #3b82f6; }
.feed-category-header-creator_signals   .feed-category-rule { background: #a855f7; }
.feed-category-header-audience_shifts   .feed-category-rule { background: #f59e0b; }
.feed-category-header-repeated_patterns .feed-category-rule { background: #ef4444; }

.feed-category-name {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface);
}

.feed-category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: var(--md-shape-corner-full);
    background: var(--surface-container-high);
    color: var(--on-surface-variant);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.insight-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.85rem;
}

/* Within a category section the colored card edge + section header already
   communicate the category, so suppress the per-card pill to cut repetition. */
.feed-category .finding-card-link .finding-category-tag {
    display: none;
}

.feed-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem 1rem 1.1rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-left: 4px solid var(--outline-variant);
    border-radius: var(--md-shape-corner-medium);
    text-decoration: none;
    color: var(--on-surface);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.feed-card:hover {
    text-decoration: none;
    box-shadow: var(--md-elevation-2);
    transform: translateY(-1px);
}

/* Category accents — left edge picks up the category palette */
.feed-card-rising_topics      { border-left-color: #22c55e; background: linear-gradient(90deg, #f0fdf4 0%, #fff 60px); }
.feed-card-trending_formats   { border-left-color: #3b82f6; background: linear-gradient(90deg, #eff6ff 0%, #fff 60px); }
.feed-card-creator_signals    { border-left-color: #a855f7; background: linear-gradient(90deg, #faf5ff 0%, #fff 60px); }
.feed-card-audience_shifts    { border-left-color: #f59e0b; background: linear-gradient(90deg, #fffbeb 0%, #fff 60px); }
.feed-card-repeated_patterns  { border-left-color: #ef4444; background: linear-gradient(90deg, #fef2f2 0%, #fff 60px); }

.feed-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.feed-card-meta {
    font-size: 0.85rem;
}

.feed-card-signal {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--on-surface);
    font-weight: 500;
}

/* Feed-card category washes — dark variants: same accent edge, dark-tinted body. */
html.dark .feed-card-rising_topics,
body.dark .feed-card-rising_topics {
    background: linear-gradient(90deg,
        color-mix(in srgb, #22c55e 14%, var(--surface-container-lowest)) 0%,
        var(--surface-container-lowest) 60px);
}
html.dark .feed-card-trending_formats,
body.dark .feed-card-trending_formats {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--primary) 16%, var(--surface-container-lowest)) 0%,
        var(--surface-container-lowest) 60px);
}
html.dark .feed-card-creator_signals,
body.dark .feed-card-creator_signals {
    background: linear-gradient(90deg,
        color-mix(in srgb, #a855f7 14%, var(--surface-container-lowest)) 0%,
        var(--surface-container-lowest) 60px);
}
html.dark .feed-card-audience_shifts,
body.dark .feed-card-audience_shifts {
    background: linear-gradient(90deg,
        color-mix(in srgb, #f59e0b 14%, var(--surface-container-lowest)) 0%,
        var(--surface-container-lowest) 60px);
}
html.dark .feed-card-repeated_patterns,
body.dark .feed-card-repeated_patterns {
    background: linear-gradient(90deg,
        color-mix(in srgb, #ef4444 14%, var(--surface-container-lowest)) 0%,
        var(--surface-container-lowest) 60px);
}

/* ── Insight viz: editorial data-journalism blocks ── */

.viz {
    margin: 1.75rem 0 2rem;
}

.viz-caption {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pico-muted-color);
    font-weight: 500;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Headline metric — the hero number */
.viz-headline {
    margin: 0.75rem 0 1.75rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: center;
}

.viz-headline-figure {
    display: flex;
    align-items: baseline;
    line-height: 0.9;
    color: var(--pico-color);
}

.viz-headline-value {
    font-size: 4.25rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.viz-headline-unit {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--pico-muted-color);
    margin-left: 0.15rem;
}

.viz-headline-caption {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--pico-color);
}

.viz-headline-caption strong {
    font-weight: 700;
}

/* Stacked-share — ranked horizontal bars, one row per channel */
.viz-stacked-group-summary {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--pico-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem 0;
}

.viz-stacked-rows {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.viz-stacked-row {
    display: grid;
    grid-template-columns: minmax(0, 11rem) 1fr auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--pico-color);
}

.viz-stacked-row-label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viz-stacked-row-bar {
    display: block;
    height: 0.65rem;
    background: var(--surface-variant);
    border-radius: 0.2rem;
    overflow: hidden;
}

.viz-stacked-row-fill {
    display: block;
    height: 100%;
    background: var(--pico-muted-border-color);
    border-radius: 0.2rem;
}

.viz-stacked-row.is-grouped .viz-stacked-row-fill {
    background: var(--pico-primary);
}

.viz-stacked-row.is-grouped .viz-stacked-row-label,
.viz-stacked-row.is-grouped .viz-stacked-row-percentage {
    color: var(--pico-primary);
}

.viz-stacked-row-percentage {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 3.2rem;
    text-align: right;
}

@media (max-width: 30rem) {
    .viz-stacked-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 0.6rem;
        row-gap: 0.2rem;
    }
    .viz-stacked-row-bar {
        grid-column: 1 / -1;
    }
}

/* Momentum sparkline */
.viz-sparkline {
    width: 100%;
    height: 3.5rem;
    display: block;
}

.viz-sparkline polyline {
    fill: none;
    stroke: var(--pico-primary);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.viz-momentum-up .viz-sparkline polyline { stroke: var(--rising); }
.viz-momentum-down .viz-sparkline polyline { stroke: var(--falling); }

.viz-momentum-arrow {
    font-size: 0.8rem;
    color: var(--pico-primary);
}

.viz-momentum-up .viz-momentum-arrow { color: var(--rising); }
.viz-momentum-down .viz-momentum-arrow { color: var(--falling); }

/* Comparison twin bars */
.viz-comparison-row {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

.viz-comparison-label {
    color: var(--pico-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viz-comparison-track {
    display: block;
    background: var(--pico-muted-border-color);
    border-radius: 0.2rem;
    height: 0.65rem;
    overflow: hidden;
}

.viz-comparison-bar {
    display: block;
    height: 100%;
    background: var(--pico-primary);
}

.viz-comparison-value {
    font-weight: 700;
    color: var(--pico-color);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}

/* "For publishers" callout — soft tinted block, page-themed */
.finding-detail-implication-inverted {
    margin-top: 2rem;
    padding: 1.1rem 1.25rem 1.2rem;
    background: var(--pico-muted-border-color);
    border-radius: 0.4rem;
    border-top: 0;
    border-left: 3px solid var(--pico-primary);
}

.finding-detail-implication-inverted .finding-detail-implication-label {
    color: var(--pico-primary);
    margin-bottom: 0.4rem;
}

.finding-detail-implication-headline {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pico-color);
    letter-spacing: -0.005em;
}

.finding-detail-implication-inverted .finding-detail-implication-body {
    color: var(--pico-color);
    font-size: 0.95rem;
    line-height: 1.55;
    font-weight: 400;
}

.finding-detail-evidence-heading {
    margin: 2rem 0 0.75rem;
}

/* Hero evidence card — view count gets the typographic punch */
.insight-video-card-hero {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.9rem 1rem;
    background: var(--pico-card-background-color, #fff);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.4rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
}

.insight-video-card-hero:hover {
    border-color: var(--pico-primary);
}

.insight-video-card-views-hero {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--pico-color);
    letter-spacing: -0.02em;
    line-height: 1;
}

.insight-video-card-views-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    color: var(--pico-muted-color);
    margin-bottom: 0.4rem;
}

.insight-video-card-hero .insight-video-card-title {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--pico-color);
    margin-bottom: 0.15rem;
}

.insight-video-card-hero .insight-video-card-channel::before {
    content: "● ";
    color: var(--pico-muted-color);
    margin-right: 0.1rem;
}

.insight-video-card-hero .insight-video-card-channel {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pico-muted-color);
    font-weight: 500;
}

/* Teaser-card metric chip — drives variety on the grid */
.finding-card-metric {
    display: flex;
    align-items: baseline;
    line-height: 0.9;
    margin: 0.5rem 0 0.4rem;
    color: var(--pico-color);
}

.finding-card .finding-card-metric-value {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--on-surface) !important;
    -webkit-text-fill-color: var(--on-surface) !important;
}

.finding-card-metric-unit {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pico-muted-color);
    margin-left: 0.15rem;
}

/* ── Insight detail: theme-led layout ── */

.section-title {
    margin: 0 0 0.85rem 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pico-muted-color);
    font-weight: 600;
}

/* Themes + creators rendered side-by-side on the dashboard. Each donut keeps
   its own card; this wrapper just lays them out horizontally with a single
   shared bottom margin. Collapses to a single column under 960px so the
   legend tables stay readable. */
.dashboard-donuts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 0 0 1.5rem;
}

.dashboard-donuts .audience-donut {
    /* !important on the top margin because Beer CSS adds a sibling-margin
       (`article + article` style) to whatever the second panel resolves to,
       which knocked CREATORS 15px below THEMES (different top.y, same grid
       row). The pair must share the same top edge for the donuts to read
       as horizontally aligned. */
    margin: 0 !important;
    min-width: 0;
    /* Panels are flex children of the 2-col grid; `overflow: hidden` keeps any
       legend overrun contained inside the panel rather than expanding the
       grid cell and forcing a page-level scrollbar. */
    overflow: hidden;
}

/* Force the row's items to start at the same y. Belt + braces in case the
   container's default `align-items: normal` gets clobbered by a Beer rule. */
.dashboard-donuts {
    align-items: start;
}

/* Donut + legend layout is driven by container queries on the
   `.audience-donut` panel itself (see below). The dashboard wrapper only
   handles its own 2-col panel grid here. */

/* Tighter column constraints + table-layout:fixed so cells respect their
   widths rather than expanding to fit content (which is what was pushing
   the page wider than the viewport before). */
.dashboard-donuts .audience-donut-legend {
    width: 100%;
    table-layout: fixed;
}

.dashboard-donuts .donut-legend-label,
.dashboard-donuts .donut-legend-channel,
.dashboard-donuts .donut-legend-video {
    max-width: 100%;
}

.dashboard-donuts .donut-legend-spark-cell {
    width: 4rem;
    min-width: 4rem;
}

.dashboard-donuts .donut-legend-spark {
    width: 100%;
    max-width: 4rem;
}

/* Dashboard layout: chart stacks above the legend table within each panel,
   so the table gets the full panel width. Overrides the container-query
   2-col rule (chart | table) which leaves the title column too cramped. */
.dashboard-donuts .audience-donut-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    gap: 1rem;
}

.dashboard-donuts .audience-donut-chart {
    max-width: 12rem;
    justify-self: center;
}

@media (max-width: 960px) {
    .dashboard-donuts {
        grid-template-columns: 1fr;
    }
}

/* Themes / creators donut + legend */
.audience-donut {
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.25rem 1.25rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--md-shape-corner-medium);
    container-type: inline-size;
}

/* Default (narrow): donut on top, legend below at full panel width. The
   container query below flips to side-by-side once the panel itself is
   wide enough to comfortably fit a 4-column legend next to the donut. */
.audience-donut-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    justify-items: center;
}

.audience-donut-chart {
    margin: 0;
    aspect-ratio: 1 / 1;
    max-width: 14rem;
    width: 100%;
    position: relative;
}

@container (min-width: 30rem) {
    .audience-donut-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 1.5rem;
        align-items: center;
        justify-items: stretch;
    }
    .audience-donut-chart {
        max-width: 100%;
        justify-self: center;
    }
}

.donut-tooltip {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
    padding: 0 12%;
}

.donut-tooltip-item {
    display: none;
    line-height: 1.25;
}

.donut-tooltip-item.slice-active {
    display: block;
}

.donut-tooltip-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pico-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.donut-tooltip-percentage {
    display: block;
    font-size: 0.75rem;
    color: var(--pico-muted-color);
}

.audience-donut.slice-hovering .donut-center-value,
.audience-donut.slice-hovering .donut-center-label {
    visibility: hidden;
}

.donut {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.donut-track {
    fill: none;
    stroke: var(--surface-variant);
    stroke-width: 4;
}

.donut-segment {
    fill: none;
    stroke-width: 4;
    cursor: pointer;
}

.donut-segment:hover,
.donut-segment.slice-active {
    stroke-width: 5.5;
}

.audience-donut.slice-hovering .donut-segment:not(.slice-active) {
    opacity: 0.3;
}

.audience-donut-legend tbody tr.slice-active,
.audience-donut-legend tbody tr.slice-active:hover {
    background: var(--surface-container-highest) !important;
    color: var(--on-surface) !important;
}

.audience-donut-legend tbody tr.slice-active td,
.audience-donut-legend tbody tr.slice-active:hover td {
    color: var(--on-surface) !important;
    background: transparent !important;
}

.audience-donut-legend tbody tr.slice-active .donut-legend-label {
    font-weight: 500;
    color: var(--pico-color);
}

.audience-donut-legend tbody tr {
    cursor: pointer;
}

.donut-center-value,
.donut-center-label {
    transform: rotate(90deg);
    transform-origin: 21px 21px;
    fill: var(--pico-color);
    text-anchor: middle;
}

.donut-center-value {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: -0.05em;
}

.donut-center-label {
    font-size: 2.4px;
    fill: var(--pico-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.audience-donut-legend {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.audience-donut-legend thead th {
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pico-muted-color);
    font-weight: 500;
    padding: 0 0.6rem 0.4rem 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.audience-donut-legend tbody td {
    padding: 0.4rem 0.6rem 0.4rem 0;
    vertical-align: top;
    border-bottom: 1px solid var(--outline-variant);
}

.audience-donut-legend tbody tr:last-child td {
    border-bottom: 0;
}

.donut-legend-label {
    font-weight: 500;
    color: var(--pico-color);
    text-transform: capitalize;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
}

.theme-parent-breadcrumb {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: none;
    color: var(--pico-muted-color);
    margin-bottom: 2px;
}

.donut-legend-share,
.donut-legend-num {
    font-variant-numeric: tabular-nums;
    color: var(--pico-color);
    font-weight: 500;
}

.donut-legend-channel {
    color: var(--pico-muted-color);
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
}

.donut-legend-video {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.3;
    min-width: 0;
}

.donut-legend-video-title {
    font-weight: 500;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;
}

.donut-legend-video-channel {
    font-size: 0.78rem;
    color: var(--pico-muted-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Column widths — fixed table-layout was giving every column the same slice
   of width, which broke "Transmission" mid-character and made the title
   column unusably narrow. Theme/creator + top-video need real estate. */
.audience-donut-legend-col-theme    { width: 24%; }
.audience-donut-legend-col-creator  { width: 32%; }
.audience-donut-legend-col-share    { width: 14%; }
.audience-donut-legend-col-num      { width: 12%; }
.audience-donut-legend-col-trend    { width: 16%; }
.audience-donut-legend-col-video    { width: 46%; }

.donut-legend-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pico-muted-color);
}

.donut-legend-trend-up   { color: #15803d; }
.donut-legend-trend-down { color: #b91c1c; }
.donut-legend-trend-flat { color: var(--pico-muted-color); }

/* Legend sparkline cell — narrow column that holds either the per-row spark
   or a fallback arrow when there's only a single point in the series. */
.donut-legend-spark-cell {
    width: 5.5rem;
    min-width: 5.5rem;
}

.donut-legend-spark {
    width: 5rem;
    height: 1.4rem;
    display: block;
}

.donut-legend-spark polyline {
    fill: none;
    stroke: var(--pico-muted-color);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.donut-legend-spark-up   polyline { stroke: #15803d; }
.donut-legend-spark-down polyline { stroke: #b91c1c; }

.audience-donut-legend tbody tr {
    transition: background-color 0.12s;
}

.audience-donut-legend tbody tr:hover {
    background: #f8fafc;
}

/* Insights section (tertiary on the insight detail page) */
.findings-section {
    margin: 0 0 1.5rem;
}

/* Compact teaser card variant — embedded mini-viz, no context paragraph */
.finding-card-compact .finding-signal {
    -webkit-line-clamp: 2;
    font-size: 0.92rem;
}

.finding-card-compact .finding-card-metric {
    margin: 0.2rem 0 0.1rem;
}

.finding-card-compact .finding-card-metric-value {
    font-size: 1.55rem;
}

.finding-card-viz {
    margin: 0.35rem 0 0.1rem;
    overflow: hidden;
}

.finding-card-viz .viz {
    margin: 0;
}

.finding-card-viz .viz figcaption,
.finding-card-link .viz figcaption {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
}

.finding-card-viz .viz-sparkline,
.finding-card-link .viz-sparkline {
    height: 2rem;
}

.finding-card-viz .viz-stacked-bar,
.finding-card-link .viz-stacked-bar {
    height: 1.75rem;
}

/* Inside compact cards the segment is too short to stack label + percentage, so lay
   them out inline. The label takes priority space and truncates; percentage is fixed
   width on the right. Narrow segments naturally collapse to just the percentage. */
.finding-card-viz .viz-stacked-seg,
.finding-card-link .viz-stacked-seg {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0 0.5rem;
}

.finding-card-viz .viz-stacked-seg-label,
.finding-card-link .viz-stacked-seg-label {
    font-size: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
}

.finding-card-viz .viz-stacked-seg-percentage,
.finding-card-link .viz-stacked-seg-percentage {
    font-size: 0.7rem;
    flex: 0 0 auto;
}

.finding-card-viz .viz-stacked-bracket,
.finding-card-link .viz-stacked-bracket {
    display: none;
}

.finding-card-viz .viz-comparison-row,
.finding-card-link .viz-comparison-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
    gap: 0.4rem;
    font-size: 0.75rem;
    padding: 0.15rem 0;
}

/* Pico's button color inheritance dropped these to a near-invisible tint on
   finding cards (esp. the top-pick cream gradient). Force dark slate to
   match the .finding-card-metric-value override above. */
.finding-card-viz .viz-comparison-label,
.finding-card-link .viz-comparison-label,
.finding-card-viz .viz-comparison-value,
.finding-card-link .viz-comparison-value {
    color: var(--on-surface) !important;
    -webkit-text-fill-color: var(--on-surface) !important;
}

.finding-card-viz .viz-comparison-value,
.finding-card-link .viz-comparison-value {
    font-size: 0.78rem;
}

.finding-card-viz .viz-headline,
.finding-card-link .viz-headline {
    display: none;
}

/* Link-mode card (system insights Top Picks + Feed). Rendered as a <button>
   that opens the finding drawer; explicit text-align/font/cursor overrides
   reset native button defaults so the card reads as a clickable surface
   rather than a control. */
.finding-card-link {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.95rem 1.1rem 1rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--pico-muted-border-color);
    border-left: 4px solid var(--pico-muted-border-color);
    border-radius: 8px;
    text-decoration: none;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.finding-card-link template { display: none; }

.finding-card-link:hover {
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    border-color: var(--pico-primary);
}

.finding-card-link[data-category="rising_topics"]    { border-left-color: #22c55e; }
.finding-card-link[data-category="trending_formats"] { border-left-color: #3b82f6; }
.finding-card-link[data-category="creator_signals"]  { border-left-color: #a855f7; }
.finding-card-link[data-category="audience_shifts"]  { border-left-color: #f59e0b; }
.finding-card-link[data-category="repeated_patterns"]{ border-left-color: #ef4444; }

.finding-card-link-top_pick {
    background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
    border-color: #fcd34d;
}

.finding-card-link-top_pick:hover {
    border-color: #f59e0b;
}

.finding-card-link-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.finding-card-link-meta {
    font-size: 0.78rem;
}

.finding-card-link .finding-signal {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--pico-color);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.finding-card-link .finding-card-metric {
    margin: 0.15rem 0 0.1rem;
}

.finding-card-link .finding-card-metric-value {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    /* Force dark slate; some pico/h-tag inheritance and the top-pick card's
       cream gradient were dropping this to a near-invisible tint on cards
       like Top Picks. !important + -webkit-text-fill-color match the
       compact-card override (.finding-card .finding-card-metric-value). */
    color: var(--on-surface) !important;
    -webkit-text-fill-color: var(--on-surface) !important;
}

.finding-card-link .finding-card-metric-unit {
    color: var(--on-surface-variant);
}

.finding-card-link-reason {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--pico-muted-color);
    font-style: italic;
}

@media (max-width: 768px) {
    .audience-donut-grid { grid-template-columns: 1fr; }
    .audience-donut-chart { max-width: 180px; }
    .audience-donut-legend { font-size: 0.78rem; }
}

/* ── Explore: comparison chips above the chart ── */

.compare-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.compare-chips-label {
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    margin-right: 0.25rem;
}

.compare-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 2rem;
    background: var(--surface-container-lowest);
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.compare-chip:hover {
    border-color: var(--pico-primary);
}

.compare-chip > input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
}

.compare-chip-text {
    user-select: none;
}

.compare-chip-remove {
    color: var(--pico-muted-color);
    font-size: 1rem;
    line-height: 1;
}

.compare-chip:hover .compare-chip-remove {
    color: var(--pico-primary);
}

/* ── M3 text field (filled) — shared by login + filter inputs ── */

.md-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.md-field > span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--on-surface-variant);
}

.md-field input,
input.md-input {
    width: 100%;
    height: 3rem;
    padding: 0 0.9rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--on-surface);
    background: var(--surface-container-highest);
    border: none;
    border-bottom: 1px solid var(--on-surface-variant);
    border-radius: var(--md-shape-corner-extra-small) var(--md-shape-corner-extra-small) 0 0;
    transition: border-color 0.15s, background 0.15s;
}

.md-field input:focus,
input.md-input:focus {
    outline: none;
    border-bottom: 2px solid var(--primary);
    background: var(--surface-container-high);
}

/* Locked field — readonly input where the value is fixed (e.g. signup email
   pre-filled from an accepted invitation). Mutes the input and suppresses
   the focus underline so it doesn't read as editable. */
.md-field-locked input,
.md-field-locked input:focus {
    color: var(--on-surface-variant);
    cursor: not-allowed;
    border-bottom: 1px solid var(--on-surface-variant);
    background: var(--surface-container-highest);
}

/* ── M3 filled button — shared ── */

.md-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1.5rem;
    border: none;
    border-radius: var(--md-shape-corner-full);
    background: var(--primary);
    color: var(--on-primary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-sizing: border-box;
    transition: box-shadow 0.15s, background 0.15s;
}

.md-button:hover {
    box-shadow: var(--md-elevation-1);
    background: color-mix(in srgb, var(--on-primary) 8%, var(--primary));
}

.md-button:active {
    box-shadow: none;
}

/* ── Login ── */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--surface-container-low);
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--md-shape-corner-large);
    box-shadow: var(--md-elevation-1);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.login-brand .material-symbols-outlined {
    color: var(--primary);
    font-size: 30px;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.login-brand span {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--on-surface);
}

.login-sub {
    margin: 0.25rem 0 1.5rem;
    color: var(--on-surface-variant);
    font-size: 0.9rem;
}

.login-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--error-container);
    color: var(--on-error-container);
    border-radius: var(--md-shape-corner-small);
    font-size: 0.875rem;
}

.login-error .material-symbols-outlined {
    font-size: 20px;
}

.login-message {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 0.95rem;
    line-height: 1.5;
}

.login-message a {
    color: var(--primary);
    text-decoration: none;
}

.login-message a:hover {
    text-decoration: underline;
}

.login-card form {
    display: flex;
    flex-direction: column;
}

.login-card .md-button {
    width: 100%;
    height: 2.75rem;
    margin-top: 0.5rem;
}

/* ── Tom Select — global M3 theming for dropdown options + selection display.
   Tom Select ships its own .option.active / placeholder styling that defaults
   to light surfaces, which becomes a bright white wash in dark mode. These
   selectors override its defaults across every chip/filter on the app. */

.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control {
    background: transparent;
    color: var(--on-surface);
    border: none;
    box-shadow: none;
}

/* Tom Select renders the selected single-select value as a <div class="item">
   inside .ts-control. Its default styling can come through as italic or with
   reduced opacity, which on a dark surface reads as placeholder-style dim. */
.ts-wrapper .ts-control > .item,
.ts-wrapper.single .ts-control > .item {
    color: var(--on-surface) !important;
    opacity: 1 !important;
    font-style: normal !important;
}

.ts-wrapper .ts-control > input,
.ts-wrapper .ts-control > input:focus,
.ts-wrapper.focus .ts-control > input {
    color: var(--on-surface) !important;
    background: transparent !important;
    opacity: 1 !important;
    font-style: normal !important;
    border: none !important;
    box-shadow: none !important;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    background: transparent !important;
}

.ts-wrapper .ts-control > input::placeholder,
.ts-wrapper.focus .ts-control > input::placeholder {
    color: var(--on-surface-variant) !important;
    opacity: 0.85 !important;
    font-style: normal !important;
}

.ts-dropdown {
    background: var(--surface-container-high);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    border-radius: var(--md-shape-corner-small);
    box-shadow: var(--md-elevation-2);
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header {
    color: var(--on-surface);
    padding: 0.55rem 0.85rem;
    background: transparent;
}

.ts-dropdown .option.active {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
}

.ts-dropdown .option.selected {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--on-surface);
    font-weight: 500;
}

.ts-dropdown .option.selected.active {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
}

.ts-dropdown .no-results,
.ts-dropdown .create {
    color: var(--on-surface-variant);
    padding: 0.55rem 0.85rem;
}

/* Selected value text shown in the control (single-select). Tom Select renders
   the selection as text inside the control; if .ts-control's color isn't set
   the text inherits an inline default that looked dim against our themed bg. */
.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control > div:not(.placeholder) {
    color: var(--on-surface);
}

.ts-wrapper .ts-control input::placeholder {
    color: var(--on-surface-variant);
    opacity: 1;
}

.ts-wrapper.single .ts-control > .placeholder {
    color: var(--on-surface-variant);
}

/* ── ATTENTION: Share page (docs/attention-plan.md) ──
   Format series colors: shorts ride the product accent (indigo), longform the
   DS amber label color. Signal orange stays rationed to live-data moments. */

.attention-page {
    /* full-bleed dashboard: no centered column, so the heading-line date
       control sits at the true right edge of the screen on any monitor */
    max-width: none;
    margin: 0;
    padding: 1.75rem 2.25rem 3rem;
}

.attention-toolbar {
    display: flex;
    align-items: center;
    margin: 0.75rem 0 0.25rem;
}

/* ── Weekly Insight feed ──
   A short scrollable column of deviation cards: number-led claim, one
   visual (baseline bars / quote / thumbnails), muted receipt line. The
   feed page reuses the attention shell but caps its own column width —
   feeds read best narrow. */

.feed-page .feed-column {
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0.75rem auto 0;
}

.feed-week-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--on-surface);
    font-variant-numeric: tabular-nums;
    padding: 0 0.3rem;
    white-space: nowrap;
}

.feed-card {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    box-shadow: var(--tt-shadow-sm);
    padding: 0.85rem 1.15rem 0.7rem;
}

.feed-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.feed-chip {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
}

.feed-chip--breakout { background: var(--tt-accent-light); color: var(--tt-accent-hover); }
.feed-chip--durable { background: rgba(13, 148, 136, 0.12); color: #0D9488; }
.feed-chip--mood { background: rgba(236, 72, 153, 0.12); color: #EC4899; }
.feed-chip--watch { background: rgba(124, 58, 237, 0.12); color: #7C3AED; }
.feed-chip--debut { background: var(--tt-signal-soft); color: var(--tt-signal-deep); }

html.dark .feed-chip--debut,
body.dark .feed-chip--debut {
    background: rgba(255, 87, 34, 0.16);
    color: #FF8A65;
}

.feed-number {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.feed-claim {
    font-size: 1.02rem;
    line-height: 1.5;
    margin: 0 0 0.7rem;
}

.feed-baseline {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 0.75rem;
}

.feed-baseline-row {
    display: grid;
    grid-template-columns: 64px 1fr 48px;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    color: var(--on-surface-variant);
}

.feed-baseline-track {
    height: 10px;
    background: var(--surface-container);
    border-radius: 4px;
    overflow: hidden;
}

.feed-baseline-track i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--tt-accent);
    min-width: 2px;
}

.feed-baseline-row--norm .feed-baseline-track i {
    background: var(--outline);
}

.feed-baseline-val {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--on-surface);
}

.feed-quote {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.9rem;
    border-left: 3px solid var(--outline-variant);
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--on-surface);
}

.feed-quote-likes {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: var(--on-surface-variant);
    font-variant-numeric: tabular-nums;
}

.feed-thumbs {
    display: flex;
    gap: 5px;
    margin-bottom: 0.7rem;
}

/* Thumbnails link to their watch page: the <a> is the flex item, so it takes
   the width the bare <img> used to and the image fills it. */
.feed-thumbs a {
    width: 33%;
    display: block;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
}

.feed-thumbs img {
    width: 33%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    background: var(--surface-container);
}

.feed-thumbs a img {
    width: 100%;
    border-radius: 0;
    transition: transform 0.15s;
}

.feed-thumbs a:hover img {
    transform: scale(1.04);
}

.feed-receipt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    border-top: 1px solid var(--outline-variant);
    padding-top: 0.55rem;
    font-size: 0.72rem;
    color: var(--on-surface-variant);
}

.feed-open {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

.feed-open i {
    font-size: 0.9rem;
}

/* ── ATTENTION: header row + the one date control ──
   Every attention page: kicker/title/subtitle left, date control right on
   the heading line — same component, same place, on all four pages. */
.attention-header {
    /* the page h1 and the date control share this row: control rightmost,
       vertically centered on the heading itself */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Right-hand cluster on the heading line: Market, then Category, then Date —
   one row, vertically centered on the h1. */
.attention-header-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* All three pills share one height and rounding so they read as one aligned
   row (the market pill is fully-round elsewhere; here it matches its
   neighbours). */
.attention-header-controls .feed-filter,
.attention-header-controls .movement-category-form .ts-control,
.attention-header-controls .attention-datejump {
    box-sizing: border-box;
    min-height: 40px;
    border-radius: var(--tt-r-app-md);
}

/* Pico adds margin-block-start to a <form> that follows a sibling (same rule
   the toolbar's #feed-filter-form already cancels). Here it dropped the
   Category form 15px below Market and Date; the flex gap already spaces the
   row, so cancel it — scoped by id to outrank Pico's high-specificity selector,
   or the pill sits off the shared centre line. */
#movement-category-form {
    margin-block-start: 0;
}

/* Vertically centre the value: Tom Select's flex control defaults to
   align-items: normal (stretch), which stretches the value box to the pill
   height and pins the single text line to its top (the Category value read
   high). Centre the flex children so Market and Category sit identically. */
.attention-header-controls .ts-wrapper .ts-control {
    align-items: center;
}

/* Dropdown affordance: a caret on the Market + Category selects, matching the
   date pill's, so it's obvious they open (and accept typing to filter). It is
   an IN-FLOW flex item (position: static, not Tom Select's default absolute) so
   it reserves real width — an absolute caret sized to nothing and overlapped
   the value text ("United States (US)" ran under it). A fixed left margin keeps
   the same value→caret gap on every field (never shoved to a far edge). */
.attention-header-controls .ts-wrapper .ts-control::after {
    content: "expand_more";
    font-family: "Material Symbols Outlined";
    font-size: 1.05rem;
    line-height: 1;
    color: var(--on-surface-variant);
    position: static;
    transform: none;
    align-self: center;
    flex: 0 0 auto;
    margin-left: 0.5rem;
    border: none;
    pointer-events: none;
}

/* When open, the search input takes the line below the value; drop the caret so
   it doesn't wrap onto its own row. */
.attention-header-controls .ts-wrapper.dropdown-active .ts-control::after {
    display: none;
}

/* When a field is open, the search input drops to its own line under the
   current value, so the "Type to search ..." hint reads the same on every
   field — Market and Category both show it below, never cramped inline. */
.attention-header-controls .ts-wrapper.dropdown-active .ts-control > input {
    flex: 1 1 100%;
    min-width: 4rem;
    margin-top: 2px;
}

.attention-datectl {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.attention-datejump {
    position: relative;  /* anchors Beer's invisible input overlay */
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-md);
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.attention-datejump:hover {
    background: var(--surface-container);
    border-color: var(--outline);
}

.attention-datejump i {
    font-size: 1.1rem;
}

.attention-datejump-date {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--on-surface);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.attention-datejump-caret {
    font-size: 1rem;
    opacity: 0.7;
}

.attention-datejump input {
    cursor: pointer;
    color-scheme: light;
}

html.dark .attention-datejump input,
body.dark .attention-datejump input {
    color-scheme: dark;
}

.attention-datenav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.attention-datenav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--tt-r-app-md);
    color: var(--on-surface-variant);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.attention-datenav-btn:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}

/* On the latest (or earliest) day one arrow has nowhere to go. Hide it rather
   than leave a greyed, non-functional chevron hanging beside the date pill. */
.attention-datenav-btn.is-disabled {
    display: none;
}

.attention-datenav-date {
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 0 0.35rem;
}

.attention-datenav-latest {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.attention-caption {
    margin: 0;
    font-size: 0.9rem;
    color: var(--on-surface-variant);
    max-width: 72ch;
}

.attention-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.attention-dot--shorts { background: var(--tt-accent); }
.attention-dot--longform { background: var(--tt-label-creator); }

/* ── ATTENTION: Share treemap ──
   Categorical palette: 8 fixed hues assigned by trailing-week rank; the tail
   renders in the neutral fill. The same hexes pass the dataviz validator on
   BOTH mode surfaces (worst adjacent pair sits in the 6-8 CVD warn band,
   which is legal here because every cell carries a direct label and a 2px
   surface gap); only the tail neutral is per-mode. */

:root,
html.light,
body.light {
    --viz-cat-1: #6366F1;
    --viz-cat-2: #D97706;
    --viz-cat-3: #2563EB;
    --viz-cat-4: #15803D;
    --viz-cat-5: #7C3AED;
    --viz-cat-6: #0D9488;
    --viz-cat-7: #EC4899;
    --viz-cat-8: #0891B2;
    --viz-tail: #A5AEBB;
}

html.dark,
body.dark {
    --viz-tail: #4B5563;
}

/* Left-aligned enrichment for the treemap: the format's volume stat, the
   one-line "point" naming each format's leaders, and the day's caption. All
   three are one bulleted readout, set off from the tab row above — tight
   against the tabs they read as part of the format control, not about it.
   Block list, not flex: flex items drop their ::marker in some browsers. */
.share-viz-meta {
    margin: 1.15rem 0 1rem;
    padding-left: 1.15rem;
    list-style: disc;
}

.share-viz-meta > li {
    margin: 0 0 0.45rem;
}

.share-viz-meta > li:last-child {
    margin-bottom: 0;
}

.share-viz-meta > li::marker {
    color: var(--on-surface-variant);
}

.share-format-stat {
    margin: 0;
    font-size: 0.85rem;
    color: var(--on-surface-variant);
}

.share-format-stat strong {
    color: var(--on-surface);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.share-viz-point {
    margin: 0;
    font-size: 0.9rem;
    color: var(--on-surface);
    max-width: 72ch;
}

.share-card {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    box-shadow: var(--tt-shadow-sm);
    padding: 1rem 1.2rem 1.2rem;
    margin-top: 0.75rem;
}

.share-card-note {
    font-size: 0.72rem;
    color: var(--on-surface-variant);
    text-align: right;
    margin-bottom: 0.6rem;
}

.share-treemap {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 10;
    min-height: 400px;
    border-radius: 8px;
    overflow: hidden;
}

.share-cell {
    position: absolute;
    display: block;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    padding: 0.5rem 0.6rem;
    text-align: left;
    font: inherit;
    background: var(--viz-tail);
    /* 2px surface ring = the dataviz mark-gap between adjacent fills */
    box-shadow: 0 0 0 2px var(--surface);
    transition: filter 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.share-cell:hover,
.share-cell:focus-visible {
    filter: brightness(1.08);
}

.share-cell-name {
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.2;
    color: #FFFFFF;
}

.share-cell-share {
    display: block;
    font-size: 1.02rem;
    font-weight: 800;
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
    margin-top: 0.12rem;
}

.share-cell-views {
    display: block;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
}

.share-cell--tiny .share-cell-share,
.share-cell--tiny .share-cell-views {
    display: none;
}

.share-cell--tiny .share-cell-name {
    font-size: 0.68rem;
}

.share-cell--micro .share-cell-name {
    display: none;
}

/* ── ATTENTION: Graph (zoomable story circles) ── */

.graph-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    cursor: pointer;
    user-select: none;
}

.graph-toggle input {
    accent-color: var(--primary);
}

.graph-hint {
    margin-left: 0.4rem;
    font-size: 0.74rem;
    color: var(--on-surface-variant);
    opacity: 0.75;
}

.graph-stage {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
    align-items: start;
    margin-top: 0.75rem;
}

@media (max-width: 1000px) {
    .graph-stage {
        grid-template-columns: 1fr;
    }
}

.graph-card {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    box-shadow: var(--tt-shadow-sm);
    padding: 0.8rem;
}

#graphChart {
    display: block;
    width: 100%;
    cursor: pointer;
}

#graphChart text {
    pointer-events: none;
}

.graph-crumb {
    font-size: 0.78rem;
    color: var(--on-surface-variant);
    padding: 0.2rem 0.4rem 0.5rem;
    min-height: 1.6rem;
}

.graph-crumb b {
    color: var(--on-surface);
}

.graph-panel {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    box-shadow: var(--tt-shadow-sm);
    padding: 1.1rem 1.2rem;
    position: sticky;
    top: 1rem;
}

.graph-panel-empty {
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    padding: 1.5rem 0;
    text-align: center;
}

.graph-panel-kicker {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.graph-panel-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0.2rem 0 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.graph-swatch {
    width: 11px;
    height: 11px;
    border-radius: 4px;
    flex: none;
}

.graph-kind-chip {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
    border-radius: 5px;
    padding: 0.05rem 0.35rem;
}

.graph-panel-sub {
    font-size: 0.76rem;
    color: var(--on-surface-variant);
    margin-bottom: 0.7rem;
}

.graph-panel-blurb {
    font-size: 0.82rem;
    margin-bottom: 0.8rem;
    line-height: 1.45;
}

/* Deep read: a one-line hook + 2-3 audience bullets, in place of the blurb. */
.graph-panel-lead {
    font-size: 0.92rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--on-surface);
    margin-bottom: 0.7rem;
}

.graph-panel-bullets {
    margin: 0 0 0.9rem;
    padding-left: 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.graph-panel-bullets li {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--on-surface-variant);
}

.graph-panel-stats {
    display: flex;
    gap: 1.2rem;
    margin-bottom: 0.8rem;
}

.graph-panel-stat-val {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.graph-panel-stat-label {
    font-size: 0.66rem;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.graph-panel-videos {
    border-top: 1px solid var(--outline-variant);
    padding-top: 0.7rem;
}

.graph-panel-videos-head {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
}

.graph-panel-videos li {
    font-size: 0.78rem;
    color: var(--on-surface-variant);
    margin: 0 0 0.35rem 1rem;
}

.graph-panel-videos a {
    color: inherit;
    text-decoration: none;
}

.graph-panel-videos a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.attention-receipts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.4rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--outline-variant);
    font-size: 0.75rem;
    color: var(--on-surface-variant);
}

.attention-receipts strong {
    color: var(--on-surface);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.attention-receipts-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--outline);
}

.attention-empty {
    margin-top: 2rem;
    padding: 2.5rem;
    border: 1px dashed var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    color: var(--on-surface-variant);
    text-align: center;
}

.attention-tip {
    position: fixed;
    z-index: 40;
    pointer-events: none;
    background: var(--inverse-surface);
    color: var(--inverse-on-surface);
    padding: 7px 10px;
    border-radius: var(--tt-r-app-md);
    font-size: 0.78rem;
    line-height: 1.35;
    box-shadow: var(--tt-shadow-lg);
    white-space: nowrap;
}

.attention-tip b {
    font-variant-numeric: tabular-nums;
}

/* ── ATTENTION: story drawer ──
   Same chrome as .trend-drawer (Live Trends detail) so drawers feel like one
   pattern across the app. Treemap cells are <button>s that HTMX-load the
   slice's stories into the drawer body. */

.attention-scrim {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--scrim) 32%, transparent);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--md-motion-easing-standard);
}

.attention-scrim.open {
    opacity: 1;
    pointer-events: auto;
}

.attention-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100vw);
    background: var(--surface-container-low);
    border-left: 1px solid var(--outline-variant);
    box-shadow: var(--md-elevation-3);
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s var(--md-motion-easing-emphasized-decelerate);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.attention-drawer.open { transform: translateX(0); }

.attention-drawer-close {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--tt-r-app-md);
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.attention-drawer-close:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}

.attention-drawer-body {
    overflow-y: auto;
    padding: 1.1rem 1.4rem 1.5rem;
}

.attention-drawer-head {
    margin-bottom: 0.75rem;
    padding-right: 2.5rem;
}

.attention-drawer-heading {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.attention-drawer-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.attention-drawer-sub {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--on-surface-variant);
}

.attention-fmtchip {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
    color: #fff;
}

.attention-fmtchip--shorts { background: var(--tt-accent); }
.attention-fmtchip--longform { background: var(--tt-label-creator); }

.attention-story {
    padding: 0.9rem 0;
    border-top: 1px solid var(--outline-variant);
}

.attention-story:first-child {
    border-top: none;
}

.attention-story-row {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: 11px;
    align-items: baseline;
}

.attention-story-rank {
    color: var(--on-surface-variant);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.attention-story-name {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.attention-story-score {
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--on-surface-variant);
}

.attention-story-track {
    display: block;
    height: 8px;
    background: var(--surface-container);
    border-radius: 5px;
    overflow: hidden;
    margin: 7px 0 0 31px;
}

.attention-story-bar {
    display: block;
    height: 100%;
    border-radius: 5px;
}

.attention-story-bar--shorts { background: var(--tt-accent); }
.attention-story-bar--longform { background: var(--tt-label-creator); }

/* The description IS the content — full ink, readable size. Meta stays muted.
   NB: class must not contain the substring "blur" — Beer CSS applies a
   frosted-glass background via [class*=blur]!important. */
.attention-story-desc {
    margin: 8px 0 0 31px;
    color: var(--on-surface);
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Deep read in the drawer: the hook reads as a lead line, bullets below it —
   same audience layer as the Attention Map panel, aligned under the name. */
.attention-story-lead {
    margin: 8px 0 0 31px;
    color: var(--on-surface);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
}

.attention-story-bullets {
    margin: 6px 0 0 31px;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attention-story-bullets li {
    color: var(--on-surface-variant);
    font-size: 0.78rem;
    line-height: 1.45;
}

.attention-story-videos {
    margin: 6px 0 0 31px;
    padding: 0;
    list-style: none;
}

.attention-story-videos li {
    position: relative;
    padding-left: 14px;
    color: var(--on-surface-variant);
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attention-story-videos li::before {
    content: "\2023";
    position: absolute;
    left: 2px;
    color: var(--outline);
}

.attention-story-videos li a {
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attention-story-videos li a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.attention-story-meta {
    margin: 6px 0 0 31px;
    color: var(--on-surface-variant);
    opacity: 0.8;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.attention-stories-empty {
    padding: 2rem;
    color: var(--on-surface-variant);
    text-align: center;
    font-size: 0.85rem;
}

/* Dark mode: caption + receipts sat at the bottom of the muted range on the
   night surfaces — blend a third of full ink back in. Light mode unchanged. */
html.dark .attention-caption,
html.dark .attention-receipts,
body.dark .attention-caption,
body.dark .attention-receipts {
    color: color-mix(in srgb, var(--on-surface) 33%, var(--on-surface-variant));
}

/* ── ATTENTION: Mood page — master-detail ──
   Left rail: every subject with a mini donut + movement badge (the day's
   landscape at a glance). Right: the selected subject with a big donut and
   per-emotion bars — the donut carries the gestalt, the bars carry precise
   comparison, so neither form is asked to do the other's job. Slices render
   in CANONICAL order (color-safety: the dataviz validator passes the
   canonical-adjacent pairs in both modes, which share-sorted any-adjacency
   cannot — and the same emotion sits in the same angular region on every
   donut). Palettes validated per mode; weary is the designed neutral;
   "other" folds sub-top-5 slices. */

:root,
html.light,
body.light {
    --mood-angry: #DC2626;
    --mood-sympathetic: #1D4ED8;
    --mood-skeptical: #BC9006;
    --mood-amused: #F472B6;
    --mood-hopeful: #15803D;
    --mood-fearful: #8B5CF6;
    --mood-supportive: #06B6D4;
    --mood-weary: #64748B;
    --mood-other: #CBD5E1;
}

html.dark,
body.dark {
    --mood-angry: #EF4444;
    --mood-sympathetic: #3B82F6;
    --mood-skeptical: #B45309;
    --mood-amused: #EC4899;
    --mood-hopeful: #059669;
    --mood-fearful: #7C3AED;
    --mood-supportive: #0891B2;
    --mood-weary: #94A3B8;
    --mood-other: #475569;
}

.mood-e--angry { background: var(--mood-angry); }
.mood-e--sympathetic { background: var(--mood-sympathetic); }
.mood-e--skeptical { background: var(--mood-skeptical); }
.mood-e--amused { background: var(--mood-amused); }
.mood-e--hopeful { background: var(--mood-hopeful); }
.mood-e--fearful { background: var(--mood-fearful); }
.mood-e--supportive { background: var(--mood-supportive); }
.mood-e--weary { background: var(--mood-weary); }
.mood-e--other { background: var(--mood-other); }

.mood-e-stroke--angry { stroke: var(--mood-angry); }
.mood-e-stroke--sympathetic { stroke: var(--mood-sympathetic); }
.mood-e-stroke--skeptical { stroke: var(--mood-skeptical); }
.mood-e-stroke--amused { stroke: var(--mood-amused); }
.mood-e-stroke--hopeful { stroke: var(--mood-hopeful); }
.mood-e-stroke--fearful { stroke: var(--mood-fearful); }
.mood-e-stroke--supportive { stroke: var(--mood-supportive); }
.mood-e-stroke--weary { stroke: var(--mood-weary); }
.mood-e-stroke--other { stroke: var(--mood-other); }

.mood-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex: none;
}

.mood-layout {
    display: grid;
    grid-template-columns: 264px 1fr;
    gap: 1rem;
    align-items: start;
    margin-top: 0.75rem;
}

@media (max-width: 860px) {
    .mood-layout { grid-template-columns: 1fr; }
}

/* ── Rail ── */

.mood-rail {
    display: flex;
    flex-direction: column;
    /* Beer CSS styles <nav> with align-items:center — rows would shrink to
       content and center, leaving the donuts ragged. Stretch + zero out. */
    align-items: stretch;
    margin: 0;
    padding: 0;
    gap: 0.35rem;
}

.mood-rail-row {
    display: flex;
    align-items: center;
    /* Beer also centers content inside nav links — pin to the left edge. */
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--tt-r-app-md);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s, border-color 0.12s;
}

.mood-rail-row:hover { background: var(--surface-container); }

.mood-rail-row.is-active {
    background: var(--surface);
    border-color: var(--outline-variant);
    box-shadow: var(--tt-shadow-sm);
}

.mood-donut { display: block; }

.mood-donut--mini {
    width: 44px;
    height: 44px;
    flex: none;
}

.mood-rail-na {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px dashed var(--outline-variant);
    border-radius: 50%;
    color: var(--on-surface-variant);
    font-size: 0.62rem;
    font-weight: 600;
}

.mood-rail-text { min-width: 0; }

.mood-rail-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mood-rail-meta {
    display: block;
    margin-top: 1px;
    font-size: 0.68rem;
    color: var(--on-surface-variant);
    font-variant-numeric: tabular-nums;
}

.mood-slice {
    fill: none;
    stroke-width: 8;
    /* start at 12 o'clock; dashoffset advances clockwise from there */
    transform: rotate(-90deg);
    transform-origin: center;
}

.mood-donut--big .mood-slice { stroke-width: 22; }
.mood-donut--mini .mood-slice { stroke-width: 7; }

.mood-donut-value {
    font-weight: 700;
    letter-spacing: -0.02em;
    fill: var(--on-surface);
}

.mood-donut-value--big { font-size: 34px; }
.mood-donut-value--mini { font-size: 15px; }

.mood-donut-emotion {
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    fill: var(--on-surface-variant);
}

.mood-donut-emotion--big { font-size: 12px; }

/* ── Detail panel ── */

.mood-detail {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    box-shadow: var(--tt-shadow-sm);
    padding: 1.5rem 1.7rem;
    min-height: 420px;
}

.mood-detail-head {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.mood-detail-name {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mood-detail-attention {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--on-surface-variant);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mood-movement {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mood-movement--rising { color: var(--tt-error); }
.mood-movement--flip { color: var(--tt-label-pattern); font-weight: 700; }
.mood-movement--easing { color: var(--tt-accent); }
.mood-movement--steady { color: var(--on-surface-variant); }
.mood-movement--new {
    color: var(--tt-label-pattern);
    text-transform: uppercase;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
}

.mood-detail-chart {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: center;
    margin-top: 1.1rem;
}

@media (max-width: 700px) {
    .mood-detail-chart { grid-template-columns: 1fr; }
}

.mood-donut--big {
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
}

/* Bars: the donut's precision partner — exact comparison + the legend,
   with the "table view" numbers the palette's contrast WARN obligates. */
.mood-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mood-bar-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.mood-bar-label {
    width: 92px;
    flex: none;
    color: var(--on-surface);
}

.mood-bar-track {
    flex: 1;
    height: 8px;
    background: var(--surface-container);
    border-radius: 5px;
    overflow: hidden;
}

.mood-bar-fill {
    display: block;
    height: 100%;
    border-radius: 5px;
}

.mood-bar-pct {
    width: 40px;
    flex: none;
    text-align: right;
    font-weight: 600;
}

.mood-bar-delta {
    width: 40px;
    flex: none;
    color: var(--on-surface-variant);
    font-size: 0.72rem;
}

.mood-mix-note {
    color: var(--on-surface-variant);
    opacity: 0.8;
    font-size: 0.68rem;
    text-align: right;
}

.mood-card-read {
    margin: 1rem 0 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--on-surface);
    background: transparent;
}

.mood-card-read--muted { color: var(--on-surface-variant); }

.mood-quotes {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.mood-quotes li {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.4rem 0;
}

.mood-quote-likes {
    flex: none;
    min-width: 52px;
    text-align: right;
    color: var(--on-surface-variant);
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mood-quote-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--on-surface);
}

/* The method note earns trust when asked for — it is not the product. */
.mood-card-sample {
    margin: 0.85rem 0 0;
    font-size: 0.7rem;
    color: var(--on-surface-variant);
    opacity: 0.85;
    background: transparent;
    font-variant-numeric: tabular-nums;
}

/* ── ATTENTION: Movement — ranked movers board ──
   One honest axis: change in daily views vs yesterday (a NEW story's change
   is its whole debut; an ended story's is what it lost). Heating first —
   the reason anyone opens this page — cooling demoted below. Bars carry
   magnitude, so no "steady" class: small moves simply look small. NEW rides
   the brand's signal orange (a story entering mainstream attention is the
   live-data moment the token is rationed for); chevrons repeat per
   consecutive-gain day along the story's link chain. */

.movement-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* The format toggle (Longform / Shortform) uses the shared .tab-bar / .tab
   look from the top of this file — same as the Trends table and the insight
   dashboards. It sits inline in the Attention toolbar, so it drops the
   stand-alone bottom margin and lets the toolbar own the spacing. */
.attention-format-tabs.tab-bar {
    /* Segmented pill control: the underline tabs vanished next to the
       charts (human feedback) — a bordered group with a FILLED active
       segment matches Today's chip grammar: filters are pills, the
       active one is solid. */
    margin-bottom: 0;
    border-bottom: none;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.attention-format-tabs .tab span {
    padding: 5px 16px;
    font-size: 0.78rem;
    font-weight: 650;
    border-bottom: none;
    border-radius: 999px;
    margin-bottom: 0;
}

.attention-format-tabs .tab.is-active > span {
    background: var(--primary);
    color: var(--on-primary);
    border-bottom: none;
}

.attention-format-tabs .tab span:hover { border-radius: 999px; }

.attention-ctl-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin-right: 8px;
    flex: none;
}

/* The category form is a flex item in .movement-filters; make it a flex box too
   so its Tom Select wrapper (or the native select, JS off) stretches to the row
   and stays vertically centered against the format tabs. */
.movement-category-form {
    display: flex;
    align-items: center;
}

/* No-JS fallback: the native select, matched to the format tabs (medium
   rounding, surface pill). Tom Select hides this and renders .ts-wrapper. */
.movement-category {
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--on-surface);
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-md);
    padding: 0.35rem 0.6rem;
}

/* Tom Select rendering of the category picker — same pill language as the
   format tabs so the two read as one control group and align on one baseline.
   Tom Select copies the <select>'s `movement-category` class onto .ts-wrapper,
   which would paint a second border around the control — strip it so only the
   control carries the pill outline. */
.movement-category-form .ts-wrapper {
    font-size: 0.8rem;
    border: none;
    border-radius: 0;
    padding: 0;
    background: none;
}

.movement-category-form .ts-wrapper .ts-control {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-md);
    color: var(--on-surface);
    min-height: 40px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
}

.movement-category-form .ts-wrapper .ts-control input {
    font-size: 0.8rem;
    color: var(--on-surface);
}

.movement-category-form .ts-wrapper .ts-dropdown {
    font-size: 0.8rem;
    border-radius: var(--md-shape-corner-small);
    margin-top: 0.35rem;
    background: var(--surface-container-high);
    border: 1px solid var(--outline-variant);
    box-shadow: var(--md-elevation-2);
    color: var(--on-surface);
}

.movement-board {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    box-shadow: var(--tt-shadow-sm);
    padding: 1.1rem 1.5rem 1.3rem;
    margin-top: 0.75rem;
}

.movement-section-head {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin: 0.4rem 0;
}

/* Thermal, not financial: the page says heating/cooling, so heat is warm
   and cool is blue (rulebook rule 29). Direction is triple-encoded — the
   section, the badge (NEW/up vs GONE/down), and the signed value — so the
   hue is reinforcement, never the only carrier. */
.movement-section-head--heat { color: var(--heat); }
.movement-section-head--cool { color: var(--cool); }

.movement-board--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 5rem;
    align-items: start;
}

/* A quiet divider keeps the two directions from reading as one table —
   the heating values and cooling badges were nearly touching. */
.movement-board--split .movement-col + .movement-col {
    border-left: 1px solid var(--outline-variant);
    padding-left: 2.5rem;
    margin-left: -2.5rem;
}

@media (max-width: 900px) {
    .movement-board--split .movement-col + .movement-col {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        margin-top: 1.4rem;
    }
}

@media (max-width: 900px) {
    .movement-board--split { grid-template-columns: 1fr; }
}

.movement-row {
    display: grid;
    /* badge | name | delta bar | value — uniform four columns per side */
    grid-template-columns: 40px minmax(120px, 1fr) minmax(70px, 130px) 96px;
    gap: 0.7rem;
    align-items: center;
    padding: 0.34rem 0;
    cursor: default;
}

.movement-row:hover .movement-name { color: var(--primary); }

.movement-badge {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.movement-row--new .movement-badge { color: var(--heat); font-size: 0.62rem; letter-spacing: 0.06em; }
.movement-row--rising .movement-badge { color: var(--heat); }
.movement-row--cooling .movement-badge { color: var(--cool); }
.movement-row--ended .movement-badge { color: var(--cool); opacity: 0.7; font-size: 0.62rem; }

.movement-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.movement-row--ended .movement-name {
    color: var(--on-surface-variant);
}

.movement-track {
    display: block;
    min-width: 0;
}

.movement-bar {
    display: block;
    height: 14px;
    border-radius: 4px;
    min-width: 4px;
}

.movement-row--new .movement-bar { background: var(--heat); }
.movement-row--rising .movement-bar { background: var(--heat); opacity: 0.75; }
.movement-row--cooling .movement-bar { background: var(--cool); opacity: 0.75; }
.movement-row--ended .movement-bar { background: var(--cool); opacity: 0.4; }

.movement-val {
    font-size: 0.75rem;
    color: var(--on-surface-variant);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* ── Weekly Pulse ─────────────────────────────────────────────────────────
   One editorial card per category, in a single narrow column. Two independent
   boards (Longform / Shorts) share the .attention-format-tabs switcher.
   Everything is keyed off M3 role vars + --tt-* tokens so both themes come
   for free. */
.pulse-page .attention-toolbar { margin: 0.4rem 0 1rem; }

.pulse-board {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.pulse-card {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    box-shadow: var(--tt-shadow-sm);
    padding: 0.8rem 1.1rem 0.75rem;
    transition: box-shadow var(--tt-t-fast) var(--tt-ease), border-color var(--tt-t-fast) var(--tt-ease);
}
.pulse-card:hover {
    box-shadow: var(--tt-shadow-card-hover);
    border-color: var(--outline);
}

.pulse-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 0;  /* override the global header min-height (topbar) leaking in */
}
.pulse-cat {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--primary);
}
.pulse-delta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--on-surface-variant);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pulse-delta b { color: var(--on-surface); font-size: 0.82rem; font-weight: 700; }
.pulse-delta-unit { font-size: 0.66rem; color: var(--on-surface-variant); }
.pulse-mult { color: var(--tt-trend-up); font-weight: 700; font-size: 0.68rem; }
.pulse-new {
    background: var(--primary);
    color: var(--on-primary);
    padding: 0.06rem 0.32rem;
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pulse-topic {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0.3rem 0 0.5rem;
    color: var(--on-surface);
    text-wrap: balance;
}

/* Deep read: the audience hook reads as an editorial pull-line under the topic
   (same shape as the Attention Map panel); the bullets live in the expand. */
.pulse-hook {
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 600;
    color: var(--on-surface);
    border-left: 3px solid var(--tt-accent);
    padding-left: 0.7rem;
    margin: 0 0 0.5rem;
}

/* "What happened" — short scannable bullets, always visible. */
.pulse-happened,
.pulse-why {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.pulse-happened li,
.pulse-why li {
    position: relative;
    padding-left: 0.95rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--on-surface);
}
.pulse-happened li::before,
.pulse-why li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.6em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
}
.pulse-why li {
    color: var(--on-surface-variant);
}
.pulse-why li::before {
    background: var(--on-surface-variant);
}

/* Deep read bullets in the expand: "what the audience is saying", set apart
   from the "why it matters" list with its own quiet label. */
.pulse-audience {
    margin: 0.6rem 0 0;
}
.pulse-audience-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
    margin-bottom: 0.3rem;
}
.pulse-audience-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.pulse-audience-list li {
    position: relative;
    padding-left: 0.95rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--on-surface);
}
.pulse-audience-list li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.6em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tt-accent);
}

/* "Why it matters & videos" — hidden until the reader expands the card. */
.pulse-more {
    margin-top: 0.65rem;
    border-top: 1px solid var(--outline-variant);
    padding-top: 0.5rem;
}
.pulse-more > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--primary);
    user-select: none;
}
.pulse-more > summary::-webkit-details-marker {
    display: none;
}
.pulse-more > summary::before {
    content: "expand_more";
    font-family: "Material Symbols Outlined";
    font-size: 1.05rem;
    line-height: 1;
    transition: transform var(--tt-t-fast) var(--tt-ease);
}
.pulse-more[open] > summary::before {
    transform: rotate(180deg);
}
.pulse-more[open] > summary {
    margin-bottom: 0.45rem;
}

.pulse-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.55rem;
}
.pulse-thumbs a {
    display: block;
    line-height: 0;
}
.pulse-thumbs img {
    width: 104px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--tt-r-app-sm);
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    display: block;
    transition: border-color var(--tt-t-fast) var(--tt-ease);
}
.pulse-thumbs a:hover img {
    border-color: var(--primary);
}

.pulse-quiet {
    max-width: 640px;
    margin-top: 1.3rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--outline-variant);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    align-items: center;
}
.pulse-quiet-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin-right: 0.3rem;
}
.pulse-quiet-cat {
    font-size: 0.68rem;
    color: var(--on-surface-variant);
    background: var(--surface-container);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--outline-variant);
}

/* ── Today (subject layer daily-change surface) ─────────────────────────── */

.today-filterbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    padding: 9px 12px;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
}

.today-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    flex: none;
}

.today-filter-label i { font-size: 16px; }

.today-cat-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.today-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid var(--outline-variant);
    color: var(--on-surface-variant);
    text-decoration: none;
}

.today-chip.is-active {
    color: var(--on-primary);
    background: var(--primary);
    border-color: var(--primary);
}

.today-filter-note { font-size: 0.7rem; color: var(--on-surface-variant); }

.today-section { margin-top: 2.6rem; }

.today-h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.02rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    margin: 0 0 0.8rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--outline-variant);
    cursor: help;
}

.today-h::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex: none;
}

.today-h--new::before { background: var(--warning); }
.today-h--rising::before { background: var(--rising); }
.today-h--returning::before { background: var(--primary); }
.today-h--roster::before { background: var(--on-surface-variant); }
.today-h--giants::before { background: var(--on-surface-variant); }

.today-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.today-card {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    padding: 12px 14px;
}

.today-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }

.today-card-name {
    font-weight: 650;
    font-size: 0.9rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.today-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    flex: none;
    white-space: nowrap;
}

.today-badge--new { color: var(--warning); border: 1px solid var(--warning); }
.today-badge--rising { color: var(--rising); border: 1px solid var(--rising); }
.today-badge--returning { color: var(--primary); border: 1px solid var(--primary); }

.today-card-num {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 6px 0 5px;
    font-variant-numeric: tabular-nums;
}

.today-card-num span { font-size: 0.68rem; font-weight: 500; color: var(--on-surface-variant); }

.today-card-beat { font-size: 0.8rem; margin: 8px 0 0; line-height: 1.4; }

.today-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }

.today-spark-bar {
    display: block;
    width: 6px;
    background: var(--surface-container-highest);
    border-radius: 2px 2px 0 0;
}

.today-spark-bar.is-today { background: var(--primary); }
.today-spark-bar.is-zero { opacity: 0.45; }

.today-source {
    font-size: 0.66rem;
    color: var(--on-surface-variant);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 7px;
    white-space: nowrap;
}

.today-empty {
    color: var(--on-surface-variant);
    font-size: 0.82rem;
    font-style: italic;
    padding: 0.9rem 0.2rem;
}

.today-roster {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
}

.today-roster-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--outline-variant);
    min-width: 0;
}

.today-roster-row:first-child { border-top: none; }

.today-roster-name {
    font-weight: 650;
    font-size: 0.88rem;
    width: 150px;
    flex: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.today-tenure-chip {
    font-size: 0.64rem;
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
    border-radius: 999px;
    padding: 1px 8px;
    flex: none;
    white-space: nowrap;
}

.today-roster-views {
    width: 72px;
    flex: none;
    text-align: right;
    font-weight: 650;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.today-roster-views span {
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: 0.62rem;
    color: var(--on-surface-variant);
}

.today-roster-views.is-window { font-weight: 450; color: var(--on-surface-variant); }

.today-roster-beat {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 6px;
}

.today-roster-beat b {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--primary);
    text-transform: uppercase;
    margin-right: 5px;
}

.today-roster-beat.is-quiet { color: var(--on-surface-variant); font-style: italic; }

.today-boards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 14px;
}

.today-board {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    padding: 14px 16px;
}

.today-board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.today-board-head h3 { font-size: 0.88rem; font-weight: 700; margin: 0; }

.today-board-receipt { font-size: 0.66rem; color: var(--on-surface-variant); white-space: nowrap; }

.today-board-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; min-width: 0; }

.today-board-name {
    width: 44%;
    flex: none;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.today-board-track { flex: 1; height: 8px; }

.today-board-track b {
    display: block;
    height: 8px;
    background: var(--primary);
    border-radius: 0 4px 4px 0;
    opacity: 0.85;
}

.today-board-views {
    width: 52px;
    flex: none;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.today-board-count {
    width: 60px;
    flex: none;
    font-size: 0.64rem;
    color: var(--on-surface-variant);
    text-align: right;
}

.today-method {
    margin-top: 2.4rem;
    font-size: 0.68rem;
    color: var(--on-surface-variant);
    max-width: 70ch;
}

@media (max-width: 640px) {
    .today-roster-row { flex-wrap: wrap; }
    .today-boards { grid-template-columns: 1fr; }
}

.today-board-more {
    font-size: 0.68rem;
    color: var(--on-surface-variant);
    padding-top: 6px;
}

.today-source--bare { margin-left: 0; }

.today-cards.is-collapsed > .today-card:nth-child(n+4) { display: none; }


/* CSS tooltip on section-heading info icons (native title was too easy to
   miss). The bubble is an ::after on the wrapper span, NOT the icon <i> —
   the icon font would swallow the text. */
.today-h-info {
    position: relative;
    display: inline-flex;
    cursor: help;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.today-h-info i {
    font-size: 15px;
    color: var(--on-surface-variant);
    opacity: 0.7;
}

.today-h-info::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    top: calc(100% + 7px);
    z-index: 40;
    width: max-content;
    max-width: 300px;
    background: var(--inverse-surface);
    color: var(--inverse-on-surface);
    font-size: 0.74rem;
    line-height: 1.35;
    padding: 7px 10px;
    border-radius: var(--tt-r-app-md);
    box-shadow: var(--tt-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
}

.today-h-info:hover::after { opacity: 1; }

/* Expander as a ghost card at the end of the visible row */
.today-more-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    font-size: 0.86rem;
    font-weight: 650;
    color: var(--primary);
    background: none;
    border: 1.5px dashed var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    cursor: pointer;
}

.today-more-card:hover { border-color: var(--primary); }

/* Expanded grids no longer need the ghost card's slot rules; the button
   removes itself on click. Collapsed grids hide cards beyond the third. */

/* ── Topic drawer (Today layer 2) ───────────────────────────────────────── */

.today-card--clickable,
.today-roster-row--clickable,
.today-board-h--clickable { cursor: pointer; }

.today-card--clickable:hover { border-color: var(--primary); }
.today-roster-row--clickable:hover { background: var(--surface-container); }
.today-board-h--clickable:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.today-h--top::before { background: var(--primary); }

/* Which slice of the topic was clicked. Sits between the title and the
   whole-topic stats, so the number on the bubble and the number in the
   stats block are both accounted for instead of contradicting. */
.topic-scope {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-variant);
    font-size: 0.72rem;
    line-height: 1.35;
}

.topic-scope b { display: block; font-weight: 700; }

.topic-scope span { color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }

.topic-stats {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    padding: 14px 1.5rem 4px;
}

.topic-stat b {
    display: block;
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.topic-stat span { font-size: 0.66rem; color: var(--on-surface-variant); }

.topic-spark-block { padding: 12px 1.5rem 0; }

.today-spark--lg { gap: 3px; height: 42px; width: 100%; }

.today-spark--lg .today-spark-bar { flex: 1; width: auto; }

.topic-spark-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.64rem;
    color: var(--on-surface-variant);
    margin-top: 4px;
}

.topic-beats { padding: 14px 1.5rem 0; }

.topic-beat { font-size: 0.85rem; line-height: 1.45; margin: 0 0 6px; }

.topic-beat b {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--primary);
    text-transform: uppercase;
    margin-right: 5px;
}

.topic-beat--prior { color: var(--on-surface-variant); }
.topic-beat--prior b { color: var(--on-surface-variant); }

.topic-mixes { padding: 12px 1.5rem 0; display: flex; flex-direction: column; gap: 7px; }

.topic-mix { display: flex; gap: 6px; flex-wrap: wrap; }

.topic-mix-chip {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--outline-variant);
}

.topic-mix-chip--cat { color: var(--on-surface-variant); font-weight: 500; }

.topic-subhead {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin: 0 0 8px;
}

.topic-videos { padding: 18px 1.5rem 0; }

.topic-video {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    text-decoration: none;
    color: var(--on-surface);
    border-top: 1px solid var(--outline-variant);
    font-size: 0.82rem;
}

.topic-video:first-of-type { border-top: none; }

.topic-video:hover .topic-video-title { color: var(--primary); }

.topic-video-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topic-video-views {
    flex: none;
    font-weight: 650;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.topic-board { padding: 18px 1.5rem 1.5rem; }

.topic-audience {
    margin: 16px 1.5rem 0;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
}

.topic-hook { font-size: 0.9rem; font-weight: 650; line-height: 1.4; margin: 0; }

.topic-bullets {
    margin: 8px 0 0;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--on-surface-variant);
}

.topic-bullets li { margin-top: 3px; }

.topic-audience-receipt {
    display: block;
    margin-top: 8px;
    font-size: 0.62rem;
    color: var(--on-surface-variant);
    opacity: 0.8;
}

/* ── Share drawer topics (5c) ───────────────────────────────────────────── */

.share-topic-list { padding: 0.4rem 1.5rem 0; }

.share-topic {
    padding: 10px 0 8px;
    border-top: 1px solid var(--outline-variant);
    cursor: pointer;
}

.share-topic:first-child { border-top: none; }

.share-topic:hover .share-topic-name { color: var(--primary); }

.share-topic-row { display: flex; align-items: center; gap: 8px; min-width: 0; }

.share-topic-name {
    font-weight: 650;
    font-size: 0.88rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-topic-views {
    flex: none;
    font-weight: 650;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

/* Evidence, not decoration: one clip and thirty read very differently under
   the same number, so the count sits next to it. Muted and tabular so the
   column scans without competing with the views figure. */
.share-topic-count {
    flex: none;
    font-size: 0.74rem;
    color: var(--on-surface-variant);
    font-variant-numeric: tabular-nums;
}

/* The share of the tile this row carries. The listed rows plus "Everything
   else" total 100% of the tile that was clicked. */
.share-topic-pct {
    flex: none;
    font-size: 0.78rem;
    color: var(--on-surface-variant);
    font-variant-numeric: tabular-nums;
    min-width: 3.2em;
    text-align: right;
}

/* The remainder row closes the arithmetic, so it reads as part of the list
   rather than a footnote — same grammar, muted a step. */
.share-topic-rest {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--outline-variant);
}

.share-topic-rest-row .share-topic-name { font-weight: 600; opacity: 0.8; }

.share-topic-track { margin-top: 6px; }

.share-topic-beat {
    font-size: 0.78rem;
    color: var(--on-surface-variant);
    margin: 6px 0 0;
    line-height: 1.4;
}

.share-topic-carpet { padding: 14px 1.5rem 0; }

.share-topic-carpet-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8rem;
    padding: 3px 0;
    color: var(--on-surface-variant);
}

.share-topic-carpet-row b { font-variant-numeric: tabular-nums; }

.share-topic-method {
    padding: 14px 1.5rem 1.2rem;
    font-size: 0.66rem;
    color: var(--on-surface-variant);
}

.movement-row--clickable { cursor: pointer; }

.movement-row--clickable:hover .movement-name { color: var(--primary); }


/* ── Mood: what-shifted lead strip (newspaper model) ────────────────────── */

.mood-shifts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0.6rem 0 1.1rem;
    padding: 9px 12px;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
}

.mood-shifts-label {
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    flex: none;
}

.mood-shift-chip {
    font-size: 0.76rem;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    text-decoration: none;
    white-space: nowrap;
}

.mood-shift-chip b { font-weight: 700; margin-right: 5px; }

.mood-shift-chip:hover { border-color: var(--primary); }

.mood-shift-chip--flip { border-color: var(--warning); }

.mood-shifts-quiet { font-size: 0.76rem; color: var(--on-surface-variant); font-style: italic; }

/* ── The Week ───────────────────────────────────────────────────────────── */

.wk-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}

.wk-card {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    padding: 14px 16px;
    cursor: pointer;
}

.wk-card:hover { border-color: var(--primary); }

.wk-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }

.wk-name {
    font-weight: 700;
    font-size: 1.02rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wk-chip {
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    flex: none;
    white-space: nowrap;
}

.wk-chip--debut-stuck { color: var(--warning); }
.wk-chip--flash { color: var(--primary); }
.wk-chip--building { color: var(--rising); }
.wk-chip--peaked { color: var(--on-surface-variant); }
.wk-chip--faded { color: var(--cool); }

.wk-num {
    font-size: 1.35rem;
    font-weight: 750;
    margin: 7px 0 6px;
    font-variant-numeric: tabular-nums;
}

.wk-num span { font-size: 0.7rem; font-weight: 500; color: var(--on-surface-variant); }

.wk-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: var(--on-surface-variant);
    margin: 3px 0 8px;
}

.wk-line { font-size: 0.85rem; line-height: 1.45; margin: 4px 0 8px; }

.wk-aud {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-md);
    padding: 9px 11px;
    margin-top: 6px;
}

.wk-aud-k {
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--primary);
}

.wk-aud p { font-size: 0.79rem; font-weight: 650; margin: 3px 0 0; }

.wk-aud ul {
    margin: 5px 0 0;
    padding-left: 1rem;
    font-size: 0.73rem;
    color: var(--on-surface-variant);
}

.wk-srcline { font-size: 0.64rem; color: var(--on-surface-variant); margin-top: 8px; }

.wk-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
    align-items: start;
}

@media (max-width: 900px) { .wk-two { grid-template-columns: 1fr; } }

.wk-panel {
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--tt-r-app-lg);
    padding: 10px 16px;
}

.wk-watch-row {
    display: grid;
    grid-template-columns: minmax(120px, 160px) 1fr 76px;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--outline-variant);
    cursor: pointer;
}

.wk-watch-row:first-child { border-top: none; }

.wk-watch-row:hover .wk-watch-name { color: var(--primary); }

.wk-watch-name { font-weight: 650; font-size: 0.85rem; }

.wk-watch-val {
    text-align: right;
    font-weight: 700;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.wk-watch-val span {
    display: block;
    font-weight: 400;
    font-size: 0.6rem;
    color: var(--on-surface-variant);
}

.wk-shift {
    display: grid;
    grid-template-columns: minmax(110px, 140px) 1fr minmax(150px, 180px);
    gap: 12px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--outline-variant);
}

.wk-shift:first-child { border-top: none; }

.wk-shift-cat { font-weight: 650; font-size: 0.85rem; }

.wk-shift-bars { display: flex; flex-direction: column; gap: 3px; }

.wk-shift-bars i { display: block; height: 7px; border-radius: 0 4px 4px 0; }

.wk-bar-norm { background: var(--surface-container-highest); }
.wk-bar-now.is-up { background: var(--rising); }
.wk-bar-now.is-down { background: var(--falling); }

.wk-shift-val { font-size: 0.82rem; font-weight: 700; text-align: right; }
.wk-shift-val b { font-size: 0.66rem; font-weight: 600; }
.wk-shift-val.is-up b { color: var(--rising); }
.wk-shift-val.is-down b { color: var(--falling); }

.wk-flip { padding: 8px 0; border-top: 1px solid var(--outline-variant); }
.wk-flip:first-child { border-top: none; }
.wk-flip b { display: block; font-size: 0.85rem; }
.wk-flip span { color: var(--on-surface-variant); font-size: 0.78rem; }
.wk-flip em { font-style: normal; font-weight: 700; color: var(--on-surface); }

/* --- Truncation gutter ---------------------------------------------------
   `overflow: hidden` clips at the padding box, and that edge is snapped to a
   device pixel. Rows routinely land on a fractional x (the roster name sits at
   315.75 at 1440w), so the edge rounds inward. Plus Jakarta Sans draws "p", "b"
   and friends with a zero left side bearing — ink starts exactly at the text
   origin — so the rounding plus antialiasing shaved the left stem off names
   like "pet content" and "product launch".

   Every left-truncating cell gets 2px of gutter inside the clip box, cancelled
   by an equal negative margin: the clip edge moves off the glyph while the text
   and the surrounding layout stay exactly where they were.

   Excluded on purpose: `.attention-story-videos li` and `.today-roster-beat`
   already start their text well inside the clip edge (14px and 6px of padding),
   and the li carries an absolutely positioned bullet that a negative margin
   would drag along with it. */
.video-title,
.related-label,
.chat-conv-option span,
.viz-stacked-row-label,
.viz-comparison-label,
.donut-tooltip-label,
.donut-legend-video-channel,
.attention-story-videos li a,
.mood-rail-name,
.movement-name,
.today-card-name,
.today-roster-name,
.today-board-name,
.topic-video-title,
.share-topic-name,
.wk-name {
    padding-left: 2px;
    margin-left: -2px;
}