/* Frank - design tokens + base styles.
   Editorial-authority system: serif headlines, sans UI, mono numerals.
   Theming is done with CSS variables; a single `.dark` class on <html> flips
   every token. Tailwind utilities (see tailwind.config.cjs) alias these vars
   via color-mix so alpha modifiers (e.g. ring-accent/60) work. */

/* ----------------------------------------------------------------------------
   Theme tokens. Dark is the default (html.dark). Light = html:not(.dark).
---------------------------------------------------------------------------- */
:root {
    /* DARK theme */
    --bg: #0B0C0E;
    --surface-1: #121316;
    --surface-2: #1A1C20;
    --surface-3: #23262B;
    --line: #2A2D33;
    --line-strong: #3A3E45;
    --ink: #F4F5F7;
    --ink-2: #B9BFC9;
    --ink-3: #898F9A;          /* darkened for WCAG AA on surfaces */
    --accent: #3B82F6;          /* bright: links, borders, dots, accent text */
    --accent-hover: #5C9CFF;
    --accent-strong: #2563EB;   /* darker: filled buttons (white text passes AA) */
    --accent-quiet: #13203A;
    --trust-high: #34D399;
    --trust-high-bg: #0F2A22;
    --trust-medium: #FBBF24;
    --trust-medium-bg: #2A2310;
    --trust-low: #FB7185;
    --trust-low-bg: #2C1418;
    --xs: 0 1px 2px 0 rgb(0 0 0 / 0.30);
    --card: 0 1px 0 rgb(0 0 0 / 0.40);
    --lift: 0 8px 24px -6px rgb(0 0 0 / 0.50), 0 2px 6px -2px rgb(0 0 0 / 0.35);
}

html:not(.dark) {
    /* LIGHT theme - warm paper */
    --bg: #FBFBF9;
    --surface-1: #FFFFFF;
    --surface-2: #F4F4F1;
    --surface-3: #ECECE7;
    --line: #E4E3DD;
    --line-strong: #CFCEC6;
    --ink: #16181D;
    --ink-2: #474B53;
    --ink-3: #5F636B;          /* darkened for WCAG AA on warm paper */
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-strong: #1D4ED8;  /* filled buttons (white text passes AA) */
    --accent-quiet: #EAF1FF;
    --trust-high: #0A7A55;     /* darkened for WCAG AA on badge bg */
    --trust-high-bg: #E6F6EF;
    --trust-medium: #9A4A07;   /* darkened for WCAG AA on badge bg */
    --trust-medium-bg: #FBF1DD;
    --trust-low: #C81840;      /* darkened for WCAG AA on badge bg */
    --trust-low-bg: #FCE8EC;
    --xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --card: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
    --lift: 0 8px 24px -6px rgb(0 0 0 / 0.18), 0 2px 6px -2px rgb(0 0 0 / 0.10);
}

/* ----------------------------------------------------------------------------
   Base
---------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--ink-2);
    font-feature-settings: "cv05" 1, "tnum" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Tabular figures for any number that must align (scores, prices, counts). */
.num {
    font-variant-numeric: tabular-nums;
}

/* Force long unbroken tokens (product names, emoji runs) to wrap so they can
   never blow out a card's width on narrow/mobile viewports. */
.wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Respect users who ask for less motion. Kills all animation/transition. */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ----------------------------------------------------------------------------
   Left drawer nav (Forensic chrome). CSS-only via the checkbox/peer pattern
   in html.js's layout() and the 5 static pages — no JS dependency for core
   nav. Transition durations kept in one place so drawer + overlay stay in
   sync; the reduced-motion media query above already neutralizes both.
---------------------------------------------------------------------------- */
.drawer-overlay {
    transition: opacity 0.25s ease;
}

