/* Neuji.Web page-specific styles (marketing funnel, account, search shell).
   Layered over the shared design system in _content/Neuji.Web.Shared/app.css. */

/* Primary nav. flex-wrap + min-width:0 are the universal safety net (the row can wrap rather than
   overflow); the marketing header additionally collapses to a disclosure menu — see below. */
.header-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; min-width: 0; justify-content: flex-end; }

/* Marketing header: a native <details> disclosure (accessible, no JS, CSP-safe). Inline by default;
   collapses to a hamburger menu when the viewport is narrow OR the text is scaled up. The breakpoint is
   in EM so it responds to the user's font size: Firefox-for-Android applies the Android OS font scale as a
   global text-zoom that enlarges the em/rem basis, so an em media query fires at a wider viewport when the
   font is large — switching to the compact menu exactly when the inline bar would otherwise overflow
   (WCAG 1.4.10 Reflow). (Harmless on Chrome, which doesn't scale web text for the OS setting.) */
.nav-disclosure { position: relative; }
.nav-toggle {
    display: none;  /* desktop: hidden (nav is inline) */
    align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
    border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); cursor: pointer; list-style: none;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle::marker { content: ""; }
.nav-toggle:hover { background: var(--surface); }
.nav-disclosure > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* Hamburger icon: three bars that morph to an X when open. */
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    content: ""; display: block; width: 1.15rem; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -0.4rem; inset-inline-start: 0; }
.nav-toggle-bars::after { position: absolute; top: 0.4rem; inset-inline-start: 0; }
.nav-disclosure[open] .nav-toggle-bars { background: transparent; }
.nav-disclosure[open] .nav-toggle-bars::before { transform: translateY(0.4rem) rotate(45deg); }
.nav-disclosure[open] .nav-toggle-bars::after { transform: translateY(-0.4rem) rotate(-45deg); }

/* Chromium 131+ hides a closed <details>' content through the ::details-content pseudo (content-visibility),
   which author `display` on the CHILDREN no longer overrides — so the inline-on-desktop state of this disclosure
   silently collapsed there (the nav vanished from the desktop header). Force the slot visible as the default
   (author rules beat UA rules), and re-assert the UA hiding ONLY in the narrow/hamburger state below. Engines
   without ::details-content ignore both rules and keep working via the child display overrides. */
.nav-disclosure::details-content { content-visibility: visible; }

@media (max-width: 34em) {
    .nav-toggle { display: inline-flex; }
    .nav-disclosure:not([open])::details-content { content-visibility: hidden; }
    .nav-disclosure > .header-nav {
        position: absolute; top: calc(100% + 0.5rem); inset-inline-end: 0;
        flex-direction: column; align-items: stretch; gap: 0.35rem;
        min-width: 12rem; max-width: min(16rem, 80vw); padding: 0.5rem;
        background: var(--bg-elevated); border: 1px solid var(--border);
        border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown);
    }
    .nav-disclosure:not([open]) > .header-nav { display: none; }
    .nav-disclosure > .header-nav .btn { width: 100%; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; }
}

/* Breathing room between page content and the footer (footer-scoped so it never affects the
   footer-less search app; on short pages the flex layout makes the extra space invisible). */
.app-footer { margin-top: clamp(2.5rem, 5vw, 4rem); }

.footer-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: start; }
/* Reflow safety at large OS text (WCAG 1.4.4 Resize Text / 1.4.10 Reflow): the footer columns are flex
   children whose default min-width:auto floors them at their content's min-content — and the support-email
   token (e.g. support@neuji.co.uk) is unbreakable, so at ~200% text on a narrow viewport it forced a
   sub-pixel horizontal overflow. min-width:0 lets each column shrink, and overflow-wrap:anywhere lets the
   email break across lines instead of pushing past the viewport. */
.footer-grid > * { min-width: 0; }
.app-footer address, .app-footer address a { overflow-wrap: anywhere; }

/* ------------------------------- Hero ----------------------------------- */
.hero {
    text-align: center;
    position: relative;
    overflow: hidden;
    /* generous bottom padding = the pulse mountain's own stage (the figure is bottom-anchored) */
    padding: clamp(3rem, 8vw, 6rem) 1.25rem clamp(11rem, 24vw, 15rem);
    background:
        radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
}
.hero > :not(.hero-bands) { position: relative; z-index: 1; }
/* The copy pool: a soft elliptical well of background color painted behind and around the copy block. It sizes
   itself to the copy (any engine, locale, or text-zoom — no measurement), so the waves flow UNBROKEN behind it
   while the words float on quiet dark. */
/* The copy stack rides a quiet glass panel (owner: dark, mildly translucent, small padding) — the ribbons
   stay continuous behind it, dimmed just enough to read over. */
.hero-copy { position: relative; background: color-mix(in srgb, var(--bg) 58%, transparent);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    border-radius: var(--radius-lg, 16px); padding: clamp(1.25rem, 3vw, 2rem);
    max-width: 54rem; margin-inline: auto; }
/* The spectrum pulse field: stacked waveform rows (Unknown-Pleasures family) behind the hero. Fills are OPAQUE
   background (occlusion depth — so no container opacity and no mask; legibility comes from the geometry: calm
   top rows under the copy). One vertical spectrum gradient strokes every row; hue-rotating the group makes the
   color WAVES travel through the stack — a single composited filter, zero JS. */
.hero-bands { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bands svg { width: 100%; height: 100%; display: block;
    /* FOUC guard: hold the fallback invisible for the JS boot window — fast loads go straight to the canvas
       with no intermediate frame; slow/no-JS loads reveal the (frame-0-identical) figure after 600ms.
       reduced-motion (canvas never runs) reveals instantly via the media block below. */
    animation: hero-svg-reveal 0.35s ease 0.6s backwards; }
@keyframes hero-svg-reveal { from { opacity: 0; } to { opacity: 1; } }
/* the silk current's life: the 40s hue crawl on the group + the FAN BREATH on each ribbon — every path
   rotates around the bundle's waist by its own --fan factor (outer ribbons swing most), so the whole current
   fans out and gathers back, subtly, forever. Zero-start keyframes (no first-frame jump). */
.hero-flow { animation: hero-pulse-hue 40s linear infinite; will-change: filter; }
.hero-flow path { transform-box: view-box; transform-origin: 657px 672px;
    animation: hero-fan 15s ease-in-out infinite alternate; }
@keyframes hero-pulse-hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes hero-fan { from { transform: rotate(0deg); } to { transform: rotate(calc(var(--fan, 0) * 2.6deg)); } }
@media (prefers-reduced-motion: reduce) { .hero-flow, .hero-flow path { animation: none; } .hero-bands svg { animation: none; } }
@media (forced-colors: active) { .hero-bands { display: none; } }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8125rem; font-weight: 600; color: var(--brand-strong);
    background: var(--brand-soft); padding: 0.35rem 0.8rem; border-radius: var(--radius-pill);
    margin-bottom: 1.25rem;
}
.hero h1 {
    font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.03em;
    /* max-width in ch keeps a comfortable measure, but ch is the width of the "0" glyph — which differs
       between fonts, so `system-ui` resolving to different fonts (notably Firefox vs Chromium on Linux)
       makes the column compute to different widths and the heading wrap at different points. text-wrap
       balance evens the line lengths so it reads intentionally in either case. */
    max-width: 18ch; margin: 0 auto 1rem; text-wrap: balance;
}
.hero .lede {
    font-size: clamp(1.05rem, 2.5vw, 1.3rem); color: var(--text-muted);
    max-width: 56ch; margin: 0 auto 2rem; text-wrap: pretty; }
.hero-cta { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
/* Let the CTA labels WRAP instead of overflowing: .btn is white-space:nowrap by default, so a long label
   ("Start searching privately") forces horizontal scroll at large text. Scoped to the hero so other buttons keep
   their single-line treatment. max-width:100% lets the button shrink to the viewport at ~200% text / ~360px. */
.hero-cta .btn { white-space: normal; max-width: 100%; line-height: 1.25; }
.hero-trust { margin-top: 1.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text); }
.hero-nerd { margin-top: 0.45rem; font-size: 0.8125rem; color: var(--text-muted); letter-spacing: 0.01em; }

/* ------------------------- Feature row / value -------------------------- */
.value-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem; padding: 2rem 0;
}
/* exactly-three variant (Why Neuji): capped width + centered, so three cards sit as a balanced center row */
.value-grid--three { max-width: 56rem; margin-inline: auto; }
.value-icon img { width: 72px; height: 72px; border-radius: var(--radius); display: block; }
.value-card { padding: 1.5rem; }
.value-card h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.value-card p { color: var(--text-muted); font-size: 0.9375rem; }
.value-icon {
    width: 72px; height: 72px; border-radius: var(--radius);
    display: grid; place-items: center; margin-bottom: 0.9rem; overflow: hidden;
}

.appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; flex-wrap: wrap; }
.appearance-row + .appearance-row { border-top: 1px solid var(--border); }
.appearance-row .label { font-weight: 600; }
.appearance-row .desc { font-size: 0.8125rem; color: var(--text-muted); }

.section { padding: clamp(2rem, 5vw, 4rem) 0; }
.section-title { text-align: center; font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 0.5rem; }
.section-sub { text-align: center; color: var(--text-muted); max-width: 52ch; margin: 0 auto 2rem; }

.danger-zone { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }

/* ------------------------------ API keys -------------------------------- */
.keys-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.keys-table th, .keys-table td { text-align: start; padding: 0.65rem 0.6rem; border-bottom: 1px solid var(--border); }
.keys-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.keys-table code { font-family: var(--font-mono); font-size: 0.85em; }
.key-reveal { display: block; margin-top: 0.5rem; padding: 0.6rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-mono); word-break: break-all; user-select: all; }
.danger { color: var(--danger); }

/* ------------------------------ Legal ----------------------------------- */
.legal h2 { font-size: 1.2rem; margin: 1.75rem 0 0.5rem; }
.legal p, .legal li { color: var(--text); }
.legal ul { margin: 0.5rem 0 0.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; }
/* "English governs" notice on legal pages: shown for non-English UI, hidden for English. Follows the
   <html lang> the i18n switcher sets, so it toggles on the no-postback language change (no JS needed). */
.legal-lang-notice {
    margin: 0 0 1.5rem;
    padding: 0.7rem 0.9rem;
    border-inline-start: 3px solid #4f46e5;
    background: rgba(79, 70, 229, 0.06);
    border-radius: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}
html[lang="en"] .legal-lang-notice { display: none; }

/* ------------------------------- FAQ ------------------------------------ */
.faq { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 0 1.1rem; }
.faq summary { cursor: pointer; font-weight: 600; padding: 1rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-muted); font-size: 1.25rem; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 1rem; color: var(--text-muted); }

/* ------------------------------ App shell ------------------------------- */
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
    flex-wrap: wrap; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border); }
/* The outlet cell: empty (and collapsed) on non-results pages; on results it carries the compact box.
   Below 64em it wraps to its own full-width line (Google mobile's shape); at ≥64em the single row forms and
   the box's start edge lands EXACTLY on the results spine (inset minus the bar's own padding). */

/* Early-adopter badge on the logo: a small, understated star marker shown only for early-adopter members.
   In-flow (a flex child of .brand-mark, which provides the gap) so it contributes to width and never overflows
   the header on reflow; sized in em (scales with the wordmark + the OS font, no fixed px); RTL-safe via the
   logical margin (none here — the flex gap handles spacing in both directions). */
