/* theme.css - Grok Bot 2026-10-25 (Chris: "use a black background ... dark mode ... by default").
   ONE shared place for the parent pages' colours: dashboard.html (every tab, incl. Sync and Inbox & Calendar), parent.html,
   contacts.html, pictures.html, and the topbar.js boxes. theme.js puts .theme-dark (default) or .theme-light on <html>.
   Dark = near-black #0b0b0b, light text, muted borders; text colours chosen for WCAG AA (4.5:1 or better) on these surfaces.
   Light = the pages as they were (Parent view, Contacts, Pictures) and a light version of the dashboard.
   Inline colours written by the pages' scripts are recoloured here with [style*=...] rules, so no page logic changed.
   Child game pages (index.html games, Snake, Block Drop, School page) do not load this file: their art and colours stay. */
:root {
  --t-bg: #0b0b0b; --t-surface: #151515; --t-surface2: #1d1d1d; --t-ink: #ececec; --t-muted: #a9a9a9; --t-line: #343434;
  --t-accent: #b8adff; --t-link: #8cc8ff; --t-head-bg: #231f3a; --t-head-ink: #e4dfff;
  --t-pink-bg: #2b0f1d; --t-pink-line: #c2255c; --t-pink-ink: #ffc2d9; --t-pink-mark: #f06595;
  --t-orange-bg: #3a2408; --t-orange-ink: #ffd19a; --t-green-ink: #7ee2a0; --t-amber-ink: #ffb35c; --t-blue-ink: #8cc8ff;
  --t-email-bg: #0e2740; --t-wa-bg: #0d2c1b; --t-red: #c92a2a;
}

/* the switch (top level pages only; theme.js) */
#themeBtn { position: fixed; top: 8px; right: 60px; z-index: 10001; width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 10px;
  border: 1px solid var(--t-line); background: var(--t-surface2); color: var(--t-ink); font: 20px/38px system-ui, sans-serif; cursor: pointer; box-shadow: none; }
html.theme-light #themeBtn { background: #efeaff; color: #23214a; border-color: #d7d0f7; }

