/*
 * Visual v2, the layer for every marketing page that is not an entry page (docs/visual-v2.md): the SEO, guide, tool
 * and calculator pages, /pricing, /glossary and its terms, the blog, /reports, /learn-options-free, the legal pages,
 * the OPRA agreement and the 404 page. Loaded after /assets/visual-v2.css, which already carries the tokens, the
 * type, the buttons and the nav; this file points each template's own variables and hard-coded v1 colours at the
 * same tokens. Every rule is scoped under html[data-visual="v2"] (visualV2Css.spec.ts).
 */

/* ── Tokens: each template's own variable names, pointed at the v2 tokens (both themes follow, because the --v2-*
   values switch with html.dark in visual-v2.css). The base layer already maps --primary, --text, --muted, --card,
   --line and --gradient. ── */
html[data-visual="v2"] {
    --bg: var(--v2-bg);
    --surface: var(--v2-surface);
    --surface-soft: var(--v2-bg);
    --primary-strong: var(--v2-croc);
    --secondary: var(--v2-croc);
    --success: var(--v2-croc);
    --call: var(--v2-croc);
    --put: var(--v2-down);
    --payoff-up: var(--v2-croc);
    --payoff-down: var(--v2-down);
    --payoff-text: var(--v2-muted);
    --payoff-grid: var(--v2-line);
}

/* ── Buttons, the skip link and the eyebrow: flat croc green, small radius, no pill, no glow, no lift ── */
html[data-visual="v2"] .button { border-radius: var(--v2-radius); }
html[data-visual="v2"] .button:hover { transform: none; }
html[data-visual="v2"] .button-primary,
html[data-visual="v2"] .mid-article-cta .button {
    background: var(--v2-croc);
    color: var(--v2-on-croc);
    box-shadow: none;
}
html[data-visual="v2"] .button-primary:hover { filter: brightness(1.08); box-shadow: none; }
html[data-visual="v2"] .button-secondary { background: transparent; border: 1px solid var(--v2-line); color: var(--v2-text); }
html[data-visual="v2"] .button:focus-visible { outline: 2px solid var(--v2-text); outline-offset: 2px; }
html[data-visual="v2"] .skip-link { color: var(--v2-on-croc); border-radius: var(--v2-radius); }
html[data-visual="v2"] .eyebrow,
html[data-visual="v2"] .direct-answer-label {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--v2-croc);
    font-family: var(--v2-mono);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Surfaces: flat panels with a hairline, no stripes, no glow, no radial gradients ── */
html[data-visual="v2"] .hero { background: none; }
html[data-visual="v2"] .direct-answer,
html[data-visual="v2"] .in-article-cta,
html[data-visual="v2"] .mid-article-cta,
html[data-visual="v2"] .post-card,
html[data-visual="v2"] .calculator,
html[data-visual="v2"] details:not(.article-fold) {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    box-shadow: none;
}
html[data-visual="v2"] .formula-box {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
}
html[data-visual="v2"] .faq-section,
html[data-visual="v2"] .final-cta { background: var(--v2-bg); border-color: var(--v2-line); }
html[data-visual="v2"] .negative { color: var(--v2-down) !important; }
html[data-visual="v2"] .delay-note { color: var(--v2-text); }

/* ── Legal pages (legal-layout.html: /privacy, /terms) and the OPRA agreement: light by default, dark on the toggle ── */
html[data-visual="v2"] .legal-page .page-header,
html[data-visual="v2"] .legal-page .footer { border-color: var(--v2-line); }
html[data-visual="v2"] .legal-page .content {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
}
html[data-visual="v2"] .legal-page h3,
html[data-visual="v2"] .legal-page .info-box h4 { color: var(--v2-text); }
html[data-visual="v2"] .legal-page p,
html[data-visual="v2"] .legal-page ul,
html[data-visual="v2"] .legal-page ol,
html[data-visual="v2"] .legal-page .agreement-body,
html[data-visual="v2"] .legal-page .privacy-table td { color: var(--v2-muted); }
html[data-visual="v2"] .legal-page .last-updated,
html[data-visual="v2"] .legal-page .subtitle,
html[data-visual="v2"] .legal-page .footer,
html[data-visual="v2"] .legal-page .footer a,
html[data-visual="v2"] .legal-page .footer-link,
html[data-visual="v2"] .legal-page .footer-text { color: var(--v2-muted); }
html[data-visual="v2"] .legal-page .footer a:hover,
html[data-visual="v2"] .legal-page .footer-link:hover { color: var(--v2-croc); }
html[data-visual="v2"] .legal-page a[style*="color: var(--secondary)"] { color: var(--v2-croc) !important; }
html[data-visual="v2"] .legal-page .info-box,
html[data-visual="v2"] .legal-page .success-box,
html[data-visual="v2"] .legal-page .important-box {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
}
html[data-visual="v2"] .legal-page .important-box strong { color: var(--v2-down); }
html[data-visual="v2"] .legal-page .privacy-table th {
    background: var(--v2-bg);
    border-color: var(--v2-line);
    color: var(--v2-croc);
}
html[data-visual="v2"] .legal-page .privacy-table td { border-color: var(--v2-line); }
html[data-visual="v2"] .legal-page .privacy-table tr:hover { background: var(--v2-bg); }
html[data-visual="v2"] .legal-page .theme-toggle { color: var(--v2-muted); border-color: var(--v2-line); }
html[data-visual="v2"] .legal-page .theme-toggle:hover { color: var(--v2-croc); border-color: var(--v2-croc); }

/* ── The 404 page: the browser's default link blue becomes the brand green ── */
html[data-visual="v2"] .page-404 a { color: var(--v2-croc); }
html[data-visual="v2"] .in-article-cta a.button.button-primary,
html[data-visual="v2"] .in-article-cta a.button.button-primary:visited { color: var(--v2-on-croc); }
html[data-visual="v2"] .report-figures dd { color: var(--v2-text); font-family: var(--v2-mono); }
/* The in-article CTA's own <style> sits in <body>, after this file, so its light rule needs one more class to lose. */
html[data-visual="v2"] .in-article-cta-note,
html[data-visual="v2"]:not(.dark) .in-article-cta-note { color: var(--v2-muted); }
html[data-visual="v2"] .see-plans-link { color: var(--v2-croc); }

/* ── (2) No all-caps micro labels: sentence case, normal tracking. Table headers and the OCC symbol input keep theirs ── */
html[data-visual="v2"] .result-grid span,
html[data-visual="v2"] .sidebar h2,
html[data-visual="v2"] .footnotes .footnotes-label,
html[data-visual="v2"] .report-figures dt,
html[data-visual="v2"] .exp-badge {
    text-transform: none;
    letter-spacing: 0;
}
/* (3) The pricing test's "most popular" badge: a croc text label on the card's rule, not a pill */
html[data-visual="v2"] .exp-badge {
    border-radius: var(--v2-radius);
    border-color: var(--v2-line);
    background: var(--v2-bg);
    color: var(--v2-croc);
}
html[data-visual="v2"] .exp-highlight-featured { box-shadow: none; border-color: var(--v2-line); }
html[data-visual="v2"] .exp-trial-line { color: var(--v2-croc); }