.ea-badge {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1.15em; height: 1.15em; border-radius: 50%;
    /* early-adopter GOLD (owner: distinct from brand) + a pinch downward (owner-tuned optical seat) */
    color: #f5b942;
    background: color-mix(in srgb, #f5b942 16%, transparent);
    margin-block-start: 0.08em;
}
.ea-badge-icon { width: 0.8em; height: 0.8em; display: block; }
/* Inline nav-item glyph (Settings/Account/Sign out in the search header). em-sized so it scales with the
   OS/text-zoom font; flex:none keeps it from shrinking. The .btn parent already supplies inline-flex +
   align-items:center + a logical gap, so the icon sits beside the label and the pair flips correctly in RTL. */
.nav-ico { inline-size: 1.1em; block-size: 1.1em; flex: none; }
.search-home { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; text-align: center; padding: 2rem 1.25rem; }
.search-wordmark { font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(135deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ------------------------------ Search pill ----------------------------- */
.search-form { display: flex; gap: 0.5rem; width: 100%; max-width: 640px; margin: 0 auto; align-items: center; }
.search-pill {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; position: relative;   /* positioned anchor for the .sc-suggest autosuggest dropdown (hugs the input in both layouts) */
    background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    padding: 0.35rem 0.5rem 0.35rem 0.4rem; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-pill:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.search-pill-icon { color: var(--text-subtle); display: inline-flex; flex: none; }
/* "+" menu — replaces the magnifier on the left of the pill; a hover-darkening circle that opens a popup of
   search modes (verticals) + time filters. Native <details>; items are no-JS submit buttons. */
.search-plus { position: relative; display: inline-flex; flex: none; }
.search-plus-btn {
    display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem;
    border-radius: 50%; cursor: pointer; list-style: none; color: var(--text-subtle); background: transparent;
    border: 0; padding: 0; transition: background 0.12s ease, color 0.12s ease;
}
.search-plus-btn::-webkit-details-marker { display: none; }
.search-plus-btn::marker { content: ""; }
.search-plus-btn:hover, .search-plus[open] > .search-plus-btn { background: var(--surface-2); color: var(--text); }
.search-plus-btn:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 1px; }
.search-plus-ico { font-size: 1.5rem; line-height: 1; margin-block-start: -0.12rem; }
.search-plus-menu {
    position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-start: 0; z-index: 45; min-inline-size: 13rem;
    background: var(--surface, #fff); color: var(--text, #19172a); border: 1px solid var(--border, #ddd); border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(16,12,40,.16)); padding: 0.35rem; display: flex; flex-direction: column; gap: 0.05rem;
}
.search-plus-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 0.3rem 0.55rem 0.2rem; }
.search-plus-item {
    display: flex; align-items: center; gap: 0.5rem; inline-size: 100%; text-align: start; background: transparent;
    border: 0; cursor: pointer; padding: 0.45rem 0.55rem; border-radius: var(--radius-sm, 6px); color: var(--text); font: inherit; text-decoration: none;
}
.search-plus-item:hover, .search-plus-item:focus { background: var(--surface-2); outline: none; }
.search-plus-item:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: -2px; }
.search-plus-divider { border: 0; border-block-start: 1px solid var(--border); margin: 0.3rem 0.1rem; }
.search-pill-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font: inherit; padding: 0.5rem 0; }   /* min-width:0 — an input's implicit min-width:auto would refuse to shrink and force page overflow at 200% text */
.search-pill-input::placeholder { color: var(--text-subtle); }
.search-pill-clear { border: none; background: transparent; color: var(--text-subtle); cursor: pointer; font-size: 1rem; padding: 0.25rem 0.5rem; border-radius: 50%; display: none; }
.search-pill-clear.visible { display: inline-flex; }
/* Search split button — primary action + an attached caret that opens the user's views as a popup menu. */
.search-split { display: inline-flex; align-items: stretch; position: relative; }
/* Flatten the Search button's right edge ONLY when a caret follows (so it abuts the ▾). With no caret it is the
   last child and keeps the full pill (.search-submit { border-radius: --radius-pill }). */
.search-split .search-submit:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.search-split-menu { display: inline-flex; }
.search-split-caret {
    border-start-start-radius: 0; border-end-start-radius: 0;                                    /* flat where it joins the Search button */
    border-start-end-radius: var(--radius-pill); border-end-end-radius: var(--radius-pill);       /* round outer (right) edge — restores the pill */
    cursor: pointer; list-style: none;
    border-inline-start: 1px solid color-mix(in srgb, var(--brand-contrast, #fff) 35%, transparent);
    padding-inline: 0.45rem; display: inline-flex; align-items: center;
}
.search-split-caret::-webkit-details-marker { display: none; }
.search-split-caret:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.search-view-menu {
    position: absolute; inset-block-start: calc(100% + 0.3rem); inset-inline-end: 0; z-index: 40; min-width: 12rem;
    background: var(--surface, #fff); color: var(--text, #19172a); border: 1px solid var(--border, #ddd); border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(16,12,40,.16)); padding: 0.35rem; display: flex; flex-direction: column; text-align: start;
}
.search-view-menu-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 0.25rem 0.6rem 0.15rem; }
.search-view-item {
    display: block; inline-size: 100%; text-align: start; background: transparent; border: 0; cursor: pointer;
    padding: 0.4rem 0.6rem; border-radius: var(--radius-sm, 6px); color: var(--text); font: inherit;
}
.search-view-item:hover, .search-view-item:focus { background: var(--surface-2, #f3efe4); outline: none; }
.search-view-item[aria-checked="true"] { font-weight: 600; color: var(--brand-strong); }
/* Signed-in chrome: collapse the header's right-side controls into a top-right hamburger + vertical panel. */
.header-menu { position: relative; display: inline-flex; }
.header-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; inline-size: 2.4rem; block-size: 2.4rem;
    border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
    cursor: pointer; list-style: none; padding: 0;
}
.header-menu-btn::-webkit-details-marker { display: none; }
.header-menu-btn::marker { content: ""; }
.header-menu-btn:hover { background: var(--surface); }
.header-menu-btn:focus-visible { outline: 2px solid var(--ring, var(--brand-strong)); outline-offset: 2px; }
.header-menu[open] .nav-toggle-bars { background: transparent; }
.header-menu[open] .nav-toggle-bars::before { transform: translateY(0.4rem) rotate(45deg); }
.header-menu[open] .nav-toggle-bars::after { transform: translateY(-0.4rem) rotate(-45deg); }
.header-menu-panel {
    position: absolute; inset-block-start: calc(100% + 0.4rem); inset-inline-end: 0; z-index: 50; min-inline-size: 13rem;
    background: var(--surface, #fff); color: var(--text, #19172a); border: 1px solid var(--border, #ddd); border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(16,12,40,.16)); padding: 0.4rem; display: flex; flex-direction: column; gap: 0.1rem;
}
.header-menu-panel .btn { inline-size: 100%; justify-content: flex-start; gap: 0.55rem; }
.header-menu-panel form { inline-size: 100%; margin: 0; }
.header-menu-section { padding: 0.15rem 0.4rem 0.4rem; }
.header-menu-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 0.15rem 0.15rem 0.35rem; }
.header-menu-seg { inline-size: 100%; }
.header-menu-divider { border: 0; border-block-start: 1px solid var(--border); margin: 0.3rem 0.1rem; }
.header-menu-switch {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; inline-size: 100%;
    background: transparent; border: 0; cursor: pointer; padding: 0.45rem 0.5rem; border-radius: var(--radius-sm, 6px);
    color: var(--text); font: inherit; text-align: start;
}
.header-menu-switch:hover { background: var(--surface-2, #f3efe4); }
.header-menu-switch:focus-visible { outline: 2px solid var(--ring, var(--brand-strong)); outline-offset: -2px; }
/* Scoped to .header-menu-switch: the view/settings switch (.switch + .switch-thumb, app.css) shares the
   .switch-thumb class, so an UNSCOPED .switch-thumb here would bleed onto it (wrong size + a leftover
   translateY(-50%) made the thumb straddle the track). Keep these track/thumb styles to the header menu only. */
.header-menu-switch .switch-track {
    flex: none; inline-size: 2.2rem; block-size: 1.25rem; border-radius: 999px; background: var(--border-strong, #c4bca7);
    position: relative; transition: background 0.15s ease;
}
.header-menu-switch .switch-thumb {
    position: absolute; inset-block-start: 0.15rem; inset-inline-start: 0.15rem; inline-size: 0.95rem; block-size: 0.95rem;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: inset-inline-start 0.15s ease;
}
.header-menu-switch[aria-checked="true"] .switch-track { background: var(--brand); }
.header-menu-switch[aria-checked="true"] .switch-thumb { inset-inline-start: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .header-menu-switch .switch-track, .header-menu-switch .switch-thumb { transition: none; } }
.search-pill-clear:hover { background: var(--surface-2); color: var(--text); }
.search-submit { border-radius: var(--radius-pill); }

/* compact variant for the results header */
.search-form.compact { max-width: none; margin: 0; }
/* Home (non-compact) box: stack the search button(s) BELOW the input, centered — Google-style. The compact
   results-page box keeps the inline row. */
.search-form:not(.compact) { flex-direction: column; align-items: stretch; gap: 1.25rem; }
.search-form:not(.compact) .search-split { align-self: center; }
.search-form.compact .search-pill { padding-top: 0.2rem; padding-bottom: 0.2rem; }

/* ------------------------------ Results --------------------------------- */
.results-search { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--bg-elevated); padding-inline-start: var(--results-inset); }
.results-search .search-form.compact { max-width: var(--results-measure); }
/* ═══ Results spine (Google/Kagi/Bing geometry): everything on ONE start-aligned vertical axis. ═══
   --results-inset is the start gutter shared by the header search box, tabs, filters, and results.
   Logical properties throughout — RTL mirrors automatically. Text verticals read at a 44rem measure;
   media verticals (.is-media: images/videos/shopping) earn 74rem. The freed end side stays clean
   (the future knowledge-rail slot). */
:root { --results-inset: 1.25rem; --results-measure: 44rem; --results-measure-wide: 74rem; }
@media (min-width: 48em) { :root { --results-inset: 2.5rem; } }
@media (min-width: 64em) { :root { --results-inset: clamp(8rem, 10vw, 10.5rem); } }

.results-wrap { max-width: none; margin: 0; padding: 1rem 1.25rem 4rem; padding-inline-start: var(--results-inset); }
.results-wrap > * { max-width: var(--results-measure); }
/* chrome rows span the wide line on every vertical, so the tab/filter axis never jumps between verticals */
.results-wrap > .search-tabs, .results-wrap > .search-tools, .results-wrap > .search-filters,
.results-wrap > .active-filters, .results-wrap > .results-toolbar { max-width: var(--results-measure-wide); }
.results-wrap.is-media > * { max-width: var(--results-measure-wide); }

/* vertical tabs */
.search-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; overflow-x: auto; }
.search-tab { padding: 0.6rem 0.9rem; font-weight: 600; font-size: 0.92rem; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.search-tab:hover { color: var(--text); text-decoration: none; }
.search-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* images grid */
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.image-cell { display: block; aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.image-cell img { width: 100%; height: 100%; object-fit: cover; }
.view-ico { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; }

/* ===== Image VIEW MODES (Part C) — data-view-mode on #image-grid; each cell wrap carries --ar = width/height (fallback 1.5). GRID (default) = the rules above. ===== */
/* JUSTIFIED — Google-style variable-width rows filled to a shared height (flex-grow ∝ aspect). */
#image-grid[data-view-mode="justified"] { display: flex; flex-wrap: wrap; gap: 0.5rem; --rh: clamp(140px, 22vw, 200px); }
/* Flexbox-justified: basis = the image's NATURAL width at the row height (--ar × --rh) so a row fills then WRAPS;
   flex-grow ∝ aspect then justifies each row edge-to-edge (the last row stretches — standard). */
#image-grid[data-view-mode="justified"] > .image-cell-wrap { flex: calc(var(--ar, 1.5)) 1 calc(var(--ar, 1.5) * var(--rh)); height: var(--rh); min-width: 0; }
/* MASONRY — Pinterest columns, full tile aspect, no shape crop. */
#image-grid[data-view-mode="masonry"] { display: block; column-width: 190px; column-gap: 0.5rem; }
#image-grid[data-view-mode="masonry"] > .image-cell-wrap { break-inside: avoid; margin: 0 0 0.5rem; aspect-ratio: var(--ar, 1.5); width: 100%; }

/* video / shopping cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.media-card { display: block; color: inherit; }
.media-card:hover { text-decoration: none; }
.media-card:hover .media-title { color: var(--brand); }
.media-thumb { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.media-thumb.shopping { aspect-ratio: 1/1; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-badge { position: absolute; bottom: 6px; inset-inline-end: 6px; background: rgba(0,0,0,0.78); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.35rem; border-radius: 4px; }
.media-title { font-weight: 600; font-size: 0.92rem; margin-top: 0.5rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.media-price { font-weight: 700; color: var(--text); margin-top: 0.2rem; }
.media-meta { color: var(--text-muted); font-size: 0.82rem; margin-top: 0.15rem; }
.media-body { min-width: 0; }

/* Results view-mode toggle (Videos/Shopping list|grid; Images modes in Part C) — a right-aligned segmented control. */
.results-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin: 0.25rem 0 0.75rem; }
.view-seg { display: inline-flex; flex-wrap: wrap; gap: 0.15rem; padding: 0.2rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.view-opt { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; white-space: nowrap; cursor: pointer; font-size: 0.8125rem; color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-pill); padding: 0.25rem 0.7rem; }
.view-opt:hover { color: var(--text); }
.view-opt.active { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.view-opt:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 1px; }
.view-ico { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; }
.view-ico rect { fill: currentColor; }

/* LIST mode — a dense horizontal row: thumbnail left, title/price/meta flowing right. Grid mode stays untouched. */
.card-grid[data-view-mode="list"] { grid-template-columns: 1fr; gap: 0.5rem; }
.card-grid[data-view-mode="list"] .media-card { display: flex; gap: 0.9rem; align-items: flex-start; }
.card-grid[data-view-mode="list"] .media-thumb { flex: 0 0 118px; }
.card-grid[data-view-mode="list"] .media-thumb.shopping { flex-basis: 84px; }
.card-grid[data-view-mode="list"] .media-body { flex: 1 1 auto; }
.card-grid[data-view-mode="list"] .media-body > :first-child { margin-top: 0; }

/* news list */
.news-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); color: inherit; }
.news-thumb { width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius); flex: none; border: 1px solid var(--border); }
.news-thumb-link { flex: none; display: block; line-height: 0; }   /* decorative thumb link (the title is the primary link) */
.news-body { min-width: 0; }   /* the news text renders via .result-title/.result-desc (NewsResultCard template) */
.news-meta { color: var(--text-subtle); font-size: 0.8rem; margin-top: 0.35rem; }

.result-item { padding: 1rem 0; border-bottom: 1px solid var(--border); position: relative; }
.result-item:last-child { border-bottom: none; }
.result-item > .result-url, .result-item > .result-title, .result-item > .result-ordinal,
.result-item > .rt-row, .result-item > .result-date, .result-item > .result-sitelinks { padding-inline-end: 2rem; }   /* room for the top-right kebab — covers the favicon+url first row + date/sitelinks */
/* "Number search results" pref (default OFF): a restrained, muted ABSOLUTE ordinal above each web result that
   continues across pages. In-flow + rem-based so it reflows and scales with OS text zoom (no fixed px); tabular
   numerals keep multi-digit numbers tidy. Decorative only (the markup marks it aria-hidden). */
.result-ordinal { font-size: 0.78rem; line-height: 1; color: var(--text-subtle); margin-bottom: 0.15rem;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.result-ordinal::before { content: "#"; opacity: 0.6; margin-inline-end: 0.05rem; }
.result-url { font-size: 0.8rem; color: var(--success); margin-bottom: 0.15rem; word-break: break-all; }
.result-date { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.15rem; }
.result-sitelinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.1rem 1rem; margin-top: 0.35rem; min-width: 0; max-width: 30rem; }
.result-sitelink { font-size: 0.9rem; color: var(--link-color, var(--brand)); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-sitelink:hover { text-decoration: underline; }
/* overflow-wrap:anywhere so a long unbreakable token (a very long word, or a URL used as the title/snippet) breaks
   instead of forcing horizontal scroll at 200% text / narrow viewports — keeps the numbered web result reflow-safe. */
.result-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; overflow-wrap: anywhere; }
.result-title a { color: var(--link-color, var(--brand)); }
.result-desc { color: var(--text-muted); font-size: 0.92rem; overflow-wrap: anywhere; }

/* ===== Result Designer: the ONLY styles a user template can apply (a fixed whitelist → the row-slot sandbox; no raw
   CSS ever). An element with no styles keeps its semantic default, so the default template = today's look. Placed
   AFTER the semantic .result-* rules so an explicit rt-* override wins by source order. ===== */
.rt-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; min-width: 0; margin-bottom: 0.15rem; }
.rt-row > * { margin-bottom: 0; min-width: 0; }
/* TEXT blocks sharing a row start ON the current line and grow into the remaining space (flex-basis:0 — with
   wrap enabled, an auto-basis text block whose natural width exceeds the line ALWAYS wrapped to its own flex
   line, so "favicon + excerpt in one row" never visually shared the first line). The min-width floor makes a
   genuinely-too-narrow line wrap gracefully instead of squeezing into a one-word column. Small atoms (favicon /
   date / number) keep their natural size. Designer chips mirror by content via :has(). */
.rt-row > .result-title, .rt-row > .result-desc, .rt-row > .result-url, .rt-row > .result-sitelinks,
.rt-row > .rd-chip:has(> .result-title), .rt-row > .rd-chip:has(> .result-desc),
.rt-row > .rd-chip:has(> .result-url), .rt-row > .rd-chip:has(> .result-sitelinks) {
    flex: 1 1 0; min-width: 8rem;
}
/* Small atoms beside a MULTILINE text block sit with its FIRST line (baseline through the chip wrapper resolves
   against the block's last line and sank the icon to line two). */
.rt-row > .result-favicon, .rt-row > .result-date, .rt-row > .result-ordinal,
.rt-row > .rd-chip:has(> .result-favicon), .rt-row > .rd-chip:has(> .result-date),
.rt-row > .rd-chip:has(> .result-ordinal) {
    align-self: flex-start; margin-top: 0.15em;
}
/* Favicons sit on a fixed LIGHT chip in every theme: many sites ship dark/transparent glyphs (GitHub's
   octocat, NYT's "T") that vanish on a dark surface — var(--surface-2) is near-black in dark mode, which made
   them look like MISSING icons (owner-reported via the designer preview). box-sizing keeps the box 16px. */
.result-favicon { width: 16px; height: 16px; border-radius: 3px; vertical-align: middle; margin-inline-end: 0.4rem; object-fit: contain; flex: 0 0 auto; background: #fff; padding: 2px; box-sizing: border-box; }
.rt-size-xs { font-size: 0.75rem; } .rt-size-s { font-size: 0.85rem; } .rt-size-m { font-size: 0.95rem; }
.rt-size-l { font-size: 1.15rem; } .rt-size-xl { font-size: 1.4rem; }
/* Size on the favicon = actual icon dimensions (an <img> ignores font-size; width/height CSS beats its attrs). */
.result-favicon.rt-size-xs { width: 12px; height: 12px; }
.result-favicon.rt-size-s { width: 14px; height: 14px; }
.result-favicon.rt-size-l { width: 20px; height: 20px; }
.result-favicon.rt-size-xl { width: 26px; height: 26px; }
.rt-weight-normal { font-weight: 400; } .rt-weight-medium { font-weight: 500; } .rt-weight-bold { font-weight: 700; }
.rt-color-default, .rt-color-default a { color: var(--text); }
.rt-color-muted, .rt-color-muted a { color: var(--text-muted); }
.rt-color-subtle, .rt-color-subtle a { color: var(--text-subtle); }
.rt-color-link, .rt-color-link a { color: var(--link-color, var(--brand)); }
.rt-color-success, .rt-color-success a { color: var(--success); }
.rt-color-brand, .rt-color-brand a { color: var(--brand-strong); }
.rt-color-danger, .rt-color-danger a { color: var(--danger); }
.rt-clamp-1, .rt-clamp-2, .rt-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.rt-clamp-1 { -webkit-line-clamp: 1; } .rt-clamp-2 { -webkit-line-clamp: 2; } .rt-clamp-3 { -webkit-line-clamp: 3; }
.rt-caps { text-transform: uppercase; letter-spacing: 0.03em; }
.results-loading { display: flex; align-items: center; gap: 0.6rem; color: var(--text-muted); padding: 1rem 0; }
.results-empty { text-align: start; color: var(--text-muted); padding: 2.5rem 0; }
.results-count { color: var(--text-subtle); font-size: 0.85rem; margin: 0 0 1rem; }

/* Numbered pager (web results). Logical properties + flex-wrap so it reflows + is RTL-ready. */
.pager { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: flex-start; margin: 2.25rem 0 1rem; }
.pager-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; padding-inline: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-pill, 999px); color: var(--text); text-decoration: none; font-size: 0.9rem; }
.pager-link:hover { border-color: var(--brand); color: var(--brand); }
.pager-link.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pager-edge { font-weight: 600; }
.pager-gap { color: var(--text-muted); padding-inline: 0.15rem; }

/* Slim top progress bar shown during an enhanced-nav page change (state-of-the-art transition feedback). */
.nav-progress { position: fixed; inset-block-start: 0; inset-inline-start: 0; height: 3px; width: 0; background: var(--brand); z-index: 9999; opacity: 0; pointer-events: none; }
.nav-progress.active { width: 88%; opacity: 1; transition: width 9s cubic-bezier(0.12, 0.78, 0.12, 1), opacity 0.15s ease; }
.nav-progress.done { width: 100%; opacity: 0; transition: width 0.18s ease, opacity 0.4s ease 0.12s; }

/* Subtle result fade-in (reduced-motion users get none). */
@media (prefers-reduced-motion: no-preference) {
    .result-item { animation: result-in 0.24s ease both; }
}
@keyframes result-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Image infinite-scroll affordances. */
.image-status { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--text-muted); padding: 1.5rem 0; }
#image-sentinel { block-size: 1px; }

/* ------------------------------ Pricing --------------------------------- */
.pricing-card { max-width: 460px; margin: 0 auto 3rem; padding: clamp(1.25rem, 5vw, 2rem); text-align: center; }

/* Full-width segmented control: the two segments share the width (flex:1, min-width:0) and grow TALLER
   rather than wider when text scales — the "save" badge stacks under "Annual" (column), so it can never
   push the control past the viewport. A rounded rect (not a pill) reads cleanly when segments are tall. */
.billing-toggle { display: flex; gap: 0.25rem; width: 100%; max-width: 24rem; margin: 0 auto 1.5rem; padding: 0.3rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.billing-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.billing-toggle label { flex: 1 1 0; min-width: 0; cursor: pointer; text-align: center; line-height: 1.25;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
    padding: 0.5rem 0.4rem; border-radius: var(--radius); font-weight: 600; font-size: 0.95rem; color: var(--text-muted); }
/* At large text (em → font-aware) the two segments can't sit side by side; stack them so each gets the
   full width. The threshold is low enough that normal-font phones keep the horizontal pill. */
@media (max-width: 18em) { .billing-toggle { flex-direction: column; } }
/* Radios are direct children of .pricing-card; the toggle/price/cta are later siblings (~). The active
   segment gets an accent-tinted fill + a 1px inset accent ring so the selection is unmistakable, including
   in dark mode (the previous surface-only highlight was too subtle). */
#p-month:checked ~ .billing-toggle label[for="p-month"],
#p-year:checked ~ .billing-toggle label[for="p-year"] { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm); }
#p-month:focus-visible ~ .billing-toggle label[for="p-month"],
#p-year:focus-visible ~ .billing-toggle label[for="p-year"] { outline: 2px solid var(--ring); outline-offset: 2px; }
.save-badge { font-size: 0.7rem; font-weight: 700; color: var(--brand-contrast); background: var(--accent); padding: 0.05rem 0.45rem; border-radius: var(--radius-pill); white-space: nowrap; }

.price-display { margin-bottom: 1.5rem; }
/* Flex + wrap so the amount and "/month" can break onto separate lines under large text. There is no
   whitespace between the .amount and .per spans, so without flex-wrap they form one unbreakable token
   ("$12/month") that overflows the viewport when the font is scaled up. */
.price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 0.25rem; }
/* The amount is a single unbreakable token (e.g. "$8.25"); clamp keeps it from overrunning a narrow
   viewport when scaled. The rem bounds still grow with the user's font, so text scaling is preserved —
   only the vw term limits it on small screens (it never falls below the 2rem floor). */
