/* Light theme, scoped to /guides/clipping-guide.html only.
   ----------------------------------------------------------------------
   Loaded by that one page and gated behind html[data-theme="light"], so it
   cannot affect any other page even if the file is linked by accident.
   Light is this page's default; the header toggle switches to the site's
   normal dark theme and the choice is remembered per browser.

   Accent policy (deliberate, see contrast notes):
     TEXT uses of the accent  -> --accent-color is redefined to #0a7040
                                 (5.87:1 on the page ground: WCAG AA).
     FILL uses of the accent  -> the brand neon #3dff99 is restored
                                 explicitly, always with --accent-ink on top
                                 (14.18:1). Those are the ordered-list
                                 markers and the CTA button.
   The neon is never used as text or as a hairline on the light ground.   */

html[data-theme="light"] {
    /* ── site tokens (styles.css) ────────────────────────────────────── */
    --bg-color: #f7faf8;
    --card-bg: rgba(255, 255, 255, 0.72);
    --card-hover-bg: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(13, 26, 20, 0.10);
    --glass-border-hover: rgba(10, 112, 64, 0.38);
    --accent-color: #0a7040;          /* text-safe green; fills re-neoned below */
    --accent-color-2: #06603a;
    --accent-glow: rgba(10, 112, 64, 0.16);
    --accent-ink: #04160d;
    --text-main: #0d1a14;
    --text-dim: #626f68;
    --text-dark: #8a9891;

    /* ── guide tokens (guide.css) ────────────────────────────────────── */
    --guide-text: #3d4b44;            /* body copy, 8.73:1 */
    --guide-muted: #626f68;           /* small labels, 5.0:1 */
    --guide-rule: rgba(13, 26, 20, 0.11);
    --guide-accent-soft: rgba(10, 112, 64, 0.075);
    --guide-accent-line: rgba(10, 112, 64, 0.24);

    /* the neon, kept for fills only */
    --brand-neon: #3dff99;

    color-scheme: light;
}

/* ── Page ground ─────────────────────────────────────────────────────── */

html[data-theme="light"] body {
    color: var(--text-main);
    background-color: var(--bg-color);
    background-image:
        radial-gradient(circle at 50% -20%, rgba(10, 112, 64, 0.055) 0%, transparent 50%),
        radial-gradient(circle at 0% 0%, rgba(10, 112, 64, 0.03) 0%, transparent 40%);
}

html[data-theme="light"] .glass {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
}

html[data-theme="light"] .glass-hover:hover {
    border-color: var(--glass-border-hover);
    box-shadow: 0 0 20px var(--accent-glow);
}

/* soft glow behind the title */
html[data-theme="light"] .guide-layout::before {
    background: radial-gradient(ellipse at 20% 30%, rgba(10, 112, 64, 0.10), transparent 65%);
}

/* ── Header ──────────────────────────────────────────────────────────── */

html[data-theme="light"] .global-header {
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid var(--glass-border);
}

html[data-theme="light"] .logo,
html[data-theme="light"] .logo-text {
    color: var(--text-main);
}

html[data-theme="light"] .accent-text {
    color: var(--accent-color);
}

html[data-theme="light"] .search-input-group {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--glass-border);
}

html[data-theme="light"] #header-search-input {
    color: var(--text-main);
}

html[data-theme="light"] #header-search-input::placeholder {
    color: var(--text-dark);
}

html[data-theme="light"] .icon-dim {
    color: var(--text-dim);
}

/* account button + source toggle (injected by auth.js) */
html[data-theme="light"] .account-btn,
html[data-theme="light"] .source-toggle-btn {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--glass-border);
    color: var(--text-main);
}

html[data-theme="light"] .account-btn:hover,
html[data-theme="light"] .source-toggle-btn:hover {
    border-color: var(--glass-border-hover);
}

/* language picker (i18n.js injects its own <style> at runtime, so these
   need the html[...] prefix to outrank it on specificity, not order) */
