/* ============================================================================
   VARIANT B — "horizon" (ui-variants iter-01, 2026-08-27)
   ----------------------------------------------------------------------------
   Ad-campaign preview look inspired by horizon.trade: Geologica geometric
   sans, royal-blue accent system (#2157ef / #1f47cc→#5189ff gradient CTAs),
   blue-tinted white surfaces in light mode, deep navy (#000c23 / #0a1b3d) in
   dark mode, 12px cards, 999px pill CTAs, and a scrolling marketing landing
   (stats band → how-it-works → feature cards → CTA band) appended to the
   empty-chat hero by core/templates/core/_variant_horizon_landing.html.

   Every rule scopes under html[data-ui-variant="horizon"]. Since the owner's
   2026-09-02 order horizon is the SITE DEFAULT: every visitor's DOM carries
   the stamp unless a gated account picked another look or the
   UI_VARIANT_SITE_DEFAULT row rolled the site back (core/utils/ui_variants.py).

   Mechanism: the THEME-30 landing reads all its color from --hero-* tokens
   and reports read the --tz- and --rr- token sets — so the bulk of the
   re-skin is a token remap (accent green → royal blue), then component
   overrides for the rest. NOTE: never write a star-slash sequence inside
   these comments (e.g. a glob like "--tz-* / --rr-*" written without the
   space) — it terminates the comment early and the parser then eats the
   next rule; that exact bug shipped in iter-01 and silently killed the
   whole token block below (probe: styleSheets rule count + tokFound).
   type, radii and gradients. Specificity note: definitions live on
   html[data-ui-variant="horizon"] (0,1,1) to beat :root (0,1,0), and dark
   values on html[data-ui-variant="horizon"][data-theme="dark"] (0,2,1) to
   beat the page's [data-theme="dark"] blocks.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
html[data-ui-variant="horizon"] {
    /* horizon primitives */
    --hz-blue: #2157ef;
    --hz-blue-deep: #1f47cc;
    --hz-blue-bright: #3d77ff;
    --hz-blue-light: #5189ff;
    --hz-navy: #0a1b3d;
    --hz-navy-deep: #000c23;
    --hz-grad-cta: linear-gradient(105deg, #1f47cc, #2c61ef 44%, #3d77ff 80%, #5189ff);
    --hz-grad-hero: linear-gradient(180deg, #0054f8, #000c23);
    --hz-radius: 12px;
    --hz-font: 'Geologica', 'Inter', ui-sans-serif, system-ui, sans-serif;

    /* THEME-30 hero token remap — LIGHT (blue-white, horizon's default) */
    --hero-bg: #f6f8ff;
    --hero-bg-2: #ffffff;
    --hero-ink: #0c1a3a;
    --hero-ink-dim: #46536e;
    --hero-ink-faint: #7c88a6;
    --hero-line: #e3e8f6;
    --hero-line-2: #d4dcf0;
    --hero-green: #2157ef;          /* the accent: green → royal blue */
    --hero-green-dim: #1f47cc;
    --hero-green-glow: rgba(33, 87, 239, 0.16);
    --hero-red: #d71014;
    --hero-amber: #2989e2;          /* eyebrow dot */
    --hero-brand-blue: #2157ef;

    /* report/ink tokens (research + report shells; --rr-* aliases these) */
    --tz-bg: #f6f8ff;
    --tz-bg-subtle: #eef2fd;
    --tz-bg-accent: #e7edff;
    --tz-text-primary: #0c1a3a;
    --tz-text-muted: #46536e;
    --tz-danger: #d71014;
    --tz-text-accent: #1f47cc;
    --tz-border-subtle: #dfe6f7;
    --tz-border-accent: #b9c8f5;
    --brand-green-aa: #1f47cc;      /* the AA accent pair goes blue too */
    --brand-blue-aa: #1f47cc;
    --tz-brand-green: #2157ef;
    --tz-brand-blue: #5189ff;
}
html[data-ui-variant="horizon"][data-theme="dark"] {
    /* THEME-30 hero token remap — DARK (deep navy, horizon's hero band) */
    --hero-bg: #000c23;
    --hero-bg-2: #0a1b3d;
    --hero-ink: #eaf0ff;
    --hero-ink-dim: #9fb0d8;
    --hero-ink-faint: #5b6b86;
    --hero-line: #16294f;
    --hero-line-2: #24375f;
    --hero-green: #3d77ff;
    --hero-green-dim: #2c61ef;
    --hero-green-glow: rgba(61, 119, 255, 0.26);
    --hero-red: #ff6b6b;
    --hero-amber: #60a5fa;
    --hero-brand-blue: #5189ff;

    --tz-bg: #061024;
    --tz-bg-subtle: #0a1b3d;
    --tz-bg-accent: #10254d;
    --tz-text-primary: #e8eeff;
    --tz-text-muted: #9fb0d8;
    --tz-danger: #ff6b6b;
    --tz-text-accent: #7ba3ff;
    --tz-border-subtle: #1c3059;
    --tz-border-accent: #2c477e;
    --brand-green-aa: #60a5fa;
    --brand-blue-aa: #60a5fa;
    --tz-brand-green: #5189ff;
    --tz-brand-blue: #8fb3ff;
}

/* ------------------------------------------------------------ typography */
html[data-ui-variant="horizon"] body {
    font-family: var(--hz-font);
}
html[data-ui-variant="horizon"] body.is-empty-chat {
    font-family: var(--hz-font);
}
/* Brand wordmark: the two spans carry inline green/blue — repaint blue/navy. */
html[data-ui-variant="horizon"] .brand-name span:first-child { color: var(--hz-blue) !important; }
html[data-ui-variant="horizon"] .brand-name span:last-child { color: var(--hero-ink) !important; }
html[data-ui-variant="horizon"] .hero-nav-brand {
    font-family: var(--hz-font);
    background: linear-gradient(90deg, var(--hz-blue) 0%, var(--hz-blue-light) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Statement: Fraunces serif → bold Geologica, tighter, smaller ceiling. */
html[data-ui-variant="horizon"] .hero-statement {
    font-family: var(--hz-font);
    font-weight: 600;
    font-size: clamp(40px, 6.2vw, 92px);
    line-height: 1.05;
    letter-spacing: -0.025em;
}
html[data-ui-variant="horizon"] .hero-statement em {
    font-style: normal;
    font-weight: 600;
    color: var(--hero-green);
}
html[data-ui-variant="horizon"] .hero-eyebrow {
    font-family: var(--hz-font);
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--hz-blue);
    border-color: transparent;
    background: rgba(33, 87, 239, 0.09);
}
html[data-ui-variant="horizon"][data-theme="dark"] .hero-eyebrow {
    color: #8fb3ff;
    background: rgba(61, 119, 255, 0.14);
}
html[data-ui-variant="horizon"] .hero-eyebrow .dot { background: var(--hz-blue-bright); }
html[data-ui-variant="horizon"] .hero-compose-prompt { font-family: var(--hz-font); font-weight: 300; }

/* --------------------------------------------------- landing page layout */
/* The hero becomes the first screen of a scrolling marketing page: top-
   aligned column, marketing sections (.hzn-landing) flow after the
   disclaimer inside the same .hero-empty scroll container. flex-start is
   load-bearing — centered/flex-end flex containers clip overflowing
   content at the unreachable end once the marketing sections make the
   column taller than the viewport. */
html[data-ui-variant="horizon"] body.is-empty-chat .hero-empty {
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: 0;
    scroll-behavior: smooth;
}
html[data-ui-variant="horizon"] body.is-empty-chat .hero-eyebrow {
    margin-top: clamp(40px, 12vh, 120px);
}
html[data-ui-variant="horizon"] body.is-tall-statement.is-empty-chat:not(.is-composing) .hero-eyebrow {
    margin-top: clamp(40px, 12vh, 120px);
}
/* Composing state: keep the column top-anchored and put the prompt back in
   flow (control absolutely centers it over what is now scrollable content). */
html[data-ui-variant="horizon"] body.is-empty-chat.is-composing .hero-empty {
    justify-content: flex-start;
}
/* Composing only — in phase 1 the prompt is opacity-0 absolute (control)
   and must stay out of flow, or it opens a dead gap between statement and
   pill (shipped bug, caught in the iter-02 screenshot pass). */
html[data-ui-variant="horizon"] body.is-empty-chat.is-composing .hero-compose-prompt {
    position: static;
    left: auto; top: auto;
    translate: none;
    margin: clamp(48px, 14vh, 140px) auto 6px;
}
/* Composing is a focused screen: the marketing sections (and their scroll
   cue) stay out of it, or they crowd in right under the composer and fight
   the settings popup (owner-reported overlap, popup sweep 2026-08-28). */
html[data-ui-variant="horizon"] body.is-empty-chat.is-composing .hzn-landing { display: none; }
/* Horizon is a clean corporate surface: drop the grid lines + green glows,
   glow blue instead; retire the bottom ticker marquee (it overlays the
   scrolling marketing sections). */
html[data-ui-variant="horizon"] .hero-grid-lines { display: none !important; }
html[data-ui-variant="horizon"] .hero-ticker { display: none !important; }
html[data-ui-variant="horizon"] .hero-ambient {
    background:
        radial-gradient(1100px 620px at 50% -12%, rgba(33, 87, 239, 0.14), transparent 62%),
        radial-gradient(820px 540px at 88% 108%, rgba(81, 137, 255, 0.10), transparent 60%);
    opacity: 1;
}
html[data-ui-variant="horizon"][data-theme="dark"] .hero-ambient {
    background:
        radial-gradient(1100px 620px at 50% -12%, rgba(0, 84, 248, 0.28), transparent 62%),
        radial-gradient(820px 540px at 88% 108%, rgba(33, 87, 239, 0.16), transparent 60%);
}

/* Top nav: white glass bar (light) / navy glass (dark), blue pill CTA. */
html[data-ui-variant="horizon"] .hero-nav {
    background: rgba(255, 255, 255, 0.72);
    border-bottom-color: var(--hero-line);
}
html[data-ui-variant="horizon"][data-theme="dark"] .hero-nav {
    background: rgba(0, 12, 35, 0.72);
}
html[data-ui-variant="horizon"] .hero-nav-links a.active { color: var(--hz-blue); }
html[data-ui-variant="horizon"][data-theme="dark"] .hero-nav-links a.active { color: #8fb3ff; }
html[data-ui-variant="horizon"] .hero-nav-links a.active::after { background: var(--hero-green); }
html[data-ui-variant="horizon"] .hero-nav-right a.signup {
    background: var(--hz-grad-cta);
    color: #ffffff !important;
    font-family: var(--hz-font);
    box-shadow: 0 8px 20px -10px rgba(33, 87, 239, 0.55);
}
html[data-ui-variant="horizon"] .hero-nav-right a.signup:hover {
    box-shadow: 0 0 0 4px var(--hero-green-glow), 0 10px 24px -10px rgba(33, 87, 239, 0.6);
}

/* Composer: white card, blue focus ring, blue arrow — light in both themes
   is deliberate: horizon.trade floats a white input on its navy hero. */
html[data-ui-variant="horizon"] body.is-empty-chat #idea-form {
    background: #ffffff !important;
    border-color: #d4dcf0 !important;
    box-shadow: 0 24px 70px -28px rgba(10, 27, 61, 0.35), 0 2px 8px rgba(10, 27, 61, 0.06);
}
html[data-ui-variant="horizon"][data-theme="dark"] body.is-empty-chat #idea-form {
    background: #0e2148 !important;
    border-color: #2c477e !important;
    box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(143, 179, 255, 0.08);
}
html[data-ui-variant="horizon"] body.is-empty-chat #idea-form:hover {
    border-color: rgba(33, 87, 239, 0.45) !important;
}
html[data-ui-variant="horizon"] body.is-empty-chat.is-composing #idea-form {
    border-color: var(--hz-blue) !important;
    box-shadow:
        0 0 0 1px rgba(33, 87, 239, 0.18),
        0 0 0 6px var(--hero-green-glow),
        0 30px 80px -24px rgba(10, 27, 61, 0.4);
}
html[data-ui-variant="horizon"] body.is-empty-chat #idea-form .hero-pill-input {
    font-family: var(--hz-font);
    color: #0c1a3a;
}
html[data-ui-variant="horizon"][data-theme="dark"] body.is-empty-chat #idea-form .hero-pill-input { color: #eaf0ff; }
html[data-ui-variant="horizon"] .hero-pill-shell .hero-pill-arrow {
    background: var(--hz-grad-cta);
    color: #ffffff;
}
html[data-ui-variant="horizon"] body.is-empty-chat.is-composing #idea-form > textarea {
    font-family: var(--hz-font) !important;
    font-weight: 300;
    color: #0c1a3a !important;
    caret-color: var(--hz-blue);
}
/* Submit buttons: the control ships literal teal→green gradients with
   !important from the in-body THEME-30 style block, which loads AFTER this
   stylesheet — so these must win on specificity (extra html[attr] + element),
   not source order. */
