/* ════════════════════════════════════════════════════════════════════
   EvidenceSeek — LIGHT MODE
   Loaded AFTER index-v2.css to override the dark "deep ink" theme.

   Strategy: index-v2.css drives nearly all color through :root tokens,
   consistently using the --parchment* spectrum for foreground/text and
   the --ink* spectrum for backgrounds/fills. We invert those token VALUES
   (parchment → dark ink, ink → light paper) while keeping each variable's
   role unchanged, so every variable-driven rule flips to light mode for
   free. The blocks below then patch the handful of surfaces that hard-code
   rgba() (glass cards, borders, dark fills) so they read correctly on a
   light background.

   Scope: the full application — landing (nav pill, hero/brand, search card),
   results surface (accordion + control bar / sort + filters menus / sliders /
   active chips), rubric editor, and FAQ modal. When es_theme=light
   the server layers this overlay onto the canonical index-v2.html; the client
   toggle enables/disables it live (the <link> is always present). intro-video.js
   self-skips the intro in light mode (see the "Full-page light mode" block
   below). Background is the lighter book-animation-end-3 image.
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* Core palette — inverted vs the dark theme.
       "ink" spectrum is now light paper; "parchment" spectrum is now dark ink. */

    /* "ink" → light paper surfaces / fills
       (input + select backgrounds, button text on the accent, spinner). */
    --ink: #fcfbf7;
    --ink-card: #ffffff;

    /* "parchment" → dark ink text */
    --parchment: #1c1b18;        /* primary text */
    --parchment-dim: #4a4742;    /* secondary text, labels */
    --parchment-muted: #6f6b62;  /* tertiary text, placeholders */

    /* Accent — slate blue, darkened a notch to hold AA contrast on light. */
    --copper: #3a55ab;
    --copper-bright: #2f4690;
    --copper-glow: rgba(58, 85, 171, 0.30);

    /* Secondary — periwinkle, deepened for light surfaces. */
    --gold: #5b6fa8;

    /* Semantic — darkened for readability on light. */
    --positive: #4f7a3f;
    --negative: #a83a3a;
    --info: #3d6f99;

    /* ── Fixed RGB triplets for the light overlay ──────────────────────
       NOTE: do NOT add --rgb-* tokens to mirror the dark set here — these
       are the light theme's own periwinkle/ink family, defined once. */
    --rgb-ink-dark:    28, 27, 24;    /* dark ink text/scrim */
    --rgb-white:      255, 255, 255;
    --rgb-accent:      70, 100, 170;  /* light slate accent */
    --rgb-peri:       118, 148, 225;  /* periwinkle, active fills */
    --rgb-peri-dark:  100, 132, 220;  /* active edge / kept bars */
    --rgb-peri-light: 140, 170, 234;  /* glass borders */
    --rgb-shadow:      45, 65, 130;   /* shadow-blue */
}

/* ── Page base ────────────────────────────────────────────────────── */
/* Neutral grey matching the background image's paper tone (rgb 237,237,237 —
   the lighter book-animation-end-3 backdrop), sits under the fixed light bg
   image (visible only on overscroll / if the image fails to load). Kept
   neutral so overscroll doesn't reveal a warm edge. */
body { background: rgb(237, 237, 237); }

/* The light end-state image is shown immediately (no intro video layer). */
#bg-poster { display: block; }

/* Vignette / scroll-fade darken the page in the dark theme; neutralise
   them to a light wash. The draft ships without the scroll/intro JS that
   would reveal these, so this is mostly insurance. */
.vignette {
    background:
        radial-gradient(
            ellipse 120% 80% at 50% 50%,
            transparent 0%,
            transparent 45%,
            rgba(237, 237, 237, 0.35) 80%,
            rgba(237, 237, 237, 0.60) 100%
        );
}
/* Scroll dim fades toward the background image's own neutral paper tone
   (rgb 237,237,237 — the lighter library surface with the dark book shapes
   excluded), so dimming calms the texture without shifting the backdrop
   warmer. The body base and vignette use this same grey. */
.scroll-fade { background: rgb(237, 237, 237); }

/* The dark book background's flat dim layer has no place over the light
   library backdrop (already calm), so switch it off entirely in light mode. */