.price .amount { font-size: clamp(2rem, 13vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.price .per { color: var(--text-muted); font-size: 1rem; }
.price-note { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem; }

/* Toggle visibility driven purely by the radios (no JS). */
.price-year, .cta-year { display: none; }
#p-year:checked ~ .price-display .price-month { display: none; }
#p-year:checked ~ .price-display .price-year { display: flex; }
#p-month:checked ~ .price-display .price-year { display: none; }
#p-year:checked ~ .cta-month { display: none; }
#p-year:checked ~ .cta-year { display: block; }
.cta { margin: 0; }

.feature-list { list-style: none; text-align: start; margin: 0 auto 1.75rem; max-width: 330px; display: flex; flex-direction: column; gap: 0.6rem; }
.feature-list li { display: flex; gap: 0.6rem; align-items: flex-start; }
.feature-list .check { color: var(--brand); font-weight: 800; }

/* ------------------------------ Auth forms ------------------------------ */
.auth-wrap { display: flex; justify-content: center; padding: clamp(2rem, 6vw, 4rem) 1.25rem; }
.auth-card { width: 100%; max-width: 420px; padding: 2rem; }
.auth-card h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.auth-card .sub { color: var(--text-muted); margin-bottom: 1.5rem; font-size: 0.9375rem; }
.auth-card form { display: flex; flex-direction: column; gap: 0.25rem; }
.auth-alt { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--text-muted); text-align: center; }

/* Signup's "you're already signed in" panel (SSO-aware signup) */
.signedin-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; min-width: 0; }
.signedin-actions .btn { flex: 1 1 0; min-width: 8rem; }   /* the pair shares the panel's full width */
.signedin-switch .btn { width: 100%; }
.signedin-switch { margin-top: 0.9rem; }

/* ---- Plan picker (signup) — selectable plan cards ---- */
/* gap leaves clearance for the featured card's floating ribbon so it never touches the card above it */
.plan-picker { border: 0; padding: 0; margin: 0.85rem 0 0.35rem; min-width: 0; display: flex; flex-direction: column; gap: 1.15rem; }
.plan-picker-legend { padding: 0; margin-bottom: 0.55rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }

.plan-card {
    position: relative; display: flex; align-items: center; gap: 0.8rem;
    padding: 0.85rem 1rem; background: var(--surface);
    border: 1.5px solid var(--border); border-radius: var(--radius-lg);
    cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.plan-card:hover { border-color: var(--border-strong); }
.plan-card:active { transform: scale(0.995); }
/* The real radio stays in the DOM for a11y + form posting, but is visually replaced by .plan-card-check. */
.plan-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Selected state — accent ring + tint + filled check. */
.plan-card:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    box-shadow: 0 0 0 1px var(--accent);
}
/* Keyboard focus (the hidden radio receives focus). */
.plan-card:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }

.plan-card-check {
    flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%;
    border: 2px solid var(--border-strong); position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.plan-card:has(input:checked) .plan-card-check { border-color: var(--accent); background: var(--accent); }
.plan-card:has(input:checked) .plan-card-check::after {
    content: ""; position: absolute; inset-inline-start: 0.34rem; top: 0.14rem; width: 0.32rem; height: 0.6rem;
    border: solid var(--brand-contrast); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Body holds the name/sub + price; it WRAPS so the price drops below the name (rather than overlapping it)
   when the text is scaled up — flex items never overlap, so reflow replaces the previous collision. */
.plan-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.85rem; }
.plan-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.plan-card-name { font-weight: 700; font-size: 1rem; color: var(--text); line-height: 1.2; }
.plan-card-sub { font-size: 0.8125rem; color: var(--text-muted); }

.plan-card-price { flex: none; margin-inline-start: auto; display: flex; align-items: baseline; gap: 0.1rem; }
.plan-card-amount { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--text); }
.plan-card-per { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }

/* Featured (annual) — a touch of accent at rest, plus the savings ribbon. */
.plan-card--featured { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
/* In-flow pill above the plan name (was absolute → overlapped content when the text grew). Sits at the
   top of the card body and pushes the name down; wraps cleanly at large font instead of colliding. */
.plan-card-ribbon {
    align-self: flex-start; margin-bottom: 0.1rem; line-height: 1.3;
    background: var(--accent); color: var(--brand-contrast);
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
    padding: 0.16rem 0.55rem; border-radius: var(--radius);
}
@media (prefers-reduced-motion: reduce) { .plan-card { transition: none; } .plan-card:active { transform: none; } }

/* ------------------------------ Account --------------------------------- */
.account-grid { display: grid; gap: 1.25rem; }
.account-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.account-row:last-child { border-bottom: none; }
.account-row .k { color: var(--text-muted); }
.account-row .v { font-weight: 600; }
.page-head { padding: clamp(1.5rem, 4vw, 2.5rem) 0 0.5rem; }
.page-head h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); }

/* ------------------------------ Credits --------------------------------- */
.credit-balance { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 1rem; }
.credit-amount { font-size: clamp(2rem, 6vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.credit-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; }
.credit-preset {
    position: relative; display: flex; flex-direction: column; gap: 0.1rem; cursor: pointer; text-align: center;
    padding: 0.7rem 0.5rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--input-bg); transition: border-color 0.12s ease, background 0.12s ease;
}
.credit-preset:hover { border-color: var(--brand); }
.credit-preset input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Selected highlight via :has() in modern browsers; the input stays visually hidden regardless. */
.credit-preset:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.credit-preset:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.credit-preset-amt { font-weight: 700; }
.credit-preset-req { font-size: 0.8rem; color: var(--text-muted); }
/* The custom-amount entry is a single dollar figure — don't let it stretch full-width like a normal field. */
.credit-custom .field-input { max-width: 12rem; }

/* "We ❤️ Ukraine" — a subtle landing-page ribbon. It holds hidden, then gently rises + fades in ~0.8s after
   paint. STICKY, not fixed (deliberately): a sticky element stays in normal flow, so it reserves its own height
   at the end of <main> and DOCKS just above the footer at the very bottom of the page instead of floating over
   the footer copy — clearing it with zero JavaScript and zero magic numbers (the reserved space is always
   exactly the panel's height, at any OS text size / however the sub-text wraps). While you scroll the page it
   stays pinned to the viewport bottom (bottom: 1.25rem); on reaching the end it settles into flow above the
   footer. If `position: sticky` is ever unsupported it degrades to `static` — still in flow, still no overlap.
   On desktop it right-aligns to the content area's inline-END: margin-inline-start:auto pushes it to the end and
   margin-inline-end matches the centred .container's inline-end edge (max-width 1120px + 1.25rem) so it lines up
   under the footer's Contact link; logical margins keep it tracking the footer in RTL. `100%` (not 100vw) is the
   scrollbar-excluded ICB, matching how .container centres; the max() clamps to a 1.25rem inset below 1120px. */
.ua-ribbon {
    position: sticky; bottom: 1.25rem; z-index: var(--z-fixed);
    margin-inline-start: auto; margin-inline-end: max(1.25rem, calc((100% - 1120px) / 2 + 1.25rem));
    display: flex; width: fit-content; align-items: center; gap: 0.7rem;
    max-width: min(20rem, calc(100vw - 2.5rem));
    padding: 0.6rem 0.9rem; background: var(--surface); color: var(--text); text-decoration: none;
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
    animation: ua-ribbon-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ua-ribbon:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }
.ua-ribbon-flag { flex: none; height: 1.5rem; width: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
/* min-width:0 lets the text column shrink/wrap inside the flex row instead of forcing overflow. */
.ua-ribbon-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ua-ribbon-text strong { font-size: 0.95rem; font-weight: 700; }
.ua-ribbon-sub { font-size: 0.8rem; color: var(--text-muted); }

@keyframes ua-ribbon-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ua-ribbon { animation: none; }            /* present immediately, no motion */
    .ua-ribbon:hover { transform: none; }
}
/* Narrow viewports (em-based so the switch fires earlier under OS text-zoom): centre the panel rather than
   tuck it right, and KEEP the sub-text — margin-inline:auto (overriding the base's start:auto/end:inset) centres
   the in-flow sticky panel without a transform, so it doesn't fight the entrance/hover translate. */
@media (max-width: 35em) {
    .ua-ribbon { margin-inline: auto; bottom: 0.75rem; }
}

/* UK site only: a quiet "Hosted in the UK" pill in the hero (reuses the gentle ua-ribbon-in entrance). */
.uk-hosted {
    display: flex; width: fit-content; margin: 0.6rem auto 0; align-items: center; gap: 0.45rem;
    padding: 0.3rem 0.75rem; font-size: 0.85rem; color: var(--text-muted);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill);
    animation: ua-ribbon-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
}
.uk-hosted-flag { height: 0.95rem; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
@media (prefers-reduced-motion: reduce) { .uk-hosted { animation: none; } }
.credit-neg { font-variant-numeric: tabular-nums; }
.credit-pos { color: var(--success); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ===================== Settings hub ===================== */
.settings {
    /* ONE source of truth for the gap between the header and the top of both columns: the page's own padding-top
       AND the sidebar's sticky offset read this var. When they differed (padding up to 2rem vs a fixed 1.25rem
       sticky top), the sidebar visibly slid UP by the difference the moment it pinned — the owner-reported
       "master scrolls slightly when the detail scrolls". Same var ⇒ resting position == pinned position. */
    --settings-gap-top: clamp(1.25rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding: var(--settings-gap-top) 1.25rem 3rem;
}
.settings-sidebar {
    /* Sticky on the WHOLE panel (the "Search settings" input AND the nav links). It sits BELOW the sticky
       .app-header so the input doesn't tuck up behind it; align-self:start keeps it from stretching to the grid
       row's height (so sticky has somewhere to travel); max-height + overflow-y let the panel scroll WITHIN
       itself when it genuinely exceeds the viewport (e.g. high text zoom) so every link stays reachable.
       The clip is EXACTLY the space below the pinned top (one shared var, so top and max-height can't drift):
       an extra reserved bottom gap here made the panel internally scrollable by that gap's height even when its
       content fit the viewport (owner-reported phantom scroll — harness-reproduced at 10px). dvh so mobile
       URL-bar collapse doesn't mis-size it; vh fallback first. padding gives the search field's focus ring room
       inside the scroll container. */
    --settings-sticky-top: calc(var(--header-height) + var(--settings-gap-top));
    position: sticky; top: var(--settings-sticky-top); align-self: start;
    max-height: calc(100vh - var(--settings-sticky-top));
    max-height: calc(100dvh - var(--settings-sticky-top));
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0.25rem;
    display: flex; flex-direction: column; gap: 1rem;
}

/* Search box */
.settings-search { position: relative; }
.settings-search-input {
    font: inherit; width: 100%; color: var(--text); background: var(--input-bg);
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    padding: 0.6rem 2rem 0.6rem 0.75rem;
}
.settings-search-input:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}
.settings-search-clear {
    position: absolute; inset-inline-end: 0.4rem; top: 50%; transform: translateY(-50%);
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.3rem; border-radius: var(--radius-sm);
}
.settings-search-clear:hover { color: var(--text); background: var(--surface-2); }
/* Hide the clear affordance while the field is empty (placeholder showing). */
.settings-search-input:placeholder-shown + .settings-search-clear { display: none; }

/* Sidebar nav */
.settings-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.settings-nav-item {
    display: block; padding: 0.5rem 0.7rem; border-radius: var(--radius);
    color: var(--text-muted); font-weight: 600; font-size: 0.95rem; text-decoration: none;
    border-inline-start: 3px solid transparent;
}
/* The hidden attribute must always win: author display rules on .btn/.settings-nav-item/etc. otherwise
   override the UA `[hidden] { display:none }` and leave "hidden" elements visible. */
[hidden] { display: none !important; }
.settings-nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
/* Nested sections (the search verticals under "Search"): indented, slightly quieter — visual nesting only,
   the panes stay flat and always reachable. Logical inset ⇒ mirrors under RTL. */
.settings-nav-child { margin-inline-start: 1rem; font-size: 0.9rem; }
.settings-nav-item.active {
    background: var(--brand-soft); color: var(--brand-strong); border-left-color: var(--brand);
}

/* Panes */
.settings-main { min-width: 0; }
.settings-pane-title { font-size: 1.4rem; margin-bottom: 1rem; }
.settings-pane-title:focus { outline: none; }
.settings-group { margin-bottom: 2rem; }
.settings-group-title {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); margin: 1.25rem 0 0.25rem;
}
/* An alert/panel directly under a group title (e.g. the verify-email banner under PROFILE) shouldn't sit flush. */
.settings-group-title + .alert { margin-block-start: 0.9rem; }
.settings-actions { margin-top: 1.5rem; }
.settings-inline-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.settings-inline-form .field-input { flex: 1 1 14rem; width: auto; }

/* A single setting row: stacks by default (works for tables/forms); simple single-control rows go inline. */
.setting-row {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 1.1rem 0; border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-row-label { font-weight: 600; }
.setting-row-desc { font-size: 0.85rem; color: var(--text-muted); margin: 0.1rem 0 0; }
.setting-row-control { min-width: 0; }
/* A conditionally-shown row (e.g. the custom citation template, shown only for the Custom style). display:none so
   the control stays in the DOM — its value is preserved and still posts — while overriding the row's flex display. */
.setting-row.is-hidden { display: none; }
.setting-row:has(> .setting-row-control > .toggle:only-child),
.setting-row:has(> .setting-row-control > .field-select:only-child),
.setting-row:has(> .setting-row-control > .segmented:only-child),
.setting-row:has(> .setting-row-control > .v:only-child) {
    flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}
.setting-row:has(> .setting-row-control > .toggle:only-child) .setting-row-info,
.setting-row:has(> .setting-row-control > .field-select:only-child) .setting-row-info,
.setting-row:has(> .setting-row-control > .segmented:only-child) .setting-row-info,
.setting-row:has(> .setting-row-control > .v:only-child) .setting-row-info { flex: 1 1 16rem; }
.setting-row .field-select { width: auto; min-width: 13rem; max-width: 100%; }
/* Compact variant for short numeric values (e.g. Results per page) — the full 13rem reads as empty space. */
.setting-row .field-select-narrow { min-width: 6.5rem; }

/* Display-language rotator: the ui-language row's description slot — the phrase "Display language" cycling through
   the non-current languages (LanguageNameRotator.razor + 61-ui-language-rotator.ts). Same voice as
   .setting-row-desc; items are STACKED absolutely inside a one-line-reserved box so the crossfade never reflows the
   row, and inset-inline keeps them start-aligned under RTL. Crossfade only when motion is allowed — under reduced
   motion (or no JS) exactly one phrase sits there statically. */
.lang-rotator {
    position: relative; min-height: 1.35em;
    font-size: 0.85rem; color: var(--text-muted); margin: 0.1rem 0 0;
}
.lang-rotator-item {
    position: absolute; inset-inline: 0; top: 0;
    opacity: 0; visibility: hidden;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    /* Align every phrase with the PAGE's reading direction, not the phrase's own: an RTL phrase (Arabic) keeps its
       correct internal shaping via dir="rtl" but must not drift to the far edge of an LTR page (and vice versa).
       Stated physically (match-parent renders inconsistently): LTR page → left, RTL page → right. */
    text-align: left;
}
html[dir="rtl"] .lang-rotator-item { text-align: right; }
.lang-rotator-item.is-active { opacity: 1; visibility: visible; }
.lang-rotator-item.is-current { display: none; }   /* the selected language never shows its own phrase */
@media (prefers-reduced-motion: no-preference) {
    .lang-rotator-item { transition: opacity 0.55s ease, visibility 0.55s; }
}

/* Citations: custom-template editor + token help. Full-width control that reflows; the help is muted and the
   token list / worked example are monospace and allowed to wrap. The whole row is shown only for the Custom style —
   server-rendered (SettingRow Hidden) and toggled live by 62-citations-settings.ts via .setting-row.is-hidden. */
.citation-template { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; min-width: 0; }
.field-textarea {
    width: 100%; min-width: 0; box-sizing: border-box; min-height: 4.5rem; resize: vertical;
    padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 0.9rem; line-height: 1.5;
}
.field-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.citation-template-help { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; }
.citation-template-help p { margin: 0 0 0.35rem; }
.citation-template-example { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.citation-template-help code {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 0.82rem;
    background: var(--surface-2, var(--brand-soft)); padding: 0.05rem 0.35rem; border-radius: var(--radius);
    overflow-wrap: anywhere; word-break: break-word;
}

/* Brief highlight when a deep link / search result lands on a row. */
@keyframes setting-flash { from { background: var(--brand-soft); } to { background: transparent; } }
.setting-row-flash { animation: setting-flash 1.4s ease-out; border-radius: var(--radius); }

/* Auto-reload: a card-on-file row (with divider) above a clean, evenly-spaced vertical form. */
.autoreload { display: flex; flex-direction: column; gap: 1.25rem; }
.autoreload-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border);
}
.autoreload-form { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.autoreload-form .toggle { margin: 0; }
.autoreload-form .field { margin: 0; width: 100%; max-width: 22rem; }
.autoreload-form .field-select { width: 100%; min-width: 0; }

/* Developer-access pin (Billing): toggle + Save inline, with an active-state note below. */
.developer-access { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.developer-toggle-form { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Search results (flat, grouped, highlighted) */
.settings-results { margin-bottom: 1.5rem; }
.settings-results-count { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.75rem; }
.settings-result {
    display: block; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 0.5rem; text-decoration: none; color: var(--text); background: var(--surface);
}
.settings-result:hover { border-color: var(--brand); text-decoration: none; }
.settings-result-breadcrumb { display: block; font-size: 0.75rem; color: var(--text-muted); }
.settings-result-label { display: block; font-weight: 600; }
.settings-results mark { background: var(--brand-soft); color: inherit; border-radius: 2px; padding: 0 1px; }

/* em breakpoint (≈760px at the default 16px root) per the OS-font reflow mandate: under Firefox-Android text-zoom
   the em threshold grows with the font, so the settings hub collapses to a single column + horizontal nav exactly
   when the enlarged text would otherwise need it (harmless on Chrome, which doesn't shift em breakpoints). */
@media (max-width: 47.5em) {
    .settings { grid-template-columns: 1fr; gap: 1rem; }
    /* Stacked single-column layout: drop the sticky pin + the viewport cap so the panel flows normally. */
    .settings-sidebar { position: static; max-height: none; overflow: visible; padding: 0; }
    .settings-nav { flex-direction: row; flex-wrap: wrap; gap: 0.35rem; }
}
@media (prefers-reduced-motion: reduce) {
    .setting-row-flash { animation: none; }
}

/* Results-page time-range filter chips (wrap freely per the responsive/text-scaling guidance). */
.search-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0.75rem; }
.search-tool {
    font-size: 0.8125rem; color: var(--text-muted); text-decoration: none; white-space: nowrap;
    padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid transparent;
}
.search-tool:hover { background: var(--surface-2); color: var(--text); }
.search-tool.active { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }

/* Per-search vertical filter bar (Images/News/Videos results) — mirrors .search-tools; compact labelled
   `field-select` dropdowns + a "More filters" disclosure for the image long-tail. Reflows freely (text-scaling). */
.search-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.25rem 0 0.75rem; }
.search-filter-field { display: inline-flex; min-width: 0; }
.search-filters .field-select { font-size: 0.8125rem; padding: 0.3rem 1.9rem 0.3rem 0.65rem; min-width: 0; }
.search-filters-more { display: inline-block; min-width: 0; }
.search-filters-more > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap;
    padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
}
.search-filters-more > summary::-webkit-details-marker { display: none; }
.search-filters-more > summary::after { content: "▾"; font-size: 0.7em; }
.search-filters-more[open] > summary { color: var(--text); background: var(--surface-2); }
.search-filters-more-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.search-filters-apply {
    font-size: 0.8125rem; white-space: nowrap; cursor: pointer; color: var(--text);
    padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface-2);
}
.search-filters-clear { font-size: 0.8125rem; color: var(--text-muted); text-decoration: none; white-space: nowrap; padding: 0.3rem 0.5rem; }
.search-filters-clear:hover { color: var(--text); text-decoration: underline; }