html[data-ui-variant="horizon"] body.is-empty-chat.is-composing #idea-form > #submitBtnWrap > button,
html[data-ui-variant="horizon"] body:not(.is-empty-chat) #idea-form:not(.collapsed) > #submitBtnWrap > button {
    background: var(--hz-grad-cta) !important;
    color: #ffffff !important;
}
html[data-ui-variant="horizon"] body.is-empty-chat.is-composing #idea-form > #submitBtnWrap > button:hover,
html[data-ui-variant="horizon"] body:not(.is-empty-chat) #idea-form:not(.collapsed) > #submitBtnWrap > button:hover {
    box-shadow: 0 0 0 4px rgba(33, 87, 239, 0.16) !important;
}
/* The submit button's ambient conic glow mixes green + violet in control —
   recolor to the blue family so no foreign hue leaks into this variant. */
html[data-ui-variant="horizon"] .gemini-btn-wrap::before {
    background: conic-gradient(from 0deg, #1f47cc, #3d77ff, #5189ff, #2c61ef, #1f47cc);
}
html[data-ui-variant="horizon"][data-theme="dark"] body.is-empty-chat.is-composing #idea-form > textarea {
    color: #eaf0ff !important;
}

/* -------------------------------------------------- marketing sections */
html[data-ui-variant="horizon"] .hzn-landing {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 8px 72px;
    text-align: left;
    position: relative;
    z-index: 1;
}
html[data-ui-variant="horizon"] .hzn-scroll-cue {
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hero-ink-faint);
    margin: clamp(28px, 7vh, 72px) 0 10px;
    animation: hznCueFloat 2.4s ease-in-out infinite;
}
@keyframes hznCueFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}
html[data-ui-variant="horizon"] .hzn-band { margin-top: clamp(56px, 10vh, 110px); }
html[data-ui-variant="horizon"] .hzn-h2 {
    font-family: var(--hz-font);
    font-weight: 600;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--hero-ink);
    margin: 0 0 10px;
    text-align: center;
    text-wrap: balance;
}
html[data-ui-variant="horizon"] .hzn-sub {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--hero-ink-dim);
    margin: 0 auto 34px;
    max-width: 560px;
    text-align: center;
    text-wrap: balance;
}