.drawer-panel {
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* ----------------------------------------------------------------------------
   Live "reading reviews" progress log
---------------------------------------------------------------------------- */
#progress-log .progress-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

#progress-log .progress-entry::before {
    content: "\203A"; /* > chevron */
    color: var(--accent);
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   Server-rendered (Worker) page components.
   These class names live inside JS template strings and JS-injected DOM
   (search autocomplete dropdown, the submit spinner, the live activity feed),
   so Tailwind's content scanner can't reliably see them. Defined here against
   the design tokens so they theme correctly in both light and dark.
---------------------------------------------------------------------------- */

/* Forensic-instrument hairline grid backdrop (verify entry/processing hero)
   and tabular-numeral readout helper (verify report score/mono data cells).
   Ported from the approved b-forensic concept — kept token-relative (currentColor-
   independent, low-alpha) so it themes correctly in both light and dark. */
.grid-bg {
    background-image:
        linear-gradient(to right, rgba(120, 120, 120, .08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(120, 120, 120, .08) 1px, transparent 1px);
    background-size: 28px 28px;
}
.readout { font-variant-numeric: tabular-nums; }

/* Loading spinner (search submit overlay + processing card) */
.spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* Search autocomplete dropdown (built in search-bar.js) */
.ac-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    margin-top: 0.5rem;
    max-height: 20rem;
    overflow-y: auto;
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: 0.875rem;
    box-shadow: var(--lift);
}
.ac-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1rem;
    color: var(--ink);
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    text-decoration: none;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item:focus { background: var(--surface-2); color: var(--ink); }
.ac-item .ac-cat {
    flex-shrink: 0;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 999px;
    background: var(--accent-quiet);
    color: var(--accent);
}

/* Live "reading reviews" activity feed (research processing page) */
.activity-feed {
    max-height: 20rem;
    overflow-y: auto;
    padding: 0.75rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 0.625rem;
}
.activity-item {
    padding: 0.25rem 0;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
    line-height: 1.5;
    word-break: break-word;
}
.activity-item:last-child { border-bottom: none; }
.activity-search { color: var(--accent); }
.activity-fetch { color: var(--trust-high); }
.activity-note { color: var(--trust-medium); }
.activity-synthesize { color: var(--ink); }
.activity-status { color: var(--ink-3); }
.activity-error { color: var(--trust-low); }

/* Step-progress indicator on the research processing page */
.progress-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    list-style: none;
    margin: 0 0 1.15rem;
    padding: 0;
    font-size: 0.8rem;
}
.progress-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-3);
    transition: color 0.25s ease;
}
.progress-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.progress-step.is-active {
    color: var(--ink);
    font-weight: 600;
}
.progress-step.is-active .progress-dot {
    background: var(--accent);
    border-color: var(--accent);
}
.progress-step.is-done {
    color: var(--ink-2);
}
.progress-step.is-done .progress-dot {
    background: var(--accent);
    border-color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
    .progress-step.is-active .progress-dot {
        animation: progress-pulse 1.5s ease-in-out infinite;
    }
    @keyframes progress-pulse {
        0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
        50% { box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--accent) 0%, transparent); }
    }
}

