/* wialive.smilestory.ai (docroot /var/www/wia.live) — site theme overlay. Written 2026-10-28 (family56 bundle B).
   ORIGINAL look = DARK: the hub (/index.html, inline <style>) is a navy→teal gradient (#1e3a8a→#065f46) with white text,
   /wihp, /converter, /volunteer are dark too. Nothing here touches that look — EVERY rule is scoped to
   html[data-theme="light"], which only the theme engine (wia-site-theme.template.js, in <head>) sets when a visitor
   chooses "light". With nothing saved (defaultPref = dark) every page renders pixel-identical to today.
   Load position: </head>, just before it, AFTER each page's own <style> (all covered pages use inline CSS; the only
   external stylesheet, /unified/style.css, is already light and is not touched).
   One file is loaded on every page, so each page block is additionally scoped to a body:has(…) fingerprint of that
   page's markup — a rule written for /volunteer.html cannot leak into /wihp/ or /api/ (which also defines --primary).
   :has() = Chrome 105+ / Safari 15.4+ / Firefox 121+; older browsers simply keep the dark original.

   Light palette (brief §4, dark-original site):
     page #f7f8fb (faint navy/teal tint so the brand survives) · card #ffffff · text #0f172a · muted #475569
     lines #e2e8f0 · brand navy #1e3a8a (10.4:1 on #f7f8fb) · brand teal #0e7490 (5.4:1 on white)
     green #047857 (5.5:1) · purple #6d28d9 (6.6:1) · gold text #854d0e / #b45309 · focus ring = page accent
   !important is used ONLY where the live HTML/JS writes an inline style= (reason at each rule).
   Pages covered: hub fully; /wihp/, /converter/, /volunteer.html at shell level (body · header/nav · links · buttons
   · cards · inputs · footer). /wia-talk/, /wia-braille/, /bidirectional/ are NOT covered on purpose — they own
   <html data-theme="docs|simple|modern|high-contrast"> and collide with the engine (NOTES.md §5). */

/* ============================================================================
   0. Shared shell — the language button /js/i18n-loader.js injects (#wia-lang-btn, insertLangButton ~l.422)
   ============================================================================ */
/* i18n-loader writes the button colours as inline style.cssText (hub = fixed fallback: navy rgba(30,58,138,.9) + white
   text; .nav-links pages = rgba(255,255,255,.15) + color:inherit) and its hover handlers rewrite style.background,
   so only !important can recolour it for the light theme. */
html[data-theme="light"] #wia-lang-btn {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0e7490 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] #wia-lang-btn:hover,
html[data-theme="light"] #wia-lang-btn:focus-visible {
    background: #ecfeff !important;
    border-color: #0e7490 !important;
}
html[data-theme="light"] #wia-lang-btn:focus-visible { outline: 3px solid #0e7490; outline-offset: 2px; }
/* The language modal (#wia-lang-modal: card #1a1a2e, white text, all inline) is deliberately left dark in both
   themes — it is a full-screen dialog over a 70% black backdrop, contrast is fine as is, and recolouring ~10 inline
   declarations with !important would be fragile. Same for #wia-vol-banner (purple→cyan, white text, fixed bottom),
   the wiabook promo banner (external loader.js) and the a11y toolkit's own floating button/modal. */

/* ============================================================================
   1. HUB  /index.html  — inline <style>, no header; <body> (centred flex column) > <main class="container">
   ============================================================================ */