.bg-dim { display: none; }

/* ── Full-page light mode ──────────────────────────────────────────────────
   Light mode serves the real index-v2.html (all scripts + results/rubric
   markup) with this overlay layered on and the document tagged
   <html data-theme="light">. intro-video.js stays loaded (it also owns the
   search background video) but self-skips the intro and pauses its videos in
   light. The rules below produce a static light backdrop with no intro against
   index-v2.html's video-background markup:
     - hide the dark book-animation video, the matrix search video/poster, and
       the autoplay play-overlay (none belong in light mode);
     - paint the light library backdrop directly on the fixed, viewport-
       covering .bg-anchor. (index-v2's #bg-poster <img> points at the DARK
       end-frame, so here it is hidden rather than shown as in the landing
       draft, where its src is already the light image.)
     - reveal the .intro-hidden hero/nav content that intro-video.js would
       normally animate in; with that script gone, CSS shows it outright.
   ──────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] #bg-video,
html[data-theme="light"] #bg-poster,
html[data-theme="light"] #search-video,
html[data-theme="light"] #search-poster,
html[data-theme="light"] #play-overlay {
    display: none !important;
}

html[data-theme="light"] .bg-anchor {
    background: url('/static/book-animation-end-3.jpg') center center / cover no-repeat;
}

html[data-theme="light"] .intro-hidden,
html[data-theme="light"] .nav-pill.intro-hidden {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

/* ── Navigation pill — light frosted glass ───────────────────────────── */
/* Flat white veil (0.12) over a light periwinkle veil (0.15); 1.5px periwinkle
   edge; saturated/brightened backdrop blur. Shares the search card's glass
   recipe — including its deepened periwinkle veil — but keeps its own lighter
   drop shadow (a small floating pill doesn't want the card's heavy 18/50
   shadow + inset rim). */
.nav-pill {
    background:
        linear-gradient(rgba(var(--rgb-white), 0.12), rgba(var(--rgb-white), 0.12)),
        linear-gradient(rgba(var(--rgb-peri), 0.15), rgba(var(--rgb-peri), 0.15));
    border: 1.5px solid rgba(var(--rgb-peri-light), 0.8);
    backdrop-filter: blur(14px) saturate(1.4) brightness(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.4) brightness(1.05);
    box-shadow: 0 2px 12px rgba(var(--rgb-ink-dark), 0.08);
}
.nav-pill a:hover {
    background: rgba(var(--rgb-ink-dark), 0.06);
}

/* ── Corner ribbon — keep white text on the blue ribbon ─────────────── */
.corner-ribbon span {
    background: rgba(58, 85, 171, 0.92);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(var(--rgb-ink-dark), 0.18);
}

/* ── Brand title — swap the dark drop-glow for a soft light halo so the
   dark title lifts off the busy library backdrop. ───────────────────── */
.brand-title {
    text-shadow: 0 1px 14px rgba(var(--rgb-white), 0.55);
}

/* ── Search card — light frosted glass ──────────────────────────────── */
/* Flat white veil (0.12) over a light periwinkle veil (0.10), a 1.5px
   periwinkle edge, and a saturated/brightened 14px backdrop blur. The lighter
   book-animation-end-3 backdrop has little texture to refract, so the reduced
   blur (vs 24px) lets just enough of it ghost through to read as glass, while
   a blue-tinted floating drop shadow + bright inset top rim lift the card off
   the near-white field. */
.search-card {
    background:
        linear-gradient(rgba(var(--rgb-white), 0.12), rgba(var(--rgb-white), 0.12)),
        linear-gradient(rgba(var(--rgb-peri), 0.15), rgba(var(--rgb-peri), 0.15));
    border: 1.5px solid rgba(var(--rgb-peri-light), 0.8);
    backdrop-filter: blur(14px) saturate(1.4) brightness(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.4) brightness(1.05);
    box-shadow:
        0 18px 50px rgba(var(--rgb-shadow), 0.2),
        inset 0 1px 0 rgba(var(--rgb-white), 0.95);
}

