/* IEDEP quiz panel — Material 3 light/dark tokens as RGB channels. Colors are consumed by tailwind-theme.js as rgb(var(--token) / ), so every bg / text / border utility flips automatically when gets .dark. Generated from OKLCH definitions (scripts/gen_theme) — fresh green-tinted surfaces, one deep emerald primary, refined amber/red/green semantics. Edit the generator + values, not per screen. */ :root { color-scheme: light; --on-error: 255 247 245; --error-dim: 179 0 24; --on-tertiary: 255 250 238; --primary: 0 130 88; --on-secondary-fixed: 0 37 48; --inverse-surface: 36 49 44; --tertiary-dim: 146 100 34; --secondary-container: 172 229 235; --on-background: 35 49 44; --on-primary: 246 254 250; --inverse-primary: 64 197 155; --tertiary: 165 118 54; --outline-variant: 197 207 202; --surface-variant: 223 231 228; --outline: 119 136 129; --on-tertiary-fixed: 67 39 0; --surface-tint: 0 130 88; --primary-container: 188 234 215; --primary-fixed: 188 234 215; --tertiary-container: 255 187 95; --surface-bright: 251 253 252; --secondary: 0 113 131; --error-container: 233 80 77; --on-primary-container: 0 74 43; --primary-dim: 0 112 72; --tertiary-fixed: 255 187 95; --secondary-dim: 0 95 113; --surface-dim: 214 220 218; --secondary-fixed-dim: 115 208 219; --surface-container: 236 241 239; --on-secondary: 245 254 255; --on-surface: 35 49 44; --on-primary-fixed-variant: 0 92 58; --on-error-container: 86 0 5; --surface: 248 251 249; --on-tertiary-container: 98 63 10; --on-tertiary-fixed-variant: 116 76 14; --secondary-fixed: 172 229 235; --on-secondary-container: 0 71 85; --error: 201 47 51; --on-primary-fixed: 0 39 17; --surface-container-low: 243 247 245; --surface-container-highest: 221 228 225; --tertiary-fixed-dim: 238 167 67; --primary-fixed-dim: 144 213 186; --background: 248 251 249; --surface-container-lowest: 255 255 255; --on-secondary-fixed-variant: 0 89 104; --inverse-on-surface: 236 239 238; --surface-container-high: 229 234 232; --on-surface-variant: 79 98 90; } html.dark { color-scheme: dark; --on-error: 70 1 5; --error-dim: 255 155 147; --on-tertiary: 51 28 0; --primary: 64 197 155; --on-secondary-fixed: 0 37 48; --inverse-surface: 225 230 228; --tertiary-dim: 214 150 59; --secondary-container: 0 74 86; --on-background: 225 230 228; --on-primary: 0 39 17; --inverse-primary: 0 130 88; --tertiary: 241 175 87; --outline-variant: 50 58 55; --surface-variant: 41 47 45; --outline: 115 125 121; --on-tertiary-fixed: 67 39 0; --surface-tint: 64 197 155; --primary-container: 0 85 54; --primary-fixed: 188 234 215; --tertiary-container: 101 62 0; --surface-bright: 38 44 41; --secondary: 38 192 207; --error-container: 138 3 20; --on-primary-container: 191 233 216; --primary-dim: 35 177 137; --tertiary-fixed: 255 187 95; --secondary-dim: 0 173 187; --surface-dim: 9 12 11; --secondary-fixed-dim: 115 208 219; --surface-container: 24 28 26; --on-secondary: 0 31 41; --on-surface: 225 230 228; --on-primary-fixed-variant: 0 92 58; --on-error-container: 255 207 202; --surface: 13 16 15; --on-tertiary-container: 255 214 164; --on-tertiary-fixed-variant: 116 76 14; --secondary-fixed: 172 229 235; --on-secondary-container: 184 232 238; --error: 251 129 122; --on-primary-fixed: 0 39 17; --surface-container-low: 19 23 21; --surface-container-highest: 44 50 47; --tertiary-fixed-dim: 238 167 67; --primary-fixed-dim: 144 213 186; --background: 13 16 15; --surface-container-lowest: 6 9 8; --on-secondary-fixed-variant: 0 89 104; --inverse-on-surface: 38 43 41; --surface-container-high: 33 39 36; --on-surface-variant: 164 173 169; } /* Base surface + smooth theme transition */ body { background-color: rgb(var(--background)); color: rgb(var(--on-surface)); } /* The theme flips instantly, on purpose — the way iOS and macOS switch appearance. Only the toggle button animates. There used to be a `body *` colour cross-fade here. Measured on study-plan (~690 elements) it cost ~100-125ms of style recalc per flip versus ~13-20ms without, then repainted every element for a further 250ms; background-color and color are paint properties, so none of that can go on the compositor. It also outranked Tailwind's own `.transition-colors`, retiming every hover on the page. A cross-fade whose cost scales with DOM size is the wrong trade on the densest screens — snapping is both faster and closer to the platform. */ /* Glassmorphism cards/headers: light frost -> dark frost */ html.dark .glass-card { background: rgba(25, 27, 31, 0.72) !important; border-color: rgba(255, 255, 255, 0.07) !important; } html.dark .glass-header { background: rgba(14, 16, 18, 0.72) !important; } html.dark .gold-glow { box-shadow: 0 0 20px rgba(241, 175, 87, 0.14); } /* in_exam custom scrollbar in dark */ html.dark .custom-scrollbar::-webkit-scrollbar-track { background: rgb(var(--surface-container)); } html.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--outline-variant)); } html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgb(var(--outline)); } /* Theme toggle (injected by theme-toggle.js). Floats bottom-left only when the screen provides no [data-theme-toggle-slot]; slotted screens place it in the sidebar footer instead, so it stops covering content that scrolls beneath it. */ #theme-toggle[data-slotted] { position: static; width: 100%; height: auto; justify-content: flex-start; gap: .75rem; padding: .75rem 1rem; border-radius: .875rem; border: 0; background: transparent; box-shadow: none; font: inherit; font-weight: 700; font-size: .875rem; color: rgb(var(--on-surface-variant)); } #theme-toggle[data-slotted]:hover { transform: none; background: rgb(var(--surface-container)); } #theme-toggle[data-slotted]:active { transform: scale(.98); } #theme-toggle[data-slotted]::after { content: attr(data-label); font: inherit; } #theme-toggle { position: fixed; bottom: 1rem; left: 1rem; z-index: 60; width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgb(var(--surface-container-high)); color: rgb(var(--on-surface)); border: 1px solid rgb(var(--outline-variant)); box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .34s var(--morph-settle), background-color .2s ease; /* Per DESIGN.md: ease-out only, no bounce. Reuse the app's existing iOS motion vocabulary (injected at :root by interactions.js) rather than inventing a competing curve; the fallbacks keep this file standalone. The premium feel here comes from the choreography and the expo settle, not from overshoot. */ --morph-settle: var(--ios-ease, cubic-bezier(.16,1,.3,1)); /* ease-out-expo */ --morph-quick: var(--ios-spring, cubic-bezier(.22,1,.36,1)); /* ease-out-quint */ } #theme-toggle:hover { transform: scale(1.06); background: rgb(var(--surface-container-highest)); } /* Press squash resolves instantly; the release rides the spring back. */ #theme-toggle:active { transform: scale(.88); transition-duration: .1s; } #theme-toggle:focus-visible { outline: 2px solid rgb(var(--primary)); outline-offset: 2px; } #theme-toggle svg { width: 1.35rem; height: 1.35rem; overflow: visible; } /* --- Sun <-> moon morph ------------------------------------------------- Choreographed rather than simultaneous: the rays retract one by one, the disc swells and the mask slides in to carve the crescent slightly behind them, and the stars land last. Reversing swaps the order, so the sun's rays only spring back out once the crescent has gone. Geometry (r/cx/cy) carries units: the spec wants , and while Blink also accepts a bare `9`, other engines are not obliged to. */ /* The whole icon counter-rotates a touch — cheap depth, reads as one object. */ #theme-toggle .icon-morph { transition: transform .6s var(--morph-settle); } html.dark #theme-toggle .icon-morph { transform: rotate(-14deg); } #theme-toggle .disc { r: 5px; transition: r .55s var(--morph-settle); transition-delay: 40ms; } html.dark #theme-toggle .disc { r: 9px; transition-delay: 90ms; } #theme-toggle .bite { cx: 24px; cy: 4px; transition: cx .55s var(--morph-settle), cy .55s var(--morph-settle); transition-delay: 40ms; } html.dark #theme-toggle .bite { cx: 16px; cy: 6px; transition-delay: 90ms; } /* Each ray owns its index (--i, set in the markup) so it can rotate about the icon centre and retract on its own beat. */ #theme-toggle .ray { transform-box: view-box; transform-origin: 12px 12px; transform: rotate(calc(var(--i) * 45deg)); opacity: 1; transition: transform .55s var(--morph-quick), opacity .25s ease; transition-delay: calc(140ms + (7 - var(--i)) * 14ms); /* returning: after the crescent leaves */ } html.dark #theme-toggle .ray { transform: rotate(calc(var(--i) * 45deg + 90deg)) scale(.15); opacity: 0; transition-delay: calc(var(--i) * 14ms); /* leaving: immediate, staggered */ } /* Stars sit in the region the mask carves away, so they only ever appear over empty space. They pop in last and vanish first. */ #theme-toggle .star { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; transition: transform .4s var(--morph-quick), opacity .2s ease; } html.dark #theme-toggle .star { transform: scale(1); opacity: .9; transition-delay: calc(300ms + var(--i) * 70ms); } /* Tap ripple. Driven by a class from the JS so it fires on real presses only, never on the initial paint. */ #theme-toggle .halo { position: absolute; inset: -1px; border-radius: 9999px; border: 1.5px solid currentColor; opacity: 0; pointer-events: none; } #theme-toggle.is-toggling .halo { animation: theme-halo .62s ease-out; } @keyframes theme-halo { 0% { opacity: .45; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.75); } } @media (prefers-reduced-motion: reduce) { #theme-toggle, #theme-toggle .icon-morph, #theme-toggle .disc, #theme-toggle .bite, #theme-toggle .ray, #theme-toggle .star { transition: none; transition-delay: 0ms; } #theme-toggle.is-toggling .halo { animation: none; } } /* Mobile: keep form controls at >=16px so iOS Safari does not auto-zoom the viewport when a field gains focus. Desktop sizing is untouched. */ @media (max-width: 640px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: 16px; } }