/* ===================== IntelliNotebook v14 — reading themes =====================
   light  (default): white paper, brand gradient only as thin accents
   dark   : the existing dark look (styles.css [data-theme="dark"])
   reader : calm e-ink / sepia paper; no neon, no gradients, no motion
   DOM: html[data-mode=light|dark|reader]; data-theme stays light|dark so existing light rules apply to reader. */

/* ---------- 3-option switch ---------- */
.mode-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}
.mode-switch button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;min-width:34px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.mode-switch button .ic{width:16px;height:16px}
.mode-switch button[aria-checked="true"]{background:var(--surface-solid);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--border-strong)}
html[data-mode=dark] .mode-switch button[aria-checked="true"]{background:var(--grad-strong);color:#fff;box-shadow:none}
.mode-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.topbar .theme-toggle.mode-switch .mt-l{display:none}
.topbar .theme-toggle.mode-switch button{padding:0 8px}
@media (pointer:coarse){.mode-switch button{min-height:44px;min-width:44px}}
/* in the ⋯ sheet: full width with labels */
.mb-sheet .mode-switch{display:grid;grid-template-columns:repeat(3,1fr);width:100%;border-radius:16px}
.mb-sheet .mode-switch button{border-radius:12px;min-height:48px;font-size:15px}
.mb-sheet .mode-switch .mt-l{display:inline!important;position:static!important;width:auto!important;height:auto!important;clip:auto!important}
/* notebook toolbar: inline switch on tablet/desktop, "Aa" popover on phones */
.nb-mode{position:relative;display:inline-flex;align-items:center}
.nb-aa{display:none}
.nb-aa b{font-family:Georgia,"Times New Roman",serif;font-size:17px;letter-spacing:-.02em}
.mode-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:90;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;min-width:290px;background:var(--surface-solid);border:1px solid var(--border-strong);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.mode-pop[hidden]{display:none}
.mode-pop .mp-t{font-size:14px}
.mode-pop .mode-switch{display:grid;grid-template-columns:repeat(3,1fr);border-radius:14px}
.mode-pop .mode-switch button{border-radius:10px;min-height:48px;font-size:14px;flex-direction:column;gap:2px;padding:6px}
@media (max-width:1279.98px){.nb-inline .mt-l{display:none}}
@media (max-width:759.98px){
 .nb-inline{display:none}
 .nb-aa{display:inline-flex;min-width:44px;align-items:center;justify-content:center}
 .mode-pop{position:fixed;left:12px;right:12px;top:auto;bottom:calc(76px + var(--safe-b,0px));min-width:0}
}
/* learner workspace */
#learnRoot .l-mode{margin-left:4px}

/* ---------- LIGHT: white by default, subtle brand ---------- */
html[data-mode=light]{--bg-base:#ffffff;--surface:rgba(255,255,255,.94);--surface-2:#f6f7fb;--page:#ffffff;--page-line:#e7e9f2;--border:rgba(23,32,51,.10);--border-strong:#d3d7e4;
 --glow:0 1px 2px rgba(23,32,51,.06),0 10px 28px -16px rgba(23,32,51,.22);--shadow-book:0 24px 56px -26px rgba(23,32,51,.32),0 0 0 1px rgba(23,32,51,.06)}
html[data-mode=light] body{background-color:#ffffff}
html[data-mode=light][data-bg=aurora] body{background-image:radial-gradient(900px 360px at 0% -12%,rgba(34,211,238,.08),transparent 70%),radial-gradient(900px 420px at 100% -8%,rgba(236,72,153,.06),transparent 70%)}
html[data-mode=light] #learnRoot{background:#ffffff}

/* ---------- READER: warm paper, soft dark-grey/brown ink ---------- */
html[data-mode=reader]{
 --bg-base:#f4ecd8;--surface:#f8f1e1;--surface-solid:#fbf6ea;--surface-2:#efe5cf;--page:#fbf6ea;--page-line:#e5d8bd;
 --text:#3a3129;--muted:#5c5045;--subtle:#65584b;--border:rgba(92,72,44,.16);--border-strong:#d4c4a3;
 --accent:#7a4a19;--accent-bg:#efe1c3;--violet-text:#5f4426;--violet-bg:#ebdfc6;--pink-text:#7f3b24;--pink-bg:#f0dccb;
 --ok:#3d612b;--ok-bg:#e3e4c8;--warn:#6f5210;--warn-bg:#f1e2b9;--danger:#8a2d20;--danger-bg:#f2d8cb;--mark:#ead494;--mark-text:#3a3129;
 --grad:linear-gradient(90deg,#b49a72,#b49a72);--grad-strong:linear-gradient(90deg,#6b4f31,#6b4f31);
 --glow:none;--glow-strong:0 0 0 1px rgba(92,72,44,.28);--shadow-book:0 10px 28px -18px rgba(70,50,20,.38),0 0 0 1px rgba(92,72,44,.12);
 color-scheme:light}
html[data-mode=reader] body,html[data-mode=reader][data-bg] body{background:#f4ecd8!important;background-image:none!important}
html[data-mode=reader] body::before,html[data-mode=reader] body::after{display:none!important}
html[data-mode=reader] #learnRoot{background:#f4ecd8;--learn-accent:#7a4a19}
html[data-mode=reader] #learnRoot .l-muted{color:#5c5045}
html[data-mode=reader] #learnRoot :focus-visible{outline-color:#7a4a19}
/* no neon, no glow, no motion (games keep their own style) */
html[data-mode=reader] :not(#gameModal):not(#gameModal *){text-shadow:none!important;animation:none!important;transition:none!important}
html[data-mode=reader] :is(.card,.btn,.chip,.tool,.thumb,.panel,.l-card,.l-hero,.l-btn,.fb-livebanner,.fb-liveplay,.mb-sheet,.nav a,.seg button,.lum):not(#gameModal *){box-shadow:none!important}
html[data-mode=reader] .lum::before,html[data-mode=reader] .lum::after{display:none!important}
html[data-mode=reader] .topbar{background:#f8f1e1;backdrop-filter:none}
html[data-mode=reader] .topbar::after{background:#d4c4a3;opacity:1;height:1px}
html[data-mode=reader] .btn.primary,html[data-mode=reader] #learnRoot .l-btn.primary{background:#6b4f31!important;color:#fffaf0!important;border-color:#6b4f31!important}
html[data-mode=reader] .book-wrap{box-shadow:var(--shadow-book)!important}
html[data-mode=reader] img:not(#gameModal img){filter:sepia(.18) saturate(.85)}
html[data-mode=reader] #learnRoot .l-hero{background:#efe5cf!important;color:var(--text)!important}
html[data-mode=reader] #learnRoot .l-hero *{color:inherit}
html[data-mode=reader] .fb-livebanner{background:#6b4f31!important;color:#fffaf0}
html[data-mode=reader] .mb-net{background:#6b4f31}
html[data-mode=reader] .mode-switch button[aria-checked="true"]{background:#fffaf0;color:#3a3129;box-shadow:0 0 0 1px #c9b690}
/* games: keep their vivid light-theme palette while the book is in Reader */
html[data-mode=reader] #gameModal{
 --bg-base:#f4f2ff;--surface:rgba(255,255,255,.9);--surface-solid:#ffffff;--surface-2:#f5f3ff;--page:#ffffff;--page-line:#e4e7f5;
 --text:#172033;--muted:#475569;--subtle:#5b6478;--border:rgba(124,58,237,.16);--border-strong:#c7c2e6;
 --accent:#0e7490;--accent-bg:#e6fbff;--violet-text:#6d28d9;--violet-bg:#f1ebff;--pink-text:#be185d;--pink-bg:#fdeef6;
 --grad:linear-gradient(120deg,#22d3ee 0%,#7c3aed 55%,#ec4899 100%);--grad-strong:linear-gradient(120deg,#0e7490 0%,#6d28d9 55%,#be185d 100%);
 --glow:0 0 0 1px rgba(124,58,237,.10),0 10px 30px -12px rgba(109,40,217,.28)}
@media (prefers-reduced-motion:reduce){.mode-switch button{transition:none}}
html[data-mode=reader] :not(#gameModal *)::before,html[data-mode=reader] :not(#gameModal *)::after{animation:none!important;transition:none!important}
@media (max-width:759px){#s-cuaderno .toolbar .tool.nb-aa{width:44px;min-width:44px;padding:0}}
/* Reader: mute remaining learner neon accents (v14) */
html[data-mode=reader] #learnRoot .l-tag.cyan{color:#5c3d1c;background:#efe3c8;border-color:#c9b38d}
html[data-mode=reader] #learnRoot .l-notice,html[data-mode=reader] #learnRoot .l-step.ready{border-left-color:#a68a62}
html[data-mode=reader] #learnRoot .l-reading{border-left-color:#a68a62}
html[data-mode=reader] #learnRoot .l-feedback,html[data-mode=reader] #learnRoot .l-course:first-child{border-color:#c9b38d}
html[data-mode=reader] #learnRoot .l-course:first-child{background:var(--surface-solid)}
html[data-mode=reader] #learnRoot .l-code,html[data-mode=reader] #learnRoot .l-step .l-no{background:#6b4f31;color:#fffaf0}
html[data-mode=reader] #learnRoot .l-progress i{background:#8a6a43}
html[data-mode=reader] #learnRoot .l-card{box-shadow:none}
html[data-mode=reader] #learnRoot :focus-visible,html[data-mode=reader] :focus-visible{outline-color:#7a4a19}
html[data-mode=light] .book-glow{opacity:.3}
html[data-mode=reader] .book-glow{display:none}
/* 1024–1279 px top bar is tight (teacher: name + sign-out + language + background): show only the active mode; tap = next mode.
   The full 3-option switch stays in the notebook toolbar, the learner workspace and the ⋯ sheet. */
@media (min-width:1024px) and (max-width:1279.98px){.topbar .theme-toggle.mode-switch{padding:0;background:none;border:0}.topbar .theme-toggle.mode-switch button[aria-checked=false]{display:none}}