/* Stats band */
html[data-ui-variant="horizon"] .hzn-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 22px 0;
    border-top: 1px solid var(--hero-line);
    border-bottom: 1px solid var(--hero-line);
}
html[data-ui-variant="horizon"] .hzn-stat { text-align: center; padding: 10px 12px; }
html[data-ui-variant="horizon"] .hzn-stat-num {
    display: block;
    font-family: var(--hz-font);
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 34px);
    letter-spacing: -0.02em;
    color: var(--hz-blue);
}
html[data-ui-variant="horizon"][data-theme="dark"] .hzn-stat-num { color: #8fb3ff; }
html[data-ui-variant="horizon"] .hzn-stat-label {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--hero-ink-dim);
}

/* How-it-works steps */
html[data-ui-variant="horizon"] .hzn-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
html[data-ui-variant="horizon"] .hzn-step {
    background: var(--hero-bg-2);
    border: 1px solid var(--hero-line);
    border-radius: var(--hz-radius);
    padding: 26px 24px;
    box-shadow: 0 14px 40px -30px rgba(10, 27, 61, 0.35);
}
html[data-ui-variant="horizon"] .hzn-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 999px;
    background: var(--hz-grad-cta);
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 14px;
}
html[data-ui-variant="horizon"] .hzn-step h3,
html[data-ui-variant="horizon"] .hzn-feature h3 {
    font-family: var(--hz-font);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--hero-ink);
    margin: 0 0 8px;
}
html[data-ui-variant="horizon"] .hzn-step p,
html[data-ui-variant="horizon"] .hzn-feature p {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--hero-ink-dim);
    margin: 0;
}
html[data-ui-variant="horizon"] .hzn-step p em {
    font-style: italic;
    color: var(--hero-ink);
}