/* Buttons used inside SSR templates (research/browse/clarify/category) */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.625rem;
    background: var(--accent-strong);
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.btn:hover { background: var(--accent-hover); color: #fff; }
.btn-ghost { background: var(--surface-1); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

/* Pros / cons two-column block (research report product cards) */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 600px) { .pros-cons { grid-template-columns: 1fr; } }
.pros-cons h4 {
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pros-cons h4.pro { color: var(--trust-high); }
.pros-cons h4.con { color: var(--trust-low); }
.pros-cons li {
    position: relative;
    margin-bottom: 0.25rem;
    padding-left: 1.2rem;
    list-style: none;
    font-size: 0.85rem;
    color: var(--ink-2);
}
.pros-cons li::before { position: absolute; left: 0; font-weight: 700; }
.pros-cons .pro-list li::before { content: '✓'; color: var(--trust-high); }
.pros-cons .con-list li::before { content: '✕'; color: var(--trust-low); }

/* Secondary retailer / manufacturer link pills */
.product-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.product-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;
    border: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.product-link-mfr { background: var(--surface-2); color: var(--ink-2); }
.product-link-mfr:hover { background: var(--surface-3); color: var(--ink); }
.product-link-buy { background: var(--accent-strong); color: #fff; }
.product-link-buy:hover { background: var(--accent-hover); color: #fff; }

/* Full-width Amazon CTA — Amazon's familiar yellow for instant recognition.
   Intentionally brand-colored (not themed) so it reads as a buy button. */
.product-cta-amazon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1rem;
    padding: 0.95rem 1rem;
    background: #FFD814;
    color: #0F1111;
    font-weight: 700;
    font-size: 1rem;
    border: 1px solid #FCD200;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(15 17 17 / 0.15);
    transition: background 0.15s, transform 0.05s;
}
.product-cta-amazon:hover { background: #F7CA00; color: #0F1111; }
.product-cta-amazon:active { transform: translateY(1px); }

/* At-a-glance comparison table — scannable side-by-side above the detail cards.
   Server-rendered (crawlable + no-JS safe) with a Buy column so skimmers get an
   instant comparison and a second cluster of above-the-fold affiliate CTAs. */
.compare-section { margin: 1.5rem 0 2rem; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 0.75rem; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 34rem; }
.compare-table th, .compare-table td { padding: 0.6rem 0.75rem; text-align: left; vertical-align: middle; }
.compare-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); background: var(--surface-1); font-weight: 600; }
.compare-table tbody tr { border-top: 1px solid var(--line); }
.compare-table tbody tr:hover { background: var(--surface-1); }
.compare-rank { font-weight: 700; color: var(--ink); white-space: nowrap; }
.compare-name { font-weight: 600; }
.compare-name a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
.compare-name a:hover { color: var(--accent); }
.compare-brand { display: block; font-weight: 400; font-size: 0.8rem; color: var(--ink-3); }
.compare-muted { color: var(--ink-3); }
.compare-nowrap { white-space: nowrap; }
.compare-buy { display: inline-block; padding: 0.4rem 0.7rem; background: var(--accent-strong); color: #fff; border-radius: 6px; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.compare-buy:hover { background: var(--accent-hover); color: #fff; }

/* Share buttons on completed research reports */
.share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.share-bar > span { font-size: 0.85rem; font-weight: 500; color: var(--ink-3); }
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.625rem;
    background: var(--surface-1);
    color: var(--ink-2);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.share-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Visible focus indicators (WCAG 2.4.7) for controls that otherwise rely on
   the UA default outline being suppressed or hard to see. */
.share-btn:focus-visible,
.js-copy-link:focus-visible,
.example-query:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* Centered page wrapper used by the research report shell. The activity-feed
   in-place swap targets `.container`, so the class name must be preserved. */
.container { max-width: 64rem; margin: 0 auto; }

/* Research report layout containers + cards (server-rendered) */
.summary-box,
.sources,
.buyers-guide {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: 0.875rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--card);
}
.summary-box h2 { font-family: 'Newsreader', Georgia, serif; font-size: 1.375rem; font-weight: 600; color: var(--ink); margin-bottom: 0.75rem; }
.summary-box p { color: var(--ink-2); }

/* "Our pick" — high-visibility rank-1 card above the fold */
.ourpick-box {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: 0.875rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--card);
}
.ourpick-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.4rem;
}
.ourpick-name { font-family: 'Newsreader', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.ourpick-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.5rem; }
.ourpick-rating { font-size: 0.9rem; color: var(--trust-medium); display: inline-flex; gap: 0.35rem; align-items: center; }
.ourpick-rating > span:last-child { color: var(--ink-2); }
.ourpick-price { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.ourpick-verdict { color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; margin-top: 0.75rem; }
.ourpick-cta { max-width: 22rem; }

/* "Why trust this" — quiet E-E-A-T panel */
.trust-panel {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: 0.875rem;
    padding: 1.15rem 1.35rem;
    margin-bottom: 2rem;
}
.trust-panel-head {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 0.65rem;
}
.trust-chips { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.trust-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--ink-2);
}
.trust-chip strong { color: var(--ink); font-weight: 700; }
.trust-chip-warn { background: var(--trust-medium-bg); border-color: color-mix(in srgb, var(--trust-medium) 40%, transparent); }
.trust-chip-warn strong { color: var(--trust-medium); }
.trust-panel-date { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.75rem; }
.trust-panel-disclosure { font-size: 0.78rem; color: var(--ink-3); line-height: 1.55; margin-top: 0.5rem; }
.sources h2 { font-family: 'Newsreader', Georgia, serif; color: var(--ink); }
.sources a { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; color: var(--accent); word-break: break-all; }
.sources a:hover { color: var(--accent-hover); }

.page-header h1 { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.5rem; }
.page-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.card-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--accent-quiet);
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 500;
}
.card-time { font-size: 0.8125rem; color: var(--ink-3); }