/* Mode picker — transparent fill (from the dark base rule) lets the card's
   frosted surface show through, so the button is the card's colour. Only the
   border needs repainting: --card-border tints with --rgb-parchment (which
   doesn't invert), so use the periwinkle family. Faint peri at rest (0.4, 1px)
   deepens to peri-dark on hover/open — a peri→peri-dark progression that keeps
   the rest edge light enough to leave headroom for a visible hover change. */
.mode-picker-btn {
    border: 1px solid rgba(var(--rgb-peri), 0.4);
}
/* Border-only hover (no bg) — deepen the faint rest edge (peri 0.4) to peri-dark
   0.8, the same hue as the open state. Hover and open share the peri-dark edge;
   the open state is set apart by its bg tint, not the border colour. An explicit
   border-color is REQUIRED: the dark base hover uses rgba(--rgb-parchment, …),
   which in light resolves to a near-white cream (parchment doesn't invert) and
   would make the edge vanish on the white card. */
.mode-picker-btn:hover {
    border-color: rgba(var(--rgb-peri-dark), 0.8);
}
/* Open → periwinkle tint, matching .filters-trigger.open / .sort-trigger.open. */
.mode-picker.open .mode-picker-btn {
    background: rgba(var(--rgb-peri), 0.15);
    border-color: rgba(var(--rgb-peri-dark), 0.85);
}

.mode-menu,
.search-action-menu {
    background: rgba(250, 250, 252, 0.97);
    border-color: rgba(var(--rgb-peri-light), 0.7);
    box-shadow: 0 18px 50px rgba(var(--rgb-shadow), 0.2);
}
.mode-menu-item:hover,
.search-action-menu-item:hover { background: rgba(var(--rgb-peri), 0.08); }
.mode-menu-item.active { background: rgba(var(--rgb-peri), 0.16); }

/* Card subtitle — bump from the muted/tertiary tier up to the secondary-text
   tier for stronger contrast on the light glass. */
.tab-subtitle { color: var(--parchment-dim); }

/* "About Search Profiles" control — same darker secondary tier as the
   subtitle (the info icon inherits currentColor, so it darkens too). */
.profile-info-btn { color: var(--parchment-dim); }
/* Hover + expanded (.active) darken to the near-black primary tier, matching
   the Filters disclosure trigger.
   The base hover rule targets --parchment-dim, which equals the resting light
   color here (no-op), so restate it on the light palette. */
.profile-info-btn:hover,
.profile-info-btn.active { color: var(--parchment); }

/* Inputs / selects — translucent frosted "wells": the glass card shows
   through a semi-opaque fill, an inset shadow recesses them, and a soft blue
   border ties them to the card. background-color (not the `background`
   shorthand) keeps the select's chevron background-image intact. */
.input,
.select {
    background-color: rgba(var(--rgb-white), 0.58);
    border: 1.5px solid rgba(var(--rgb-accent), 0.28);
    box-shadow: inset 0 1px 3px rgba(var(--rgb-ink-dark), 0.1);
}
.input:hover,
.select:hover { border-color: rgba(var(--rgb-accent), 0.45); }

/* Search-option checkboxes — light box, blue when checked with a white tick. */
.checkbox-box {
    background: rgba(var(--rgb-white), 0.7);
    border: 1px solid rgba(var(--rgb-ink-dark), 0.3);
}
/* Hover affordance: the base hover sets a near-white border that vanishes on
   the light surface (and erases the resting dark border). Use the same
   periwinkle hover as the portal inputs — it also harmonizes with this
   checkbox's blue (--copper) checked + focus-glow accent. */
.checkbox-label:hover .checkbox-box { border-color: rgba(var(--rgb-accent), 0.45); }
.advanced-toggle input[type="checkbox"] {
    background: rgba(var(--rgb-white), 0.8);
    border: 1.5px solid rgba(var(--rgb-ink-dark), 0.25);
}
/* Hover brightens AND thickens the unchecked box border to a 2px periwinkle,
   mirroring the portal input's hover (and the checkbox's blue checked accent). */
.advanced-toggle:hover input[type="checkbox"]:not(:checked) {
    border-width: 2px;
    border-color: rgba(var(--rgb-accent), 0.45);
}
.advanced-toggle input[type="checkbox"]:checked {
    background: var(--copper);
    border-color: var(--copper);
}
/* Checked + hover: keep the solid copper border, just thicken to 2px — so the
   hover response persists without swapping copper for the translucent
   periwinkle (which would weaken the checked border). */