/* Feature cards */
html[data-ui-variant="horizon"] .hzn-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
html[data-ui-variant="horizon"] .hzn-feature {
    position: relative;
    background: var(--hero-bg-2);
    border: 1px solid var(--hero-line);
    border-radius: var(--hz-radius);
    padding: 26px 24px 24px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .25s, transform .25s;
}
html[data-ui-variant="horizon"] .hzn-feature::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(99, 102, 241, 0.04));
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
html[data-ui-variant="horizon"] .hzn-feature:hover {
    border-color: rgba(33, 87, 239, 0.4);
    box-shadow: 0 18px 44px -26px rgba(33, 87, 239, 0.45);
    transform: translateY(-2px);
}
html[data-ui-variant="horizon"] .hzn-feature:hover::before { opacity: 1; }
html[data-ui-variant="horizon"] .hzn-feature-dot {
    display: inline-flex;
    width: 10px; height: 10px;
    border-radius: 3px;
    background: var(--hz-grad-cta);
    margin-bottom: 14px;
}
html[data-ui-variant="horizon"] .hzn-feature-metric {
    font-family: var(--hz-font);
    font-weight: 500;
    font-size: 12.5px;
    color: var(--hz-blue);
    background: rgba(33, 87, 239, 0.08);
    border-radius: 999px;
    padding: 3px 10px;
    display: inline-block;
    margin-top: 14px;
}
html[data-ui-variant="horizon"][data-theme="dark"] .hzn-feature-metric {
    color: #8fb3ff;
    background: rgba(61, 119, 255, 0.14);
}