/* Listing card (related research, browse fallbacks rendered server-side) */
.card {
    display: block;
    padding: 1.25rem;
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: 0.875rem;
    box-shadow: var(--card);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--lift); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.card h3 { font-family: 'Newsreader', Georgia, serif; font-size: 1.375rem; font-weight: 600; color: var(--ink); }
.card p { margin-top: 0.4rem; font-size: 0.9375rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { display: flex; gap: 1rem; margin-top: 0.75rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* /reviews product card. Forensic-instrument: hairline border, flush corners,
   no shadow. The `.review-card` class name is a JS render-smoke test hook
   (test/unit/reviews.test.js) — kept bare (no companion Tailwind classes) so
   its layout lives here instead of inline utilities. */
.review-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border: 1px solid var(--line);
    padding: 1.1rem;
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1rem; }
@media (max-width: 600px) { .product-grid { grid-template-columns: 1fr; } }

/* Individual product card on a research report */
.product {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: 0.875rem;
    padding: 1.5rem;
    box-shadow: var(--card);
    transition: border-color 0.2s;
}
.product:hover { border-color: var(--line-strong); }
.product-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.product-rank { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-1 { background: var(--trust-medium-bg); color: var(--trust-medium); border-color: color-mix(in srgb, var(--trust-medium) 40%, transparent); }
.rank-2 { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); }
.rank-3 { background: var(--trust-medium-bg); color: var(--trust-medium); border-color: color-mix(in srgb, var(--trust-medium) 30%, transparent); }
.rank-n { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }
.product-price { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.5rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.product-rating { margin-top: 0.25rem; font-size: 0.85rem; color: var(--trust-medium); }
.product-bestfor {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.3rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--accent-quiet);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
}
.product-verdict {
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--accent);
    color: var(--ink-2);
    font-family: 'Newsreader', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
}
/* Inline clarify-question chips on the home page (inquisitive pre-research step). */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-1);
    color: var(--ink-2);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    user-select: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { border-color: var(--accent); background: var(--accent-quiet); color: var(--accent); }

/* Search history — toggleable layouts (spreadsheet / grid / compact / timeline) */
.history-shell { display: flex; flex-direction: column; gap: 0.75rem; }
.history-layout-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--surface-1);
}
.history-layout-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.history-layout-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.2rem;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    background: var(--surface-2);
}
.history-layout-btn {
    border: 1px solid transparent;
    border-radius: 0.35rem;
    padding: 0.35rem 0.65rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-3);
    background: transparent;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.history-layout-btn:hover { color: var(--ink); background: var(--surface-1); }
.history-layout-btn.is-active {
    color: var(--ink);
    background: var(--surface-1);
    border-color: var(--line-strong);
    box-shadow: var(--xs);
}
.history-empty { margin: 0; }

/* Spreadsheet — SAP / Excel feel */
.history-spreadsheet-wrap {
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    background: var(--surface-1);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 50%, transparent);
}
.history-spreadsheet {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: 0.84rem;
    line-height: 1.35;
}
.history-spreadsheet thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--surface-2) 88%, var(--accent-quiet));
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.history-spreadsheet tbody td {
    padding: 0.42rem 0.65rem;
    border: 1px solid var(--line);
    vertical-align: middle;
    color: var(--ink-2);
}
.history-spreadsheet tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.history-spreadsheet tbody tr:hover td,
.history-spreadsheet tbody tr:focus-visible td {
    background: color-mix(in srgb, var(--accent-quiet) 75%, var(--surface-2));
    color: var(--ink);
    cursor: pointer;
}
.history-spreadsheet tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.history-col-num { width: 2.5rem; text-align: right; color: var(--ink-3); }
.history-col-date { width: 7.5rem; white-space: nowrap; }
.history-col-open { width: 2rem; text-align: center; color: var(--accent); }
.history-col-query { font-weight: 500; color: var(--ink); }

