/* ── 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: 600;
    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: 600;
    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;
}

.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;
}

/* ── 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;
}

/* ── 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:has(.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: 600;
    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: 600;
}

.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: 600;
    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: 600;
    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: 600;
    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: 600;
}

/* ── 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: 600;
    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: 600;
}

.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: 600;
    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: 600;
    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: 600;
    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: 600;
    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: 600;
    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: 600;
    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 (M3 navigation drawer) ── */

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

/* ── Sidebar toggle ── */

.sidebar-toggle {
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    color: var(--on-surface-variant);
    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(--on-surface);
    background: color-mix(in srgb, var(--on-surface-variant) 12%, transparent);
}

.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(--on-surface);
    text-decoration: none;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.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;
    border-radius: var(--md-shape-corner-full);
    text-decoration: none;
    text-align: left;
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    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: color-mix(in srgb, var(--on-surface) 8%, transparent);
    color: var(--on-surface);
}

.app-nav-link:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--on-surface) 10%, transparent);
}

.app-nav-link.active {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    font-weight: 600;
}

.app-nav-link.active:hover {
    background: color-mix(in srgb, var(--on-secondary-container) 8%, var(--secondary-container));
}

.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: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    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(--outline-variant);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.app-logout-link {
    color: var(--error);
}

.app-logout-link:hover {
    color: var(--error);
    background: color-mix(in srgb, var(--error) 10%, 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;
}

/* ── 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: 450;
    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;
}

/* ── 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: 800;
    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;
    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;
}

.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: 600;
    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: 800;
    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: 800;
    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: 600;
}

/* 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: 600;
    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: 600;
    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: 600;
    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: 600;
    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: 800;
    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: 600;
    color: var(--pico-muted-color);
    margin-bottom: 0.4rem;
}

.insight-video-card-hero .insight-video-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    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: 600;
}

/* 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: 800;
    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: 600;
    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: 600;
    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: 600;
    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: 800;
    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: 600;
    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: 600;
    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: 600;
}

.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: 600;
    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: 800;
    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);
}