/* CTA band — horizon's signature blue→navy gradient card */
html[data-ui-variant="horizon"] .hzn-cta-card {
    background: var(--hz-grad-hero);
    border-radius: 20px;
    padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 56px);
    text-align: center;
    box-shadow: 0 30px 80px -30px rgba(0, 30, 90, 0.55);
}
html[data-ui-variant="horizon"] .hzn-cta-card .hzn-h2 { color: #ffffff; }
html[data-ui-variant="horizon"] .hzn-cta-card .hzn-sub { color: #c4d3f5; margin-bottom: 26px; }
html[data-ui-variant="horizon"] .hzn-cta-btn {
    font-family: var(--hz-font);
    font-weight: 500;
    font-size: 15.5px;
    color: #0c1a3a;
    background: #ffffff;
    border: 0;
    border-radius: 999px;
    padding: 14px 30px;
    cursor: pointer;
    transition: transform .15s, box-shadow .25s;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
}
html[data-ui-variant="horizon"] .hzn-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18), 0 14px 34px -12px rgba(0, 0, 0, 0.5);
}
html[data-ui-variant="horizon"] .hzn-cta-ghost {
    display: inline-block;
    margin-left: 16px;
    font-size: 14.5px;
    color: #dbe6ff;
    text-decoration: none;
    border-bottom: 1px solid rgba(219, 230, 255, 0.4);
    padding-bottom: 2px;
    transition: color .2s, border-color .2s;
}
html[data-ui-variant="horizon"] .hzn-cta-ghost:hover { color: #ffffff; border-color: #ffffff; }
html[data-ui-variant="horizon"] .hzn-fineprint {
    margin: 34px auto 0;
    max-width: 640px;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--hero-ink-faint);
}

/* ------------------------------------------------------ dashboard chrome */
/* In-conversation and inner pages: same palette carried through. */
html[data-ui-variant="horizon"] body { background: var(--tz-bg); }
html[data-ui-variant="horizon"] .header {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--tz-border-subtle);
}
html[data-ui-variant="horizon"][data-theme="dark"] .header {
    background: rgba(6, 16, 36, 0.85);
    border-bottom: 1px solid var(--tz-border-subtle);
}
html[data-ui-variant="horizon"] .desktop-nav a { color: var(--tz-text-muted); }
html[data-ui-variant="horizon"] .desktop-nav a:hover,
html[data-ui-variant="horizon"] .desktop-nav a.nav-active { color: var(--hz-blue); }
html[data-ui-variant="horizon"][data-theme="dark"] .desktop-nav a:hover,
html[data-ui-variant="horizon"][data-theme="dark"] .desktop-nav a.nav-active { color: #8fb3ff; }
html[data-ui-variant="horizon"] .sidebar,
html[data-ui-variant="horizon"] #sidebar {
    background: var(--tz-bg-subtle);
    border-right: 1px solid var(--tz-border-subtle);
}
html[data-ui-variant="horizon"] .chat-window .message.user {
    background: var(--tz-bg-accent);
    border: 1px solid var(--tz-border-subtle);
    border-radius: var(--hz-radius);
    color: var(--tz-text-primary);
}
html[data-ui-variant="horizon"] .chat-window .message.bot {
    background: var(--hero-bg-2);
    border: 1px solid var(--tz-border-subtle);
    border-radius: var(--hz-radius);
    color: var(--tz-text-primary);
}
html[data-ui-variant="horizon"] body:not(.is-empty-chat) .input-bar {
    background: #ffffff;
    border: 1px solid #d4dcf0;
    border-radius: 16px;
}
html[data-ui-variant="horizon"][data-theme="dark"] body:not(.is-empty-chat) .input-bar {
    background: #0e2148;
    border-color: #2c477e;
}
html[data-ui-variant="horizon"] .input-bar:focus-within {
    border-color: var(--hz-blue);
    box-shadow: 0 0 0 3px rgba(33, 87, 239, 0.16), 0 2px 4px rgba(10, 27, 61, 0.06);
}
html[data-ui-variant="horizon"] .report-card,
html[data-ui-variant="horizon"] .research-report-card {
    border-radius: var(--hz-radius);
}
/* Generic card polish on profile/history/pricing/info pages. */
html[data-ui-variant="horizon"] .profile-card {
    border-radius: var(--hz-radius);
    border: 1px solid var(--tz-border-subtle);
}