/* ===== Search Control (domain ranking): per-result chip + popover, transparency bar, settings rules ===== */
.rank-control, .rank-adjust { position: relative; display: inline-block; margin-block-start: 0.35rem; }
.rank-control > summary, .rank-adjust > summary { list-style: none; }
.rank-control > summary::-webkit-details-marker, .rank-adjust > summary::-webkit-details-marker { display: none; }
.rank-chip {
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; cursor: pointer;
    color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: 0.15rem 0.4rem; line-height: 1.4;
}
.rank-chip:hover, .rank-adjust[open] > .rank-chip, .rank-control[open] > .rank-chip { background: var(--surface-2); }
.rank-chip-neutral:hover, .rank-kebab-chip:hover { color: var(--text); }
.rank-chip:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 1px; }
.rank-chip-kebab::before { content: "⋮"; font-weight: 700; }

/* Windows High Contrast / forced-colors: the mask-image state icons (background-color:currentColor) and the color-mix
   "active"/magnitude tints are neutralized by the forced palette — restore a visible marker (WCAG 1.4.11). */
@media (forced-colors: active) {
    .rank-state-ic { background-color: CanvasText; }
    .view-opt.active, .rd-seg-opt.active, .rd-toggle.active { outline: 2px solid Highlight; outline-offset: -2px; }
    .rd-toggle.mixed { outline: 2px dashed Highlight; outline-offset: -2px; }
}
/* Coarse pointers (touch): keep the compact chips + segmented controls ≥24px hittable (WCAG 2.5.8 AA), while staying
   visually tight on a fine pointer (mouse). */
@media (pointer: coarse) {
    .rank-chip { min-block-size: 1.55rem; padding-block: 0.3rem; }
    .rd-seg-opt, .rd-move, .rd-toggle { min-block-size: 1.55rem; }
    .result-sitelink { padding-block: 0.15rem; }
}

/* The rank-adjust INDICATOR (left of the ⋮ kebab) = "where you initiate ranking changes for this site". Its icon is a
   monochrome SVG mask tinted by the chip's `color`; each state sets the icon + colour, and for raised/lowered the
   colour interpolates faint→vivid across the stored weight magnitude (--w = 0..100, set inline from the rule weight). */