html[data-theme="light"] body:has(> main.container > .links) {
    /* original: linear-gradient(135deg,#1e3a8a,#065f46); keep a faint navy→teal tint on the light page */
    background: linear-gradient(135deg, #eef2ff 0%, #f7f8fb 45%, #ecfdf5 100%);
    color: #0f172a;
}
/* title: original is white + dark text-shadow */
html[data-theme="light"] main.container > h1 {
    color: #1e3a8a;
    text-shadow: none;
}
/* tagline / philosophy: original relies on opacity over white; use solid colours instead */
html[data-theme="light"] main.container .tagline    { color: #1e293b; opacity: 1; }
html[data-theme="light"] main.container .philosophy { color: #475569; opacity: 1; }

/* link cards: original frosted glass rgba(255,255,255,.15) + white text */
html[data-theme="light"] main.container .link-card {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] main.container .link-card:hover,
html[data-theme="light"] main.container .link-card:focus-visible {
    background: #ffffff;
    border-color: #0e7490;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] main.container .link-card:focus-visible { outline: 3px solid #0e7490; outline-offset: 2px; }
html[data-theme="light"] main.container .link-card h2 { color: #1e3a8a; }
html[data-theme="light"] main.container .link-card p  { color: #475569; opacity: 1; }

/* feature tiles: original rgba(255,255,255,.1), no border */
html[data-theme="light"] main.container .feature {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
}
html[data-theme="light"] main.container .feature strong { color: #0f172a; }

/* footer: original opacity .7 white text; the two links carry inline style="color:white" */
html[data-theme="light"] main.container > footer { color: #475569; opacity: 1; }
html[data-theme="light"] main.container > footer a {
    color: #0e7490 !important; /* inline style="color:white" on the WIA Talk / WIA Braille links (index.html l.145-146) */
}
html[data-theme="light"] main.container > footer a:hover { text-decoration: underline; }
/* self-audit caption: inline style="font-size:10px;color:#94a3b8" → 2.9:1 on the light page; lift to 4.6:1 */
html[data-theme="light"] main.container > footer div[style*="color:#94a3b8"] {
    color: #64748b !important; /* inline colour attribute (index.html l.149) */
}
/* The a11y badge image (a11y.wiabook.com/badges/wia-premium-sm.png) is opaque art with its own background; no filter. */

/* ============================================================================
   2. /wihp/  — inline <style>, tokens on :root; <body> > .container > .top-nav (anchor: .nav-links inside .nav-right)
   ============================================================================ */
html[data-theme="light"] body:has(> .container > .top-nav) {
    /* same custom-property names as /wihp/index.html l.10; set on <body>, so they win over :root for every descendant
       without leaking to /api/ (which also defines --primary) */
    --primary: #047857;      /* was #10B981 (2.5:1 on white) */
    --bg: #f7f8fb;
    --bg-card: #ffffff;
    --text: #0f172a;
    --text-muted: #475569;   /* was #94a3b8 */
    --border: #e2e8f0;
    --gold: #854d0e;         /* was #ffd700 */
    background: linear-gradient(180deg, #eef2ff 0%, #f7f8fb 240px); /* faint navy tint behind the nav */
}
/* page title gradient text: mint→green on white is too light */
html[data-theme="light"] body:has(> .container > .top-nav) .page-header h1 span {
    background: linear-gradient(90deg, #047857, #0e7490);
    -webkit-background-clip: text;
    background-clip: text;
}
html[data-theme="light"] body:has(> .container > .top-nav) .breadcrumb .sep { color: #94a3b8; } /* was var(--border): would vanish */
html[data-theme="light"] body:has(> .container > .top-nav) .lang-btn { background: #ffffff; }   /* wihp's own EN/KO switch */
html[data-theme="light"] body:has(> .container > .top-nav) .lang-btn.active { color: #ffffff; }
html[data-theme="light"] body:has(> .container > .top-nav) .section.core .section-count { background: #854d0e; color: #ffffff; }
html[data-theme="light"] body:has(> .container > .top-nav) .section.core .card { border-color: #e7d9b8; }
html[data-theme="light"] body:has(> .container > .top-nav) .section.core .card:hover { border-color: #854d0e; box-shadow: 0 10px 30px rgba(133, 77, 14, 0.15); }
html[data-theme="light"] body:has(> .container > .top-nav) .section.tier1 .section-title   { color: #047857; }
html[data-theme="light"] body:has(> .container > .top-nav) .section.tier2 .section-title   { color: #1d4ed8; }
html[data-theme="light"] body:has(> .container > .top-nav) .section.tier2 .section-count   { background: #1d4ed8; }
html[data-theme="light"] body:has(> .container > .top-nav) .section.tier3 .section-title   { color: #6d28d9; }
html[data-theme="light"] body:has(> .container > .top-nav) .section.tier3 .section-count   { background: #6d28d9; }
html[data-theme="light"] body:has(> .container > .top-nav) .section.tier4 .section-title   { color: #b45309; }
html[data-theme="light"] body:has(> .container > .top-nav) .section.tier4 .section-count   { background: #b45309; color: #ffffff; }
html[data-theme="light"] body:has(> .container > .top-nav) .section.special .section-title { color: #be185d; }
html[data-theme="light"] body:has(> .container > .top-nav) .section.special .section-count { background: #be185d; }
html[data-theme="light"] body:has(> .container > .top-nav) .subsection-title { border-left-color: #be185d; }
html[data-theme="light"] body:has(> .container > .top-nav) .card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
html[data-theme="light"] body:has(> .container > .top-nav) .card:hover { box-shadow: 0 10px 30px rgba(4, 120, 87, 0.14); }
html[data-theme="light"] body:has(> .container > .top-nav) #viewer code { color: #b45309; }      /* was #f59e0b on the card */
html[data-theme="light"] body:has(> .container > .top-nav) #viewer pre code { color: var(--text); }

/* ============================================================================
   3. /converter/  — inline <style>; dark gradient page + white .converter-box; <body> > .container > header
   ============================================================================ */
html[data-theme="light"] body:has(> .container > .converter-box) {
    /* original: linear-gradient(135deg,#1e3a5f,#0d9488) */
    background: linear-gradient(135deg, #eef2ff 0%, #f7f8fb 45%, #ecfdf5 100%);
}
html[data-theme="light"] body:has(> .container > .converter-box) .container > header,
html[data-theme="light"] body:has(> .container > .converter-box) .container > header h1 { color: #0f172a; }
html[data-theme="light"] body:has(> .container > .converter-box) .subtitle { color: #475569; opacity: 1; }
html[data-theme="light"] body:has(> .container > .converter-box) .converter-box {
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] body:has(> .container > .converter-box) .example-btn .ipa { color: #64748b; } /* was #9ca3af on #f3f4f6 (2.4:1) */
html[data-theme="light"] body:has(> .container > .converter-box) .container > footer { color: #475569; opacity: 1; }
html[data-theme="light"] body:has(> .container > .converter-box) .container > footer a { color: #b45309; } /* was #fbbf24 */

/* ============================================================================
   4. /volunteer.html  — inline <style>; dark purple page; <body> > section.hero > .container > .hero-badge
   ============================================================================ */
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) {
    background: #f7f8fb;
    color: #0f172a;
}
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) a:not([class]) { color: #6d28d9; } /* page-wide a{color:#a78bfa} */
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .hero {
    background: linear-gradient(135deg, #f3e8ff 0%, #f7f8fb 100%);
}
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .hero-badge {
    background: rgba(109, 40, 217, 0.08);
    border-color: rgba(109, 40, 217, 0.35);
    color: #5b21b6;
}
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .hero h1 {
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
}
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .hero p { color: #334155; opacity: 1; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .stat-value { color: #6d28d9; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .stat-label { color: #475569; opacity: 1; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) h2 { color: #5b21b6; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) section:nth-child(even) { background: rgba(15, 23, 42, 0.03); }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .round-badge { background: rgba(109, 40, 217, 0.08); border-color: rgba(109, 40, 217, 0.3); }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .step,
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .who-card,
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .form-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .step { border-left-color: #6d28d9; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .step-num { background: #6d28d9; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .who-card p,
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .faq-a,
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .email-fallback { color: #475569; opacity: 1; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .faq-item { border-bottom-color: #e2e8f0; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .form-group input,
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .form-group select,
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .form-group textarea {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .form-group input:focus,
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .form-group select:focus,
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .form-group textarea:focus { outline-color: #6d28d9; border-color: #6d28d9; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) select option { background: #ffffff; color: #0f172a; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .form-alert.success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) .form-alert.error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) > footer { color: #475569; opacity: 1; border-top-color: #e2e8f0; }
html[data-theme="light"] body:has(> .hero > .container > .hero-badge) :focus-visible { outline-color: #6d28d9; }