.advanced-toggle:hover input[type="checkbox"]:checked {
    border-width: 2px;
}
.advanced-toggle input[type="checkbox"]:checked::after {
    border-color: #ffffff;
}

/* Study-type pills — match the active-tab treatment (P1 periwinkle). */
.study-type-pill.active {
    background: rgba(var(--rgb-peri), 0.15);
    border-color: rgba(var(--rgb-peri-dark), 0.85);
}

/* Resting inactive pills ("Primary Only" / "Reviews Only") — bump off the
   muted tier to the darker secondary tier, like the subtitle. The .active
   pill keeps its own darker --parchment color (higher specificity). */
.study-type-pill { color: var(--parchment-dim); }

/* Footer divider + progress track. */
.form-footer { border-top: 1px solid rgba(var(--rgb-ink-dark), 0.1); }
.progress-bar { background: rgba(var(--rgb-ink-dark), 0.1); }

/* Profile cards (inside "About Search Profiles"). */
.profile-card {
    background: rgba(var(--rgb-white), 0.5);
    border: 1px solid rgba(var(--rgb-ink-dark), 0.08);
}
.profile-card:hover {
    background: rgba(var(--rgb-white), 0.72);
    border-color: rgba(var(--rgb-ink-dark), 0.14);
}
/* Selected profile — mirrors the light mode-picker's active edge. */
.profile-card[aria-checked="true"] {
    background: rgba(var(--rgb-white), 0.72);
    border-color: rgba(var(--rgb-peri-dark), 0.85);
}

/* ════════════════════════════════════════════════════════════════════
   RESULTS ACCORDION (light theme)

   The results list is rendered dynamically by search-core.js. Text and
   semantic colors come from :root tokens and flip for free; this block
   patches only the surfaces that hard-code dark-theme rgba() fills,
   borders, and dividers. Mirrors the index-v2.css results section.
   ════════════════════════════════════════════════════════════════════ */

/* Results card — the frosted-glass SHELL. The card itself is now transparent
   and carries ONLY the backdrop blur + edge treatment, so the blurred library
   ghosts through the whole card. The near-opaque (0.78 white) surface that
   makes rows/details readable moved to the inner .results-body wrapper (below).
   The control bar + active-filters sit OUTSIDE that wrapper, so they ride this
   card glass as a frosted header (like the search portal) rather than a flat
   fill. .results-card keeps overflow:hidden (base), clipping the header glass
   to the rounded top corners. */
.results-card {
    background: transparent;
    border: 0.5px solid rgba(var(--rgb-peri-light), 0.8);
    backdrop-filter: blur(24px) saturate(1.4) brightness(1.05);
    -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.05);
    /* Same edge treatment as the search portal: soft drop shadow lifts the
       card off the background, plus a bright inset top rim for the glass edge. */
    box-shadow:
        0 12px 40px rgba(var(--rgb-ink-dark), 0.16),
        inset 0 1px 0 rgba(var(--rgb-white), 0.95);
}

/* Results body — the near-opaque surface the card fill used to provide (0.78
   white veil over a faint periwinkle wash). Rows/details read as a light
   near-white surface so dense text/data stays legible over the library
   backdrop. Wraps everything below the glass header (flow panel, paper list,
   more-results toggle). No rule in the dark theme → transparent there, so dark
   mode is unchanged (its card keeps its own glass fill). */
.results-body {
    background:
        linear-gradient(rgba(var(--rgb-white), 0.78), rgba(var(--rgb-white), 0.78)),
        linear-gradient(rgba(120, 150, 222, 0.06), rgba(120, 150, 222, 0.06));
}

/* Paper rows — transparent; separated by faint dark dividers. Hover lifts
   with a faint dark wash; the expanded row keeps a blue accent tint. */
.paper-row { border-bottom: 1px solid rgba(var(--rgb-ink-dark), 0.12); }
.paper-row:hover .paper-summary { background: rgba(var(--rgb-ink-dark), 0.035); }
/* Expanded row header — solid periwinkle-grey fill (sampled rgb 233,236,247,
   the search portal glass's rendered tone). This lives INSIDE the opaque
   .results-body, so it has no library backdrop behind it and can't read as
   glass; it stays a flat sample — a subtle highlight against the white body.
   (The control bar is now true frosted glass, see below, so this is no longer
   kept in lockstep with it; it's the one remaining flat-sampled surface.) */