.rank-state-ic { display: inline-block; width: 1.05em; height: 1.05em; background-color: currentColor;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.rank-adjust-chip { color: var(--text-muted);   /* neutral: the double-chevron "adjust" affordance */
    --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 10 12 5 17 10'/%3E%3Cpolyline points='7 14 12 19 17 14'/%3E%3C/svg%3E"); }
.rank-adjust-chip.rank-chip-raised { border-color: currentColor;
    color: color-mix(in oklab, #7be3a6, #047857 calc(var(--w) * 1%));
    --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='6 11 12 5 18 11'/%3E%3C/svg%3E"); }
.rank-adjust-chip.rank-chip-lowered { border-color: currentColor;
    color: color-mix(in oklab, #fca5a5, #b91c1c calc(var(--w) * 1%));
    --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cpolyline points='6 13 12 19 18 13'/%3E%3C/svg%3E"); }
.rank-adjust-chip.rank-chip-pinned { border-color: #dc2626; }
.rank-adjust-chip.rank-chip-pinned .rank-state-ic { -webkit-mask: none; mask: none; background: none; width: auto; height: auto; }
.rank-adjust-chip.rank-chip-pinned .rank-state-ic::before { content: "📌"; font-size: 0.92em; line-height: 1; }
.rank-adjust-chip.rank-chip-blocked { color: var(--text-muted);   /* eye-off — shown when viewing hidden items */
    --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 10 8 10 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cpath d='M6.61 6.61A18.5 18.5 0 0 0 2 12s3 8 10 8a9.12 9.12 0 0 0 5.06-1.44'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3C/svg%3E"); }
.rank-menu {
    position: absolute; inset-block-start: calc(100% + 0.25rem); inset-inline-end: 0; z-index: 40; min-width: min(14rem, calc(100vw - 1.5rem)); max-inline-size: min(14rem, calc(100vw - 1.5rem));
    background: var(--surface, #fff); color: var(--text, #19172a); border: 1px solid var(--border, #ddd); border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,.18)); padding: 0.35rem; display: flex; flex-direction: column;
}
.rank-menu-host { font-size: 0.75rem; color: var(--text-muted); padding: 0.25rem 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-act { margin: 0; }
.rank-menu-item {
    display: flex; align-items: center; gap: 0.45rem; inline-size: 100%; text-align: start; background: transparent;
    border: 0; cursor: pointer; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm, 6px); color: var(--text);
    font-size: 0.875rem; text-decoration: none;
}
.rank-menu-item:hover, .rank-menu-item:focus { background: var(--surface-2); outline: none; }
.rank-menu-item:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: -2px; }
.rank-item[aria-checked="true"] { font-weight: 600; color: var(--brand-strong); }
.rank-link::before { content: ""; inline-size: 0.95rem; flex: none; text-align: center; color: var(--text-muted); }
.rank-link[href*="archive.org"]::before { content: "🏛"; }
.rank-link:not([href*="archive.org"])::before { content: "⌕"; font-weight: 700; }
.rank-sep { block-size: 1px; background: var(--border); margin: 0.35rem 0.25rem; }
.rank-group-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 0.25rem 0.5rem 0.15rem; }
.rank-more { font-size: 0.75rem; color: var(--text-muted); border-block-start: 1px solid var(--border); margin-block-start: 0.25rem; }
.rank-more:hover { color: var(--text); }
/* Translate affordance — shown only when a result's detected language differs from the user's UI language. */
.result-translate {
    display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; color: var(--text-muted); cursor: pointer;
    text-decoration: none; margin-inline-start: 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.03rem 0.45rem;
}
.result-translate:hover { color: var(--text); background: var(--surface-2); }
.result-translate::before { content: "🌐"; font-size: 0.85em; }
/* Overlay container — lets a kebab sit on an <a>-wrapped vertical card without nesting interactive elements. */
.result-card { position: relative; }
.result-card-tools { position: absolute; inset-block-start: 0.35rem; inset-inline-end: 0.35rem; z-index: 5; margin: 0; display: inline-flex; align-items: center; gap: 0.2rem; }
.result-card-tools .rank-control, .result-card-tools .rank-adjust { margin: 0; }
.result-card-tools .rank-chip { background: var(--surface); }
/* On dense image cells the kebab is revealed on hover/focus (keyboard-reachable), to avoid grid clutter. */
.image-cell-wrap { position: relative; display: block; }
.image-cell-wrap .result-card-tools { opacity: 0; transition: opacity 0.12s ease; }
.image-cell-wrap:hover .result-card-tools,
.image-cell-wrap:focus-within .result-card-tools,
.image-cell-wrap .rank-control[open] { opacity: 1; }
/* A ranked image (pinned/raised/lowered/blocked) always shows its kebab, so its state indicator is visible without
   hover — the hover-reveal governs only neutral cells (keeps the dense grid clean). */
.image-cell-wrap:has(.rank-chip-pinned, .rank-chip-raised, .rank-chip-lowered, .rank-chip-blocked) .result-card-tools { opacity: 1; }
@media (hover: none) { .image-cell-wrap .result-card-tools { opacity: 1; } }
/* Raise the result whose kebab menu is OPEN above the following results, so its popup is never overlapped by
   later result text (each .result-item/.result-card is position:relative, so without this the open menu — capped
   inside its own stacking context — is painted under subsequent siblings). */
.result-item:has(.rank-control[open]),
.result-card:has(.rank-control[open]),
.image-cell-wrap:has(.rank-control[open]) { z-index: 50; }
/* Active search-scope filter chips (e.g. a site: restriction) — one-tap removable. */
.active-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.85rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; text-decoration: none; color: var(--text);
    background: var(--surface-2, #f3efe4); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.2rem 0.65rem;
}
.filter-chip:hover { background: var(--surface, #fff); border-color: var(--brand); }
.filter-chip-x { font-weight: 700; color: var(--text-muted); line-height: 1; }
.filter-chip:hover .filter-chip-x { color: var(--brand); }
.rank-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8125rem; margin: 0.25rem 0 0.75rem; }
.rank-summary-part { white-space: nowrap; }
.rank-summary-part + .rank-summary-part::before { content: "·"; margin-inline: 0.5rem 0.5rem; color: var(--text-muted); }   /* both sides — Razor strips inter-part whitespace (the mirror of the .rank-summary-by fix) */
/* "by your rules" trails the count parts inside the (inline) .rank-summary-text. Razor strips the source
   whitespace after the final conditional part block, so without this the words collide ("…raisedby your
   rules"). A logical-start margin restores the space deterministically and stays correct in RTL. */
.rank-summary-by { margin-inline-start: 0.25rem; }
.rank-reveal summary { cursor: pointer; color: var(--brand-strong); }
.rank-blocked-list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.rank-blocked-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.rank-blocked-host { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.rank-unblock { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.1rem 0.5rem; cursor: pointer; color: var(--text-muted); font-size: 0.75rem; }
.rank-unblock:hover { color: var(--text); background: var(--surface-2); }
.rank-why { font-size: 0.7rem; color: var(--text-muted); margin-inline-start: 0.4rem; }
.rank-why-pinned { color: var(--brand-strong); }
/* Malicious-domain consumer (highlight mode): a restrained in-flow "Flagged" affordance on a result, and the
   "N results removed" notice in remove mode. Danger accent, but understated; reflow-friendly (rem, flex-wrap,
   min-width:0). NEVER names a feed/source. */
.malicious-flagged { border-inline-start: 3px solid var(--danger, #b42318); padding-inline-start: 0.6rem; }
.malicious-warning { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.1rem 0 0.15rem; font-size: 0.75rem; color: var(--danger, #b42318); }
.malicious-warning-badge { font-size: 0.85rem; line-height: 1; }
.malicious-warning-text { font-weight: 600; min-width: 0; cursor: help; }
.malicious-removed { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--text-muted); margin: 0.25rem 0 0.75rem; }
.malicious-removed-icon { color: var(--danger, #b42318); }
.malicious-removed-count { font-weight: 600; color: var(--text); }
/* Inline (vertical) flag variant: sits in a card meta row without the block's vertical margins; flex-wraps so the card still reflows at large text. */
.malicious-warning-inline { display: inline-flex; margin: 0; }
/* Image grid flag: no left bar/padding (would shift the cell) — a red ring on the thumbnail + a corner ⚠ badge. */
.image-cell-wrap.malicious-flagged { border-inline-start: 0; padding-inline-start: 0; }
.image-cell-wrap.malicious-flagged .image-cell { outline: 3px solid var(--danger, #b42318); outline-offset: -3px; }
.malicious-flag-corner { position: absolute; inset-block-start: 0.3rem; inset-inline-start: 0.3rem; z-index: 4; background: var(--danger, #b42318); color: #fff; border-radius: 4px; padding: 0 0.25rem; font-size: 0.8rem; line-height: 1.35; }
.rank-toggle { font-size: 0.8125rem; margin: 0 0 0.5rem; }
.rank-toggle-link { color: var(--text-muted); text-decoration: none; }
.rank-toggle-link:hover { color: var(--text); text-decoration: underline; }
.rank-blocked-collapsed { opacity: 0.4; max-block-size: 2.5rem; overflow: hidden; }
.rank-toast {
    position: fixed; inset-block-end: 1.25rem; inset-inline-start: 50%; transform: translateX(-50%); z-index: 100;
    background: var(--text); color: var(--surface); border-radius: var(--radius-pill); padding: 0.5rem 1rem;
    display: flex; align-items: center; gap: 0.75rem; box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,.25)); font-size: 0.875rem; max-inline-size: 90vw;
}
.rank-toast-undo { background: transparent; border: 0; color: var(--brand, #6ea8fe); cursor: pointer; font-weight: 600; }
/* Failed ranking change (didn't persist) — a warm/danger background so it reads as an error, not a confirmation. */
.rank-toast-error { background: var(--danger, #b42318); color: #fff; }
.rule-group { margin-block-end: 1rem; }
.rule-group-title { font-size: 0.875rem; margin: 0 0 0.4rem; }
.rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.rule-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rule-pattern { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.rule-match { font-size: 0.75rem; }
.rule-add { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1rem; }
@media (max-width: 32em) { .rank-menu { inset-inline-start: auto; inset-inline-end: 0; } }

/* --- Search Control landing showcase ("Your results, your rules") --- */
.sc-showcase-grid{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:center;margin-top:1.5rem}
.sc-points{flex:1 1 22rem;min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.sc-points li{display:flex;gap:.75rem;align-items:flex-start}
.sc-point-ico{flex:0 0 1.75rem;text-align:center;font-size:1.25rem;line-height:1.5}
/* Raise / lower / pin: circular filled badges (1.5rem disc inside the 1.75rem column so text
   left-edges stay aligned). Saturated discs + white marks for clear contrast; hue carries the
   meaning — raise = green, lower = recessed warm-grey, pin = on-brand ink-blue (positive — NOT
   the "stop"-red of Block). The up-triangle glyph sits a hair low in its em box, so the raise
   mark is nudged up ~1px (expressed in em, so it tracks OS/browser text scaling). */
.sc-rank-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;border-radius:50%;
  font-size:.9rem;line-height:1;color:#fff;
}
.sc-rank-tri{display:block;line-height:1}
.sc-rank-badge--raise{background:#1c7a45}
.sc-rank-badge--raise .sc-rank-tri{transform:translateY(-0.07em)}
.sc-rank-badge--lower{background:#6b6253}
.sc-rank-badge--pin{background:#2a5d9f}
.sc-rank-pin{display:block;width:.95rem;height:.95rem;fill:#fff}
.sc-points p{margin:0}
.sc-points span{color:var(--text-muted)}
/* Decorative demo: cap to the available width (max-width:100%) and allow it to shrink (flex shrink + min-width:0)
   so the 16rem box can't force horizontal scroll at large text / narrow viewports. */
.sc-demo{flex:1 1 16rem;max-width:100%;min-width:0;display:flex;flex-direction:column;gap:.6rem;padding:1rem;border:1px solid rgba(127,127,127,.25);border-radius:.75rem}
.sc-demo-row{display:flex;align-items:center;gap:.6rem;padding:.5rem;border-radius:.5rem;background:rgba(127,127,127,.08)}
.sc-demo-dot{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%;background:rgba(127,127,127,.4)}
.sc-demo-bar{flex:1 1 auto;height:.55rem;border-radius:.3rem;background:rgba(127,127,127,.35)}
.sc-demo-raise .sc-demo-dot{background:#2e9e5b}
.sc-demo-block .sc-demo-dot{background:#d05a4e}
@media (prefers-reduced-motion:no-preference){
  .sc-demo-block{animation:sc-fade 6s ease-in-out infinite}
  .sc-demo-raise{animation:sc-rise 6s ease-in-out infinite}
}
@keyframes sc-fade{0%,18%{opacity:1}32%,72%{opacity:.18}100%{opacity:1}}
@keyframes sc-rise{0%,18%{transform:translateY(0)}32%,72%{transform:translateY(-3.1rem)}100%{transform:translateY(0)}}
.sc-showcase-foot{text-align:center;color:var(--text-muted);max-width:52ch;margin:1.5rem auto 0}

/* --- Search Control Phase 2: view picker, !/@ suggest, redirect tag, settings sub-lists --- */
.search-view{min-width:0;max-width:11rem;flex:0 0 auto}
/* .sc-suggest* (the bang/snap autocomplete dropdown) now lives in the shared app.css — it is used by BOTH the public
   web app and the admin Search Diagnostics box. The one web-only positioning override stays below. */
.search-form:not(.compact) .sc-suggest{inset-inline-end:0;max-width:none}
.rank-why-redirected{opacity:.85}
.rule-row-actions{display:inline-flex;gap:.5rem;flex-wrap:wrap}
.rule-builtins{margin:.5rem 0}
.rule-builtins summary{cursor:pointer;color:var(--text-muted)}
.rule-hint{margin-top:.4rem;font-size:.9em}
.sc-showcase-more{text-align:center;max-width:54ch;margin:1.25rem auto 0;color:var(--text-muted)}
.sc-showcase-more strong{color:var(--text)}

/* Landing "reach" strip — platform facts (apps / languages / docs). A light flex-wrap row, NOT cards: it reflows
   to a single column on narrow / large-text viewports (flex-wrap + flex-basis in rem + min-width:0), so it stays
   readable at 200% text and ~360px with no horizontal scroll. */
.reach{display:flex;flex-wrap:wrap;gap:1.5rem 2rem;justify-content:center;margin-top:1rem}
.reach-item{flex:1 1 16rem;min-width:0;max-width:24rem;text-align:center}
.reach-item h3{margin:0 0 .35rem;font-size:1.0625rem}
.reach-item p{margin:0;color:var(--text-muted);font-size:.9375rem}

/* No horizontal scroll at ~200% text (WCAG 1.4.4 / 1.4.10): break over-long words in landing headings, card/section
   copy, and the FAQ so they wrap within their column instead of forcing a scrollbar. `anywhere` (not break-word) is
   required because the FAQ <summary> is a flex item — only `anywhere` reduces its min-content so the flex line can
   shrink. It only breaks a word that would otherwise overflow, so normal-width text is unaffected. */
.hero h1, .hero .lede,
.section-title, .section-sub,
.value-card h3, .value-card p,
.reach-item h3, .reach-item p,
.sc-points p, .sc-showcase-more, .sc-showcase-foot,
.faq summary, .faq p {
    overflow-wrap: anywhere;
}

/* --- Phase 5: LibRedirect privacy redirects (settings multi-select + result indicator). Reflow-safe:
   flex-wrap + min-width:0 + rem + bounded selects, so it stays readable at 200% text / a 360px viewport. --- */
.redirect-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:.5rem 1rem}
/* Category heading + its restrained "N on" count badge (scannability for the long service list). Reflow-safe. */
.redirect-group-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;min-width:0}
.redirect-group-count{font-size:.7rem;font-weight:700;letter-spacing:.02em;color:var(--text-muted);
  background:rgba(46,158,91,.16);border-radius:var(--radius-pill,999px);padding:.05rem .5rem;white-space:nowrap}
.redirect-list{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.redirect-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem 1rem;justify-content:space-between;
  padding:.6rem .75rem;border:1px solid rgba(127,127,127,.2);border-radius:.6rem;min-width:0}
.redirect-row.is-on{border-color:rgba(46,158,91,.45);background:rgba(46,158,91,.05)}
.redirect-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .6rem;min-width:0;flex:1 1 13rem}
.redirect-name{font-weight:600}
.redirect-targets{font-size:.85em;color:var(--text-muted);overflow-wrap:anywhere}
.redirect-on{background:rgba(46,158,91,.18)}
.redirect-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;min-width:0;flex:1 1 18rem;justify-content:flex-end}
.redirect-config{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;min-width:0}
.redirect-field{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.redirect-field-label{font-size:.75rem;color:var(--text-muted)}
.redirect-field .field-select{max-width:13rem}
.redirect-resolved{flex-basis:100%;margin:.15rem 0 0;font-size:.85em}
.redirect-resolved code{overflow-wrap:anywhere}
/* The seamless layer (63-redirects.ts): Apply is redundant under JS (selects self-apply on change). */
.redirects-js [data-redirect-apply]{display:none}
/* Per-row + toolbar write status: quiet until shown; errors persist until the next attempt on that row. */
.redirect-status{font-size:.85rem;color:var(--success);opacity:0}
.redirect-status.redirect-status-show{opacity:1}
.redirect-status.is-error{color:var(--danger)}
@media (prefers-reduced-motion: no-preference){ .redirect-status{transition:opacity .2s} }
/* In-flight cue: the row dims its resolved line slightly while a write is outstanding. */
.redirect-row.is-saving .redirect-resolved{opacity:.55}

/* The privacy-redirects MODE cards: two large selectable options; the active one carries the brand ring. */
.redirect-modes, .redirect-coverage { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.9rem; margin: 0.75rem 0 1.4rem; }
.redirect-modes form, .redirect-coverage form { display: contents; }
a.redirect-mode-card { text-decoration: none; }
a.redirect-mode-card:hover { text-decoration: none; }
.redirect-customize { align-self: flex-start; margin-top: 0.4rem; }
div.redirect-mode-card[data-custom-selected] { cursor: default; }
.coverage-dialog { max-width: 30rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--text); padding: 1.4rem 1.5rem; }
.coverage-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.coverage-dialog h3 { margin: 0 0 0.4rem; }
.coverage-dialog-list { margin: 0.7rem 0 1rem; padding-inline-start: 1.2rem; max-height: 14rem; overflow-y: auto; }
.coverage-dialog-list li { margin: 0.25rem 0; }
.coverage-dialog-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.redirect-mode-card { display: flex; flex-direction: column; gap: 0.3rem; text-align: start; padding: 0.9rem 1.1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
    color: var(--text); font: inherit; }
.redirect-mode-card:hover { border-color: var(--border-strong); }
.redirect-mode-card.is-active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.redirect-mode-card.is-active strong::after { content: " ✓"; color: var(--brand); }
.redirect-mode-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.redirect-exceptions-title { font-size: 1.05rem; margin: 1.4rem 0 0.2rem; }
.redirect-exceptions-hint { margin: 0 0 0.8rem; font-size: 0.9rem; }

/* Tabular alignment (owner-requested): FIXED rem tracks so the Front-end / Instance / switch columns align ACROSS
   rows (content-sized flex scattered them). Only under .redirects-js (the no-JS layout keeps the proven flex flow
   with its visible Apply button) and only at desktop widths (em gate ⇒ collapses to stacking at 200% text / narrow).
   display:contents dissolves the form boxes into the row grid — forms stay fully functional (purely visual).
   Explicit column assignments ⇒ a hidden Instance field leaves its track EMPTY, so alignment holds. */
@media (min-width: 56em) {
    .redirects-js .redirect-row { display: grid; grid-template-columns: minmax(0,1fr) 13rem 15rem auto;
                                  grid-auto-rows: auto; gap: 0.4rem 1rem; align-items: center; }
    .redirects-js .redirect-controls, .redirects-js .redirect-config,
    .redirects-js .redirect-toggle { display: contents; }
    .redirects-js .redirect-info { grid-column: 1; grid-row: 1; }
    .redirects-js .redirect-config .redirect-field:first-of-type { grid-column: 2; grid-row: 1; }
    .redirects-js [data-redirect-instance-field] { grid-column: 3; grid-row: 1; }
    .redirects-js .redirect-row .switch { grid-column: 4; grid-row: 1; justify-self: end; }
    .redirects-js .redirect-resolved { grid-column: 1 / 4; grid-row: 2; margin: 0; }
    .redirects-js .redirect-status { grid-column: 4; grid-row: 2; justify-self: end; white-space: nowrap; }
    .redirects-js .redirect-field .field-select { width: 100%; max-width: none; }
}
/* the restrained inline "↪ via Invidious" indicator on a redirected result */
.result-redirect{display:inline-flex;align-items:center;gap:.25rem;font-size:.8rem;color:var(--text-muted)}
.result-redirect .result-redirect-ico{font-style:normal}

/* --- Search Control Phase 3c: compute-on-view rule suggestions (understated standing panel) --- */
.rule-suggestions-block{margin-block-start:1.25rem}
.rule-suggestions{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.rule-suggestion{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;justify-content:space-between;
  padding:.5rem .75rem;border:1px solid rgba(127,127,127,.2);border-radius:.5rem;background:rgba(127,127,127,.05)}
.rule-suggestion-body{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1 1 16rem}
.rule-suggestion-reason{font-size:.875rem}
.rule-suggestion-proposal{font-size:.8rem}
.rule-suggestion-pattern{overflow-wrap:anywhere}
.rule-suggestion-accept{margin:0;flex:0 0 auto}
.rank-why-suggested{font-style:italic;opacity:.8}

/* ============================ Documentation platform ============================
   The docs reader as a first-class product surface. It inherits the app design system VERBATIM — global tokens
   only, no local palette — so light/dark/high-contrast/forced-colors all follow the site-wide controls with zero
   docs-specific cases. Three-column shell (nav rail · article · "On this page"), plus the modern reader kit:
   sticky self-scrolling rails, a card directory with section glyphs, scroll-spy TOC, heading copy-links, prev/next
   pagination, code blocks with copy + language tabs, tinted callouts, and a ⌘K palette with live full-text
   results. Native <details> drawers take over below the em breakpoints (reflow, never suppress, at 200% text —
   WCAG 1.4.4/1.4.10). All sizing in rem; logical properties throughout (RTL-correct). Print block at the end. */

.docs-shell{
  display:grid;
  grid-template-columns:16rem minmax(0,1fr) 13.5rem;
  gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
  max-width:88rem;
  margin:0 auto;
  padding:1.75rem clamp(1rem,3vw,2rem) 4.5rem;
}
.docs-main{min-width:0}   /* lets the center column shrink instead of overflowing (min-width:auto trap) */
.docs-main h1{min-width:0}

/* The article container is a programmatic skip target (tabindex="-1" + the "Skip to article" link). Suppress the
   focus ring when it's focused that way; interactive controls inside keep their own visible rings. */
.docs-main:focus{outline:none}

/* --- Left rail: the docs nav. Sticky + self-scrolling on wide viewports (the article list outgrows a screen);
   a "Browse the docs" <details> drawer below 48em. --- */
.docs-sidebar{
  position:sticky;top:1.5rem;min-width:0;
  max-height:calc(100vh - 3rem);overflow-y:auto;overscroll-behavior:contain;
  padding-block-end:.5rem;
  scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;
}
.docs-nav-drawer > summary{list-style:none}
.docs-nav-drawer > summary::-webkit-details-marker{display:none}
.docs-nav-toggle{
  display:none;align-items:center;gap:.55rem;
  padding:.6rem .8rem;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);color:var(--text);cursor:pointer;font-weight:600;font-size:.9rem;
}
.docs-nav-toggle:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.docs-nav-toggle-ico{color:var(--text-muted);flex:none;font-size:1.05em}
.docs-drawer-chevron{margin-inline-start:auto;color:var(--text-subtle);flex:none;transition:transform .2s ease}
details[open] > summary .docs-drawer-chevron{transform:rotate(180deg)}
/* Wide: the drawer is inert — the summary is hidden and the nav stays visible. Two mechanisms, one per engine
   generation: author `display` on the child (pre-::details-content engines) AND an explicit
   ::details-content{content-visibility:visible} (Chromium 131+, where the closed-details hiding moved to the
   slot pseudo and child display no longer overrides it). The narrow state re-asserts the hiding below. */
.docs-nav-drawer::details-content{content-visibility:visible}
.docs-nav-drawer > .docs-nav{display:flex}

.docs-nav{flex-direction:column;gap:1.35rem;font-size:.9rem}
.docs-nav-home{
  display:block;padding:.35rem .6rem;border-radius:var(--radius-sm);
  color:var(--text-muted);text-decoration:none;font-weight:600;line-height:1.45;
}
.docs-nav-home:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.docs-nav-home.active{background:var(--brand-soft);color:var(--brand-strong)}
.docs-nav-section{display:flex;flex-direction:column;gap:.35rem}
.docs-nav-section-title{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-subtle);
  font-weight:700;margin:0;padding-inline:.6rem;
}
.docs-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.docs-nav-link{
  display:block;padding:.32rem .6rem;border-radius:var(--radius-sm);
  color:var(--text-muted);text-decoration:none;line-height:1.45;
}
.docs-nav-link:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.docs-nav-link.active{background:var(--brand-soft);color:var(--brand-strong);font-weight:600}

/* --- Index: a search-first hero (Neuji's own gesture — the docs front door IS a search box), then the section
   directory as quiet cards with glyphs. --- */
.docs-hero{
  position:relative;isolation:isolate;text-align:center;
  padding:clamp(2rem,5vw,3.25rem) 1rem clamp(1.5rem,3.5vw,2.25rem);
}
.docs-hero::before{
  content:"";position:absolute;inset:-1rem -.5rem 0;z-index:-1;border-radius:var(--radius-lg);
  background:radial-gradient(46rem 20rem at 50% -4rem,var(--brand-soft),transparent 72%);
  pointer-events:none;
}
.docs-hero h1{font-size:clamp(1.9rem,4.5vw,2.6rem);font-weight:750;letter-spacing:-.02em;line-height:1.1;margin:0 0 .6rem}
.docs-lede{color:var(--text-muted);font-size:1.05rem;line-height:1.55;max-inline-size:44ch;margin:0 auto}
.docs-empty{color:var(--text-muted);padding:2rem 0}

/* Multi-column pack, not a grid: grid rows stretch every card in a row to the tallest one, so a two-article
   section inherits a sixteen-article neighbor's height as dead space. CSS columns pack each card at its natural
   height (masonry-style, zero JS), balance column heights, and stay responsive through the same 17rem minimum
   the old minmax carried. Reading order flows down each column — the natural direction for a directory. */
.docs-card-grid{
  columns:17rem;
  column-gap:1rem;
  margin-block-start:1.5rem;
}
.docs-section-card{
  display:flex;flex-direction:column;gap:.7rem;min-width:0;
  break-inside:avoid;                             /* a card never splits across columns */
  margin:0 0 1rem;                                /* the vertical gap (column-gap covers the horizontal) */
  padding:1.15rem 1.25rem 1.25rem;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);
  scroll-margin-top:1.5rem;                       /* breadcrumb #s-{section} deep links land comfortably */
  transition:border-color .15s ease;
}
.docs-section-card:hover{border-color:var(--border-strong)}
.docs-section-card-title{display:flex;align-items:center;gap:.6rem;font-size:1.02rem;font-weight:650;margin:0;min-width:0}
.docs-section-ico{
  display:grid;place-items:center;inline-size:2rem;block-size:2rem;flex:none;
  border-radius:var(--radius);background:var(--brand-soft);color:var(--brand-strong);
}
.docs-section-ico-svg{font-size:1.1rem}
.docs-section-card-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.docs-section-card-list a{
  display:block;padding:.28rem .5rem;margin-inline:-.5rem;border-radius:var(--radius-sm);
  color:var(--text-muted);text-decoration:none;line-height:1.45;
}
.docs-section-card-list a:hover{background:var(--surface-2);color:var(--brand-strong);text-decoration:none}

/* --- Docs search box: the product search pill, verbatim gesture (rounded field, brand focus glow, ⌘K keycap
   inside). The hero variant grows it to the front-door stature. --- */
.docs-search{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0;min-width:0}
.docs-search-field{
  flex:1 1 16rem;min-width:0;display:flex;align-items:center;gap:.5rem;
  background:var(--input-bg);border:1px solid var(--border-strong);border-radius:var(--radius-pill);
  padding:.25rem .4rem .25rem .85rem;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.docs-search-field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.docs-search-ico{color:var(--text-subtle);flex:none}
.docs-search-input{
  flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--text);
  font:inherit;padding:.45rem 0;
}
.docs-search-input::placeholder{color:var(--text-subtle)}
.docs-search-go{flex:0 0 auto;white-space:nowrap}
.docs-search--hero{max-width:42rem;margin:1.6rem auto 0;justify-content:center}
.docs-search--hero .docs-search-input{font-size:1.05rem;padding:.6rem 0}

/* ⌘K trigger (inside the search field + at the end of the article breadcrumb): a quiet keycap. */
.docs-cmdk-trigger{
  flex:0 0 auto;display:inline-flex;align-items:center;border:0;background:none;
  padding:.3rem;cursor:pointer;border-radius:var(--radius-sm);
}
.docs-cmdk-trigger:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.docs-cmdk-kbd{
  font-family:var(--font-mono);font-size:.72rem;line-height:1;color:var(--text-muted);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:.28em .5em;background:var(--surface-2);
}
.docs-cmdk-trigger:hover .docs-cmdk-kbd{color:var(--text);border-color:var(--border-strong)}
.docs-cmdk-trigger-crumb{margin-inline-start:auto;padding:.15rem .3rem}

/* --- Docs search results page --- */
.docs-search-results>h1{font-size:clamp(1.5rem,4vw,1.9rem);font-weight:700;letter-spacing:-.015em;margin:0 0 .5rem}
.docs-search-count{color:var(--text-muted);font-size:.9rem;margin:1rem 0 1.25rem}
.docs-hit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.docs-hit{
  display:flex;flex-direction:column;gap:.3rem;min-width:0;
  padding:1rem 1.15rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
}
.docs-hit-title{font-size:1.05rem;font-weight:650;color:var(--brand-strong);text-decoration:none;overflow-wrap:anywhere}
.docs-hit-title:hover{text-decoration:underline}
.docs-hit-section{
  order:-1;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--text-subtle);
}
.docs-hit-snippet{color:var(--text-muted);margin:0;line-height:1.6;font-size:.92rem;overflow-wrap:anywhere}
.docs-hit-snippet mark,.docs-cmdk-item-snippet mark{
  background:var(--brand-soft);color:var(--brand-stronger);padding:0 .15em;border-radius:2px;font-weight:600;
}

/* --- Breadcrumb + fallback notice + article meta row --- */
.docs-breadcrumb{
  display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;
  font-size:.82rem;color:var(--text-subtle);margin-block-end:1rem;
}
.docs-breadcrumb a{color:var(--text-muted);text-decoration:none}
.docs-breadcrumb a:hover{color:var(--brand-strong);text-decoration:underline}
.docs-breadcrumb-sep{color:var(--text-subtle);opacity:.7}
[dir="rtl"] .docs-breadcrumb-sep{display:inline-block;transform:scaleX(-1)}   /* › points along reading flow */
.docs-fallback-notice{margin-block:0 1.5rem}   /* reuses .legal-lang-notice styling */

.docs-article-meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;
  margin:0 0 1.75rem;padding-block-end:1rem;border-block-end:1px solid var(--border);
}
.docs-updated{font-size:.85rem;color:var(--text-subtle);margin:0}
.docs-article-actions{display:flex;flex-wrap:wrap;gap:.4rem;min-width:0}
.docs-action{
  display:inline-flex;align-items:center;gap:.4em;font-size:.8rem;font-weight:500;
  padding:.32rem .7rem;border:1px solid var(--border);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--text-muted);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:border-color .15s ease,color .15s ease;
}
.docs-action:hover{border-color:var(--border-strong);color:var(--text);text-decoration:none}
.docs-action:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.docs-action.is-copied{color:var(--success);border-color:var(--success)}
.docs-action-ico{flex:0 0 auto}

/* --- Article prose: the app's sans at a comfortable measure (~72ch), clear weight-led hierarchy (no counters —
   structure reads from type, not numbering). --- */
.docs-article-body{
  max-inline-size:72ch;
  font-size:1rem;line-height:1.7;color:var(--text);
  text-rendering:optimizeLegibility;
}
.docs-article-body h1{
  font-size:clamp(1.75rem,1.3rem + 1.8vw,2.35rem);font-weight:750;letter-spacing:-.02em;line-height:1.15;
  margin:0 0 .5rem;
}
.docs-article-body h2{
  font-size:1.45rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;
  margin:2.5rem 0 .8rem;scroll-margin-top:2rem;
}
.docs-article-body h3{font-size:1.15rem;font-weight:650;line-height:1.3;margin:1.9rem 0 .55rem;scroll-margin-top:2rem}
.docs-article-body h4{font-size:1rem;font-weight:650;margin:1.5rem 0 .4rem;scroll-margin-top:2rem}
.docs-article-body p{line-height:1.7;margin:0 0 1.1rem;color:var(--text)}
.docs-article-body ul,.docs-article-body ol{margin:0 0 1.1rem;padding-inline-start:1.6rem;line-height:1.7}
.docs-article-body li{margin:.35rem 0}
.docs-article-body li>ul,.docs-article-body li>ol{margin:.35rem 0}
.docs-article-body a{
  color:var(--brand-strong);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
}
.docs-article-body a:hover{text-decoration-thickness:2px}
.docs-article-body strong{font-weight:650}
.docs-article-body blockquote{
  margin:1.5rem 0;padding:.5rem 1.1rem;border-inline-start:3px solid var(--border-strong);
  color:var(--text-muted);background:transparent;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.docs-article-body blockquote p:last-child{margin-bottom:0}
.docs-article-body hr{border:0;border-block-start:1px solid var(--border);margin:2.25rem 0}
.docs-article-body :not(pre)>code{
  font-family:var(--font-mono);font-size:.86em;background:var(--surface-3);
  padding:.12em .38em;border-radius:var(--radius-sm);color:var(--text);
}
.docs-article-body img{
  display:block;max-width:100%;height:auto;margin:1.5rem auto;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
}

/* Heading copy-link anchors (SSR by DocMarkdown; TS adds copy-to-clipboard). Revealed on heading hover/focus;
   faintly visible on touch (no hover to reveal them). */
.doc-anchor{
  display:inline-flex;vertical-align:baseline;margin-inline-start:.4em;
  color:var(--text-subtle);opacity:0;text-decoration:none;
  transition:opacity .12s ease,color .12s ease;
}
.docs-article-body :is(h2,h3,h4):hover .doc-anchor,.doc-anchor:focus-visible,.doc-anchor.is-copied{opacity:1}
.doc-anchor:hover{color:var(--brand-strong)}
.doc-anchor:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px}
.doc-anchor-ico{font-size:.72em}
.doc-anchor-ico-check{display:none;color:var(--success)}
.doc-anchor.is-copied .doc-anchor-ico-link{display:none}
.doc-anchor.is-copied .doc-anchor-ico-check{display:inline}
@media (hover:none){.doc-anchor{opacity:.5}}

/* Tables: clean horizontal rules, a quiet labeled head, rounded scroll container (Markdown emits bare tables, so
   the table itself is the scroll region — no wrapper available). */
.docs-article-body table{
  border-collapse:collapse;margin:1.5rem 0;font-size:.9rem;
  display:block;max-inline-size:100%;inline-size:fit-content;overflow-x:auto;
  border:1px solid var(--border);border-radius:var(--radius);
}
.docs-article-body table caption{
  caption-side:top;text-align:start;color:var(--text-muted);padding:.5rem .8rem 0;font-size:.85rem;
}
.docs-article-body th,.docs-article-body td{
  text-align:start;padding:.55rem .8rem;border-block-start:1px solid var(--border);vertical-align:top;
}
.docs-article-body thead th{
  border-block-start:0;background:var(--surface-2);font-weight:650;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);white-space:nowrap;
}
.docs-article-body th{font-weight:650}

/* --- Fenced code blocks: a rounded panel with a header (language label + copy) and themed token colors. --- */
.doc-code{
  margin:1.5rem 0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface-2);
}
.doc-code-head{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.45rem .6rem .45rem .95rem;background:var(--surface-3);border-block-end:1px solid var(--border);
}
.doc-code-lang{
  font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);font-weight:600;
}
.doc-code-copy{
  display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:500;
  padding:.25rem .65rem;border:1px solid var(--border);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--text-muted);cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.doc-code-copy:hover{color:var(--text);border-color:var(--border-strong)}
.doc-code-copy:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.doc-code-copy.is-copied{color:var(--success);border-color:var(--success)}
.doc-code-pre{
  margin:0;padding:.95rem 1.1rem;overflow-x:auto;
  font-family:var(--font-mono);font-size:.85rem;line-height:1.6;color:var(--text);
  tab-size:4;-moz-tab-size:4;
}
.doc-code-pre code{font-family:inherit}

/* ColorCode token classes — themed from the design tokens so light/dark/contrast all follow. */
.doc-code-pre .keyword,.doc-code-pre .Keyword{color:var(--brand-strong);font-weight:600}
.doc-code-pre .string,.doc-code-pre .String{color:var(--success)}
.doc-code-pre .comment,.doc-code-pre .Comment{color:var(--text-subtle);font-style:italic}
.doc-code-pre .number,.doc-code-pre .Number{color:var(--warning)}
.doc-code-pre .preprocessor-keyword,.doc-code-pre .preprocessorKeyword{color:var(--accent)}
.doc-code-pre .html-element-name,.doc-code-pre .htmlElementName,
.doc-code-pre .xml-attribute,.doc-code-pre .xmlAttribute,
.doc-code-pre .xml-attribute-quotes,.doc-code-pre .xmlAttributeQuotes{color:var(--brand-strong)}
.doc-code-pre .xml-attribute-value,.doc-code-pre .xmlAttributeValue{color:var(--success)}
.doc-code-pre .type,.doc-code-pre .Type{color:var(--info)}

/* --- Language tabs (curl / C# / JS): a segmented tray docked onto the code panel. --- */
.doc-tabs{margin:1.5rem 0}
.doc-tabs-strip{
  display:flex;gap:.25rem;flex-wrap:wrap;align-items:center;
  border:1px solid var(--border);border-block-end:0;
  border-start-start-radius:var(--radius-lg);border-start-end-radius:var(--radius-lg);
  background:var(--surface-3);padding:.35rem .45rem;
}
.doc-tab{
  font-size:.78rem;font-weight:550;padding:.3rem .75rem;background:none;border:0;
  border-radius:var(--radius-pill);color:var(--text-muted);cursor:pointer;
}
.doc-tab:hover{color:var(--text)}
.doc-tab.active{background:var(--surface);color:var(--brand-strong);font-weight:650;box-shadow:var(--shadow-sm)}
.doc-tab:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.doc-tabs .doc-code{margin:0;border-start-start-radius:0;border-start-end-radius:0}

/* --- In-page TOC: the scroll-spy rail. --- */
.docs-toc{
  position:sticky;top:1.5rem;min-width:0;font-size:.85rem;
  max-height:calc(100vh - 3rem);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;
}
.docs-toc-title{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-subtle);
  font-weight:700;margin:0 0 .6rem;padding-inline-start:.95rem;
}
.docs-toc-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem;
  border-inline-start:1px solid var(--border);
}
.docs-toc-list a{
  display:block;color:var(--text-muted);text-decoration:none;line-height:1.45;
  padding:.15rem .5rem .15rem .85rem;
  margin-inline-start:-1px;border-inline-start:2px solid transparent;
}
.docs-toc-list a:hover{color:var(--text)}
.docs-toc-list a.active{color:var(--brand-strong);border-inline-start-color:var(--brand);font-weight:600}
.docs-toc-l3 a{padding-inline-start:1.7rem;font-size:.95em;color:var(--text-subtle)}

/* Narrow-viewport "On this page": a <details> disclosure above the article (shown only when the rail hides). */
.docs-toc-drawer{display:none;margin:0 0 1.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.docs-toc-drawer-btn{
  list-style:none;display:flex;align-items:center;gap:.5rem;
  padding:.6rem .8rem;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--text);
}
.docs-toc-drawer-btn::-webkit-details-marker{display:none}
.docs-toc-drawer-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.docs-toc-drawer .docs-toc-list{border-inline-start:0;padding:.15rem .8rem .75rem}
.docs-toc-drawer .docs-toc-list a{border-inline-start:0;margin-inline-start:0;padding:.25rem .2rem;border-radius:var(--radius-sm)}
.docs-toc-drawer .docs-toc-list a:hover{background:var(--surface-2)}
.docs-toc-drawer .docs-toc-l3 a{padding-inline-start:1rem}

/* --- Previous / next article pagination --- */
.docs-pager{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-block-start:2.5rem}
.docs-pager-link{
  display:flex;flex-direction:column;gap:.25rem;min-width:0;
  padding:.85rem 1rem;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);text-decoration:none;transition:border-color .15s ease;
}
.docs-pager-link:hover{border-color:var(--brand);text-decoration:none}
.docs-pager-next{text-align:end;align-items:flex-end}
.docs-pager-eyebrow{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-subtle);
}
.docs-pager-arrow{flex:none}
[dir="rtl"] .docs-pager-arrow{transform:scaleX(-1)}
.docs-pager-title{font-weight:600;font-size:.95rem;color:var(--text);overflow-wrap:anywhere}
.docs-pager-link:hover .docs-pager-title{color:var(--brand-strong)}
.docs-pager-spacer{min-width:0}

/* --- "Was this helpful?" --- */
.docs-feedback{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;
  margin-block-start:2.5rem;padding:.9rem 1.15rem;max-inline-size:72ch;
  border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-2);
  font-size:.9rem;color:var(--text-muted);
}
.docs-feedback-actions{display:inline-flex;gap:.5rem}
.docs-feedback-btn{
  font-size:.85rem;font-weight:500;padding:.3rem .95rem;
  border:1px solid var(--border);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--text-muted);cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.docs-feedback-btn:hover{border-color:var(--brand);color:var(--brand-strong)}
.docs-feedback-btn:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.docs-feedback-thanks{color:var(--success);font-weight:500}

/* --- "See also" --- */
.docs-related{margin-block-start:2.25rem;max-inline-size:72ch}
.docs-related-title{
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-subtle);margin:0 0 .6rem;
}
.docs-related-list{list-style:none;margin:0;padding:0;columns:2 14rem;column-gap:2.5rem}
.docs-related-list li{break-inside:avoid;margin:0 0 .35rem}
.docs-related-list a{color:var(--brand-strong);text-decoration:none;font-size:.95rem}
.docs-related-list a:hover{text-decoration:underline}

/* --- ⌘K command palette --- */
.docs-cmdk[hidden]{display:none}
.docs-cmdk{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:flex-start;justify-content:center}
html.docs-cmdk-open{overflow:hidden}   /* lock background scroll while open */
.docs-cmdk-backdrop{position:absolute;inset:0;background:rgba(10,8,20,.5);backdrop-filter:blur(2px)}
.docs-cmdk-panel{
  position:relative;margin-block-start:12vh;inline-size:min(40rem,92vw);max-block-size:70vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
}
.docs-cmdk-search{display:flex;align-items:center;gap:.6rem;padding:.75rem .95rem;border-block-end:1px solid var(--border)}
.docs-cmdk-ico{flex:0 0 auto;color:var(--text-subtle)}
.docs-cmdk-input{
  flex:1 1 auto;min-width:0;border:0;background:none;color:var(--text);
  font:inherit;font-size:1.02rem;outline:none;
}
.docs-cmdk-input::placeholder{color:var(--text-subtle)}
.docs-cmdk-esc{
  flex:0 0 auto;font-family:var(--font-mono);font-size:.68rem;color:var(--text-subtle);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:.15em .45em;background:var(--surface-2);
}
.docs-cmdk-list{list-style:none;margin:0;padding:.4rem;overflow-y:auto;min-block-size:0;overscroll-behavior:contain}
.docs-cmdk-item{
  display:flex;flex-direction:column;gap:.15rem;min-width:0;
  padding:.55rem .7rem;border-radius:var(--radius);cursor:pointer;
}
.docs-cmdk-item-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;min-width:0}
.docs-cmdk-item-title{color:var(--text);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docs-cmdk-item-section{
  flex:0 0 auto;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-subtle);
}
.docs-cmdk-item-snippet{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.8rem;line-height:1.5;color:var(--text-muted);overflow-wrap:anywhere;
}
.docs-cmdk-item.active,.docs-cmdk-item[aria-selected="true"]{background:var(--brand-soft)}
.docs-cmdk-item.active .docs-cmdk-item-title{color:var(--brand-stronger)}
.docs-cmdk-empty{margin:0;padding:1rem;color:var(--text-subtle)}
.docs-cmdk-search-all{
  display:flex;align-items:baseline;gap:.4rem;inline-size:100%;text-align:start;
  padding:.65rem .95rem;border:0;border-block-start:1px solid var(--border);
  background:none;color:var(--text-muted);font:inherit;font-size:.88rem;cursor:pointer;
}
.docs-cmdk-search-all:hover{background:var(--surface-2);color:var(--text)}
.docs-cmdk-search-all:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.docs-cmdk-search-q{color:var(--brand-strong);font-weight:600;overflow-wrap:anywhere}

/* --- Header theme toggle (global, near the contrast toggle): icon-only keycap button --- */
.theme-toggle .theme-toggle-ico{font-size:1.05em;line-height:1}

/* --- Reflow: collapse the TOC rail (→ the drawer), then the left nav (→ the drawer), as the viewport narrows
   or text scales up. Em breakpoints fire earlier under text-zoom — exactly when the columns would overflow. --- */
@media (max-width:64em){
  .docs-shell{grid-template-columns:15rem minmax(0,1fr)}
  .docs-toc{display:none}          /* the drawer + the body's own headings take over */
  .docs-toc-drawer{display:block}
}
@media (max-width:48em){
  .docs-shell{grid-template-columns:1fr;gap:1.25rem;padding-block-start:1rem}
  .docs-sidebar{position:static;max-height:none;overflow:visible;padding-block-end:0}
  .docs-nav-toggle{display:flex}
  .docs-nav-drawer:not([open])::details-content{content-visibility:hidden}
  .docs-nav-drawer:not([open]) > .docs-nav{display:none}
  .docs-nav-drawer[open] > .docs-nav{
    margin-block-start:.6rem;padding:.85rem;
    border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  }
  .docs-article-body{max-inline-size:none}
  .docs-hero{padding-block-start:1.25rem}
}
@media (max-width:34em){
  .docs-pager{grid-template-columns:1fr}
  .docs-pager-spacer{display:none}
  .docs-pager-next{text-align:start;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .doc-code-copy,.docs-action,.docs-pager-link,.docs-search-field,.docs-section-card,.doc-anchor,
  .docs-drawer-chevron,.docs-feedback-btn{transition:none}
}

/* Forced colors: keep the selected/active states visible where background tints vanish. */
@media (forced-colors:active){
  .docs-nav-link.active,.docs-nav-home.active,
  .docs-cmdk-item.active,.docs-cmdk-item[aria-selected="true"]{outline:2px solid CanvasText;outline-offset:-2px}
  .doc-callout{border-inline-start-width:4px}
}

/* ============================ Callouts / admonitions ============================
   GitHub-style alerts authored as `> [!NOTE] / [!TIP] / [!WARNING] / [!IMPORTANT] / [!HISTORY]` render as a
   semantic <aside class="doc-callout doc-callout-{type}" role="note"> (see DocMarkdown.cs CalloutRenderer). Each
   type sets one accent (--callout) from a design token; the tint + border derive via color-mix, so light/dark/
   high-contrast follow automatically and RTL is correct (logical properties only). The em-sized currentColor icon
   tracks text scaling. HISTORY is Neuji's own kind — background asides "from the record" — and reads as a quiet
   accent-tinted note (same shape as the others; the violet accent + muted body set it apart). */
.doc-callout{
  --callout:var(--info);
  margin:1.5rem 0;
  padding:.9rem 1.1rem;
  border:1px solid color-mix(in srgb,var(--callout) 28%,var(--border));
  border-inline-start:3px solid var(--callout);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--callout) 7%,var(--surface));
  color:var(--text);
}
.doc-callout > :first-child{margin-block-start:0}
.doc-callout > :last-child{margin-block-end:0}
.doc-callout-head{
  display:flex;align-items:center;gap:.45rem;
  margin:0 0 .4rem;
  color:var(--callout);
  font-weight:700;
}
.doc-callout-icon{flex:none;inline-size:1.1em;block-size:1.1em}   /* em-sized → scales with OS/text-zoom font */
.doc-callout-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;line-height:1.2}
.doc-callout-body > :first-child{margin-block-start:0}
.doc-callout-body > :last-child{margin-block-end:0}
.doc-callout-body p{line-height:1.6;margin:0 0 .6rem}
.doc-callout-body ul,.doc-callout-body ol{margin:0 0 .6rem;padding-inline-start:1.3rem}

/* Per-type accents (each maps to a design token so dark mode / contrast follow automatically). */
.doc-callout-note{--callout:var(--info)}
.doc-callout-tip{--callout:var(--success)}
.doc-callout-warning{--callout:var(--warning)}
.doc-callout-important{--callout:var(--danger)}
.doc-callout-history{--callout:var(--accent)}
.doc-callout-history .doc-callout-body{color:var(--text-muted)}

/* ===================== Community views (sharing + directory) =====================
   Public view page (/v/{token}), the directory (/views), and the Settings share/subscription controls. All
   rem-based, flex-wrap rows + min-width:0 children, so it reflows with no horizontal scroll at 200% text. */

/* --- Public view page --- */
.view-public { padding-block: clamp(1rem, 4vw, 2rem); }
.view-public-crumb { font-size: 0.9rem; margin-bottom: 0.75rem; }
.view-public-crumb a { color: var(--accent); }
.view-public-head h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 0.5rem; }
.view-public-desc { color: var(--text-muted); font-size: 1.05rem; margin: 0 0 0.75rem; max-width: 60ch; }
.view-public-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.9rem; }
.view-public-stat { display: inline-flex; gap: 0.3rem; min-width: 0; }
.view-public-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
    margin: 1.25rem 0 0.5rem;
}
.view-public-actions form { margin: 0; }
.view-public-actions .alert { flex: 1 1 100%; }
.view-public-hint { font-size: 0.85rem; margin: 0 0 1.5rem; max-width: 60ch; }
.view-public-rules { margin-top: 1.5rem; border-block-start: 1px solid var(--border); padding-block-start: 1.5rem; }
.view-public-rules h2 { font-size: 1.2rem; margin: 0 0 0.25rem; }
.view-public-signin { margin: 0; }

/* --- Inspectable rules table (shared: public page + admin) --- */
.view-rules { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1rem; }
.view-rules-group-title {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 600;
    margin: 0 0 0.5rem; color: var(--text);
}
.view-rules-count {
    font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: 0.05rem 0.45rem;
}
.view-rules-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.view-rules-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; min-width: 0; }
.view-rules-pattern {
    font-family: var(--font-mono); font-size: 0.9rem;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem; word-break: break-word; min-width: 0;
}
.view-rules-arrow { color: var(--text-muted); }
.view-rules-match { font-size: 0.8rem; }
.view-rules-scope { font-size: 0.7rem; }

/* --- Directory (/views) --- */
.view-directory { padding-block: clamp(1rem, 4vw, 2rem); }
.view-directory-search {
    display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 1.5rem; max-width: 36rem;
}
.view-directory-search .field-input { flex: 1 1 12rem; min-width: 0; }
.view-directory-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem;
}
.view-directory-card { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.view-directory-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.view-directory-card-title { font-size: 1.1rem; margin: 0; min-width: 0; }
.view-directory-card-title a { color: var(--text); }
.view-directory-card-title a:hover { color: var(--accent); }
.view-directory-card-desc { color: var(--text-muted); font-size: 0.9rem; margin: 0; flex: 1 1 auto; }
.view-directory-card-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: auto;
}
.view-directory-card-foot form { margin: 0; }
.view-directory-subs { font-size: 0.85rem; margin-inline-end: auto; }
.view-directory-signin { margin-top: 1.5rem; font-size: 0.9rem; }
.view-directory-signin a { color: var(--accent); }

/* ==================== Search Control: Adjust slider · modal · rules page · view switches ==================== */

/* --- Adjust slider (RankSlider) — replaces the old per-result action buttons; reused on the rules-page editor --- */
.rank-slider-wrap { padding: 0.15rem 0.1rem 0; }
.rank-slider-form { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.rank-slider-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.5rem; min-width: 0; }
.rank-slider-caption { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.rank-slider-value { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.rank-slider { inline-size: 100%; accent-color: var(--brand); margin: 0; min-width: 0; }
.rank-slider-marks { display: flex; justify-content: space-between; gap: 0.2rem; font-size: 0.6rem; color: var(--text-muted); }
.rank-slider-marks span { min-width: 0; text-align: center; overflow-wrap: anywhere; }
.rank-slider-apply { align-self: flex-start; }

/* --- Reusable modal (Modal.razor) — cloned from .docs-cmdk --- */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; }
html.modal-open { overflow: hidden; }   /* lock background scroll while open */
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 12, 8, 0.45); }
.modal-panel {
    position: relative; margin-block-start: 10vh; inline-size: min(34rem, 92vw); max-block-size: 84vh;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 1rem; border-block-end: 1px solid var(--border); }