/* Card grid */
.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
}
.history-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface-1);
    box-shadow: var(--card);
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.history-card:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    box-shadow: var(--lift);
}
.history-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* Compact list */
.history-compact {
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--surface-1);
}
.history-compact-row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}
.history-compact-row:last-child { border-bottom: 0; }
.history-compact-row:hover { background: var(--surface-2); }
.history-compact-num { font-size: 0.72rem; color: var(--ink-3); }
.history-compact-query { font-size: 0.88rem; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-compact-when { font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; }

/* Timeline */
.history-timeline { display: flex; flex-direction: column; gap: 1.25rem; }
.history-timeline-label {
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.history-timeline-list { list-style: none; margin: 0; padding: 0 0 0 0.35rem; border-left: 2px solid var(--line); }
.history-timeline-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: baseline;
    padding: 0.45rem 0 0.45rem 0.85rem;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.history-timeline-dot {
    position: absolute;
    left: -0.45rem;
    top: 0.72rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--bg);
}
.history-timeline-item:hover .history-timeline-text { color: var(--accent); }
.history-timeline-text { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.history-timeline-when { font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; }

@media (max-width: 640px) {
    .history-layout-bar { flex-direction: column; align-items: stretch; }
    .history-layout-toggle { width: 100%; }
    .history-layout-btn { flex: 1 1 auto; text-align: center; }
    .history-compact-row { grid-template-columns: 2rem minmax(0, 1fr); }
    .history-compact-when { grid-column: 2; justify-self: start; font-size: 0.7rem; }
    .history-timeline-item { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
    .history-timeline-when { justify-self: start; }
}

/* One-line explanation of why a product earned its rating (sits under best-for). */
.rating-why {
    margin: 0.4rem 0 0.6rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink-2);
}
.rating-why strong { color: var(--ink); font-weight: 600; }
.ourpick-box .rating-why { margin-top: 0.5rem; color: var(--ink-2); }

/* "Read the low ratings" — prominent critical-reviews block for sub-4★ picks. */
.critical-reviews {
    margin: 0.9rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, #d97706 35%, var(--line));
    border-left: 3px solid #d97706;
    border-radius: 0.6rem;
    background: color-mix(in srgb, #d97706 7%, var(--surface-1));
}
.critical-reviews .crit-head {
    margin: 0 0 0.4rem;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: color-mix(in srgb, #b45309 80%, var(--ink));
}
.critical-reviews .crit-intro { margin: 0 0 0.5rem; font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); }
.critical-reviews .crit-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.critical-reviews .crit-list li { font-size: 0.88rem; line-height: 1.45; color: var(--ink); }

/* Breadcrumb + TOC chrome on report/listing pages */
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--ink); }
.toc a:hover { color: var(--ink); }

/* Anchor scroll + target highlight for deep-linked product cards */
:target { scroll-margin-top: 5rem; }
[id] { scroll-margin-top: 5rem; }
article[id]:target {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 0.875rem;
}

/* ----------------------------------------------------------------------------
   Print: force the light token set (dark is the default theme) so a printed
   report is readable on white paper, then strip chrome. Interactive chrome is
   also tagged with Tailwind's `print:hidden` in markup.
---------------------------------------------------------------------------- */
@media print {
    :root {
        --bg: #FFFFFF;
        --surface-1: #FFFFFF;
        --surface-2: #F4F4F1;
        --surface-3: #ECECE7;
        --line: #E4E3DD;
        --line-strong: #CFCEC6;
        --ink: #16181D;
        --ink-2: #474B53;
        --ink-3: #5F636B;
        --accent: #2563EB;
        --accent-hover: #1D4ED8;
        --accent-strong: #1D4ED8;
        --accent-quiet: #EAF1FF;
        --trust-high: #0A7A55;
        --trust-high-bg: #E6F6EF;
        --trust-medium: #9A4A07;
        --trust-medium-bg: #FBF1DD;
        --trust-low: #C81840;
        --trust-low-bg: #FCE8EC;
    }

    body {
        background: #fff;
        color: #000;
    }

    article {
        break-inside: avoid;
        border: 1px solid #ccc;
    }
}

/* ----------------------------------------------------------------------------
   Mobile nav (pure-CSS <details>/<summary> hamburger). CSP script-src forbids
   inline onclick, so the menu is JS-free: <details open> shows the panel
   natively. Hide the default disclosure triangle marker across browsers.
---------------------------------------------------------------------------- */
summary.nav-toggle { list-style: none; cursor: pointer; }
summary.nav-toggle::-webkit-details-marker { display: none; }
details.nav-menu[open] .nav-menu-panel { display: flex; }