/* ===== CHALK HANDWRITING FACE ===== Caveat, SIL Open Font License 1.1 - see fonts/OFL.txt. Google Fonts build v23, latin + latin-ext subsets. One variable file covers the whole 400-700 axis, so weights 500 and 700 share a source. Loaded from our own origin on purpose: the CSP style-src does not list fonts.googleapis.com, the SW cannot usefully cache a cross-origin font, and a font request is a third-party disclosure of every child's IP address. */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/caveat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/caveat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===== RESET & BASE ===== */ *, *::before, *::after { box-sizing: border-box; } /* Dark-mode base colours — mirrors Tailwind's bg-slate-50 / dark:bg-gray-900. Applied here so the page has the correct background even when the Tailwind CDN is unavailable (offline). */ body { background-color: #f8fafc; } html.dark body { background-color: #111827; } /* ===== PAGE-LOAD SPINNER ===== Rendered on pseudo-elements so it shows through body opacity:0. Both pieces fade out when protect.js removes the ps-loading class, and the body fades in simultaneously — a clean crossfade from spinner to app. */ @keyframes ps-spin { to { transform: rotate(360deg); } } /* Dark overlay + centred pencil emoji */ html::before { content: '✏️'; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: #111827; z-index: 9000; opacity: 0; pointer-events: none; transition: opacity 0.35s ease-out; } html:not(.dark)::before { background: #f8fafc; } html.ps-loading::before { opacity: 1; pointer-events: all; } /* Spinning indigo ring around the emoji */ html::after { content: ''; position: fixed; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 3px solid rgba(129, 140, 248, 0.2); border-top-color: #818cf8; border-radius: 50%; animation: ps-spin 0.85s linear infinite; z-index: 9001; opacity: 0; pointer-events: none; transition: opacity 0.35s ease-out; } html.ps-loading::after { opacity: 1; } /* ===== CONTENT PROTECTION ===== */ /* Text selection is enabled app-wide for now; individual controls (buttons, tabs, chips) still opt out via user-select: none below. */ body { -webkit-user-select: text; user-select: text; } /* Coming-soon subject cards */ button.track-card:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; } /* ===== TOGGLE SWITCH ===== */ .toggle-bg { transition: background-color 0.2s ease; } .toggle-dot { transition: transform 0.2s ease; } /* ===== PARENT DASHBOARD TABS ===== */ .pd-tab { transition: background 0.15s, color 0.15s, box-shadow 0.15s; } /* Opacity-only, no transform: an element that is EVER transform-animated can stay on its own Chromium compositing layer for a while after the animation ends, even once the CSS transform value itself has reverted to none (the "backwards"/"forwards" fill-mode distinction does not prevent this - it only controls the CSS value, not the compositor's promotion cooldown). Any input under such a layer can have its native autofill/suggestion popover silently stop registering clicks for that whole cooldown window. Dropping the translateY slide removes the trigger entirely instead of racing its timing. See also engine/protect.js and the screen-auth/reset-password/family-setup card restructure for the same underlying bug. */ .pd-tab-content { animation: fadeSlideIn 0.2s ease both; } /* ===== SCREEN TRANSITIONS ===== */ .screen { animation: fadeSlideIn 0.3s ease both; } .screen.hidden { display: none !important; } @keyframes fadeSlideIn { from { opacity: 0; } to { opacity: 1; } } /* ===== BUTTONS ===== */ .btn-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; font-weight: 600; padding: 0.5rem 1.25rem; border-radius: 0.75rem; border: none; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 8px rgba(59,130,246,0.35); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59,130,246,0.45); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: #e2e8f0; color: #374151; font-weight: 600; padding: 0.5rem 1.25rem; border-radius: 0.75rem; border: none; cursor: pointer; transition: all 0.2s; } .dark .btn-secondary { background: #374151; color: #e5e7eb; } .btn-secondary:hover { background: #cbd5e1; } .dark .btn-secondary:hover { background: #4b5563; } /* The last-question finishing button. Green, and larger than an ordinary primary: at the end of an exam this is the only thing a child is looking for, and it competes with a small ✓ Submit pill up in the toolbar that they have been ignoring for forty questions. Applied on top of .btn-primary by renderExamQuestion(), so it only has to override what differs. */ .btn-finish { background: linear-gradient(135deg, #22c55e, #16a34a) !important; box-shadow: 0 2px 10px rgba(34, 197, 94, 0.4) !important; padding: 0.625rem 1.5rem; font-size: 1rem; } .btn-finish:hover { box-shadow: 0 4px 16px rgba(34, 197, 94, 0.5) !important; } .btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; font-weight: 600; padding: 0.5rem 1.25rem; border-radius: 0.75rem; border: none; cursor: pointer; transition: all 0.2s; } .btn-danger:hover { transform: translateY(-1px); filter: brightness(1.1); } .btn-ghost { background: transparent; color: #6b7280; padding: 0.375rem 0.75rem; min-height: 2.75rem; border-radius: 0.5rem; border: 1px solid #e5e7eb; cursor: pointer; font-size: 0.8rem; transition: all 0.2s; display: inline-flex; align-items: center; } .dark .btn-ghost { border-color: #4b5563; color: #9ca3af; } .btn-ghost:hover { background: #f3f4f6; border-color: #d1d5db; } .dark .btn-ghost:hover { background: #374151; } .back-btn { display: inline-flex; align-items: center; gap: 0.25rem; color: #6b7280; font-size: 0.875rem; font-weight: 500; cursor: pointer; background: none; border: none; padding: 0; transition: color 0.2s; } .back-btn:hover { color: #1d4ed8; } .dark .back-btn { color: #9ca3af; } .dark .back-btn:hover { color: #60a5fa; } /* Parent dashboard action row. These used to be six pill buttons in six different pastel colours, which read as six unrelated things and matched nothing else in the app. Same shape language as .nav-btn in the student bottom bar instead: icon over a small label, one neutral surface, and colour reserved for the two buttons where it carries meaning - the primary action, and the privileged one. */ /* ⚠ Deliberately NOT a .pd-action, and deliberately not IN that row. Handing the device to a child is the most frequent thing a parent does on this screen, and as one of seven identical tiles it read as a settings item - parents could not find it, which is why there is an onboarding nudge pointing at it at all. Promoting it inside the row would have meant a second loud colour competing with "Add child" and breaking the one shape language that row exists to have, so it is lifted OUT and sits above: full width on a phone, a stated purpose, and a direction to travel in. */ .pd-switch { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; border-radius: 1rem; text-align: left; background: linear-gradient(135deg, #4f46e5, #7c3aed); border: 1px solid #4338ca; color: #fff; cursor: pointer; box-shadow: 0 2px 10px rgba(79, 70, 229, 0.30); transition: box-shadow 0.15s, transform 0.15s, filter 0.15s; } /* Same reason as .pd-action.hidden: style.css loads after the Tailwind CDN, so a bare display:flex here would outrank Tailwind's .hidden. */ .pd-switch.hidden { display: none; } .pd-switch:hover { filter: brightness(1.08); box-shadow: 0 4px 16px rgba(79, 70, 229, 0.40); transform: translateY(-1px); } .pd-switch:active { transform: translateY(0); } .pd-switch:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; } .pd-switch-ico { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; } .pd-switch-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; } .pd-switch-title { font-size: 0.9rem; font-weight: 800; line-height: 1.2; } /* Not white at full strength: the subtitle is support, and at 0.85 it still clears 4.5:1 against this gradient. */ .pd-switch-sub { font-size: 0.7rem; font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, 0.85); } .pd-switch-go { font-size: 1.15rem; font-weight: 700; flex: 0 0 auto; opacity: 0.9; } #pd-children-grid .pd-child-card { background: #f0f7ff; color: #1e293b; } .dark #pd-children-grid .pd-child-card { background: #273449; color: #e2e8f0; } .pd-child-card:focus-visible { outline: 3px solid #6366f1; outline-offset: 3px; } .pd-child-today { padding: 0.75rem; border-radius: 0.75rem; background: #e0f2fe; color: #0c4a6e; font-size: 0.875rem; } .dark .pd-child-today { background: #23445c; color: #e0f2fe; } .pd-child-subjects { color: #475569; } .dark .pd-child-subjects { color: #cbd5e1; } .pd-subject-chip { padding: 0.3rem 0.5rem; border-radius: 0.5rem; font-size: 0.75rem; background: #e2e8f0; color: #334155; } .dark .pd-subject-chip { background: #334155; color: #e2e8f0; } .pd-child-next { margin-top: 1rem; font-size: 0.8rem; color: #475569; } .dark .pd-child-next { color: #cbd5e1; } .pd-child-open { display: block; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 700; color: #4338ca; } .dark .pd-child-open { color: #c7d2fe; } .pd-weekly-details { padding: 1rem; border: 1px solid #cbd5e1; border-radius: 1rem; background: #f8fafc; color: #334155; } .pd-weekly-details > summary { cursor: pointer; font-weight: 700; } .dark .pd-weekly-details { background: #273449; color: #e2e8f0; border-color: #52647e; } /* Full width is right on a phone, where it is the first thing under the family card. On a wider screen a full-bleed bar reads as a banner, not a button. */ @media (min-width: 640px) { .pd-switch { width: auto; min-width: 21rem; } } .dark .pd-switch { border-color: #6366f1; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .pd-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-width: 4.5rem; padding: 0.5rem 0.4rem; border-radius: 0.875rem; background: #fff; border: 1px solid #e5e7eb; color: #475569; font-size: 0.65rem; font-weight: 600; line-height: 1; cursor: pointer; transition: all 0.15s; flex: 0 0 auto; position: relative; } .pd-action .ico { font-size: 1.15rem; line-height: 1; } /* style.css loads after the Tailwind CDN, so a bare `display:flex` here would outrank Tailwind's `.hidden` and reveal the Admin button to every parent. Two classes beats one, whichever sheet ends up last. */ .pd-action.hidden { display: none; } .pd-action:hover { background: #f8fafc; border-color: #cbd5e1; transform: translateY(-1px); } .pd-action:active { transform: translateY(0); } .dark .pd-action { background: #1f2937; border-color: #374151; color: #cbd5e1; } .dark .pd-action:hover { background: #374151; border-color: #4b5563; } .pd-action.is-primary { background: #4f46e5; border-color: #6366f1; color: #fff; } .pd-action.is-primary:hover { background: #4f46e5; border-color: #4f46e5; } .dark .pd-action.is-primary { background: #4f46e5; border-color: #6366f1; color: #fff; } .dark .pd-action.is-primary:hover { background: #4f46e5; } /* Credit balance on the Shop button. .pd-action is already position:relative. */ .pd-badge { position: absolute; top: -6px; right: -6px; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 0.625rem; font-weight: 800; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.2); } .pd-badge.hidden { display: none; } .pd-action.is-alert { border-color: #fecaca; color: #dc2626; } .pd-action.is-alert:hover { background: #fef2f2; border-color: #fca5a5; } .dark .pd-action.is-alert { border-color: #7f1d1d; color: #f87171; background: #1f2937; } .dark .pd-action.is-alert:hover { background: #450a0a; } /* ═══════════ HEADER CONTROLS ═══════════ One component for every button in the app header. They used to be eight separate ad-hoc pills - four different paddings, four different font sizes, six different pastel backgrounds - so the row's total width depended on which ones happened to be visible and how big the device's system font was. On a Samsung (One UI ships a larger default text size than stock Android) the row grew past the viewport and the branding was pushed out of view. Fixed height, fixed icon box, one neutral surface. Colour is spent only where it means something: the parent/teacher switch, install, and logout. */ .hdr-btn { display: inline-flex; align-items: center; gap: 0.375rem; /* 0.55rem, not the 0.6 it started at: with all eight controls showing the labelled toolbar came out 2px wider than the space the max-w-6xl container leaves it, and wrapped the whole row for the sake of two pixels. */ height: 2.25rem; padding: 0 0.55rem; flex: 0 0 auto; /* never squash below its own size */ border: 1px solid #e5e7eb; border-radius: 999px; background: #f8fafc; color: #475569; font-size: 0.75rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* Two classes, so it outranks Tailwind's single-class `.flex` that the show/hide code in auth.js and app.js adds alongside `.hidden`. Without this the Teacher and Admin buttons would be visible to every account. */ .hdr-btn.hidden { display: none !important; } .hdr-btn .hdr-ico { font-size: 1rem; line-height: 1; flex: 0 0 auto; } .hdr-btn .hdr-word { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; } /* Leave room for descenders (g, p, y). Only variable-length labels need clipping. */ .hdr-btn.is-logout .hdr-word { overflow: visible; max-width: none; flex-shrink: 0; } .hdr-btn .hdr-mobile-word { line-height: 1.5; } /* The account chip is the only label whose width is user data, and at the 7rem cap a long Mauritian name ("Priyanka Ramgoolam") made it 161px - enough on its own to push the full eight-button toolbar past the 1152px the max-w-6xl container ever gets, so the row wrapped even on a 4K monitor. 4.5rem brings the worst case to 1114px and it fits; the name still reads. */ .hdr-btn.is-profile .hdr-word { max-width: 4.5rem; } .hdr-btn:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; } .hdr-btn:active { transform: scale(0.96); } /* ── Labelled pills, or one "Menu" button ── The width at which the words fit is measured, not guessed: with all eight controls visible (an admin parent with the install prompt showing) the labelled toolbar needs ~810px at its widest - the account chip's name can run to the 7rem cap - and the branding beside it another 234px, plus the row gap and the container's own padding. That is ~1090px before anything wraps, which is why the pills only appear at 1100px. ⚠ Below that they are HIDDEN, not shrunk. Three approaches have now been tried on this row and only the third answers the actual complaint: 1. Labelled pills on phones (the original). Seven controls took TWO rows at every width from 360 to 428 and made the header 136px tall. 2. Icon-only squares. One tidy 94px row - and unusable: reported back as "the top icons are not intuitive on mobile, we don't know what each one does". Which is exactly what an emoji on its own is. 🔒 could be a lock, a password or a private mode; 💬 could be chat, comments or feedback. Saving 42px of header was not worth making every control a guess. 3. One labelled Menu button opening a sheet where each action has its name AND a line of description. The header is a single 94px row, and nothing in it has to be guessed at. Also learned the hard way: `#hdr-actions { flex-shrink: 0 }` to stop a five-pixel wrap at 1024 stopped it by letting the row OVERFLOW instead - at 768 and 820 the toolbar ran to 876px and Logout sat off the right edge, invisible because the page-level overflow guard clipped it. The toolbar must be allowed to wrap; a two-row header is survivable, a control you cannot reach is not. */ #hdr-menu-btn { display: none; } .hdr-btn.is-menu { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; } .dark .hdr-btn.is-menu { background: rgba(79,70,229,0.25); border-color: rgba(99,102,241,0.45); color: #c7d2fe; } .hdr-btn.is-menu .hdr-ico { font-size: 1.05rem; } .hdr-menu-word { font-weight: 700; } /* The mobile-only Logout twin. Hidden at every width where the labelled pills are showing, or there would be two Log out buttons side by side. */ #header-logout-mobile { display: none; } .hdr-mobile-word { font-weight: 700; white-space: nowrap; } @media (max-width: 1099px) { /* Everything except the two controls that stay: the Menu button, and the Logout twin. :not() keeps this to one rule - the alternative was a second rule re-showing them and racing its own hide. */ header #hdr-actions .hdr-btn:not(#hdr-menu-btn):not(#header-logout-mobile) { display: none !important; } #hdr-menu-btn { display: inline-flex; } /* ⚠ `.hidden` has to keep winning here: showScreen() and auth.js hide this button on the auth screens and when nobody is signed in. Two classes beats the id? No - an id (1,0,0) outranks any number of classes, so this rule is scoped to :not(.hidden) rather than relying on order. */ #header-logout-mobile:not(.hidden) { display: inline-flex; } /* A finger needs a bigger target than a mouse pointer: 36px is under the 44px both platforms ask for. */ @media (pointer: coarse) { #hdr-menu-btn, #header-logout-mobile { height: 2.5rem; } } } /* ── The menu sheet ── Bottom-anchored on a phone (the header is the furthest point from a thumb), a normal centred card from 640px up where reach is not the issue. */ .hdr-menu-sheet { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 1.25rem 1.25rem 0 0; max-height: 85vh; padding-bottom: env(safe-area-inset-bottom); animation: hdrSheetUp 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes hdrSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hdr-menu-sheet { animation: none; } } @supports (max-height: 85dvh) { .hdr-menu-sheet { max-height: 85dvh; } } @media (min-width: 640px) { .hdr-menu-sheet { left: auto; right: 1rem; bottom: auto; top: 4.5rem; width: 22rem; max-width: calc(100vw - 2rem); border-radius: 1rem; animation-name: hdrSheetDrop; } @keyframes hdrSheetDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } } .hdr-menu-item { display: flex; align-items: center; gap: 0.875rem; width: 100%; padding: 0.75rem 0.875rem; border: none; background: none; border-radius: 0.875rem; text-align: left; cursor: pointer; transition: background-color 0.12s; -webkit-tap-highlight-color: transparent; } .hdr-menu-item:hover { background: #f1f5f9; } .dark .hdr-menu-item:hover { background: #374151; } .hdr-menu-item:active { background: #e2e8f0; } .dark .hdr-menu-item:active { background: #4b5563; } .hdr-menu-item .mi-ico { font-size: 1.35rem; line-height: 1; flex: 0 0 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.75rem; background: #f1f5f9; } .dark .hdr-menu-item .mi-ico { background: #374151; } .hdr-menu-item .mi-label { font-size: 0.875rem; font-weight: 700; color: #1e293b; line-height: 1.2; } .dark .hdr-menu-item .mi-label { color: #f1f5f9; } .hdr-menu-item .mi-desc { font-size: 0.6875rem; color: #64748b; line-height: 1.3; margin-top: 0.125rem; } .dark .hdr-menu-item .mi-desc { color: #94a3b8; } /* Sign out sits under a divider: it is the one row nobody wants to hit by accident on the way to something else. */ .hdr-menu-item.is-danger { margin-top: 0.25rem; border-top: 1px solid #e5e7eb; border-radius: 0 0 0.875rem 0.875rem; } .dark .hdr-menu-item.is-danger { border-top-color: #374151; } .hdr-menu-item.is-danger .mi-label { color: #dc2626; } .dark .hdr-menu-item.is-danger .mi-label { color: #f87171; } .hdr-menu-item.is-danger .mi-ico { background: #fee2e2; } .dark .hdr-menu-item.is-danger .mi-ico { background: rgba(220,38,38,0.2); } .dark .hdr-btn { background: #374151; border-color: #4b5563; color: #d1d5db; } .dark .hdr-btn:hover { background: #4b5563; border-color: #6b7280; color: #e5e7eb; } .hdr-btn.is-parent { background: #ede9fe; border-color: #ddd6fe; color: #6d28d9; } .dark .hdr-btn.is-parent { background: rgba(124,58,237,0.22); border-color: rgba(139,92,246,0.4); color: #ddd6fe; } .hdr-btn.is-teacher { background: #dcfce7; border-color: #bbf7d0; color: #15803d; } .dark .hdr-btn.is-teacher { background: rgba(22,163,74,0.22); border-color: rgba(34,197,94,0.4); color: #bbf7d0; } .hdr-btn.is-install { background: #dcfce7; border-color: #bbf7d0; color: #15803d; } .dark .hdr-btn.is-install { background: rgba(22,163,74,0.22); border-color: rgba(34,197,94,0.4); color: #bbf7d0; } .hdr-btn.is-profile { background: #e0e7ff; border-color: #c7d2fe; color: #4338ca; } .dark .hdr-btn.is-profile { background: rgba(79,70,229,0.25); border-color: rgba(99,102,241,0.45); color: #c7d2fe; } .hdr-btn.is-logout { background: #fee2e2; border-color: #fecaca; color: #b91c1c; } .dark .hdr-btn.is-logout { background: rgba(220,38,38,0.2); border-color: rgba(248,113,113,0.4); color: #fca5a5; } /* Streak / XP read-outs. Same height as the buttons so the row has one baseline whichever of them happen to be visible. */ .hdr-stat { display: inline-flex; align-items: center; gap: 0.3rem; height: 2.25rem; padding: 0 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; line-height: 1; flex: 0 0 auto; } .hdr-stat-streak { background: #ffedd5; color: #ea580c; } .dark .hdr-stat-streak { background: rgba(234,88,12,0.22); color: #fdba74; } .hdr-stat-xp { background: #f3e8ff; color: #7e22ce; gap: 0.4rem; } /* updateXPBar() fills this; before a student is signed in it is empty, and an empty pill in the toolbar reads as a control that failed to load. */ .hdr-stat-xp:empty { display: none; } .dark .hdr-stat-xp { background: rgba(126,34,206,0.25); color: #e9d5ff; } .hdr-stat-word { font-size: 0.7rem; font-weight: 600; opacity: 0.85; } /* The child's level. Same shape as the credits chip, and mutually exclusive with it - a child sees a level, a parent sees credits. */ .hdr-stat-level { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; } .hdr-stat-level:hover { background: #ddd6fe; border-color: #c4b5fd; } .dark .hdr-stat-level { background: rgba(109,40,217,0.28); color: #ddd6fe; border-color: rgba(139,92,246,0.45); } .dark .hdr-stat-level:hover { background: rgba(109,40,217,0.42); } /* The credit balance. A button, not a read-out - it opens the Shop, which is the only place the number means anything. */ .hdr-stat-credits { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; } .hdr-stat-credits:hover { background: #fde68a; border-color: #fcd34d; } .dark .hdr-stat-credits { background: rgba(180,83,9,0.25); color: #fcd34d; border-color: rgba(217,119,6,0.45); } .dark .hdr-stat-credits:hover { background: rgba(180,83,9,0.4); } /* Two classes, so it outranks .hdr-stat's own display when app.js hides it for a student session or a database with no credits deployed. */ .hdr-stat.hidden { display: none !important; } /* The streak chip exists twice - beside the branding on a phone, in the action row from 640px up - so exactly one of them must be showing at any width. Done with ids, not Tailwind's `hidden`/`sm:flex`, because .hdr-stat is a single class in a sheet that loads after the CDN and would outrank both. */ #streak-display { display: none; } @media (min-width: 640px) { #streak-display { display: inline-flex; } } /* A streak and an XP level belong to a CHILD. In a parent session DB holds whichever child is currently loaded, so those chips were showing a parent somebody else's numbers. A parent's header read-out is their credit balance instead - see _renderCreditChip(), which sets this class. !important and an id because both rules above are ids too. */ body.is-parent-session #streak-display, body.is-parent-session #streak-display-m, body.is-parent-session #xp-display { display: none !important; } /* .icon-btn is gone: the three header controls that used it (Search, Forum, Theme) are .hdr-btn now, and it had no other caller anywhere in the repo. */ /* ===== TRACK CARDS ===== */ .track-card { background: white; border-radius: 1.25rem; padding: 1.5rem; text-align: left; border: 2px solid transparent; box-shadow: 0 2px 12px rgba(0,0,0,0.07); cursor: pointer; transition: all 0.25s; width: 100%; } .dark .track-card { background: #1e293b; } .track-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); } #btn-exam-mode:hover { border-color: #3b82f6; } #btn-chapter-mode:hover{ border-color: #22c55e; } /* ===== CHIPS / BADGES ===== */ .chip { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; } .chip.blue { background:#dbeafe; color:#1d4ed8; } .chip.purple { background:#ede9fe; color:#6d28d9; } .chip.green { background:#dcfce7; color:#15803d; } .chip.amber { background:#fef3c7; color:#92400e; } .chip.gray { background:#f1f5f9; color:#475569; } .dark .chip.blue { background:#1e3a5f; color:#93c5fd; } .dark .chip.purple { background:#2e1065; color:#c4b5fd; } .dark .chip.green { background:#052e16; color:#86efac; } .dark .chip.amber { background:#451a03; color:#fcd34d; } .dark .chip.gray { background:#1e293b; color:#94a3b8; } /* ===== EXAM OPTION ===== */ .exam-opt { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 0.875rem; border: 2px solid #e5e7eb; cursor: pointer; transition: all 0.2s; -webkit-user-select: none; user-select: none; } .dark .exam-opt { border-color: #374151; } .exam-opt:hover { border-color: #3b82f6; background: #eff6ff; } .dark .exam-opt:hover { background: #1e3a5f; } .exam-opt input[type=radio] { accent-color: #3b82f6; width: 1.1rem; height: 1.1rem; } .exam-opt:has(input:checked) { border-color: #3b82f6; background: #eff6ff; } .dark .exam-opt:has(input:checked) { background: #1e3a5f; border-color: #3b82f6; } /* ===== EXAM CONFIG (chalkboard theme) ===== */ #screen-exam-config { background: #1a2318; } .dark #screen-exam-config { background: linear-gradient(145deg,#111 0%,#0a0f0a 60%,#0d1410 100%); } .exam-cfg-outer { max-width: 560px; margin: 0 auto; padding: 1.5rem 1rem 4rem; } .exam-cfg-intro { color: rgba(240,236,220,.65); font-size: .9rem; margin-bottom: 1.5rem; } .exam-cfg-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; } .exam-cfg-card { display: block; cursor: pointer; border-radius: 1rem; border: 1.5px solid rgba(240,236,220,.15); background: rgba(255,255,255,.06); transition: border-color .18s, background .18s; } .exam-cfg-card:hover { border-color: rgba(240,236,220,.38); background: rgba(255,255,255,.11); } .exam-cfg-card:has(input:checked) { border-color: #86efac; background: rgba(134,239,172,.1); } .exam-cfg-card input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; } .exam-cfg-body { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; } .exam-cfg-icon { font-size: 1.8rem; flex-shrink: 0; } .exam-cfg-text { flex: 1; min-width: 0; } .exam-cfg-name { font-family: 'Caveat', cursive; font-size: 1.25rem; color: #f0ece8; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .exam-cfg-badge { font-family: sans-serif; font-size: .68rem; font-weight: 700; background: rgba(134,239,172,.25); color: #86efac; border-radius: 999px; padding: .1rem .55rem; } .exam-cfg-desc { font-size: .82rem; color: rgba(240,236,220,.6); margin-top: .1rem; } .exam-cfg-start { width: 100%; padding: .85rem; border-radius: 1rem; border: none; cursor: pointer; font-family: 'Caveat', cursive; font-size: 1.35rem; font-weight: 700; background: linear-gradient(135deg,#4ade80,#22c55e); color: #052e16; transition: opacity .15s; } .exam-cfg-start:hover { opacity: .9; } /* ===== MCQ OPTIONS ===== */ .mcq-opt { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem; border: 2px solid #e5e7eb; cursor: pointer; text-align: left; background: white; transition: all 0.18s; margin-bottom: 0.5rem; font-size: 0.95rem; color: #374151; } .dark .mcq-opt { background: #1e293b; border-color: #374151; color: #e5e7eb; } .mcq-opt:hover:not(.disabled) { border-color: #93c5fd; background: #eff6ff; } .dark .mcq-opt:hover:not(.disabled) { background: #1e3a5f; border-color: #60a5fa; } .mcq-opt.selected { border-color: #3b82f6; background: #eff6ff; } .dark .mcq-opt.selected { background: #1e3a5f; border-color: #60a5fa; } .mcq-opt.correct { border-color: #22c55e; background: #f0fdf4 !important; } .dark .mcq-opt.correct { background: #052e16 !important; } .mcq-opt.wrong { border-color: #ef4444; background: #fef2f2 !important; } .dark .mcq-opt.wrong { background: #450a0a !important; } .mcq-opt.disabled { cursor: not-allowed; pointer-events: none; } /* Correct/wrong must NOT be signalled by colour alone: red/green is the exact pair a deuteranope cannot separate, and prefers-reduced-motion (below) strips the pulse/shake, leaving hue as the only channel. The glyph is a flex child pushed to the trailing edge, so it never reflows option text. */ .mcq-opt.correct::after, .mcq-opt.wrong::after { margin-left: auto; flex-shrink: 0; font-weight: 800; font-size: 1.05rem; line-height: 1; } .mcq-opt.correct::after { content: '\2713'; color: #16a34a; } .mcq-opt.wrong::after { content: '\2717'; color: #dc2626; } .dark .mcq-opt.correct::after { color: #4ade80; } .dark .mcq-opt.wrong::after { color: #f87171; } /* Read-aloud: the option currently being spoken. A Grade 1 child is following the voice with their eyes, so this must read at a glance from arm's length. ⚠ Amber, not blue/green/red: those three already mean chosen, right and wrong on this same element, and a fourth meaning in the same hue would be read as one of them. ⚠ Colour is not the only channel - the box also grows and lifts, so it still reads for a child who cannot separate the hues. ⚠ !important, because .correct/.wrong set background the same way: a question being re-read after it was answered must still show what is being spoken now. */ .mcq-opt.tts-reading { border-color: #f59e0b !important; background: #fffbeb !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28); transform: scale(1.015); } .dark .mcq-opt.tts-reading { border-color: #fbbf24 !important; background: #422006 !important; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3); } .mcq-opt.tts-reading .opt-letter { background: #f59e0b; color: white; } /* The scale is decoration; the border, ground and ring carry the meaning. */ @media (prefers-reduced-motion: reduce) { .mcq-opt.tts-reading { transform: none; } } .opt-letter { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #e2e8f0; font-weight: 700; font-size: 0.75rem; color: #475569; flex-shrink: 0; } .dark .opt-letter { background: #374151; color: #cbd5e1; } .selected .opt-letter { background: #3b82f6; color: white; } .correct .opt-letter { background: #22c55e; color: white; } .wrong .opt-letter { background: #ef4444; color: white; } /* ===== NUMERIC INPUT ===== */ .num-input { width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem; border: 2px solid #e5e7eb; font-size: 1.1rem; font-weight: 500; color: #1e293b; background: white; outline: none; transition: border-color 0.2s; } .dark .num-input { background: #1e293b; border-color: #374151; color: #f1f5f9; } .num-input:focus { border-color: #3b82f6; } .num-input.correct { border-color: #22c55e; background: #f0fdf4; } .dark .num-input.correct { background: #052e16; } .num-input.wrong { border-color: #ef4444; background: #fef2f2; } .dark .num-input.wrong { background: #450a0a; } /* ===== NAVIGATION GRID ===== */ .nav-btn { width: 2rem; height: 2rem; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; } .nav-btn.unanswered { background: #e2e8f0; color: #475569; } .dark .nav-btn.unanswered { background: #374151; color: #d1d5db; } .nav-btn.answered { background: #bbf7d0; color: #166534; } .dark .nav-btn.answered { background: #052e16; color: #86efac; } .nav-btn.flagged { background: #fecaca; color: #991b1b; } .dark .nav-btn.flagged { background: #450a0a; color: #fca5a5; } .nav-btn.current { background: #3b82f6; color: white; } .nav-btn:hover { transform: scale(1.1); } .nav-legend { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 0.25rem; } /* ===== MASTERY BAR ===== */ .mastery-item { padding: 0.5rem 0; } .mastery-bar-bg { height: 6px; background: #e2e8f0; border-radius: 9999px; overflow: hidden; } .dark .mastery-bar-bg { background: #374151; } .mastery-bar-fill { height: 100%; border-radius: 9999px; transition: width 1s ease; } /* ═══════════ CHAPTER PRACTICE ═══════════ The card is an
with a transparent full-bleed