.modal-title { margin: 0; font-size: 1.05rem; }
.modal-close { flex: 0 0 auto; border: 0; background: none; color: var(--text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.45rem; border-radius: var(--radius-sm); }
.modal-close:hover { color: var(--text); background: var(--surface-2); }
.modal-close:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.modal-body { padding: 1rem; overflow-y: auto; min-block-size: 0; }
.modal-error { margin: 0 0 0.75rem; color: var(--danger, #b42318); font-size: 0.85rem; }
.rule-add .modal-error { flex-basis: 100%; }

/* --- Search-Control sub-pages (rules list / add / view add) --- */
.sc-page { padding-block-end: 3rem; }
.sc-back { display: inline-block; font-size: 0.85rem; color: var(--text-muted); text-decoration: none; margin-block-end: 0.25rem; }
.sc-back::before { content: "← "; }
[dir="rtl"] .sc-back::before { content: "→ "; }   /* back points the other way in RTL */
.sc-back:hover { color: var(--text); }
.sc-rules-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1rem 0; }
.sc-rules-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8125rem; }
.sc-sort-link { color: var(--text-muted); text-decoration: none; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; }
.sc-sort-link:hover { color: var(--text); }
.sc-sort-link.is-active { color: var(--brand-strong); border-color: var(--border); background: var(--surface-2); }
/* "Your rules" — icon-led cards. One row per rule; the leading action icon + its colour is the at-a-glance
   signature (block = red ⊘, lower = amber ↓, raise = green ↑, pin = brand ⤒), the pattern is the headline,
   match-type/scope sit muted beneath. Flex row reflows on its own (no grid breakpoint needed). */
.sc-rules { display: flex; flex-direction: column; gap: 0.4rem; }
.sc-rule-row { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
    transition: border-color 0.15s ease; }
.sc-rule-row:hover { border-color: var(--border-strong); }
.sc-rule-row[open] { border-color: var(--brand); }
.sc-rule-summary { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0.8rem; cursor: pointer; list-style: none; }
.sc-rule-summary::-webkit-details-marker { display: none; }
.sc-rule-icon { flex: none; display: grid; place-items: center; inline-size: 2.1rem; block-size: 2.1rem; border-radius: 50%; }
.sc-rule-icon svg { inline-size: 1.05rem; block-size: 1.05rem; }
.sc-rule-main { min-inline-size: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; }
.sc-rule-pattern { font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; line-height: 1.25; }
.sc-rule-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--text-muted); }
.sc-rule-act { font-weight: 600; }
.sc-rule-sep { opacity: 0.45; }
.sc-rule-weight { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.8rem; padding: 0.08rem 0.5rem; border-radius: var(--radius-pill); }
.sc-rule-chevron { flex: none; display: grid; place-items: center; color: var(--text-muted); transition: transform 0.2s ease; }
.sc-rule-chevron svg { inline-size: 1.05rem; block-size: 1.05rem; }
.sc-rule-row[open] .sc-rule-chevron { transform: rotate(90deg); }
/* per-action colour (matches the result-kebab chips; tokens are theme-aware) */
.sc-rule-icon-block { background: var(--danger-soft); color: var(--danger); }
.sc-rule-icon-lower { background: var(--warning-soft); color: var(--warning); }
.sc-rule-icon-raise { background: var(--success-soft); color: var(--success); }
.sc-rule-icon-pin   { background: var(--brand-soft); color: var(--brand-strong); }
.sc-rule-icon-normal { background: var(--surface-2); color: var(--text-muted); }
.sc-rule-act-block { color: var(--danger); }
.sc-rule-act-lower { color: var(--warning); }
.sc-rule-act-raise { color: var(--success); }
.sc-rule-act-pin   { color: var(--brand-strong); }
.sc-rule-weight-lower { background: var(--warning-soft); color: var(--warning); }
.sc-rule-weight-raise { background: var(--success-soft); color: var(--success); }
/* expanded editor (the Adjust slider + delete) */
.sc-rule-edit { padding: 0.65rem 0.8rem 0.8rem; border-block-start: 1px solid var(--border);
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.25rem; }
.sc-rule-edit .rank-slider-form { flex: 1 1 16rem; max-inline-size: 24rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.65rem; }
.sc-rule-fromview { flex: 1 1 16rem; margin: 0; }
.sc-rule-delete { margin: 0; }