/* Sidebar chrome: swap the hard-coded green accents for horizon blue. The
   edge-tab ships a doubled-class !important green in home.html — triple the
   class plus !important here (later source order) to out-rank it. */
html[data-ui-variant="horizon"] .sidebar-edge-tab.sidebar-edge-tab.sidebar-edge-tab,
html[data-ui-variant="horizon"] .sidebar-edge-tab.sidebar-edge-tab.sidebar-edge-tab:hover,
html[data-ui-variant="horizon"] .sidebar-edge-tab.sidebar-edge-tab.sidebar-edge-tab:active,
html[data-ui-variant="horizon"] .sidebar-edge-tab.sidebar-edge-tab.sidebar-edge-tab:focus,
html[data-ui-variant="horizon"] .sidebar-edge-tab.sidebar-edge-tab.sidebar-edge-tab:focus-visible {
    background: rgba(33, 87, 239, 0.14) !important;
    color: #2c61ef !important;
    border-color: rgba(33, 87, 239, 0.45) !important;
}
html[data-ui-variant="horizon"][data-theme="dark"] .sidebar-edge-tab.sidebar-edge-tab.sidebar-edge-tab,
html[data-ui-variant="horizon"][data-theme="dark"] .sidebar-edge-tab.sidebar-edge-tab.sidebar-edge-tab:hover,
html[data-ui-variant="horizon"][data-theme="dark"] .sidebar-edge-tab.sidebar-edge-tab.sidebar-edge-tab:active,
html[data-ui-variant="horizon"][data-theme="dark"] .sidebar-edge-tab.sidebar-edge-tab.sidebar-edge-tab:focus,
html[data-ui-variant="horizon"][data-theme="dark"] .sidebar-edge-tab.sidebar-edge-tab.sidebar-edge-tab:focus-visible {
    background: rgba(61, 119, 255, 0.2) !important;
    color: #8fb3ff !important;
    border-color: rgba(81, 137, 255, 0.5) !important;
}
html[data-ui-variant="horizon"] .sidebar-new-chat-icon { color: var(--hz-blue) !important; }
html[data-ui-variant="horizon"] .sidebar-profile-avatar {
    background: var(--hz-grad-cta) !important;
    color: #ffffff !important;
}
html[data-ui-variant="horizon"] .sidebar-anon-cta-primary {
    background: var(--hz-grad-cta) !important;
    color: #ffffff !important;
    border-radius: 999px;
}
html[data-ui-variant="horizon"] .sidebar-profile-tier { color: var(--hz-blue) !important; }
html[data-ui-variant="horizon"][data-theme="dark"] .sidebar-profile-tier,
html[data-ui-variant="horizon"][data-theme="dark"] .sidebar-new-chat-icon { color: #8fb3ff !important; }

/* ------------------------------------------------------- mobile v8 shell */
/* When this variant is active, the React app's sx() helper rewrites its
   core palette literals to var(--m-<controlhex>, <controlhex>) — see
   core/static/core/mobile/src/util.js. Defining the tokens here re-skins
   the whole app; keys name the CONTROL hex, values are horizon's navy set
   (the app is dark-locked, so these are dark values). Public users never
   get the attribute, never the rewrite, never these tokens. */
html[data-ui-variant="horizon"] {
    --m-07090a: #000c23;
    --m-0c1210: #0a1b3d;
    --m-0a100f: #0e2148;
    --m-04130c: #061024;
    --m-0c1911: #10254d;
    --m-edf5f0: #eaf0ff;
    --m-c4d2cb: #c7d4f2;
    --m-8b9a92: #9fb0d8;
    --m-5a6862: #5b6b86;
    --m-4a5650: #4a5a86;
    --m-39433e: #24375f;
    --m-5ee2a0: #3d77ff;
    --m-0fa968: #2c61ef;
    --m-2bde8e: #5189ff;
    --m-ff7676: #ff6b6b;
    --m-f6c177: #60a5fa;
    --m-3a8aff: #5189ff;
    --m-25d989: #5189ff;
}
html[data-ui-variant="horizon"] #tzm-root { background: #000c23; }
html[data-ui-variant="horizon"] #tzm-ssr h2 { color: #5189ff; }
html[data-ui-variant="horizon"] #tzm-ssr .step .n { background: rgba(61, 119, 255, 0.14); color: #5189ff; }
html[data-ui-variant="horizon"] #tzm-ssr .lede { color: #9fb0d8; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
    html[data-ui-variant="horizon"] .hzn-features-grid { grid-template-columns: 1fr; }
    html[data-ui-variant="horizon"] .hzn-steps-grid { grid-template-columns: 1fr; }
    html[data-ui-variant="horizon"] .hzn-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
    html[data-ui-variant="horizon"] body.is-empty-chat .hero-empty {
        padding-left: 18px;
        padding-right: 18px;
    }
    html[data-ui-variant="horizon"] .hzn-landing { padding-bottom: 96px; }
    html[data-ui-variant="horizon"] .hzn-cta-ghost { display: block; margin: 18px auto 0; width: fit-content; }
    html[data-ui-variant="horizon"] .hero-statement { font-size: clamp(34px, 9.4vw, 56px); }
}
@media (max-width: 480px) {
    html[data-ui-variant="horizon"] .hzn-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
    html[data-ui-variant="horizon"] .hzn-stat { padding: 8px 4px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-ui-variant="horizon"] .hzn-scroll-cue { animation: none; }
    html[data-ui-variant="horizon"] .hzn-feature,
    html[data-ui-variant="horizon"] .hzn-cta-btn { transition: none; }
}