.paper-row.expanded .paper-summary { background: rgb(233, 236, 247); }

/* Meta line (year • authors • venue • citations): dark mode brightens this one
   tier to --parchment-dim; light keeps the muted tier so it stays secondary
   against the light card. */
.paper-meta { color: var(--parchment-muted); }

/* Rank badge + neutral study tag — dark wash instead of light-on-dark. */
.paper-rank { background: rgba(var(--rgb-ink-dark), 0.08); }
.study-tag { background: rgba(var(--rgb-ink-dark), 0.06); }

/* "Show additional results" button + "Additional results" divider label. */
.more-results-btn { border: 1px solid rgba(var(--rgb-ink-dark), 0.18); }
.extras-divider-label { border: 1px solid rgba(var(--rgb-ink-dark), 0.18); }

/* ── Expanded details ─────────────────────────────────────────────────── */

/* Analysis fieldset — blue-tinted edge. Its floating "EvidenceSeek analysis"
   label needs an opaque background to notch the border line, but the base
   theme's pure-white --ink-card chip reads ~10 levels brighter than the
   semi-transparent results-card surface showing through the (transparent)
   paper-details area — making the chip look like a lighter box. Match that
   composited surface (rgb(250,250,251) over the lighter bg3 results area) so
   the notch is invisible. */
.analysis-block { border: 1.5px solid rgba(120, 150, 222, 0.45); }
.analysis-block-label { background: rgb(250, 250, 251); }

/* Analysis narrative + topical-criteria questions: match the abstract's
   near-black ink (--parchment) instead of the dimmer --parchment-dim, so the
   analysis prose reads at the same weight as the abstract. */
.detail-explanation,
.criteria-q-text { color: var(--parchment); }

/* Score-breakdown bars: unfilled cells become a dark track (filled cells
   are --copper, which flips for free). */
.score-bar-cell-block { background: rgba(var(--rgb-ink-dark), 0.12); }

/* Topical-criteria rows — faint dark divider between rows. */
.criteria-row { border-top: 1px solid rgba(var(--rgb-ink-dark), 0.08); }

/* Warning accents — recolor for light: the bright-yellow ⚠ glyph and the
   insufficient-info amber would wash out on paper. */