/* --- Settings › Search Control: rules-count summary + view switches + always-shown built-ins --- */
.rule-summary-counts { margin: 0 0 0.5rem; }
/* Colour-coded count chips (the pane "Your rules" summary) — icon + count + label, tinted per action via the
   shared .sc-rule-icon-{action} tokens. */
.rank-stat-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0.7rem; }
.rank-stat { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.65rem;
    border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 500; }
.rank-stat svg { inline-size: 0.95rem; block-size: 0.95rem; flex: none; }
.rank-stat strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.rule-manage-row { margin: 0.5rem 0 0; }
.view-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.view-row-head .rule-pattern { flex: 1 1 auto; }
.view-row-head .rule-row-actions { margin-inline-start: auto; }
.view-switch-form { margin: 0; flex: 0 0 auto; }
.view-builtins { margin-block-start: 1rem; }
.view-bulk { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.35rem 0 0.6rem; }
.view-mode-help { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; flex-basis: 100%; }

/* --- Settings: per-view share controls + subscriptions --- */
.rule-row-view { flex-direction: column; align-items: stretch; }
.view-share {
    flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
    margin-top: 0.4rem; padding-top: 0.4rem; border-block-start: 1px dashed var(--border);
}
.view-share-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; min-width: 0; font-size: 0.85rem; }
.view-share-url { word-break: break-all; min-width: 0; }
.view-share-url a { color: var(--accent); }
.view-share-actions { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }

/* ============================ Print ============================
   A clean, chrome-free article on paper: hide navigation/controls, black on white, expand external link URLs,
   and keep code/tables/callouts from splitting badly. (The browser's own header/footer supplies page numbers.) */