/* --------------------------------------------------- report accent hooks */
/* research_report.js injects .research-report-card{--rr-accent:...} rules
   at runtime (lower specificity than these) — recolor per variant. */
html[data-ui-variant="horizon"] .research-report-card {
    --rr-accent: #1f47cc;
    --rr-accent-soft: rgba(33, 87, 239, 0.08);
    --rr-accent-rule: rgba(33, 87, 239, 0.45);
    --rr-inset: #eef2fd;
}
html[data-ui-variant="horizon"][data-theme="dark"] .research-report-card {
    --rr-accent: #5189ff;
    --rr-accent-soft: rgba(81, 137, 255, 0.08);
    --rr-accent-rule: rgba(81, 137, 255, 0.4);
    --rr-hero-glow: 0 0 42px rgba(81, 137, 255, 0.3);
    --rr-inset: #0a1626;
}

/* ------------------------------------------- pricing + history treatment */
html[data-ui-variant="horizon"] .card {
    background: var(--hero-bg-2);
    border-color: var(--tz-border-subtle);
    border-radius: 12px;
}
html[data-ui-variant="horizon"][data-theme="dark"] .card { background: #0a1b3d; border-color: #24375f; }
html[data-ui-variant="horizon"] .card .price { color: #1f47cc; }
html[data-ui-variant="horizon"][data-theme="dark"] .card .price { color: #8fb3ff; }
html[data-ui-variant="horizon"] .card button,
html[data-ui-variant="horizon"] .pricing-select-btn {
    background: var(--hz-grad-cta);
    border-radius: calc(12px / 2 + 3px);
}
html[data-ui-variant="horizon"] .card button:hover,
html[data-ui-variant="horizon"] .pricing-select-btn:hover { background: var(--hz-grad-cta); }
html[data-ui-variant="horizon"] td.popular-col { background: rgba(33, 87, 239, 0.08) !important; }
html[data-ui-variant="horizon"][data-theme="dark"] td.popular-col { background: rgba(61, 119, 255, 0.12) !important; }
html[data-ui-variant="horizon"] .history-card {
    background: var(--hero-bg-2);
    border-color: var(--tz-border-subtle);
    border-radius: 12px;
}
html[data-ui-variant="horizon"][data-theme="dark"] .history-card { background: #0a1b3d; border-color: #24375f; border-left-color: #24375f; }
html[data-ui-variant="horizon"][data-theme="dark"] .history-card.success { border-left-color: #5189ff; }
html[data-ui-variant="horizon"] .history-card.processing { border-left-color: #2989e2; }
html[data-ui-variant="horizon"][data-theme="dark"] .history-card.processing { border-left-color: #60a5fa; }

/* pricing stragglers: header cell tint, current-plan chips, subtitle strong */
html[data-ui-variant="horizon"] th.popular-col { background: rgba(33, 87, 239, 0.08) !important; }
html[data-ui-variant="horizon"][data-theme="dark"] th.popular-col { background: rgba(61, 119, 255, 0.12) !important; }
html[data-ui-variant="horizon"] .current-plan-tag, html[data-ui-variant="horizon"] .current-plan-inline-badge {
    background: rgba(33, 87, 239, 0.12) !important;
    color: #1f47cc !important;
    border-color: #1f47cc !important;
}
html[data-ui-variant="horizon"][data-theme="dark"] .current-plan-tag, html[data-ui-variant="horizon"][data-theme="dark"] .current-plan-inline-badge {
    background: rgba(61, 119, 255, 0.16) !important;
    color: #8fb3ff !important;
    border-color: #8fb3ff !important;
}
html[data-ui-variant="horizon"] .header-subtitle strong { color: #1f47cc !important; }
html[data-ui-variant="horizon"][data-theme="dark"] .header-subtitle strong { color: #8fb3ff !important; }

/* ------------------------------------------------- live mode page chrome */
/* Chrome accents only — BUY/SELL and P&L up/down greens are SEMANTIC and
   keep their control colors in every variant. */
html[data-ui-variant="horizon"] .live-title { color: #1f47cc; }
html[data-ui-variant="horizon"][data-theme="dark"] .live-title { color: #5189ff; }
html[data-ui-variant="horizon"] .upgrade strong { color: #1f47cc; }
html[data-ui-variant="horizon"][data-theme="dark"] .upgrade strong { color: #5189ff; }
html[data-ui-variant="horizon"] .upgrade button { background: var(--hz-grad-cta); }
html[data-ui-variant="horizon"] .step-number { background: rgba(33, 87, 239, 0.12); color: #1f47cc; }
html[data-ui-variant="horizon"][data-theme="dark"] .step-number { background: rgba(61, 119, 255, 0.12); color: #5189ff; }

/* --------------------------- coverage sweep: popups, loaders, status HUD */
/* Owner-reported gaps (2026-08-27): the composer settings popup, the
   response spinner, the gemini sparkle, and the backtest status HUD were
   still control-colored. The HUD reads :root tokens (hud/styles.css), so
   that part is a token remap; the popup + loaders are literal overrides. */
html[data-ui-variant="horizon"] #timeRangeMenu.settings-popup {
    background: #0a1b3d;
    border-color: #24375f;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(61, 119, 255, 0.09);
    color: #eaf0ff;
}
html[data-ui-variant="horizon"] .sp-dot { background: #3d77ff; box-shadow: 0 0 8px #3d77ff; }
html[data-ui-variant="horizon"] .sp-mode-pill.selected { background: #3d77ff; color: #ffffff; }
html[data-ui-variant="horizon"] .sp-tab.selected {
    border-bottom-color: #3d77ff;
    color: #3d77ff;
    background: rgba(61, 119, 255, 0.12);
}
html[data-ui-variant="horizon"] .sp-tab-badge { color: #60a5fa; }
html[data-ui-variant="horizon"] .sp-range-cell.selected,
html[data-ui-variant="horizon"] .sp-range-cell.selected:hover {
    background: rgba(61, 119, 255, 0.14);
    border-color: #3d77ff;
    color: #3d77ff;
}
html[data-ui-variant="horizon"] .sp-range-cell:hover:not(.disabled):not(.selected) { border-color: #3d77ff; }
html[data-ui-variant="horizon"] .reply-box .spinner { border-top-color: #1f47cc; }
html[data-ui-variant="horizon"][data-theme="dark"] .reply-box .spinner { border-top-color: #5189ff; }
html[data-ui-variant="horizon"] .gemini-shape {
    background: linear-gradient(135deg, #1f47cc, #2c61ef, #5189ff, #60a5fa);
    background-size: 400% 400%;
}
/* status HUD token remap (hud/styles.css defines these at :root) */
html[data-ui-variant="horizon"] {
    --mint: #3d77ff;
    --mint-soft: #2c61ef;
    --mint-dim: rgba(61, 119, 255, 0.18);
    --mint-glow: rgba(61, 119, 255, 0.55);
    --blue: #60a5fa;
}

/* popup sweep round 2: slider, readout, footer chips, apply CTA */
html[data-ui-variant="horizon"] .sp-range-slider-val { color: #3d77ff; }
html[data-ui-variant="horizon"] .sp-range-slider input[type="range"] { accent-color: #3d77ff; }
html[data-ui-variant="horizon"] .sp-chip { background: rgba(61, 119, 255, 0.14); color: #3d77ff; }
html[data-ui-variant="horizon"] .sp-cta { background: #3d77ff; color: #ffffff; }
html[data-ui-variant="horizon"] .sp-cta:hover { background: #3d77ff; filter: brightness(1.08); }

/* header quick links (Upgrade / Sign up) — conversation-state chrome */
html[data-ui-variant="horizon"] .header-links a { color: #2157ef; }
html[data-ui-variant="horizon"][data-theme="dark"] .header-links a { color: #8fb3ff; }

/* new-chat icon circle: control ships a mint-tinted disc behind the plus */
html[data-ui-variant="horizon"] .sidebar-new-chat-icon { background: var(--hero-green-glow) !important; }