.score-bar-warning { color: #b45309; }
.paper-row.has-insufficient-info .criteria-panel > .detail-label::after {
    color: rgba(146, 100, 20, 0.85);
}
/* Insufficient-info chips: the base 0.32 fade was tuned for the dark theme;
   on the light expanded surface those Yes/No/Partial labels read too faint,
   so lift the fade a little. */
.paper-row.has-insufficient-info .criteria-chip { opacity: 0.45; }

/* Lazy explanation slot — skeleton shimmer, transient states, retry. */
.explanation-skeleton .bar {
    background: linear-gradient(
        90deg,
        rgba(var(--rgb-ink-dark), 0.05) 0%,
        rgba(var(--rgb-ink-dark), 0.1) 50%,
        rgba(var(--rgb-ink-dark), 0.05) 100%
    );
    background-size: 200% 100%;
}
.explanation-slow,
.explanation-error { color: var(--parchment-muted); }
.explanation-unavailable { color: var(--parchment-dim); }
.explanation-retry:hover { background: rgba(var(--rgb-ink-dark), 0.06); }
.detail-explain { background: rgba(var(--rgb-ink-dark), 0.04); }

/* Export dropdown menu — match the Sort/Filters popover surface (near-white,
   slightly translucent) instead of riding --ink-card's pure white. */
.export-menu {
    background: rgba(250, 250, 252, 0.97);
    border: 1px solid rgba(var(--rgb-ink-dark), 0.12);
}
/* Item hover — align off-blue (79,108,196) to the system periwinkle. */
.export-menu-item:hover { background: rgba(var(--rgb-peri), 0.15); }

/* ════════════════════════════════════════════════════════════════════
   RESULTS CONTROL BAR + FILTER/SORT MENUS (light theme)

   The toolbar above the paper list (in-results search, Filters + Sort
   triggers) and the popover menus they open. The base theme styles these
   with translucent --parchment fills and a 79,108,196 blue active edge; here
   they become translucent-white "wells" with a soft periwinkle border, the
   P1 periwinkle active state used across the portal + results, and light
   frosted popover panels that match the card.
   ════════════════════════════════════════════════════════════════════ */

/* Control header strip — frosted glass, the SAME veil recipe as the search
   portal (.search-card): a flat white veil (0.12) over a periwinkle veil
   (0.15). The card is now transparent and owns the backdrop blur, so this veil
   lets the blurred library backdrop through and the strip reads as real glass
   (not the old flat rgb 233,236,247 sample). .results-card's overflow:hidden
   clips it to the rounded top corners. The translucent-white wells below
   (search/filters/sort) stay lighter than this veil, so they still read.
   When no filters are applied the bottom divider here separates the glass
   header from the opaque body; when filters show, the active-filters strip
   (same veil) extends the header and carries the divider instead. */
.control-bar {
    background:
        linear-gradient(rgba(var(--rgb-white), 0.12), rgba(var(--rgb-white), 0.12)),
        linear-gradient(rgba(var(--rgb-peri), 0.15), rgba(var(--rgb-peri), 0.15));
    border-bottom: 1px solid rgba(var(--rgb-ink-dark), 0.08);
}

/* In-results search + Filters/Sort triggers — translucent white wells with a
   soft periwinkle border, like the portal's input fields. */
.search-input,
.filters-trigger,
.sort-trigger {
    background: rgba(var(--rgb-white), 0.55);
    border: 1px solid rgba(var(--rgb-accent), 0.24);
}
/* Hover deepens the border (0.24 → 0.6 accent) for a more prominent
   affordance. Opacity only — the border stays 1px so the content area never
   changes size, avoiding the inner jitter a width bump would cause. */
.search-input:hover,
.filters-trigger:hover,
.sort-trigger:hover {
    background: rgba(var(--rgb-white), 0.72);
    border-color: rgba(var(--rgb-accent), 0.6);
}
/* Active / open → P1 periwinkle, unifying with the portal's selected
   tab/pill indicators. */
.filters-trigger.active,
.filters-trigger.open,
.sort-trigger.open {
    background: rgba(var(--rgb-peri), 0.15);
    border-color: rgba(var(--rgb-peri-dark), 0.85);
}
/* In-results search: keep the translucent white well on focus / has-value
   and override the border to light-mode periwinkle (the base sets a darker
   blue). The focus glow ring itself lives in the base stylesheet via the
   per-theme --copper-glow token, so no box-shadow rule is needed here. */
.search-input:focus,
.search-input-wrap.has-value .search-input {
    border-color: rgba(var(--rgb-peri-dark), 0.85);
}
.search-clear:hover { background: rgba(var(--rgb-ink-dark), 0.06); }
/* In-results search match highlight. */
.paper-list mark { background: rgba(var(--rgb-peri-dark), 0.26); }

/* Popover panels (Sort menu + Filters) — light frosted, matching the card:
   periwinkle border + blue-tinted floating shadow over the base 20px blur. */
.popover {
    background: rgba(250, 250, 252, 0.97);
    border: 1px solid rgba(var(--rgb-peri-light), 0.7);
    box-shadow: 0 18px 50px rgba(var(--rgb-shadow), 0.2);
}
.popover-section { border-bottom-color: rgba(var(--rgb-ink-dark), 0.1); }

/* Menu items / segmented control / year presets — wells + periwinkle active. */
.menu-item,
.segmented-control,
.year-preset {
    background: rgba(var(--rgb-white), 0.6);
    border-color: rgba(var(--rgb-accent), 0.22);
}
.menu-item:hover,
.year-preset:hover {
    background: rgba(var(--rgb-white), 0.82);
    border-color: rgba(var(--rgb-accent), 0.4);
}
.segmented-control button:hover { background: rgba(var(--rgb-accent), 0.06); }
.menu-item.active,
.segmented-control button.active,
.year-preset.active {
    background: rgba(var(--rgb-peri), 0.15);
    border-color: rgba(var(--rgb-peri-dark), 0.85);
}

/* Dual-range sliders (year + relevance score) + score histogram. The base
   theme's light --parchment track/bars are invisible on light, and the thumb
   fills with --parchment (now dark) — so recolor to a dark track, periwinkle
   fill, and a white thumb with a periwinkle ring. */
.dual-slider-track { background: rgba(var(--rgb-ink-dark), 0.12); }
.dual-slider-fill { background: rgba(var(--rgb-peri-dark), 0.9); }
.dual-slider input[type="range"]::-webkit-slider-thumb {
    background: #ffffff;
    border-color: rgba(var(--rgb-peri-dark), 0.85);
    box-shadow: 0 1px 3px rgba(var(--rgb-ink-dark), 0.25);
}
.dual-slider input[type="range"]::-moz-range-thumb {
    background: #ffffff;
    border-color: rgba(var(--rgb-peri-dark), 0.85);
    box-shadow: 0 1px 3px rgba(var(--rgb-ink-dark), 0.25);
}
.histogram-bar { background: rgba(var(--rgb-ink-dark), 0.12); }
.histogram-bar.kept { background: rgba(var(--rgb-peri-dark), 0.85); }

/* Active-filter chips below the toolbar (P1 periwinkle pill). */
.active-chip {
    background: rgba(var(--rgb-peri), 0.18);
    border-color: rgba(var(--rgb-peri-dark), 0.8);
}
.clear-all-link { text-decoration-color: rgba(var(--rgb-ink-dark), 0.3); }
/* The separator beneath the chips (added in index-v2.css) is a near-white
   hairline for the dark theme; recolor to a dark hairline matching the
   control-bar's bottom divider so it reads on the light card. */
.active-filters.visible { border-bottom-color: rgba(var(--rgb-ink-dark), 0.08); }

/* Active-filters chip strip joins the frosted-glass header: it sits OUTSIDE the
   opaque .results-body wrapper (a sibling of the control bar), so give it the
   same portal veil as .control-bar — the toolbar + chips then read as one
   continuous glass header above the opaque body. Only shows when filters are
   applied (display:none until results-filters.js adds .visible). */
.active-filters {
    background:
        linear-gradient(rgba(var(--rgb-white), 0.12), rgba(var(--rgb-white), 0.12)),
        linear-gradient(rgba(var(--rgb-peri), 0.15), rgba(var(--rgb-peri), 0.15));
}

/* ════════════════════════════════════════════════════════════════════
   RUBRIC EDITOR + RUBRIC FILTER CHIPS (light theme)

   Two surfaces: (1) the pre-search "Search Criteria" editor card
   (.rubric-card) where criteria are reviewed/edited before a search, and
   (2) the per-question rubric filter chips + custom-criteria widget inside
   the Filters popover. Base theme uses dark glass / parchment-tint fills;
   here they join the light card + periwinkle-active language.
   ════════════════════════════════════════════════════════════════════ */

/* Rubric editor card — light glass in the card family (was dark
   rgba(26,26,31,0.70)). */
.rubric-card {
    background:
        linear-gradient(rgba(var(--rgb-white), 0.82), rgba(var(--rgb-white), 0.82)),
        linear-gradient(rgba(var(--rgb-peri), 0.08), rgba(var(--rgb-peri), 0.08));
    border: 0.5px solid rgba(var(--rgb-peri-light), 0.8);
    box-shadow:
        0 18px 50px rgba(var(--rgb-shadow), 0.18),
        inset 0 1px 0 rgba(var(--rgb-white), 0.9);
}
/* Criterion rows — translucent white wells (were faint light-parchment). */
.rubric-row { background: rgba(var(--rgb-white), 0.55); border-color: rgba(var(--rgb-ink-dark), 0.08); }
.rubric-row:hover { background: rgba(var(--rgb-white), 0.75); border-color: rgba(var(--rgb-ink-dark), 0.14); }
.rubric-text:hover { background: rgba(var(--rgb-ink-dark), 0.04); }
/* Edit textarea — light field (was dark rgba(10,10,12,0.6)). */
.rubric-textarea { background: rgba(var(--rgb-white), 0.7); border-color: rgba(var(--rgb-accent), 0.28); }
/* Criticality control + secondary buttons — periwinkle active/hover. */
.seg-control { background: rgba(var(--rgb-white), 0.55); border-color: rgba(var(--rgb-accent), 0.2); }
.seg-control button:hover { background: rgba(var(--rgb-accent), 0.06); }
.seg-control button.active {
    background: rgba(var(--rgb-peri), 0.15);
    border-color: rgba(var(--rgb-peri-dark), 0.85);
}
.rubric-footer-row .btn-secondary,
.rubric-edit-actions .btn-secondary { border-color: rgba(var(--rgb-accent), 0.3); }
.rubric-footer-row .btn-secondary:hover:not(:disabled),
.rubric-edit-actions .btn-secondary:hover:not(:disabled) {
    background: rgba(var(--rgb-accent), 0.06);
    border-color: rgba(var(--rgb-peri-dark), 0.85);
}
/* Loading skeleton shimmer — dark sweep (was light parchment). */
.rubric-skeleton-row {
    background: linear-gradient(
        90deg,
        rgba(var(--rgb-ink-dark), 0.04) 0%,
        rgba(var(--rgb-ink-dark), 0.08) 50%,
        rgba(var(--rgb-ink-dark), 0.04) 100%);
    background-size: 200% 100%;
}

/* ── Rubric filter chips + custom criteria (inside the Filters popover) ── */
/* Sub-question divider above each rubric-filter group. */
.rubric-q::before { background: rgba(var(--rgb-ink-dark), 0.1); }
/* Filter chips — light wells; active stays a solid copper fill but needs LIGHT
   text (base uses --parchment, which is now dark = unreadable on the blue). */
.rubric-chip { background: rgba(var(--rgb-white), 0.55); border-color: rgba(var(--rgb-accent), 0.22); }
/* Hover mirrors .year-preset:hover — brighten the well AND deepen the border
   (accent 0.22 → 0.4). Previously only the well brightened (0.55 → 0.78); over
   the near-white popover that shift was nearly invisible, so the hover read as
   a font-color change alone (the text-darken is inherited from the base rule).
   The border deepen restores the same affordance the Year buttons have. */
.rubric-chip:hover {
    background: rgba(var(--rgb-white), 0.82);
    border-color: rgba(var(--rgb-accent), 0.4);
}
.rubric-chip.active { color: var(--ink); }
/* Active + hover: the base hover bg (a light-mode white well, ordered after
   .active) would otherwise repaint an active chip near-white — white text on
   white = invisible. Pin it back to the active look: blue fill, white text. */
.rubric-chip.active:hover {
    background: var(--copper);
    border-color: var(--copper);
    color: var(--ink);
}
/* Custom-criterion text input + its error message. */
#customCriterionInput { background: rgba(var(--rgb-white), 0.7); border-color: rgba(var(--rgb-accent), 0.28); }
.custom-criteria-message.error { color: var(--negative); }

/* ════════════════════════════════════════════════════════════════════
   QA PASS — remaining surfaces (tooltips, search-flow panel)
   ════════════════════════════════════════════════════════════════════ */

/* Tooltips — the bubble is --ink-card (flips to white), but its border + arrow
   are a light parchment tint that vanishes on white. Give the bubble a soft
   periwinkle border and make the arrow match the white fill so it still reads
   as a pointer. */
.has-tooltip::after { border-color: rgba(var(--rgb-peri-light), 0.45); }
.has-tooltip::before { border-top-color: var(--ink-card); }
.has-tooltip-bottom::before { border-bottom-color: var(--ink-card); }

/* Search-flow panel ("How we found these papers") — the retrieval funnel
   shown from the results header. Dark fill + light-parchment surfaces need
   light wells + dark hairlines; the funnel block borders/arrows use
   --parchment-muted, which flips dark for free. */
.sf-details { background: rgba(var(--rgb-white), 0.45); border-color: rgba(var(--rgb-ink-dark), 0.1); }
.sf-sources { border-top-color: rgba(var(--rgb-ink-dark), 0.08); }
.sf-block { background: rgba(var(--rgb-white), 0.55); }
.sf-queries { border-top-color: rgba(var(--rgb-ink-dark), 0.08); }