/* ---------------------------------------------------------------- dashboard: dark (default) = near-black */
html.theme-dark[data-page=dashboard] { --bg: #0b0b0b; --card: #141414; --head: #1e2023; --line: #34383d; --grid: #2a2d31; --ink: #e8e8e8; --muted: #a3a9b0; }
html.theme-dark[data-page=dashboard] tbody tr:nth-child(even) td, html.theme-dark[data-page=dashboard] table tr:nth-child(even) td { background: #181a1c; }
html.theme-dark[data-page=dashboard] pre, html.theme-dark[data-page=dashboard] input[type=search], html.theme-dark[data-page=dashboard] select,
html.theme-dark[data-page=dashboard] #login input { background: #050505; }
html.theme-dark[data-page=dashboard] iframe[style*="background:#fff8ef"] { background: var(--t-bg) !important; }
html.theme-dark[data-page=dashboard] iframe[style*="border:2px solid #d9d3f7"] { border-color: var(--t-line) !important; }

/* ---------------------------------------------------------------- dashboard: light */
html.theme-light[data-page=dashboard] { color-scheme: light; --ink: #1d1f22; --muted: #59616a; --line: #c9ced4; --grid: #dfe3e7; --bg: #f3f4f6; --card: #fff;
  --head: #e9ecef; --sel: #d8f3e4; --good: #1b7a46; --goodbg: #d3f9d8; --warn: #8a5300; --warnbg: #fff3bf; --bad: #c92a2a; --badbg: #ffe3e3; }
html.theme-light[data-page=dashboard] .big, html.theme-light[data-page=dashboard] .hers, html.theme-light[data-page=dashboard] .isshead .t b,
html.theme-light[data-page=dashboard] summary:hover { color: var(--ink); }
html.theme-light[data-page=dashboard] th, html.theme-light[data-page=dashboard] .card h2 { color: #343a40; }
html.theme-light[data-page=dashboard] .legend, html.theme-light[data-page=dashboard] .tag { color: #495057; }
html.theme-light[data-page=dashboard] .chart svg text { fill: #495057; } html.theme-light[data-page=dashboard] .chart svg .v { fill: #1d1f22; }
html.theme-light[data-page=dashboard] .chart svg .ax { stroke: #adb5bd; } html.theme-light[data-page=dashboard] .chart svg .gr { stroke: #e3e6e9; }
html.theme-light[data-page=dashboard] tbody tr:nth-child(even) td, html.theme-light[data-page=dashboard] table tr:nth-child(even) td { background: #f8f9fa; }
html.theme-light[data-page=dashboard] table.tm th, html.theme-light[data-page=dashboard] table.tm td { border-color: #adb5bd; }
html.theme-light[data-page=dashboard] table.tm { border-color: #868e96; }
html.theme-light[data-page=dashboard] pre, html.theme-light[data-page=dashboard] input[type=search], html.theme-light[data-page=dashboard] select,
html.theme-light[data-page=dashboard] #login input { background: #fff; color: var(--ink); }
html.theme-light[data-page=dashboard] .pill { background: #e9ecef; color: #343a40; }
html.theme-light[data-page=dashboard] a { color: #1864ab; }
html.theme-light[data-page=dashboard] nav button.on { color: #1d1f22; }
html.theme-light[data-page=dashboard] ::-webkit-scrollbar-thumb { background: #adb5bd; }

/* ---------------------------------------------------------------- Parent view, Contacts, Pictures: dark */
html.theme-dark.tpage body { background: var(--t-bg); color: var(--t-ink); }
html.theme-dark.tpage h1 { color: var(--t-accent); }
html.theme-dark.tpage a, html.theme-dark.tpage .nav a, html.theme-dark.tpage .small a { color: var(--t-link); }
html.theme-dark.tpage .muted { color: var(--t-muted); }
html.theme-dark.tpage table { background: var(--t-surface); }
html.theme-dark.tpage th { background: var(--t-head-bg); color: var(--t-head-ink); }
html.theme-dark.tpage td, html.theme-dark.tpage th { border-color: var(--t-line); }
html.theme-dark.tpage input, html.theme-dark.tpage select, html.theme-dark.tpage textarea { background: #101010; color: var(--t-ink); border-color: #4a4a4a; }
html.theme-dark.tpage input[type=checkbox], html.theme-dark.tpage input[type=range] { accent-color: #8f7ff0; }
html.theme-dark.tpage details { border-color: var(--t-line); }
/* Contacts: orange rows (no child picked yet), "left school" header, red Remove buttons */
html.theme-dark.tpage tr.nokid td { background: var(--t-orange-bg); color: var(--t-orange-ink); }
html.theme-dark.tpage tr.nokid input, html.theme-dark.tpage tr.nokid select { background: #241707; color: var(--t-orange-ink); border-color: #6b4a1f; }
html.theme-dark.tpage .sug { color: var(--t-amber-ink); }
html.theme-dark.tpage button.x { background: var(--t-red); }
html.theme-dark.tpage [style*="background:#e9ecef"] { background: #262626 !important; color: var(--t-ink) !important; }
/* Pictures */
html.theme-dark.tpage .bar button, html.theme-dark.tpage .bar input[type=text] { background: var(--t-surface2); color: var(--t-ink); border-color: #444; }
html.theme-dark.tpage .bar button.on { background: #6b5bd2; color: #fff; border-color: #6b5bd2; }
html.theme-dark.tpage .bar label { color: #c8c8c8; }
html.theme-dark.tpage .al { background: var(--t-surface); border-color: var(--t-line); }
html.theme-dark.tpage .al.flag { border-color: #f59f00; box-shadow: 0 0 0 2px #5c3d00; }
html.theme-dark.tpage .al .n { color: var(--t-muted); }
html.theme-dark.tpage .al .r a, html.theme-dark.tpage .al .r button { background: var(--t-surface2); color: var(--t-accent); border-color: #444; }
html.theme-dark.tpage .al .r button.y { background: #f59f00; border-color: #f59f00; color: #111; }
html.theme-dark.tpage .al img, html.theme-dark.tpage #tg img { background: #222; }
html.theme-dark.tpage #cls img { border-color: var(--t-line); }
html.theme-dark.tpage #pbar { background: #2a2740; }
html.theme-dark.tpage #sync:disabled { background: #555; }

/* ---------------------------------------------------------------- shared boxes (topbar.js) and inline colours, dark */
html.theme-dark .tbdoor { background: var(--t-surface); border-color: var(--t-line); }
html.theme-dark .tbdoor .st { color: var(--t-muted); }
html.theme-dark .tbdoor button[style*="#e67700"] { background: #b35c00 !important; }   /* white text 4.6:1 (was 3.0) */
html.theme-dark .tbdoor button[style*="#2eaa6a"] { background: #1f7d4d !important; }   /* white text 5.3:1 (was 3.2) */
html.theme-dark .tbdoor.off button { background: #495057 !important; }
html.theme-dark .tbpill { background: var(--t-surface); border-color: var(--t-line); color: var(--t-ink); }
/* Inbox from Lia + From school (dashboard Inbox & Calendar tab and Parent view): pink box, message cards, chips, calendar notes */
html.theme-dark [style*="background:#fff0f6"] { background: var(--t-pink-bg) !important; color: var(--t-pink-ink) !important; }
html.theme-dark [style*="solid #f783ac"] { border-color: var(--t-pink-line) !important; }
html.theme-dark [style*="border-left:4px solid #e64980"], html.theme-dark [style*="border-left:5px solid #e64980"] { border-left-color: var(--t-pink-mark) !important; }
html.theme-dark [style*="background:#e64980"] { background: #c2255c !important; }   /* "new" counters: white text 5.3:1 */
html.theme-dark [style*="background:#fff;"] { background: var(--t-surface2) !important; color: var(--t-ink) !important; }
html.theme-dark [style*="background:#e7f5ff"] { background: var(--t-email-bg) !important; color: var(--t-blue-ink) !important; }
html.theme-dark [style*="background:#e6fcf0"] { background: var(--t-wa-bg) !important; color: var(--t-green-ink) !important; }
html.theme-dark [style*="color:#2b8a3e"] { color: var(--t-green-ink) !important; }
html.theme-dark [style*="color:#e67700"] { color: var(--t-amber-ink) !important; }
html.theme-dark [style*="color:#1864ab"] { color: var(--t-blue-ink) !important; }
html.theme-dark [style*="color:#a61e4d"] { color: var(--t-pink-ink) !important; }
html.theme-dark [style*="background:#fff0f6"] .muted { color: #d9a7bc !important; }

/* ================================================================ Grok Bot 2026-10-25 (Chris: "make the System run as dark mode, not bright
   backgrounds, the Panels can be colors"): the child pages (index.html: home tiles, Maths Games menu, level map, game, end screen, pop-ups)
   and the School page (schoolwork.html). autoupdate.js loads this file and theme.js there (data-page kids / school).
   COLOUR ONLY: every rule below sets background, color, border-color, box-shadow colour, fill or stroke. No font, size, spacing,
   display or layout. Light mode (theme.js button, or the dashboard's switch) shows the pages exactly as before.
   The QUESTION / YOUR ANSWER panels stay light on purpose: the pencil ink (#23214a) and the server's pictures are dark lines. */
html.theme-dark[data-page=kids], html.theme-dark[data-page=kids] body,
html.theme-dark[data-page=school], html.theme-dark[data-page=school] body { background: var(--t-bg); color: var(--t-ink); }
html.theme-dark[data-page=kids] { --bg: #0b0b0b; }
/* the switch: bottom-right corner on every page (the header padding it used to need is gone) */
#themeBtn { top: auto; bottom: 14px; right: 14px; }
html[data-page=kids] body.inlesson #themeBtn, html[data-page=kids] body:has(#inFrame) #themeBtn { display: none; }   /* not during a lesson or over Snake / School */

/* ---- child pages: text */
html.theme-dark[data-page=kids] h1 { color: var(--t-accent); }
html.theme-dark[data-page=kids] .small, html.theme-dark[data-page=kids] #stepname { color: var(--t-muted); }
html.theme-dark[data-page=kids] .small a, html.theme-dark[data-page=kids] #parentLinks a { color: var(--t-link); }
html.theme-dark[data-page=kids] button.soft { background: #2a2740; color: var(--t-ink); box-shadow: 0 4px 0 #46406e; }
html.theme-dark[data-page=kids] #fsBtn { background: var(--t-surface2); color: var(--t-ink); box-shadow: 0 2px 0 var(--t-line); }
/* ---- home: three big coloured tiles, deep colours with white text (all 7:1 or better) */
html.theme-dark[data-page=kids] .ltile { color: #fff; box-shadow: 0 8px 0 rgba(0,0,0,.6); }
html.theme-dark[data-page=kids] .ltile small { color: #e4e4ee; }
html.theme-dark[data-page=kids] .lmaths { background: #3a2f8c; border-color: #8f80e8; }
html.theme-dark[data-page=kids] .lgames, html.theme-dark[data-page=kids] .lsnake { background: #11573a; border-color: #3ccf82; }
html.theme-dark[data-page=kids] .lwork { background: #6b4e00; border-color: #fcc419; }
html.theme-dark[data-page=kids] .lblock { background: #0f4a7a; border-color: #4dabf7; }
/* ---- Maths Games menu: each card keeps its colour as a dark tint, its coloured border and number */
html.theme-dark[data-page=kids] .gamecard { background: #17151f; color: var(--t-ink); border-color: #3a3560; box-shadow: 0 4px 0 #2a2645; }
html.theme-dark[data-page=kids] .gamecard b { color: #cfc8ff; }
html.theme-dark[data-page=kids] .gamecard small { color: #c4c4d0; }
html.theme-dark[data-page=kids] #menu .gamecard:nth-child(6n+1) { background: #1e1a3a; } html.theme-dark[data-page=kids] #menu .gamecard:nth-child(6n+2) { background: #10291c; }
html.theme-dark[data-page=kids] #menu .gamecard:nth-child(6n+3) { background: #2e2210; } html.theme-dark[data-page=kids] #menu .gamecard:nth-child(6n+4) { background: #2e1220; }
html.theme-dark[data-page=kids] #menu .gamecard:nth-child(6n+5) { background: #0f2234; } html.theme-dark[data-page=kids] #menu .gamecard:nth-child(6n+6) { background: #24163a; }
html.theme-dark[data-page=kids] .gamecard.startcard { background: #10291c; }
html.theme-dark[data-page=kids] .gamecard.startcard b { color: #7ee2a0; }
html.theme-dark[data-page=kids] .gamecard.startcard.donecard { background: #10291c; }
html.theme-dark[data-page=kids] .gamecard .gstars { color: #cfc8ff; }
html.theme-dark[data-page=kids] .gamecard .pbar { background: #1c3a29; }
html.theme-dark[data-page=kids] .gamecard .pbar i { background: #24764a; }
html.theme-dark[data-page=kids] .gamecard .pbar em { color: #fff; }
/* the next tile keeps its gold glow, pulse, shimmer and 3 stars (style.css); only its card colour is darker */
html.theme-dark[data-page=kids] .gamecard.nextup { background: #2e2608; }
html.theme-dark[data-page=kids] #menu .mhead { color: #c9c4ee; } html.theme-dark[data-page=kids] #menu .mhead b { color: #d5ceff; }
html.theme-dark[data-page=kids] #menu .mhead span { color: #a9a6c8; }
html.theme-dark[data-page=kids] #sidelinks a { background: #17151f; border-color: #3a3560; color: #d5ceff; }
html.theme-dark[data-page=kids] body.sidelinks #sidelinks a.swlink { background: #3a3010; border-color: #fcc419; color: #ffe08a; }
html.theme-dark[data-page=kids] body.sidelinks #sidelinks a.snakego { background: #1f7d4d; color: #fff; }
html.theme-dark[data-page=kids] .resume { background: #1f7d4d; }
html.theme-dark[data-page=kids] .walletend { background: #221f33; color: #d5ceff; }
html.theme-dark[data-page=kids] .levelup { background: #3a2e08; color: #ffe08a; }
/* level bar on the menu */
html.theme-dark[data-page=kids] .mapbar { background: #1b1830; color: var(--t-ink); border-color: #8f80e8; }
html.theme-dark[data-page=kids] .mapbar .pbar { background: #34305a; }
html.theme-dark[data-page=kids] .mapbar .pbar i { background: #6b5bd2; }
html.theme-dark[data-page=kids] .mapbar .pbar em { color: #fff; }
html.theme-dark[data-page=kids] .mapbar .go { color: #cfc8ff; }
/* ---- level map: islands, stepping stones, the stone pop-up */
html.theme-dark[data-page=kids] #map .maptop { background: var(--t-bg); }
html.theme-dark[data-page=kids] .lroad .lroadbg { stroke: #4a4430; } html.theme-dark[data-page=kids] .lroad .lroadfg { stroke: #cfc6a0; }
html.theme-dark[data-page=kids] .lisle .lnode { border-color: #e8e4ff; }
html.theme-dark[data-page=kids] .lisle .lcard, html.theme-dark[data-page=kids] .maplevel { background: #17151f; color: var(--t-ink); border-color: #3a3560; box-shadow: 0 6px 0 #2a2645; }
html.theme-dark[data-page=kids] .lisle h3 span, html.theme-dark[data-page=kids] .maplevel h3 span, html.theme-dark[data-page=kids] .lnote,
html.theme-dark[data-page=kids] .lme small { color: #b3afd6; }
html.theme-dark[data-page=kids] .lisle.flag .lcard { background: #10291c; border-color: #2e8a57; box-shadow: none; }
html.theme-dark[data-page=kids] .lisle.done .lcard, html.theme-dark[data-page=kids] .maplevel.done { background: #2b240c; border-color: #f2c94c; box-shadow: 0 6px 0 #5c4b14; }
html.theme-dark[data-page=kids] .lisle.now .lcard { background: #1b1830; border-color: #8f80e8; box-shadow: 0 0 0 4px rgba(143,128,232,.3), 0 0 30px rgba(143,128,232,.45); }
html.theme-dark[data-page=kids] .lme { background: #241f45; }
html.theme-dark[data-page=kids] .stone { background: #221f33; color: var(--t-ink); border-color: #4a4475; }
html.theme-dark[data-page=kids] .stone.s2, html.theme-dark[data-page=kids] .stone.s3 { background: #3a3010; border-color: #f2c94c; }
html.theme-dark[data-page=kids] .stone.s0 { background: #1a1a22; }
html.theme-dark[data-page=kids] .sscard { background: #1b1830; color: var(--t-ink); }
/* ---- game screen: dark page and top bar; the two panels stay light (see top) */
html.theme-dark[data-page=kids] #progress i { background: #3a3560; }
html.theme-dark[data-page=kids] #progress i.done { background: var(--green); } html.theme-dark[data-page=kids] #progress i.miss { background: var(--orange); }
html.theme-dark[data-page=kids] #progress i.now { background: #8f80e8; outline-color: #5a4fb0; }
html.theme-dark[data-page=kids] .panel { color: #23214a; border-color: #5a5480; }
/* ---- end screen and pop-ups (break card, "First time" card, Talk note, Together chip) */
html.theme-dark[data-page=kids] .breakcard { background: rgba(0,0,0,.65); }
html.theme-dark[data-page=kids] .breakcard > div { background: #1b1830; color: var(--t-ink); }
html.theme-dark[data-page=kids] [style*="background:#fff;border-radius:20px"] { background: #1b1830 !important; color: var(--t-ink); }
html.theme-dark[data-page=kids] [style*="background:#fff;border-radius:20px"] [style*="color:#456"] { color: #b9c6d6 !important; }
html.theme-dark[data-page=kids] #inFrame[style*="background:#fff8ef"] { background: var(--t-bg) !important; }
html.theme-dark[data-page=kids] #liaTalk .note { background: #1b1830; color: var(--t-ink); }
html.theme-dark[data-page=kids] #tgChip { color: var(--t-ink); }
html.theme-dark[data-page=kids] #tgChip .pill, html.theme-dark[data-page=kids] #tgChip .menu { background: #1b1830; border-color: #3a3560; }
html.theme-dark[data-page=kids] #tgChip .menu button { background: #2c2660; color: var(--t-ink); }
html.theme-dark[data-page=kids] #tgChip .menu button.go { background: #1f7d4d; color: #fff; }
html.theme-dark[data-page=kids] #tgChip .menu button.wt { background: #ffd43b; color: #23214a; }

/* ---- School page (schoolwork.html, on its own, inside the home page and in the dashboard) */
html.theme-dark[data-page=school] .top { background: var(--t-bg); }
html.theme-dark[data-page=school] .top h1, html.theme-dark[data-page=school] #day h2, html.theme-dark[data-page=school] details summary { color: var(--t-accent); }
html.theme-dark[data-page=school] .top a.back, html.theme-dark[data-page=school] .tick, html.theme-dark[data-page=school] .dnav,
html.theme-dark[data-page=school] #addForm .fno { background: var(--t-surface2); color: var(--t-ink); border-color: #3a3560; }
html.theme-dark[data-page=school] .dnav { color: var(--t-accent); }
html.theme-dark[data-page=school] .dnav.dplus { background: #c2255c; border-color: #c2255c; color: #fff; }
html.theme-dark[data-page=school] .tick.cls { border-color: #0f9d58; }
html.theme-dark[data-page=school] .tick.on { background: var(--t-wa-bg); border-color: #2eaa6a; }
html.theme-dark[data-page=school] .sub, html.theme-dark[data-page=school] #day .dsub, html.theme-dark[data-page=school] .note { color: var(--t-muted); }
html.theme-dark[data-page=school] h2.over, html.theme-dark[data-page=school] .card .due b.over { color: #ff8787; }
html.theme-dark[data-page=school] h2.today { color: var(--t-amber-ink); } html.theme-dark[data-page=school] h2.soon { color: var(--t-green-ink); }
html.theme-dark[data-page=school] .card, html.theme-dark[data-page=school] #day { background: var(--t-surface); border-color: #3a3560; }
html.theme-dark[data-page=school] .card.over { background: #2b1215; border-color: #e35d5d; }
html.theme-dark[data-page=school] .card.today { background: #2e2210; border-color: #ffa94d; }
html.theme-dark[data-page=school] .card .cls { color: var(--t-accent); }
html.theme-dark[data-page=school] .card .due, html.theme-dark[data-page=school] .card .src small { color: #c0c0c8; }
html.theme-dark[data-page=school] .appopen { color: var(--t-ink); }
html.theme-dark[data-page=school] .empty { background: var(--t-wa-bg); color: var(--t-green-ink); }
html.theme-dark[data-page=school] #day .anote { background: #3a3010; color: #ffe08a; }
html.theme-dark[data-page=school] #hours .hr { border-top-color: #2a2a2a; color: #9a9a9a; }
html.theme-dark[data-page=school] #hours .ev small { color: #c4c4cc; }
html.theme-dark[data-page=school] #hours .ev.school { background: #241f45; }
html.theme-dark[data-page=school] #hours .ev.event { background: var(--t-wa-bg); }
html.theme-dark[data-page=school] #hours .ev.home { background: #3a2408; }
html.theme-dark[data-page=school] #hours .ev.mine, html.theme-dark[data-page=school] #addForm { background: var(--t-pink-bg); }
html.theme-dark[data-page=school] #hours .ev.mine .x { background: var(--t-surface2); color: var(--t-pink-ink); }
html.theme-dark[data-page=school] #hours .ev.mine .x.sure { background: #c2255c; color: #fff; }
html.theme-dark[data-page=school] #addForm input { background: #101010; color: var(--t-ink); }
html.theme-dark[data-page=school] .clk .col button { background: var(--t-surface2); color: var(--t-pink-ink); }
html.theme-dark[data-page=school] .clk .col button:active { background: #4a1a30; }
html.theme-dark[data-page=school] .clk .none { color: #ff8fb8; }
html.theme-dark[data-page=school] .clk .off span, html.theme-dark[data-page=school] .clk.noend .col span { color: #6a6a6a; }
html.theme-dark[data-page=school] #addForm .fgo { background: #c2255c; }
html.theme-dark[data-page=school] #fsBtn { background: var(--t-surface2); color: var(--t-ink); box-shadow: 0 2px 0 var(--t-line); }
html.theme-dark[data-page=school] [style*="background:#fff9db"] { background: #3a3010 !important; }
html.theme-dark[data-page=school] [style*="color:#666"] { color: #b0b0b8 !important; }   /* "posted ..." dates */
html.theme-dark[data-page=dashboard] #fsBtn, html.theme-dark.tpage #fsBtn { background: var(--t-surface2); color: var(--t-ink); box-shadow: 0 2px 0 var(--t-line); }   /* full-screen button */