html[data-theme="light"] .clipzy-language-trigger {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

html[data-theme="light"] .clipzy-language-trigger:hover,
html[data-theme="light"] .clipzy-language-picker.is-open .clipzy-language-trigger {
    background: #fff;
    border-color: var(--glass-border-hover);
}

html[data-theme="light"] .clipzy-language-menu {
    background: #fff;
    border-color: var(--glass-border);
    box-shadow: 0 18px 48px rgba(13, 26, 20, 0.16);
}

html[data-theme="light"] .clipzy-language-option {
    color: var(--text-main);
}

html[data-theme="light"] .clipzy-language-option:hover,
html[data-theme="light"] .clipzy-language-option[aria-selected="true"] {
    background: rgba(13, 26, 20, 0.055);
}

html[data-theme="light"] .clipzy-language-menu-code {
    color: var(--guide-muted);
}

html[data-theme="light"] .clipzy-language-flag {
    box-shadow: 0 0 0 1px rgba(13, 26, 20, 0.16);
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

html[data-theme="light"] .guide-toc-link.is-active,
html[data-theme="light"] .guide-toc .sidebar-link.is-active {
    color: var(--text-main);
    border-left-color: var(--accent-color);
}

html[data-theme="light"] .guide-toc-link:hover,
html[data-theme="light"] .guide-more a:hover {
    color: var(--text-main);
}

html[data-theme="light"] .guide-more {
    background: rgba(255, 255, 255, 0.75);
    border-color: var(--guide-rule);
}

/* ── Article typography ──────────────────────────────────────────────── */

html[data-theme="light"] .guide-content h1,
html[data-theme="light"] .guide-content h2,
html[data-theme="light"] .guide-content h3,
html[data-theme="light"] .guide-content p strong,
html[data-theme="light"] .guide-content li strong,
html[data-theme="light"] .guide-table th,
html[data-theme="light"] .guide-search-label {
    color: var(--text-main);
}

html[data-theme="light"] .guide-content em {
    color: #26332c;
}

html[data-theme="light"] .guide-crumbs span {
    color: var(--guide-text);
}

html[data-theme="light"] .guide-content a {
    color: var(--accent-color);
    text-decoration-color: rgba(10, 112, 64, 0.42);
}

html[data-theme="light"] .guide-content a:hover {
    text-decoration-color: var(--accent-color);
}

/* ── Lists ───────────────────────────────────────────────────────────── */

/* unordered bullet: a 7px neon dot disappears on white, so it takes the
   text-safe green rather than the neon */
html[data-theme="light"] .guide-content ul li::before {
    background: var(--accent-color);
    box-shadow: none;
}

/* checklist tick: the source rule inlines the neon as an SVG stroke inside a
   data URI, so the whole shorthand has to be restated with a darker stroke */
html[data-theme="light"] .guide-content .guide-checklist li::before {
    background: var(--guide-accent-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7040' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 10px no-repeat;
    border-color: var(--guide-accent-line);
}

/* cross mark: same problem as the tick — the red is baked into the data URI,
   so restate the shorthand with a stroke that carries on white (6.1:1) */
html[data-theme="light"] .guide-content .guide-crosslist li::before {
    background: rgba(178, 32, 56, .08) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22038' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center / 10px no-repeat;
    border-color: rgba(178, 32, 56, .24);
}

/* ordered marker: outline only, not filled — squared off (not a circle).
   A look kept exclusive to this page's light theme. */
html[data-theme="light"] .guide-content ol li::before {
    background: transparent;
    border: 1.5px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: 8px;
}

/* ── Ranked timeline ─────────────────────────────────────────────────── */

html[data-theme="light"] .guide-ranked h3::before {
    background: var(--guide-accent-soft);
    border-color: var(--guide-accent-line);
    color: var(--accent-color);
    box-shadow: none;
}

/* ── Chips, panels, CTA ──────────────────────────────────────────────── */

html[data-theme="light"] .guide-chip {
    background: var(--guide-accent-soft);
    border-color: var(--guide-accent-line);
    color: var(--accent-color);
}

html[data-theme="light"] .guide-cta,
html[data-theme="light"] .cta-box,
html[data-theme="light"] .guide-search {
    background:
        linear-gradient(135deg, rgba(10, 112, 64, 0.085), rgba(10, 112, 64, 0.03) 60%, rgba(255, 255, 255, 0.6));
    border-color: var(--guide-accent-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 18px 40px -30px rgba(10, 112, 64, 0.45);
}

html[data-theme="light"] .guide-search::before {
    background: radial-gradient(circle, rgba(10, 112, 64, 0.12), transparent 70%);
}

html[data-theme="light"] .cta-box p,
html[data-theme="light"] .guide-cta p {
    color: var(--guide-text);
}

/* the CTA button is a FILL — keep the neon */
html[data-theme="light"] .guide-cta .cta-button,
html[data-theme="light"] .cta-box .cta-button,
html[data-theme="light"] .guide-search-row button {
    background: var(--brand-neon);
    color: var(--accent-ink);
}

html[data-theme="light"] .guide-cta .cta-button:hover,
html[data-theme="light"] .cta-box .cta-button:hover,
html[data-theme="light"] .guide-search-row button:hover {
    box-shadow: 0 10px 24px rgba(10, 112, 64, 0.28);
}

html[data-theme="light"] .guide-search-row input {
    background: #fff;
    border-color: var(--glass-border);
    color: var(--text-main);
}

html[data-theme="light"] .guide-search-row input::placeholder {
    color: var(--text-dark);
}

html[data-theme="light"] .guide-search-row input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(10, 112, 64, 0.15);
}

/* ── Tables ──────────────────────────────────────────────────────────── */

html[data-theme="light"] .guide-table-wrap {
    background: rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .guide-table th {
    background: rgba(13, 26, 20, 0.04);
}

html[data-theme="light"] .guide-table tbody tr:nth-child(even) td {
    background: rgba(13, 26, 20, 0.022);
}

/* ── Footer ──────────────────────────────────────────────────────────── */

html[data-theme="light"] .site-footer {
    background: rgba(255, 255, 255, 0.7);
    border-top: 1px solid var(--guide-rule);
    color: var(--text-dim);
}

html[data-theme="light"] .footer-links a {
    color: var(--accent-color);
}

/* ── Theme toggle ────────────────────────────────────────────────────── */
/* Unscoped on purpose: this file loads on this page only, and the control
   has to be visible in both themes. */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.34rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--guide-rule);
    background: transparent;
    color: var(--guide-muted);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.theme-toggle:hover {
    color: var(--text-main);
    border-color: var(--glass-border-hover);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* show the icon for the theme you would switch TO */
.theme-toggle .icon-to-dark { display: none; }
.theme-toggle .icon-to-light { display: block; }
html[data-theme="light"] .theme-toggle .icon-to-dark { display: block; }
html[data-theme="light"] .theme-toggle .icon-to-light { display: none; }

.theme-toggle .label-to-dark { display: none; }
html[data-theme="light"] .theme-toggle .label-to-dark { display: inline; }
html[data-theme="light"] .theme-toggle .label-to-light { display: none; }

@media (max-width: 560px) {
    .theme-toggle {
        margin-left: 0;
    }
}