/* Theme feature: the header switch itself, plus the hand-tuned dark values that the generator cannot infer. Loads AFTER theme-dark.css, so anything declared here wins over the generated overlay. Two kinds of rule live in this file: 1. Theme-AGNOSTIC component CSS for the .theme-toggle button (it is a new element, so it has no light-theme rules anywhere else). 2. Dark-theme corrections, all scoped to :root[data-theme="dark"]. styles.css is deliberately never edited by this feature — light mode is byte-identical to what it was, which is what makes the change safe to ship. */ /* ------------------------------------------------------------------ * * 1. The header switch (both themes) * ------------------------------------------------------------------ */ /* The header standard is text-only nav with Register as the single filled CTA, so the switch is quiet: icon only, no fill, no outline, and — per the header rule that click states must never change geometry — hover/active recolour only. */ .auth-links .theme-toggle, .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #4a5662; cursor: pointer; line-height: 0; transition: background-color .15s ease, color .15s ease; } .auth-links .theme-toggle:hover, .auth-links .theme-toggle:focus-visible, .theme-toggle:hover, .theme-toggle:focus-visible { background: rgba(23, 33, 43, .07); color: #17212b; } .theme-toggle:focus-visible { outline: 2px solid #2a9d8f; outline-offset: 2px; } /* Each icon describes what a click will DO, so light mode offers the moon. */ .theme-toggle .theme-icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; } :root[data-theme="dark"] .auth-links .theme-toggle, :root[data-theme="dark"] .theme-toggle { color: #a8a29a; } :root[data-theme="dark"] .theme-toggle:hover, :root[data-theme="dark"] .theme-toggle:focus-visible { background: rgba(236, 233, 227, .10); color: #ece9e3; } /* ------------------------------------------------------------------ * * 2. Dark-theme corrections * ------------------------------------------------------------------ */ /* The page itself. The generator maps the light band monotonically, which keeps relative depth but lands the page too close to the cards; the large flat area wants to be the darkest thing on screen so cards read as raised. */ :root[data-theme="dark"] body { background: #1b1a19; } :root[data-theme="dark"] .app-header { background: #201f1d; border-bottom-color: #302e2b; } /* Native chrome follows the theme (scrollbars, form controls, date pickers). colorScheme is also set inline on by the head script so this is correct before first paint. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="dark"] ::selection { background: #2a5d57; color: #f2efe9; } /* The brand lockup is drawn on a flat white plate, which would show as a white box on the dark header. Swap in the derived transparent variants (scripts/gen_dark_brand_assets.py) — same artwork, ink recoloured, teal untouched. */ :root[data-theme="dark"] .brand-icon { content: url("assets/lotolens-icon-dark.png"); } :root[data-theme="dark"] .brand-wordmark { content: url("assets/lotolens-wordmark-dark.png"); } /* The age gate is the FIRST thing a visitor sees, and it uses the full lockup rather than the header wordmark — without this it is a white plate floating on the dark overlay. */ :root[data-theme="dark"] .age-gate-logo { content: url("assets/lotolens-logo-dark.png"); } /* Photographic/illustrative imagery keeps its own colours, but pure-white plates behind small brand marks look like holes — soften them slightly. */ :root[data-theme="dark"] img.on-white-plate { background: #f2efe9; border-radius: 6px; } /* --ink wears two hats: it is the body TEXT colour (hundreds of uses) and it is also the FILL of the few dark buttons (.primary-action, .scroll-up-btn, .source-order-toggle). Dark mode has to lift --ink to an off-white for text, which turns those buttons into pale slabs with white text on them. So the filled-button family is restated here — inverted the way Claude and ChatGPT do it: an off-white pill with dark ink on top. */ :root[data-theme="dark"] .primary-action, :root[data-theme="dark"] .scroll-up-btn, :root[data-theme="dark"] .source-order-toggle { background: #ece9e3; color: #1b1a19; border-color: #ece9e3; } :root[data-theme="dark"] .primary-action:hover, :root[data-theme="dark"] .scroll-up-btn:hover, :root[data-theme="dark"] .source-order-toggle:hover { background: #ffffff; color: #14130f; } /* The quiet sibling: outlined, not filled. */ :root[data-theme="dark"] .secondary-action { background: transparent; color: #ece9e3; border-color: #4a4741; } :root[data-theme="dark"] .secondary-action:hover { background: rgba(236, 233, 227, .08); } :root[data-theme="dark"] .secondary-action:disabled { color: #8d877e; border-color: #3a3733; background: transparent; } /* ------------------------------------------------------------------ * * 3. Gated tabs wear the plain outline in dark mode * ------------------------------------------------------------------ */ /* Owner request: in DARK mode the Pro tabs must NOT carry the deep-red tier outline — they take exactly the same outline as a Basic tab, so the tab row reads as one row instead of a row with red boxes cut into it. LIGHT mode is untouched and keeps the platform's flat deep-red tier chrome. This covers both gated families at once — the analysis tabs in the tab bar AND the quicknav pills (Conclusion, Taskpad, Circles), which share these two classes. The 1.5px red border also becomes the Basic 1px, so the gated tabs line up with their neighbours instead of sitting half a pixel proud. */ :root[data-theme="dark"] .worksheet-tab.master-tab-wide, :root[data-theme="dark"] .worksheet-tab.master-tab-compact, :root[data-theme="dark"] .worksheet-tab.master-tab-wide.active, :root[data-theme="dark"] .worksheet-tab.master-tab-compact.active { border: 1px solid var(--line); border-bottom: 0; } /* The quicknav pills are full pills rather than tabs, so they keep a bottom border — otherwise they lose their outline along the base. */ :root[data-theme="dark"] .worksheet-quicknav .worksheet-tab.master-tab-wide, :root[data-theme="dark"] .worksheet-quicknav .worksheet-tab.master-tab-compact { border: 1px solid var(--line); } /* Circles toggle: keep the three states tellable apart in dark mode. The light-mode "engaged" tints (#fdecec / #f8d9d9) are pale, so the generated overlay reads them as light backgrounds and darkens them — which collapsed circles-on to #232220, all but identical to the button's own dark fill. The generator is right in general and this pair is the exception, so the tints are stated here rather than by special-casing the generator. Deliberately warm-red and stepped: circles-on is a hint, C-Lines is stronger, matching the light-mode progression. The border stays put in every state — that is the whole point of the fix these accompany. */ :root[data-theme="dark"] .circles-toggle-btn.circles-on { background: #3a2222; } :root[data-theme="dark"] .circles-toggle-btn.circles-clines { background: #512525; } /* --------------------------------------------------------------------------- Task 16 (owner, 26 Jul 2026) — two dark-mode legibility faults. (a) THE CIRCLES THEMSELVES. The generated overlay flips a colour's lightness to suit a dark background, which is right for text and fills but wrong for these rings: the plain 2-in-a-row ring is a DARK outline (rgba(23,33,43,.55)) that reads clearly on white, and inverting it produced rgba(76,72,67,.55) — dark grey at 55% opacity ON a dark sheet, i.e. all but invisible. The tinted rings were dimmed the same way, and the Powerball ring's box-shadow became near-black. On a dark background a ring has to get BRIGHTER, not deeper, so the four tiers are restated here at dark-background luminance and kept in the same hue order (grey 2, blue 3, green 4, red 5+) so the colour code still reads exactly as the popup and the handbook describe it. */ :root[data-theme="dark"] .source-data-sheet .num-repeat-ring { border-color: rgba(226, 222, 214, 0.72); } :root[data-theme="dark"] .source-data-sheet .num-repeat-ring.num-repeat-blue { border-color: #6ea8ff; } :root[data-theme="dark"] .source-data-sheet .num-repeat-ring.num-repeat-green { border-color: #57d98a; } :root[data-theme="dark"] .source-data-sheet .num-repeat-ring.num-repeat-red { border-color: #ff6b6b; } /* The Powerball/bonus ring wears its tier as a ring-shaped shadow rather than a border; the overlay had darkened these to near-black on a dark sheet. */ :root[data-theme="dark"] .source-data-sheet .pb-circle.pb-ring.num-repeat-blue { box-shadow: 0 0 0 1.5px #6ea8ff; } :root[data-theme="dark"] .source-data-sheet .pb-circle.pb-ring.num-repeat-green { box-shadow: 0 0 0 1.5px #57d98a; } :root[data-theme="dark"] .source-data-sheet .pb-circle.pb-ring.num-repeat-red { box-shadow: 0 0 0 1.5px #ff6b6b; } /* Supplementary/bonus rings share the tier vocabulary — keep them in step. */ :root[data-theme="dark"] .source-data-sheet .supp-circle.supp-ring-blue { border-color: #6ea8ff; } :root[data-theme="dark"] .source-data-sheet .supp-circle.supp-ring-green { border-color: #57d98a; } :root[data-theme="dark"] .source-data-sheet .supp-circle.supp-ring-red { border-color: #ff6b6b; } /* ⚠️ THE OFF STATE MUST STILL WIN (owner bug, 26 Jul 2026: "the circles come automatically… almost every lottery is like this now"). Circles are a Pro TOGGLE and start OFF: app.js sets sourceCirclesMode 'default' and applyCirclesMode() puts .circles-hidden on the sheet, which in light mode hides the rings by painting them transparent (.source-data-sheet.circles-hidden .num-repeat-ring, specificity 0-3-0). Every dark rule ABOVE re-states border-color/box-shadow at 0-4-0 to 0-6-0 and therefore BEAT that hide — so in dark mode the rings were painted on page load, on every product, before the button was ever pressed. Each rule below mirrors one above with .circles-hidden added, which is always +1 class, so the OFF state wins again. If you add another dark ring rule, add its hidden twin here in the same commit. */ :root[data-theme="dark"] .source-data-sheet.circles-hidden .num-repeat-ring, :root[data-theme="dark"] .source-data-sheet.circles-hidden .num-repeat-ring.num-repeat-blue, :root[data-theme="dark"] .source-data-sheet.circles-hidden .num-repeat-ring.num-repeat-green, :root[data-theme="dark"] .source-data-sheet.circles-hidden .num-repeat-ring.num-repeat-red { border-color: transparent; background: transparent; font-weight: 400; } :root[data-theme="dark"] .source-data-sheet.circles-hidden .pb-circle.pb-ring, :root[data-theme="dark"] .source-data-sheet.circles-hidden .pb-circle.pb-ring.num-repeat-blue, :root[data-theme="dark"] .source-data-sheet.circles-hidden .pb-circle.pb-ring.num-repeat-green, :root[data-theme="dark"] .source-data-sheet.circles-hidden .pb-circle.pb-ring.num-repeat-red { box-shadow: none; } :root[data-theme="dark"] .source-data-sheet.circles-hidden .supp-circle.supp-ring, :root[data-theme="dark"] .source-data-sheet.circles-hidden .supp-circle.supp-ring-blue, :root[data-theme="dark"] .source-data-sheet.circles-hidden .supp-circle.supp-ring-green, :root[data-theme="dark"] .source-data-sheet.circles-hidden .supp-circle.supp-ring-red { border-color: transparent; box-shadow: none; } /* (b) THE SELECTED PRO TAB. The owner asked earlier that Pro tabs lose their red outline in dark mode and match Basic tabs; the rule above does that by forcing `border: 1px solid var(--line)` — but it was written to cover the .active state too, so a selected Pro tab ended up with exactly the same border as an unselected one and there was no way to see which tab you were on. Basic tabs stay legible because .worksheet-tab.active paints the accent. Give the selected Pro tab that same accent. The RESTING state keeps the neutral border, so this restores the selection cue without bringing the red outline back. */ :root[data-theme="dark"] .worksheet-tab.master-tab-wide.active, :root[data-theme="dark"] .worksheet-tab.master-tab-compact.active { border: 1px solid var(--accent); border-bottom: 0; color: var(--accent); } :root[data-theme="dark"] .worksheet-quicknav .worksheet-tab.master-tab-wide.active, :root[data-theme="dark"] .worksheet-quicknav .worksheet-tab.master-tab-compact.active { border: 1px solid var(--accent); } /* The "Pro" sub-label sits inside the button; let it follow the selected state rather than staying red on an otherwise teal button. */ :root[data-theme="dark"] .worksheet-tab.master-tab-wide.active .master-tab-label, :root[data-theme="dark"] .worksheet-tab.master-tab-compact.active .master-tab-label { color: var(--accent); } /* The Beta badge (owner, 26 Jul 2026). The generated overlay flips lightness, which pushes the cyan toward a muddy dark tint on a dark header — gotcha 56. Give it an explicit brighter cyan so the badge stays legible and still reads as quiet next to the wordmark. */ :root[data-theme="dark"] .brand-beta { border-color: rgba(93, 214, 232, .40); background: rgba(93, 214, 232, .14); color: #5dd6e8; } /* Country finder cards, dark mode (owner, 26 Jul 2026). styles.css gives a country WITH live products a green outline (border-color: var(--good)) — on the cream light page that reads as a gentle highlight, but on the dark page a grid of bright green rectangles shouts and turns the section into a set of boxes. Dark mode gets the SAME neutral outline as any other card; the green "N available now" line still carries the status. Light mode is untouched. */ :root[data-theme="dark"] .country-card.lp-roadmap-live { border-color: var(--line); } /* Pro quicknav pills: the MAIN word is ink in dark mode too (owner uniformity rule, 26 Jul 2026). The generated overlay recolours this selector to #d45454 because the light rule it was derived from used to be red — so Learn (and the admin-only Conclusion) rendered as the single red word beside the dark Circles and Taskpad. Loading after the overlay, this restores parity: the Pro signal is the outline plus the small red "Pro" label, never the word itself. */ :root[data-theme="dark"] .worksheet-tab.quicknav-tab.master-tab-compact:not(.taskpad-pro-btn) .master-tab-main, :root[data-theme="dark"] .worksheet-tab.quicknav-tab.master-tab-compact:not(.taskpad-pro-btn).active .master-tab-main { color: var(--ink); } /* Canada Lotto 6/49 — dark-mode Bonus-circle rings (gotcha #56: the rings' MEANING is their colour, and the generated overlay darkens them into the page). The maple-red circle keeps its auto-darkened fill; the tier rings are re-asserted BRIGHT (the same dark-mode tier colours the shared ring rules use) with a dark gap so red-on-red stays readable. */ :root[data-theme="dark"] .oz-dashboard-page.ca-dashboard-page .source-data-sheet .supp-circle.supp-ring { box-shadow: 0 0 0 1.5px #10141a, 0 0 0 3px #aab3bf; } :root[data-theme="dark"] .oz-dashboard-page.ca-dashboard-page .source-data-sheet .supp-circle.supp-ring-blue { box-shadow: 0 0 0 1.5px #10141a, 0 0 0 3px #6ea8ff; } :root[data-theme="dark"] .oz-dashboard-page.ca-dashboard-page .source-data-sheet .supp-circle.supp-ring-green { box-shadow: 0 0 0 1.5px #10141a, 0 0 0 3px #57d98a; } :root[data-theme="dark"] .oz-dashboard-page.ca-dashboard-page .source-data-sheet .supp-circle.supp-ring-red { box-shadow: 0 0 0 1.5px #10141a, 0 0 0 3px #ff6b6b; } /* The Circles-OFF state must beat the bright rules above (gotcha #61: an off state needs MORE specificity than any dark colour rule it has to defeat). */ :root[data-theme="dark"] .oz-dashboard-page.ca-dashboard-page .source-data-sheet.circles-hidden .supp-circle.supp-ring, :root[data-theme="dark"] .oz-dashboard-page.ca-dashboard-page .source-data-sheet.circles-hidden .supp-circle.supp-ring-blue, :root[data-theme="dark"] .oz-dashboard-page.ca-dashboard-page .source-data-sheet.circles-hidden .supp-circle.supp-ring-green, :root[data-theme="dark"] .oz-dashboard-page.ca-dashboard-page .source-data-sheet.circles-hidden .supp-circle.supp-ring-red { box-shadow: none; } /* The "Updating…" pill needs the cyan on a dark ground — navy on near-black reads as an unlabelled smudge. */ html[data-theme="dark"] #worksheetPanel.is-recomputing::after, body.theme-dark #worksheetPanel.is-recomputing::after { background: #0097AE; color: #04121f; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); } /* The special-ball chip keeps the product's own colour in dark mode. theme-dark.css is generated from styles.css and restates the chip background as a LITERAL (#0a7aa2), so a product that declares its own colour via --special-ball-bg had it silently repainted Powerball blue the moment the page went dark — gotcha #56 exactly: the generated overlay recolours the selector independently, and a colour whose MEANING is its colour has to be re-asserted here. The fallback chain keeps every product that declares nothing on the existing dark blue, byte-for-byte. */ :root[data-theme="dark"] .powerball-chip, :root[data-theme="dark"] .source-data-sheet .pb-circle { background: var(--special-ball-bg-dark, var(--special-ball-bg, #0a7aa2)); }