@media print{
  @page{margin:16mm}

  /* App chrome + interactive-only bits */
  .app-bar,.app-header,.header-nav,.skip-link,
  .docs-sidebar,.docs-toc,.docs-toc-drawer,.docs-search,.doc-code-copy,.doc-tabs-strip,.docs-breadcrumb,
  .doc-anchor,.docs-article-actions,.docs-feedback,.docs-pager,.docs-cmdk,.docs-cmdk-trigger{display:none !important}

  html,body{background:#fff !important}
  .docs-shell{display:block;max-width:none;margin:0;padding:0;background:#fff !important;color:#000 !important}
  .docs-main,.docs-article-body{max-inline-size:none}
  .docs-article-body{font-size:11pt;line-height:1.55}
  .docs-article-body h1{font-size:20pt}
  .docs-article-meta{display:block;border-block-end:1pt solid #000}

  /* Black on white, no tints */
  body,.docs-article-body,.docs-article-body p,.docs-article-body li,
  .docs-article-body h1,.docs-article-body h2,.docs-article-body h3,.docs-article-body h4{color:#000 !important}
  .doc-code,.doc-code-pre,.doc-code-head,.docs-article-body :not(pre)>code,
  .docs-article-body th,.docs-article-body blockquote,
  .doc-callout,.doc-callout-head{background:#fff !important;color:#000 !important}
  .doc-code,.doc-code-head,.doc-code-pre,.docs-article-body table,
  .docs-article-body th,.docs-article-body td,.docs-article-body img{border-color:#999 !important}
  .doc-callout{border:1px solid #999 !important;border-inline-start:3px solid #000 !important}
  .docs-article-body a{color:#000 !important;text-decoration:underline}
  .docs-article-body blockquote{border-inline-start:2pt solid #000 !important}
  .doc-code-pre .keyword,.doc-code-pre .string,.doc-code-pre .comment,.doc-code-pre .number,
  .doc-code-pre .type,.doc-code-pre .preprocessor-keyword{color:#000 !important;font-style:normal}

  /* Language tab groups: print EVERY panel (each is labeled by its own header), not just the active one. */
  .doc-tabs [data-doc-panel][hidden]{display:block !important}
  .doc-tabs .doc-code{margin:0 0 .75rem;border-radius:0}

  /* Expand hyperlink targets so a printed page keeps the URLs (skip in-page anchors + relative links) */
  .docs-article-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#000;word-break:break-all}

  /* Don't split code / tables / callouts / figures awkwardly; keep headings with their text. */
  .doc-code,.doc-tabs,.docs-article-body pre,.docs-article-body table,.docs-article-body blockquote,
  .docs-article-body img,.doc-callout{break-inside:avoid;page-break-inside:avoid}
  .docs-article-body h1,.docs-article-body h2,.docs-article-body h3,.docs-article-body h4,
  .doc-code-head{break-after:avoid;page-break-after:avoid}
  .docs-article-body p,.docs-article-body li{orphans:3;widows:3}
  .doc-code-pre{white-space:pre-wrap;word-break:break-word}   /* wrap long lines so nothing is clipped on paper */
}

/* ── Advanced Search (/advanced) ───────────────────────────────────────────────────────────────────────────────
   A composable boolean query builder. Two columns on desktop (build + sticky filter rail); the JS canvas (38-
   advanced-search.ts) replaces the flat word rows with a nestable AND/OR/NOT tree and drives the live preview. */
.adv { max-width: 64rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.adv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.adv-head h1 { margin: 0 0 .25rem; font-size: clamp(1.4rem, 1rem + 1.6vw, 1.75rem); }
.adv-sub { margin: 0; font-size: .9rem; max-width: 44rem; }
.adv-x { font-size: 1.9rem; line-height: 1; color: var(--text-subtle); text-decoration: none; padding: 0 .4rem; border-radius: var(--radius-sm); }
.adv-x:hover { color: var(--text); background: var(--bg-elevated); }

.adv-cols { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 56em) { .adv-cols { grid-template-columns: 1.45fr 1fr; align-items: start; } }

.adv-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 1.1rem 1.2rem; margin: 0 0 1.1rem; }
.adv-build { min-width: 0; }
.adv-build .adv-card:last-child { margin-bottom: 0; }
.adv-card > legend, .adv-rail > legend { display: block; width: 100%; font-weight: 650; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 0; margin-bottom: .9rem; }
@media (min-width: 56em) { .adv-rail { position: sticky; top: calc(var(--header-height) + 1rem); } }

.adv-row { display: flex; flex-direction: column; gap: .35rem; min-width: 0; margin-bottom: .9rem; }
.adv-row:last-child { margin-bottom: 0; }
.adv-row > label, .adv-row-label { font-size: .85rem; font-weight: 550; color: var(--text); }
.adv-hint { margin: .05rem 0 0; font-size: .78rem; color: var(--text-subtle); }
.adv-grid2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 30em) { .adv-grid2 { grid-template-columns: 1fr 1fr; } .adv-grid2 .adv-row:last-child { grid-column: 1 / -1; } }

.adv-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }
.adv-chip { font: inherit; font-size: .78rem; padding: .2rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--text-muted); cursor: pointer; }
.adv-chip:hover { border-color: var(--brand); color: var(--brand); }
.adv-chip.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }

.adv-daterow { display: flex; flex-wrap: wrap; gap: .6rem; }
.adv-date { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 8rem; min-width: 0; font-size: .78rem; color: var(--text-subtle); }

.adv-toggles { display: flex; flex-direction: column; gap: .6rem; }
.adv-check { display: flex; align-items: center; gap: .55rem; font-size: .88rem; cursor: pointer; }
.adv-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--brand); flex: none; }

.adv-preview { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-top: 1.25rem; padding: .8rem 1rem; border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius); background: var(--bg-elevated); }
.adv-preview-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); white-space: nowrap; }
.adv-preview-q { font-family: var(--font-mono); font-size: .9rem; line-height: 1.5; color: var(--text); word-break: break-word; min-width: 0; }
.adv-preview-q:empty::before { content: attr(data-empty); color: var(--text-subtle); }

.adv-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.adv-actions .btn { min-width: 8rem; justify-content: center; }

/* The boolean canvas (mounted by JS; flat rows hidden via [data-adv-words][hidden]). */
.adv-canvas[hidden], .adv-words[hidden] { display: none; }
.adv-canvas { display: flex; flex-direction: column; gap: .6rem; }
.adv-group { border: 1px solid var(--border); border-radius: var(--radius); padding: .65rem .7rem; background: var(--bg); }
.adv-group .adv-group { background: var(--bg-elevated); }
.adv-group-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .55rem; }
.adv-conn { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; flex: none; }
.adv-conn button { font: inherit; font-size: .76rem; font-weight: 600; padding: .18rem .65rem; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.adv-conn button.is-on { background: var(--brand); color: var(--brand-contrast); }
.adv-spacer { flex: 1 1 auto; }
.adv-iconbtn { font: inherit; font-size: .76rem; padding: .18rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.adv-iconbtn:hover { border-color: var(--brand); color: var(--brand); }
.adv-iconbtn.adv-rm { padding: .18rem .45rem; line-height: 1; }
.adv-nodes { display: flex; flex-direction: column; gap: .45rem; }
.adv-node { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-width: 0; }
.adv-cond { display: flex; align-items: center; gap: .4rem; flex: 1 1 16rem; min-width: 0; }
.adv-cond .field-input { flex: 1 1 8rem; width: auto; min-width: 0; }
.adv-cond .field-select { flex: 0 0 auto; width: auto; min-width: 0; font-size: .82rem; }
.adv-not { display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; color: var(--text-subtle); white-space: nowrap; }
.adv-canvas-hint { font-size: .78rem; color: var(--text-subtle); margin: .1rem 0 0; }

/* Global safe search: a per-type safe-search toggle locked ON by the master toggle (General pane). The server
   renders it disabled; .is-disabled (set live by 65-global-safe-search.ts) dims it to read as locked. */
.toggle.is-disabled { opacity: .55; }
.toggle.is-disabled, .toggle input:disabled { cursor: not-allowed; }
.settings-group-note { margin: .5rem 0 0; font-size: .82rem; }

/* ── Search-Control dedicated pages: icon-led cards (bangs/snaps/redirects/views) ──────────────────────────────── */
.sc-cards { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1.5rem; }
.sc-card { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.sc-card.sc-card-off { opacity: .55; }
.sc-card-icon { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--radius-sm); }
.sc-card-icon svg { width: 1.2rem; height: 1.2rem; }
.sc-card-icon-bang { background: var(--brand-soft); color: var(--brand); }
.sc-card-icon-snap { background: var(--info-soft); color: var(--info); }
.sc-card-icon-redirect { background: var(--warning-soft); color: var(--warning); }
.sc-card-icon-view { background: var(--success-soft); color: var(--success); }
/* View cards carry a mode class too — match the icon stroke to its tinted box (boost=green, restrict=brand, filter=amber). */
.sc-card-icon-view.sc-rule-icon-raise { background: var(--success-soft); color: var(--success); }
.sc-card-icon-view.sc-rule-icon-pin   { background: var(--brand-soft); color: var(--brand-strong); }
.sc-card-icon-view.sc-rule-icon-lower { background: var(--warning-soft); color: var(--warning); }
.sc-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.sc-card-title { font-weight: 600; font-family: var(--font-mono); word-break: break-word; }
.sc-card-sub { font-size: .82rem; color: var(--text-muted); word-break: break-word; }
.sc-card-actions { flex: none; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.sc-add-title { font-size: 1.05rem; margin: 1.75rem 0 .85rem; }
.sc-form { display: flex; flex-direction: column; gap: 1rem; max-width: 34rem; }
.sc-form .field { display: flex; flex-direction: column; gap: .3rem; }
.sc-form .field-label { font-weight: 550; font-size: .9rem; }
.sc-form .field-hint { margin: 0; font-size: .8rem; color: var(--text-subtle); }
.sc-builtins { margin-top: 1.75rem; }

/* ── Account › Email address (/account/settings/email) + the Account email-row Change button ─────────────────────── */
.email-page { max-width: 40rem; }
.account-email-value { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; justify-content: flex-end; }
.account-email-addr { word-break: break-all; min-width: 0; }
.account-email-change { flex: none; }
.email-badge-warn { background: var(--warning-soft); color: var(--warning); }

.email-current { display: flex; flex-direction: column; gap: 0.35rem; margin: 1.25rem 0;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 1rem 1.2rem; }
.email-current-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.email-current-value { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-width: 0; }
.email-current-addr { font-size: 1.1rem; font-weight: 600; word-break: break-all; min-width: 0; }

.email-form { display: flex; flex-direction: column; gap: 1.15rem; margin-top: 0.4rem;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 1.4rem; }
.email-form .field { display: flex; flex-direction: column; gap: 0.4rem; }
.email-form .field-label { font-weight: 600; font-size: 0.9rem; }
.email-form .field-hint { font-size: 0.8rem; color: var(--text-subtle); line-height: 1.45; }
.email-form-submit { align-self: flex-start; min-width: 12rem; justify-content: center; margin-top: 0.2rem; }

.email-pending { display: flex; gap: 0.9rem; margin-top: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border)); border-radius: var(--radius-lg);
    background: var(--warning-soft); padding: 1.3rem; }
.email-pending-icon { flex: none; color: var(--warning); margin-top: 0.1rem; }
.email-pending-body { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.email-pending-title { margin: 0; font-size: 1.05rem; }
.email-pending-text { margin: 0; color: var(--text); line-height: 1.5; }
.email-pending-addr { word-break: break-all; }
.email-pending-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.35rem; }
.email-pending-actions form { margin: 0; }
@media (max-width: 30em) { .email-form-submit { width: 100%; align-self: stretch; } .account-email-value { justify-content: flex-start; } }

/* ===== Result Designer (WYSIWYG result-template editor) ===== */
.rd { margin-top: 0.5rem; }
.rd-nojs { padding: 1.5rem; text-align: center; }
.rd-stage { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.rd-stage-main { flex: 1 1 20rem; min-width: 0; }
.rd-panel { flex: 0 0 15rem; min-width: 0; display: flex; flex-direction: column; gap: 0.7rem; padding: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); position: sticky; top: 1rem; }
@media (max-width: 44em) { .rd-stage { flex-direction: column; } .rd-panel { position: static; flex-basis: auto; width: 100%; } }

.rd-canvas { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 1rem; background: var(--surface); }
.rd-sample { animation: none; }
.rd-rowsolo { min-width: 0; }
.rd-context { margin-top: 0.5rem; border-top: 1px dashed var(--border); padding-top: 0.5rem; opacity: 0.85; }
/* closed-details hiding is overridable by author display on children (the nav pattern exploits this;
   here it backfires — the result cards carry their own display) — hide explicitly. */
details.rd-context:not([open]) > :not(summary) { display: none !important; }
.rd-context-label { margin: 1rem 0 0.4rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; border-radius: var(--radius-sm); padding: 0.15rem 0.3rem; }
.rd-context-label::-webkit-details-marker { display: none; }
.rd-context-label::before { content: "▸"; font-size: 0.7rem; transition: transform 0.15s ease; }
details.rd-context[open] > .rd-context-label::before { transform: rotate(90deg); }
.rd-context-label:hover { background: var(--surface-2); color: var(--text); }
.rd-context-label:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rd-context-label::before { transition: none; } }
.rd-empty { padding: 1rem 0; }

.rd-editable .rd-chip { display: block; position: relative; border-radius: var(--radius-sm); cursor: grab; outline: 1px dashed transparent; outline-offset: 2px; touch-action: none; user-select: none; -webkit-user-select: none; }
/* The favicon is an <img> — natively draggable, which hijacks pointermove and killed the chip drag (owner: "only
   the favicon won't drop"). draggable=false is set in JS; these are the CSS belts for WebKit + selection drags. */
.rd-editable .rd-chip img { -webkit-user-drag: none; user-drag: none; }
.rd-editable .rt-row { align-items: center; }
.rd-editable .rd-chip:hover { outline-color: var(--border-strong); }
.rd-editable .rd-chip:focus-visible { outline: 2px solid var(--brand-strong); }
.rd-editable .rd-chip.rd-selected { outline: 2px solid var(--brand); background: var(--brand-soft); }
body.rd-dragging { cursor: grabbing; user-select: none; }

.rd-slot { background: transparent; border-radius: 2px; transition: background 0.1s; }
.rd-slot-row { min-height: 4px; margin: 1px 0; }
.rd-slot-col { align-self: stretch; min-width: 4px; }
body.rd-dragging .rd-slot-row { min-height: 16px; background: var(--surface-2); }
body.rd-dragging .rd-slot-col { min-width: 16px; background: var(--surface-2); }
/* EDITABLE solo rows are flex like multi-element rows: (a) chips hug their content — a block .rd-rowsolo
   stretched a lone favicon's chip (and its cloned drag GHOST) to the full card width, burying the drop bands
   under a giant slab and making the selection outline read as full-width; (b) col slots get real height — as
   block children they were 0-tall and UNHITTABLE, so "drop beside a lone element" was silently impossible.
   Context cards keep the true block rendering (fidelity); the editable card trades exact solo-row geometry for
   a manipulable surface. */
.rd-editable .rd-rowsolo { display: flex; flex-wrap: wrap; align-items: baseline; }
body.rd-dragging .rd-rowsolo { display: flex; align-items: center; }
/* During a drag, SOLO text chips flex from basis 0 so the row's start/end col slots share their line — with the
   natural (max-content) basis, flex line-breaking exiled those slots to their own wrapped lines as invisible
   slivers (owner: "the excerpt's start/end dropzones don't appear unless the favicon is already there"). Atoms
   (favicon/date/number) stay content-sized. */
body.rd-dragging .rd-rowsolo > .rd-chip:has(> .result-title), body.rd-dragging .rd-rowsolo > .rd-chip:has(> .result-desc),
body.rd-dragging .rd-rowsolo > .rd-chip:has(> .result-url), body.rd-dragging .rd-rowsolo > .rd-chip:has(> .result-sitelinks) {
    flex: 1 1 0; min-width: 0;
}
.rd-slot.rd-slot-active { background: var(--brand) !important; }
.rd-ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: 0.85; transform: translate(-50%, -50%); box-shadow: var(--shadow); background: var(--surface); border: 1px solid var(--brand); border-radius: var(--radius-sm); padding: 0.15rem 0.35rem; }
/* Multi-select: the drag ghost's count badge, dimmed origin chips, and the panel's mixed-value affordances. */
.rd-ghost-count { position: absolute; top: -0.5rem; inset-inline-end: -0.5rem; min-width: 1.1rem; text-align: center;
    background: var(--brand); color: var(--brand-contrast, #fff); border-radius: var(--radius-pill, 999px);
    font-size: 0.7rem; font-weight: 600; padding: 0 0.35rem; }
.rd-chip.rd-drag-src { opacity: 0.35; }
.rd-mixed-tag { font-size: 0.68rem; color: var(--text-muted); border: 1px dashed var(--border-strong);
    border-radius: var(--radius-pill, 999px); padding: 0 0.3rem; margin-inline-start: 0.3rem; }
.rd-toggle.mixed { border-style: dashed; color: var(--text); }
.rd-panel-sub { margin: -0.3rem 0 0.5rem; font-size: 0.8rem; }

.rd-tray-head { font-size: 0.72rem; margin: 0.9rem 0 0.35rem; }
.rd-tray { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rd-tray-chip { font-size: 0.8rem; cursor: grab; touch-action: none; color: var(--text); background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-pill); padding: 0.25rem 0.7rem; }
.rd-tray-chip:hover { border-color: var(--brand); color: var(--brand-strong); }
.rd-tray-chip:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 1px; }

.rd-panel-hint { margin: 0; font-size: 0.82rem; }
.rd-panel-head { font-weight: 600; font-size: 0.95rem; }
.rd-field { display: flex; flex-direction: column; gap: 0.25rem; }
.rd-field-label { font-size: 0.72rem; color: var(--text-muted); }
.rd-seg { display: inline-flex; flex-wrap: wrap; gap: 0.15rem; padding: 0.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.rd-seg-opt { min-width: 0; cursor: pointer; font-size: 0.78rem; color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-pill); padding: 0.2rem 0.55rem; }
.rd-seg-opt:hover { color: var(--text); }
.rd-seg-opt.active { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.rd-seg-opt:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 1px; }
.rd-toggle { align-self: flex-start; font-size: 0.78rem; cursor: pointer; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.25rem 0.7rem; }
.rd-toggle.active { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rd-moves { display: flex; gap: 0.25rem; }
.rd-move { flex: 1 1 0; cursor: pointer; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.25rem 0; }
.rd-move:hover { color: var(--text); border-color: var(--border-strong); }
.rd-hide { align-self: flex-start; font-size: 0.8rem; cursor: pointer; color: var(--danger); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0.25rem 0.5rem; }
.rd-hide:hover { text-decoration: underline; }

.rd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.25rem; }
.rd-status { font-size: 0.85rem; color: var(--success); opacity: 0; transition: opacity 0.2s; }
.rd-status.rd-status-show { opacity: 1; }

/* Saved designs + built-in gallery strips (server-rendered, below the editor; work without JS). */
.rd-designs, .rd-gallery { margin-top: 2rem; }
.rd-strip-head { font-size: 1rem; margin: 0 0 0.75rem; }
/* The preset gallery is a native <details>, collapsed by default (rendered only when presets exist). The summary
   wears the strip heading's look; the native marker is the affordance. */
.rd-gallery > summary { cursor: pointer; }
.rd-gallery > summary.rd-strip-head { margin-bottom: 0.75rem; }
.rd-embed { min-width: 0; }
.rd-design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: 1rem; }
.rd-design-card { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--surface, var(--bg)); }
.rd-design-card.is-active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.rd-mini { max-height: 8rem; overflow: hidden; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 0.4rem; background: var(--bg); font-size: 0.72rem; line-height: 1.3; pointer-events: none; }
.rd-mini .result-item { margin: 0; }
.rd-mini .result-card-tools { display: none; }   /* the ⋮ kebab isn't part of a design preview */
.rd-mini .result-favicon { width: 14px; height: 14px; }
.rd-design-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; min-width: 0; font-weight: 600; color: var(--text); }
.rd-design-name > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.rd-active-badge { padding: 0 0.3rem; border: 1px solid var(--brand); border-radius: 0.3rem; font-size: 0.7rem; font-weight: 500; color: var(--brand); }
.rd-design-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.rd-design-actions form { display: inline; margin: 0; }

/* header theme cycle (marketing chrome; anonymous-visible) */
.app-header .theme-cycle { margin-inline-start: auto; font-size: 1rem; line-height: 1; padding: 0.35rem 0.55rem; }
.app-header .theme-cycle + .nav-disclosure { margin-inline-start: 0.25rem; }

/* ═══ Signup — the membership desk ═══
   Two columns at ≥56em (the form does the work; a quiet value rail says why), single column below.
   Signature: a slim aurora edge across the card's top — the landing pulse's colors, whispered. */
.signup-shell { align-items: flex-start; gap: clamp(2rem, 5vw, 3.5rem); }
/* The GREET state (no value rail): one card, vertically centered in the viewport on every form factor,
   with a roomier internal rhythm than the working signup form. */
.signup-shell:not(.has-aside) { min-height: 72dvh; align-items: center; }
.signup-shell:not(.has-aside) .auth-card--signup { padding: 2.5rem 2.25rem; }
.signup-shell:not(.has-aside) h1 { margin: 0 0 0.75rem; }
.signedin-as { margin-bottom: 1.75rem; }
.signedin-avatar { margin-bottom: 1.4rem; }
.signedin-actions { gap: 0.75rem; }
.signedin-switch { margin-top: 1.25rem; }
.signup-shell.has-aside { display: flex; flex-wrap: wrap; justify-content: center; }
.auth-card--signup { position: relative; overflow: hidden; }
.auth-card--signup::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
    background: linear-gradient(90deg, var(--brand), #7ad0ff 35%, #b48bff 70%, var(--brand));
    background-size: 220% 100%; animation: signup-aurora 9s linear infinite; }
@keyframes signup-aurora { from { background-position: 0% 0; } to { background-position: 220% 0; } }
.signup-step { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.9rem; font-size: 0.8125rem; color: var(--text-muted); }
.signup-step-badge { flex: none; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
    border-radius: var(--radius-pill, 999px); padding: 0.1rem 0.55rem;
    background: color-mix(in srgb, var(--brand) 8%, transparent); white-space: nowrap; }
.signup-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
.signup-cta-lock { width: 1.05em; height: 1.05em; flex: none; }
.signup-trust { display: flex; flex-direction: column; gap: 0.2rem; text-align: center; margin-top: 0.8rem;
    font-size: 0.8125rem; color: var(--text-muted); }
.signup-stripe { font-size: 0.75rem; color: var(--text-subtle); }
.signup-aside { flex: 0 1 19rem; min-width: 15rem; padding-block-start: 0.5rem; }
.signup-aside-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted); margin: 0 0 0.7rem; }
.signup-aside-title + .signup-aside-title, .signup-how { margin-top: 0; }
.signup-value-list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.signup-value-list li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.9rem; color: var(--text); }
.signup-value-list .check { color: var(--success); flex: none; }
.signup-how { margin: 0; padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: 0.45rem;
    font-size: 0.9rem; color: var(--text-muted); }
.signup-how li::marker { color: var(--brand); font-weight: 700; }
.signedin-avatar { width: 3rem; height: 3rem; margin-inline: auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.2rem; color: var(--brand-strong, var(--brand));
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); margin-bottom: 0.9rem; }
.signedin-as { overflow-wrap: anywhere; }
@media (max-width: 56em) { .signup-aside { flex-basis: 100%; max-width: 420px; } }
@media (prefers-reduced-motion: reduce) { .auth-card--signup::before { animation: none; } }

/* Settings > Search — the Default display mode pushbuttons (the results toolbar's language, radio-backed
   so the plain form post works without JS; the check state mirrors .view-opt.active). */
.vm-seg { justify-content: flex-start; }
.vm-opt { cursor: pointer; }
.vm-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vm-opt:has(input:checked) { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--text); border-color: var(--brand); }
.vm-opt:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }