/* ============================================================ Zelinx Flashcards — quiet study UI. Identity: • Warm charcoal background (not pure black) with paper-warm text • One accent colour (muted gold) for primary actions + active states • Editorial serif (Fraunces) for headlines, Inter for everything else • Generous whitespace, calm contrast, no gradients, minimal shadows The goal is "library / study desk" — easy on the eyes for long sessions, low visual noise for ADHD-friendly focus, and visually distinct from any other flashcard app on the market. ============================================================ */ :root { /* surfaces */ --bg-0: #0F0E12; --bg-1: #15131A; --surface: #1B1922; --surface-2: #221F2A; --surface-3: #2A2733; /* borders */ --line: #27242F; --line-strong: #3A3645; /* text */ --text-hi: #FBF8F1; --text: #DAD6CC; --text-low: #918C9C; --text-mut: #5F5A68; /* accent — warm gold */ --accent: #D4A95C; --accent-hi: #E6BE74; --accent-low: #A88240; --accent-bg: rgba(212, 169, 92, 0.10); /* semantic */ --ok: #7DBE8F; --ok-bg: rgba(125, 190, 143, 0.10); --err: #D67A6A; --err-bg: rgba(214, 122, 106, 0.10); --info: #7AAFD4; /* spacing (8-pt scale) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; /* radii — squarer than the previous design */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --nav-h: 64px; --page-max: 880px; } /* ============================================================ THEMES Override the :root custom properties to retint the entire UI. Each theme is applied by adding a class to — picked in Profile → Appearance and persisted in localStorage so the anti-FOUC inline script applies it before the first paint. ============================================================ */ /* ----- LIGHT: warm cream background, charcoal text ----- */ html.theme-light { --bg-0: #F8F5EC; --bg-1: #F2EEE3; --surface: #FFFFFF; --surface-2: #F4F0E5; --surface-3: #EAE5D7; --line: #DDD7C6; --line-strong: #BCB5A1; --text-hi: #1B1A1F; --text: #2C2A33; --text-low: #5A5564; --text-mut: #8B8593; --accent: #B58840; --accent-hi: #C99B57; --accent-low: #946B2E; --accent-bg: rgba(181, 136, 64, 0.10); --ok: #4F8E5F; --ok-bg: rgba(79, 142, 95, 0.10); --err: #B2493B; --err-bg: rgba(178, 73, 59, 0.10); --info: #3D7CA8; } /* ----- MIDNIGHT: deep navy blue ----- */ html.theme-midnight { --bg-0: #0A0F1A; --bg-1: #101728; --surface: #182032; --surface-2: #1F2940; --surface-3: #28344F; --line: #2C3850; --line-strong: #44557A; --text-hi: #F0F4FB; --text: #C9D0DD; --text-low: #8590A6; --text-mut: #5C667A; --accent: #6FB1FF; --accent-hi: #8FC2FF; --accent-low: #4A8FE0; --accent-bg: rgba(111, 177, 255, 0.12); } /* ----- FOREST: deep green dark ----- */ html.theme-forest { --bg-0: #0E140F; --bg-1: #131C15; --surface: #1A241D; --surface-2: #1F2D22; --surface-3: #28392C; --line: #2A3D2F; --line-strong: #436B4B; --text-hi: #F1F6EE; --text: #CDD4C7; --text-low: #8B988A; --text-mut: #5C6759; --accent: #7AC383; --accent-hi: #95D89D; --accent-low: #569E5F; --accent-bg: rgba(122, 195, 131, 0.12); } /* ----- SUNSET: warm coral & terracotta dark ----- */ html.theme-sunset { --bg-0: #160E0E; --bg-1: #1C1313; --surface: #271919; --surface-2: #2F1F1F; --surface-3: #3B2727; --line: #3C2A29; --line-strong: #6B4845; --text-hi: #FBEEE8; --text: #DCC9C0; --text-low: #9C857C; --text-mut: #6B5953; --accent: #F08A5D; --accent-hi: #FBA17A; --accent-low: #C26841; --accent-bg: rgba(240, 138, 93, 0.13); } /* ----- HIGH CONTRAST: near-black bg, near-white text, brighter gold ----- */ html.theme-contrast { --bg-0: #000000; --bg-1: #050505; --surface: #0C0C0C; --surface-2: #141414; --surface-3: #1E1E1E; --line: #2A2A2A; --line-strong: #555555; --text-hi: #FFFFFF; --text: #EDEDED; --text-low: #B5B5B5; --text-mut: #767676; --accent: #FFD66B; --accent-hi: #FFE38A; --accent-low: #E0AC30; --accent-bg: rgba(255, 214, 107, 0.16); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; min-height: 100dvh; /* dynamic viewport — no gap/cutoff under mobile toolbars */ /* Mobile safety net: never allow a single overflowing child element (long word, wide table, fixed-width pomodoro widget, etc.) to make the whole page horizontally scrollable. `clip` (where supported) avoids making html/body a scroll container, which keeps normal vertical page scrolling reliable on mobile; older browsers fall back to `hidden`. */ overflow-x: hidden; overflow-x: clip; max-width: 100vw; /* Installed-app feel on phones: no grey tap flashes, no rubber-band pull-to-refresh (which would reload you mid-study), no iOS text inflation. */ -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; } *, *::before, *::after { box-sizing: border-box; } /* Anything that goes inside the page should respect the viewport. */ img, video, table, pre, code { max-width: 100%; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } a { color: inherit; } .hidden { display: none !important; } .mt-lg { margin-top: var(--s-7); } /* ============================================================ AUTH OVERLAY ============================================================ */ .auth-overlay { position: fixed; inset: 0; z-index: 100; background: var(--bg-0); display: flex; align-items: center; justify-content: center; padding: max(var(--s-5), env(safe-area-inset-top)) var(--s-5) max(var(--s-5), env(safe-area-inset-bottom)); overflow-y: auto; } /* Anti-FOUC: when html.pre-authed is set by the inline script at the top of body, hide the login overlay and show the app shell from the very first frame. Avoids the brief login flash on reload. */ html.pre-authed .auth-overlay { display: none; } html.pre-authed .app.hidden { display: flex; } .auth-overlay::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 10%, rgba(212, 169, 92, 0.10) 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(122, 175, 212, 0.06) 0%, transparent 50%); pointer-events: none; } .auth-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 30px 26px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; } .auth-brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); } .brand-logo { width: 30px; height: 30px; background: var(--accent); color: var(--bg-0); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; font-family: 'Fraunces', serif; } .brand-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; letter-spacing: -0.01em; color: var(--text-hi); } .auth-card h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 28px; letter-spacing: -0.01em; color: var(--text-hi); margin: 0; } .muted-lead { margin: 0; color: var(--text-low); font-size: 14px; line-height: 1.5; } .auth-form { display: flex; flex-direction: column; gap: 10px; } .auth-label { font-size: 12px; font-weight: 600; color: var(--text-low); letter-spacing: 0.04em; margin-bottom: -2px; } .auth-label-hint { font-weight: 400; color: var(--text-mut); margin-left: 4px; } .auth-form input { background: var(--bg-1); border: 1px solid var(--line); color: var(--text-hi); font-size: 15px; padding: 12px 14px; border-radius: var(--r-md); outline: none; transition: border-color 120ms ease; } .auth-form input:focus { border-color: var(--accent); } .auth-form input#auth-code { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.35em; text-align: center; font-size: 20px; } .auth-submit { margin-top: var(--s-2); } .auth-link { background: none; border: none; color: var(--accent); font-size: 13px; padding: 4px; align-self: flex-start; cursor: pointer; } .auth-link:hover { color: var(--accent-hi); text-decoration: underline; } .auth-info { margin: 0; font-size: 14px; color: var(--text); line-height: 1.55; } .auth-info strong { color: var(--text-hi); font-weight: 600; } .auth-error { background: var(--err-bg); border: 1px solid rgba(214, 122, 106, 0.35); color: #f4c0b6; padding: 10px 14px; border-radius: var(--r-md); font-size: 13px; } .auth-error code { font-family: 'JetBrains Mono', monospace; background: rgba(0, 0, 0, 0.25); padding: 1px 5px; border-radius: 4px; font-size: 12px; } .auth-footer { margin: var(--s-2) 0 0; font-size: 12px; color: var(--text-mut); text-align: center; line-height: 1.5; } /* Login / Sign up tabs above the form */ .auth-tabs { display: flex; gap: 4px; background: color-mix(in srgb, var(--text) 3%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin: 0 0 var(--s-3); } .auth-tab { flex: 1; padding: 9px 12px; background: transparent; border: none; border-radius: 9px; color: var(--text-mut); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 120ms, color 120ms; } .auth-tab:hover { color: var(--text-hi, var(--text)); } .auth-tab.active { background: var(--accent); color: #0f0e12; } .auth-forgot-link { display: block; margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--text-mut); } .auth-forgot-link:hover { color: var(--accent); } .auth-fineprint { margin: var(--s-2) 0 0; font-size: 11px; color: var(--text-mut); text-align: center; line-height: 1.55; } .auth-fineprint a { color: var(--accent); text-decoration: none; } .auth-fineprint a:hover { text-decoration: underline; } .auth-success { margin-top: var(--s-3); padding: 10px 12px; background: rgba(148, 212, 154, 0.12); border: 1px solid rgba(148, 212, 154, 0.4); border-radius: 10px; color: #b6e2c0; font-size: 13px; line-height: 1.5; } /* "Resend verification email" link that surfaces under an auth error when the user tries to log in to an unverified account. */ .auth-resend-link { display: block; margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--accent); background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: underline; width: 100%; } .auth-resend-link:hover { color: var(--text-hi, var(--text)); } .auth-resend-link:disabled { opacity: 0.6; cursor: not-allowed; text-decoration: none; } /* ============================================================ APP SHELL + TOP NAV ============================================================ */ .app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .app.hidden { display: none; } .topnav { position: sticky; top: 0; z-index: 20; /* color-mix derives the translucent navbar background from the theme's --bg-0 — so light theme gets a translucent cream, midnight gets translucent navy, etc. The hardcoded rgba(15,14,18,0.92) was baking in the dark-theme colour and ignoring the user's theme choice. */ background: color-mix(in srgb, var(--bg-0) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); /* Clear the notch / status bar on installed phones (0px on desktop). */ height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); } .topnav-inner { max-width: 1100px; margin: 0 auto; height: 100%; padding: 0 var(--s-5); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-5); } .brand { background: none; border: none; padding: 0; display: flex; align-items: center; gap: 10px; color: var(--text-hi); } .brand:hover { color: var(--accent-hi); } .brand-mark { width: 26px; height: 26px; background: var(--accent); color: var(--bg-0); border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px; } .brand-word { font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; letter-spacing: -0.01em; } .topnav-nav { display: flex; justify-content: center; gap: var(--s-2); } .navlink { background: none; border: none; color: var(--text-low); padding: 8px 14px; font-size: 14px; font-weight: 500; border-radius: var(--r-sm); transition: color 120ms ease, background 120ms ease; } .navlink:hover { color: var(--text-hi); background: var(--surface); } .navlink.active { color: var(--text-hi); background: var(--surface-2); } .topnav-end { display: flex; align-items: center; gap: var(--s-2); } .iconbtn { background: none; border: none; width: 36px; height: 36px; aspect-ratio: 1; flex-shrink: 0; padding: 0; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--text-low); transition: background 120ms ease, color 120ms ease; cursor: pointer; } .iconbtn:hover { background: var(--surface); color: var(--text-hi); } /* The profile icon button hosts the avatar — both should be a proper circle. Override the rounded-square radius from .iconbtn and force a 1:1 box so the circle never squashes into an oval on tight layouts. */ #topnav-profile { border-radius: 50%; overflow: hidden; } #topnav-profile:hover { background: transparent; } #topnav-profile .avatar { width: 100%; height: 100%; font-size: 14px; border: 1.5px solid transparent; transition: border-color 120ms ease, transform 120ms ease; } #topnav-profile:hover .avatar { border-color: var(--accent); transform: scale(1.05); } .avatar { width: 28px; height: 28px; aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: var(--bg-0); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; } /* ============================================================ MAIN + PAGE ============================================================ */ .main { flex: 1; padding: var(--s-6) var(--s-5) calc(var(--s-8) + env(safe-area-inset-bottom, 0px)); } /* Focus modes (study / recall / test / mock exam) hide the top nav, so the content sits at the very top — pad it past the notch on phones. */ body[data-focus="1"] .main { padding-top: max(var(--s-6), env(safe-area-inset-top, 0px)); } .page { max-width: var(--page-max); margin: 0 auto; } .view { animation: fadeUp 220ms ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .eyebrow { margin: 0 0 var(--s-2); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .page-h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 38px; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-hi); margin: 0 0 var(--s-3); } .section-h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--text-hi); margin: var(--s-7) 0 var(--s-4); } .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6); } .page-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; } .backlink { background: none; border: none; color: var(--text-low); padding: 0; margin-bottom: var(--s-4); font-size: 14px; cursor: pointer; } .backlink:hover { color: var(--text-hi); } .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--text-mut); margin-bottom: var(--s-3); } .breadcrumb a { color: var(--text-low); cursor: pointer; text-decoration: none; } .breadcrumb a:hover { color: var(--text-hi); } .breadcrumb .crumb-sep { opacity: 0.5; } .row-actions { margin-top: var(--s-5); display: flex; justify-content: center; } /* ============================================================ BUTTONS ============================================================ */ .btn { background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 80ms ease; } .btn:hover { border-color: var(--line-strong); color: var(--text-hi); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--bg-0); font-weight: 600; } .btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--bg-0); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-low); } .btn-ghost:hover { color: var(--text-hi); background: var(--surface); border-color: var(--line); } .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-danger { background: transparent; border-color: rgba(214, 122, 106, 0.30); color: var(--err); } .btn-danger:hover { background: var(--err-bg); border-color: var(--err); color: #f4c0b6; } /* ============================================================ HOME ============================================================ */ /* Onboarding card — only visible on Home when the library is empty. */ .onboarding-card { background: linear-gradient(180deg, rgba(212, 169, 92, 0.07), rgba(212, 169, 92, 0)); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5) var(--s-5) var(--s-5); margin: var(--s-4) 0 var(--s-6); } .onboarding-eyebrow { margin: 0 0 4px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; } .onboarding-title { margin: 0 0 6px; font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: var(--text-hi); } .onboarding-desc { margin: 0 0 var(--s-4); color: var(--text-mut); font-size: 14px; } .onboarding-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); } .onboarding-tile { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: transform 120ms, border-color 120ms, background 120ms; font-family: inherit; color: inherit; } .onboarding-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--text) 2%, transparent); } .onboarding-tile-icon { font-size: 22px; } .onboarding-tile-title { font-weight: 700; font-size: 15px; color: var(--text-hi); } .onboarding-tile-desc { font-size: 13px; color: var(--text-mut); line-height: 1.5; } .home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); margin: var(--s-5) 0 var(--s-6); } .home-stat { background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 4px; } .home-stat-value { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; color: var(--text-hi); line-height: 1.2; } .home-stat-label { font-size: 11px; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; } .continue-card { background: var(--accent-bg); border: 1px solid rgba(212, 169, 92, 0.30); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); } .continue-label { margin: 0 0 2px; font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; } .continue-deck { margin: 0; font-family: 'Fraunces', serif; font-size: 19px; color: var(--text-hi); } /* ============================================================ DECK LIST (rows with left colour bar) ============================================================ */ .deck-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .deck-row { display: grid; grid-template-columns: 20px 4px 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-2); border-bottom: 1px solid var(--line); cursor: pointer; background: transparent; border-left: none; border-right: none; border-top: none; text-align: left; width: 100%; color: var(--text); transition: background 120ms ease; position: relative; } .deck-row:hover { background: var(--surface); } .deck-row-bar { width: 4px; height: 100%; min-height: 36px; background: var(--accent); border-radius: 2px; } .deck-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .deck-row-name { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; color: var(--text-hi); line-height: 1.3; letter-spacing: -0.01em; } .deck-row-meta { font-size: 13px; color: var(--text-low); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; } .deck-row-meta .pct { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; } .deck-row-right { display: flex; align-items: center; gap: var(--s-3); color: var(--text-mut); } .deck-row-more { background: none; border: none; color: var(--text-mut); width: 28px; height: 28px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } .deck-row-more:hover { background: var(--surface-2); color: var(--text-hi); } .deck-row-arrow { color: var(--text-mut); font-size: 18px; transition: transform 120ms ease, color 120ms ease; } .deck-row:hover .deck-row-arrow { color: var(--accent); transform: translateX(2px); } /* Drag-and-drop states */ .deck-row[draggable="true"] { cursor: grab; } .deck-row.dragging { opacity: 0.45; cursor: grabbing; } .deck-row.drop-into { background: var(--accent-bg); outline: 2px dashed var(--accent); outline-offset: -2px; } .deck-row.drop-into::after { content: "Drop to nest inside"; position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .deck-row.drop-into .deck-row-arrow, .deck-row.drop-into .deck-row-more { visibility: hidden; } /* Selection — custom checkbox, hover-revealed (always visible during active multi-select so the user can deselect easily). */ .deck-row-check { width: 20px; height: 20px; border: 1.5px solid var(--line-strong); border-radius: 5px; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; flex-shrink: 0; padding: 0; color: var(--bg-0); position: relative; pointer-events: none; transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease; } /* Invisible hit-area extension. Adds ~16px of clickable padding on every side so the checkbox is easy to grab without making the visible box bigger. Pointer-events: none while the checkbox is hidden — we don't want stray taps in dead space to toggle selection. */ .deck-row-check::before { content: ""; position: absolute; inset: -16px; } .deck-row-check svg { opacity: 0; transition: opacity 80ms ease; } .deck-row:hover .deck-row-check, body.has-selection .deck-row-check, .deck-row.selected .deck-row-check { opacity: 1; pointer-events: auto; } .deck-row.selected .deck-row-check { background: var(--accent); border-color: var(--accent); } .deck-row.selected .deck-row-check svg { opacity: 1; } .deck-row.selected { background: var(--accent-bg); } .deck-row.selected .deck-row-bar { box-shadow: 0 0 0 1px var(--accent); } /* Floating bulk-action bar (bottom-centred), appears whenever there's an active selection. */ .bulk-bar { position: fixed; bottom: max(var(--s-5), env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(80px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 8px 8px var(--s-4); display: flex; gap: var(--s-3); align-items: center; /* Below modal layer (modal is 60, backdrop is 50) so the action bar never covers modal buttons. */ z-index: 40; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: transform 200ms cubic-bezier(.3,.9,.4,1.1), opacity 200ms ease; } .bulk-bar.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .bulk-bar-count { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; } .bulk-bar .btn { padding: 8px 14px; font-size: 13px; } .bulk-bar-hint { font-size: 11px; color: var(--text-mut); margin-left: var(--s-2); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } /* Drop zones now float on the LEFT edge of the viewport — they slide in only while a deck is being dragged, so they don't take up inline space in the page. Each view (Library, Node) has its own zone in the DOM, but only the one whose parent view is visible actually appears. */ .root-drop-zone { position: fixed; top: 50%; left: -260px; transform: translateY(-50%); width: 220px; min-height: 220px; padding: var(--s-5) var(--s-4); background: var(--surface); border: 2px dashed var(--line-strong); border-radius: var(--r-md); color: var(--text-low); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; text-align: center; line-height: 1.5; display: flex; align-items: center; justify-content: center; z-index: 80; pointer-events: none; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); transition: left 220ms cubic-bezier(.3,.9,.4,1.1), border-color 120ms ease, color 120ms ease, background 120ms ease; } .root-drop-zone.show { left: var(--s-4); pointer-events: auto; } .root-drop-zone.drop-into { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); border-style: solid; } /* ============================================================ TABS ============================================================ */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); } .tab { background: none; border: none; color: var(--text-low); padding: 10px 16px; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--text-hi); } .tab.active { color: var(--text-hi); border-bottom-color: var(--accent); } /* ============================================================ CARD LIST (inside a deck) ============================================================ */ .card-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .card-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); cursor: pointer; align-items: center; } .card-row:has(.card-row-thumb) { grid-template-columns: 44px 1fr 1fr auto; } .card-row-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); } /* Image inside a flipped flashcard / recall prompt / quiz question. Sized to fit within the card stage without forcing scroll. */ .card-image { display: block; max-width: 100%; max-height: 320px; margin: 0 auto var(--s-3); border-radius: 10px; border: 1px solid var(--line); object-fit: contain; } /* Card-edit modal: image attach row + preview + remove button. */ .card-image-row { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-1); } .card-image-hint { font-size: 12px; color: var(--text-mut); } .card-image-preview { position: relative; margin-top: var(--s-3); display: inline-block; } .card-image-preview img { display: block; max-width: 200px; max-height: 160px; border-radius: 8px; border: 1px solid var(--line); } .card-image-remove { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text-hi); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .card-image-remove:hover { background: var(--danger-bg, #3a1f1f); border-color: var(--danger, #d67a6a); color: var(--danger, #d67a6a); } .card-row:hover { background: var(--surface); margin: 0 calc(-1 * var(--s-4)); padding-left: var(--s-4); padding-right: var(--s-4); border-radius: var(--r-sm); } .card-row-q { font-weight: 500; color: var(--text-hi); font-size: 14px; line-height: 1.45; } .card-row-a { color: var(--text-low); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-row-a strong { color: var(--accent); font-weight: 600; } .card-row-actions { display: flex; gap: 4px; align-items: flex-start; } .card-row-action { background: none; border: none; color: var(--text-mut); padding: 4px 8px; border-radius: var(--r-sm); font-size: 12px; font-weight: 500; } .card-row-action:hover { color: var(--text-hi); background: var(--surface-2); } .empty { padding: var(--s-7) var(--s-4); text-align: center; color: var(--text-low); border: 1px dashed var(--line); border-radius: var(--r-md); } .empty p { margin: 0 0 var(--s-4); } /* ============================================================ NODE VIEW — title block with colour bar ============================================================ */ .node-title-block { display: flex; gap: var(--s-4); align-items: stretch; } .node-color-bar { width: 4px; border-radius: 2px; background: var(--accent); flex-shrink: 0; } /* ============================================================ MODE PICKER ============================================================ */ .mode-list { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); } .mode-row { background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: grid; grid-template-columns: 4px 1fr auto; align-items: center; gap: var(--s-4); text-align: left; color: var(--text); transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; } .mode-row:hover { border-color: var(--accent); background: var(--surface); transform: translateX(2px); } .mode-stripe { width: 4px; height: 32px; background: var(--accent); border-radius: 2px; } .mode-text { display: flex; flex-direction: column; gap: 2px; } .mode-name { margin: 0; font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; color: var(--text-hi); } .mode-desc { margin: 0; font-size: 13px; color: var(--text-low); } .mode-arrow { color: var(--text-mut); font-size: 20px; } .mode-row:hover .mode-arrow { color: var(--accent); } /* ============================================================ FOCUS VIEW (study / recall / test) Hides the top nav for distraction-free study. ============================================================ */ .focus-view { position: fixed; inset: 0; background: var(--bg-0); overflow-y: auto; z-index: 30; padding: var(--s-6) var(--s-5) var(--s-7); } .focus-exit { position: absolute; top: var(--s-4); right: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); width: 40px; height: 40px; color: var(--text-low); display: inline-flex; align-items: center; justify-content: center; transition: color 120ms ease, background 120ms ease; z-index: 1; } .focus-exit:hover { color: var(--text-hi); background: var(--surface-2); } .focus-page { max-width: 720px; margin: 0 auto; } .focus-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--s-4); } .focus-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-hi); margin: 0; letter-spacing: -0.01em; } .focus-counter { margin: 4px 0 0; font-size: 13px; color: var(--text-low); } .focus-percent { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-low); font-variant-numeric: tabular-nums; } .progress-rail { background: var(--surface); border-radius: 999px; height: 4px; overflow: hidden; margin: var(--s-3) 0 var(--s-4); } .progress-fill { background: var(--accent); height: 100%; transition: width 250ms ease; } .topic-row { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); } .topic-chip { background: transparent; border: 1px solid var(--line); color: var(--text-low); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 120ms ease; } .topic-chip:hover { color: var(--text-hi); border-color: var(--line-strong); } .topic-chip.active { background: var(--accent); border-color: var(--accent); color: var(--bg-0); } .counters { display: flex; gap: var(--s-5); margin: var(--s-3) 0; flex-wrap: wrap; font-size: 13px; color: var(--text-low); } .counter { display: inline-flex; align-items: center; gap: 6px; } .counter strong { color: var(--text); font-weight: 600; } .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .dot-ok { background: var(--ok); } .dot-err { background: var(--err); } /* ============================================================ FLASHCARDS CARD ============================================================ */ .card-stage { perspective: 1600px; margin: var(--s-5) 0 var(--s-4); } .card { position: relative; transform-style: preserve-3d; min-height: 300px; cursor: pointer; transition: transform 550ms cubic-bezier(.4,0,.2,1); } .card.flipped { transform: rotateY(180deg); } .card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-7) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); } .card-back { transform: rotateY(180deg); background: var(--surface-2); border-color: var(--accent-low); } .card-label { font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; } /* Top row of each card face: label on the left, speaker button on the right. */ .card-face-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } /* Speaker button (Audio cards Pro feature). Lives in the corner of a card / question container. Hidden until the user enables audio cards in Profile. */ .speak-btn { background: transparent; border: 1px solid var(--line); color: var(--text-low); width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 120ms, border-color 120ms, background 120ms; flex-shrink: 0; } .speak-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(212, 169, 92, 0.08); } .speak-btn.hidden { display: none; } /* Wrapper that lets us float the speaker button at the top-right of the recall and quiz question containers without breaking their text layout. */ .recall-prompt-wrap, .test-question-wrap { position: relative; } .speak-btn-floating { position: absolute; top: 10px; right: 10px; z-index: 1; /* Translucent overlay derived from the theme background — same fix as the topnav (was hardcoded dark, ignored light themes). */ background: color-mix(in srgb, var(--bg-0) 70%, transparent); backdrop-filter: blur(6px); } .card-text { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 400; color: var(--text-hi); line-height: 1.4; letter-spacing: -0.01em; flex: 1; } .card-text strong { color: var(--accent); font-weight: 500; } .card-text ul { padding-left: 22px; margin: 8px 0 0; } .card-text li { margin: 8px 0; font-size: 20px; font-weight: 400; font-family: 'Fraunces', serif; } .card-text p { margin: 0; } .card-hint { font-size: 12px; color: var(--text-mut); text-align: center; } .judgement-row { display: flex; gap: var(--s-3); margin: var(--s-3) 0 var(--s-4); } .btn-judge { flex: 1; background: var(--surface); border: 1px solid var(--line); color: var(--text); padding: 14px 16px; font-size: 14px; font-weight: 500; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); transition: all 120ms ease; } .btn-judge .check { font-size: 17px; } .btn-got { color: #b6e2c0; border-color: rgba(125, 190, 143, 0.30); } .btn-got:hover { background: var(--ok-bg); border-color: var(--ok); } .btn-miss { color: #f0c0b6; border-color: rgba(214, 122, 106, 0.30); } .btn-miss:hover { background: var(--err-bg); border-color: var(--err); } .key-hint { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-mut); background: var(--bg-1); padding: 2px 6px; border-radius: 4px; } .nav-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); } .nav-counter { color: var(--text-low); font-size: 13px; margin: 0 var(--s-2); font-variant-numeric: tabular-nums; } /* ============================================================ RECALL ============================================================ */ .recall-prompt { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-md); padding: var(--s-6) var(--s-5); font-family: 'Fraunces', serif; font-size: 26px; font-weight: 400; color: var(--text-hi); margin: var(--s-5) 0 var(--s-4); line-height: 1.4; letter-spacing: -0.01em; } .recall-input { width: 100%; background: var(--bg-1); border: 1px solid var(--line); color: var(--text-hi); font-size: 18px; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); outline: none; transition: border-color 120ms ease, background 120ms ease; } .recall-input:focus { border-color: var(--accent); } .recall-input.correct { border-color: var(--ok); background: var(--ok-bg); } .recall-input.wrong { border-color: var(--err); background: var(--err-bg); } .recall-actions { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; } .recall-feedback { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); } .recall-feedback.correct { border-color: rgba(125, 190, 143, 0.40); } .recall-feedback.wrong { border-color: rgba(214, 122, 106, 0.40); } .recall-feedback-row { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); } .recall-feedback-tag { background: var(--ok); color: var(--bg-0); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.1em; text-transform: uppercase; } .recall-feedback.wrong .recall-feedback-tag { background: var(--err); } .recall-feedback-text { color: var(--text-low); font-size: 13px; } .recall-feedback-answer { background: var(--bg-1); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); font-family: 'Fraunces', serif; font-size: 17px; color: var(--text-hi); line-height: 1.5; } .recall-feedback-answer strong { color: var(--accent); font-weight: 500; } .recall-feedback-buttons { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; } /* AI explain panel — appears under the correct answer when the user misses or skips. Subtle gold styling so it reads as a Pro nudge, not as part of the standard feedback chrome. */ .recall-ai-explain { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--line); } .recall-ai-explain-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); padding: 6px 12px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 120ms ease, border-color 120ms ease; } .recall-ai-explain-btn:hover { background: var(--accent-bg); border-color: var(--accent); } .recall-ai-explain-btn:disabled { opacity: 0.7; cursor: progress; } .recall-ai-explain-btn svg { color: var(--accent); } .recall-ai-explain-body { margin-top: var(--s-2); padding: 10px 12px; background: var(--accent-bg); border-left: 3px solid var(--accent); border-radius: var(--r-sm); font-size: 13px; line-height: 1.55; color: var(--text-hi); animation: aiExplainIn 200ms ease; } @keyframes aiExplainIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .ai-explain-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: ai-spin 0.7s linear infinite; } /* ============================================================ TEST / QUIZ ============================================================ */ .test-question { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-md); padding: var(--s-6) var(--s-5); font-family: 'Fraunces', serif; font-size: 24px; font-weight: 400; color: var(--text-hi); margin: var(--s-5) 0 var(--s-4); } .test-choices { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); } .test-choice { background: var(--surface); border: 1px solid var(--line); color: var(--text); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); display: flex; align-items: center; gap: var(--s-3); font-size: 15px; text-align: left; transition: all 120ms ease; } .test-choice:hover:not(.disabled) { border-color: var(--accent); background: var(--surface-2); } .test-choice.correct { border-color: var(--ok); background: var(--ok-bg); } .test-choice.wrong { border-color: var(--err); background: var(--err-bg); } .test-choice.disabled { cursor: default; } .test-choice-letter { background: var(--bg-1); color: var(--text-low); width: 28px; height: 28px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; } .test-feedback { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); } .test-feedback-text { font-size: 14px; color: var(--text); line-height: 1.5; } .test-feedback-text strong { color: var(--accent); font-weight: 600; } /* ============================================================ DONE ============================================================ */ .done-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-7) var(--s-5); text-align: center; max-width: 480px; margin: var(--s-7) auto 0; } .done-emoji { font-size: 48px; } .done-card h2 { font-family: 'Fraunces', serif; margin: var(--s-4) 0 var(--s-2); font-size: 26px; font-weight: 500; color: var(--text-hi); } .done-card p { color: var(--text-low); margin: 0; } .done-stats { display: flex; gap: var(--s-3); justify-content: center; margin: var(--s-5) 0; flex-wrap: wrap; } .done-stat { background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-5); display: flex; flex-direction: column; gap: 2px; min-width: 100px; } .done-stat-value { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; color: var(--text-hi); } .done-stat-label { font-size: 11px; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; } .done-stat.got .done-stat-value { color: var(--ok); } .done-stat.miss .done-stat-value { color: var(--err); } .done-stat.score .done-stat-value { color: var(--accent); } .done-buttons { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; } /* ============================================================ MODAL ============================================================ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(8, 7, 10, 0.75); backdrop-filter: blur(6px); z-index: 50; } /* Lock the page behind any open popup so the background can't scroll — the popup itself scrolls internally. Toggled by openModal()/closeModal(). */ html.modal-open, html.modal-open body { overflow: hidden; } .modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; /* tall popups scroll from the top instead of clipping */ justify-content: center; /* Scroll the popup itself (not the page) and clear the notch / home bar. */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: max(var(--s-4), env(safe-area-inset-top)) var(--s-4) max(var(--s-4), env(safe-area-inset-bottom)); } .modal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5) var(--s-5) var(--s-4); width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--s-4); max-height: 86dvh; /* dynamic viewport so the card fits the *visible* screen */ overflow-y: auto; margin: auto; /* re-centre vertically when it fits; scroll when it doesn't */ } .modal-header { display: flex; align-items: center; justify-content: space-between; } .modal-header h3 { margin: 0; font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; color: var(--text-hi); } .modal-close { background: none; border: none; color: var(--text-low); font-size: 20px; width: 30px; height: 30px; border-radius: var(--r-sm); } .modal-close:hover { background: var(--surface-2); color: var(--text-hi); } .modal-body { display: flex; flex-direction: column; gap: var(--s-2); } .modal-label { font-size: 12px; font-weight: 600; color: var(--text-low); letter-spacing: 0.04em; margin: var(--s-2) 0 -2px; } .modal-body input, .modal-body textarea { background: var(--bg-1); border: 1px solid var(--line); color: var(--text-hi); font-size: 14px; padding: 10px 14px; border-radius: var(--r-md); outline: none; font-family: inherit; resize: vertical; } .modal-body input:focus, .modal-body textarea:focus { border-color: var(--accent); } .modal-parent-row { display: flex; align-items: center; gap: var(--s-3); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 14px; font-size: 13px; } .modal-parent-row .modal-label { margin: 0; } .modal-parent-name { color: var(--text-hi); font-weight: 500; } .modal-footer { display: flex; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-2); } /* In-app confirm dialog — same modal frame as Add Card / Add Deck. */ .modal-confirm-card { max-width: 420px; gap: var(--s-3); } .modal-confirm-title { margin: 0; font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-hi); letter-spacing: -0.01em; } .modal-confirm-message { margin: 0; color: var(--text-low); font-size: 14px; line-height: 1.55; } .color-row { display: flex; flex-wrap: wrap; gap: var(--s-2); } .color-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 120ms ease; } .color-swatch.active { border-color: var(--text-hi); } .color-swatch:hover { transform: scale(1.1); } .picker-list { display: flex; flex-direction: column; gap: var(--s-2); } .picker-item { background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-4); display: flex; align-items: center; gap: var(--s-4); text-align: left; color: var(--text); transition: border-color 120ms ease, background 120ms ease; } .picker-item:hover { border-color: var(--accent); background: var(--surface-2); } .picker-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--bg-1); color: var(--accent); } .picker-item strong { display: block; font-family: 'Fraunces', serif; font-size: 17px; font-weight: 500; color: var(--text-hi); } .picker-item em { display: block; font-style: normal; font-size: 13px; color: var(--text-low); margin-top: 2px; } /* ============================================================ OCR — Scan a page → cards (Pro) ============================================================ */ .modal-ocr-card { max-width: 720px; width: calc(100vw - 32px); } .ocr-hint { margin: 12px 0 0; font-size: 12px; color: var(--text-mut); } .ocr-preview { max-width: 100%; max-height: 240px; border-radius: var(--r-md); border: 1px solid var(--line); display: block; margin: 0 auto var(--s-3); object-fit: contain; } .ocr-progress { display: flex; flex-direction: column; gap: 6px; } .ocr-progress-bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .ocr-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 200ms linear; } .ocr-progress-label { font-size: 13px; color: var(--text-low); text-align: center; } /* Review stage: editable rows of Q/A pairs detected from the OCR text. */ .ocr-cards-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; padding-right: 4px; margin: var(--s-3) 0; } .ocr-card-row { display: grid; grid-template-columns: 1fr 1fr 32px; gap: 8px; align-items: center; } .ocr-card-row input { background: var(--bg-0); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); padding: 9px 11px; font-family: inherit; font-size: 13px; min-width: 0; } .ocr-card-row input:focus { outline: none; border-color: var(--accent); } .ocr-card-row input.ocr-card-q { color: var(--text-hi); font-weight: 500; } .ocr-card-remove { width: 32px; height: 32px; border: 1px solid var(--line); background: transparent; color: var(--text-mut); border-radius: var(--r-sm, 8px); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; } .ocr-card-remove:hover { color: #d67a6a; border-color: #d67a6a; } .ocr-raw-details { margin-top: var(--s-3); font-size: 12px; } .ocr-raw-details summary { cursor: pointer; color: var(--text-mut); padding: 4px 0; } .ocr-raw-details summary:hover { color: var(--accent); } .ocr-raw-text { margin: var(--s-2) 0 0; padding: var(--s-3); background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-low); white-space: pre-wrap; max-height: 200px; overflow-y: auto; } @media (max-width: 560px) { .ocr-card-row { grid-template-columns: 1fr 32px; } .ocr-card-row .ocr-card-a { grid-column: 1; grid-row: 2; } .ocr-card-row .ocr-card-remove { grid-row: 1 / span 2; } } /* ============================================================ AI CARD GENERATION (Pro) ============================================================ */ .modal-ai-card { max-width: 720px; width: calc(100vw - 32px); } /* The AI picker tile gets a subtle gold accent so it pops as the "premium / shiny" option among the more utilitarian Card / Subdeck choices. Pairs with the sparkle icon in the markup. */ .picker-item-ai { background: linear-gradient(135deg, rgba(212, 169, 92, 0.08), rgba(212, 169, 92, 0.02)); border-color: rgba(212, 169, 92, 0.3); } .picker-item-ai:hover { border-color: rgba(212, 169, 92, 0.6); } .picker-item-ai .picker-icon { color: var(--accent); } .ai-input-label { display: block; margin-top: var(--s-3); margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text-hi); } .ai-input-label:first-child { margin-top: 0; } .ai-input-hint { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--text-low); } .ai-input-optional { font-weight: 400; font-size: 11px; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.06em; margin-left: 4px; } /* PDF upload toolbar sits between the "Source notes" label and the textarea. Button + live status line ("Reading page 3 of 12…" / "✓ Read 12 of 12 pages"). */ .ai-source-toolbar { display: flex; align-items: center; gap: var(--s-2); margin-bottom: 6px; flex-wrap: wrap; } .ai-source-toolbar .btn { padding: 6px 10px; font-size: 12px; } .ai-source-toolbar .btn svg { margin-right: 4px; } .ai-source-status { font-size: 11px; color: var(--text-low); font-family: 'JetBrains Mono', monospace; flex: 1; min-width: 0; } .ai-source-status-error { color: var(--danger, #e66); } #modal-ai-cards input[type="text"], #modal-ai-cards textarea { width: 100%; padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-hi); font-family: 'Inter', sans-serif; font-size: 14px; resize: vertical; } #modal-ai-cards input[type="text"]:focus, #modal-ai-cards textarea:focus { outline: none; border-color: var(--accent); } .ai-count-row { display: flex; align-items: center; gap: var(--s-3); } .ai-count-row input[type="range"] { flex: 1; accent-color: var(--accent); } .ai-count-value { min-width: 70px; font-size: 13px; color: var(--text-low); font-family: 'JetBrains Mono', monospace; } .ai-count-value strong { color: var(--accent); font-weight: 700; } .ai-quota-line { margin-top: var(--s-3); font-size: 11px; color: var(--text-low); font-family: 'JetBrains Mono', monospace; } /* Loading stage — animated spinner so the 5-15s wait doesn't feel dead. */ .ai-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s-6) var(--s-4); gap: var(--s-3); color: var(--text-low); text-align: center; } .ai-loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ai-spin 0.8s linear infinite; } @keyframes ai-spin { to { transform: rotate(360deg); } } /* Results stage — same Q/A grid as OCR review, lightly restyled with numbered cards so the user can scan + edit before saving. */ .ai-results-summary { margin: 0 0 var(--s-3); color: var(--text-low); font-size: 13px; } .ai-results-summary strong { color: var(--accent); font-weight: 700; } .ai-cards-list { display: flex; flex-direction: column; gap: var(--s-2); max-height: 50vh; overflow-y: auto; padding-right: 4px; } .ai-card-row { display: grid; grid-template-columns: 28px 1fr 32px; gap: var(--s-2); align-items: start; padding: var(--s-2); background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-sm); } .ai-card-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); font-weight: 700; text-align: center; padding-top: 10px; } .ai-card-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ai-card-row .ai-card-q, .ai-card-row .ai-card-a { width: 100%; padding: 8px 10px; background: var(--bg-0); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px; resize: vertical; } .ai-card-row .ai-card-q { color: var(--text-hi); font-weight: 500; } .ai-card-row .ai-card-q:focus, .ai-card-row .ai-card-a:focus { outline: none; border-color: var(--accent); } .ai-card-remove { width: 28px; height: 28px; background: transparent; border: 1px solid var(--border); border-radius: 50%; color: var(--text-low); font-size: 16px; line-height: 1; cursor: pointer; margin-top: 6px; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .ai-card-remove:hover { background: var(--danger-soft, rgba(255, 100, 100, 0.1)); border-color: var(--danger, #e66); color: var(--danger, #e66); } @media (max-width: 560px) { .ai-card-row { grid-template-columns: 24px 1fr 28px; } } /* ============================================================ POMODORO / FOCUS MODE ============================================================ */ /* Preset picker inside the Focus modal */ .pomodoro-presets { display: flex; flex-direction: column; gap: var(--s-2); } .pomodoro-preset { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); color: var(--text); font-family: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color 120ms, background 120ms; } .pomodoro-preset:hover { border-color: var(--accent); background: var(--surface-2); } .pomodoro-preset strong { color: var(--accent); font-weight: 700; font-size: 15px; } .pomodoro-preset span { color: var(--text-mut); font-size: 13px; } /* Floating timer widget — bottom-right, persistent across page nav. */ .pomodoro-widget { position: fixed; bottom: 24px; right: 24px; z-index: 35; background: var(--surface); border: 1px solid var(--accent); border-radius: 14px; padding: 14px 16px 12px; min-width: 200px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 8px; font-family: inherit; } .pomodoro-widget.hidden { display: none; } .pomodoro-widget.break { border-color: #94d49a; } .pomodoro-widget.paused { opacity: 0.75; } .pomodoro-widget-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .pomodoro-widget-phase { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); font-weight: 700; } .pomodoro-widget.break .pomodoro-widget-phase { color: #94d49a; } .pomodoro-widget-count { font-size: 11px; color: var(--text-mut); font-weight: 600; } .pomodoro-widget-time { font-family: 'JetBrains Mono', 'Inter', monospace; font-size: 30px; font-weight: 700; color: var(--text-hi); line-height: 1; letter-spacing: 0.02em; } .pomodoro-widget-bar { height: 3px; background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 999px; overflow: hidden; } .pomodoro-widget-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 800ms linear; } .pomodoro-widget.break .pomodoro-widget-bar-fill { background: #94d49a; } .pomodoro-widget-controls { display: flex; gap: 4px; } .pomodoro-widget-controls button { flex: 1; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid var(--line); border-radius: 7px; color: var(--text); padding: 6px 8px; font-size: 13px; cursor: pointer; font-family: inherit; transition: background 100ms, border-color 100ms; } .pomodoro-widget-controls button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); border-color: var(--line-strong, var(--accent)); } /* ============================================================ MOCK EXAM (Pro feature: timed, no flip, results review) ============================================================ */ /* Small "Pro" badge next to the mode name in the picker. */ .mode-pro-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; background: rgba(212, 169, 92, 0.18); border: 1px solid rgba(212, 169, 92, 0.45); border-radius: 999px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; } /* Exam header: deck title left, big monospace countdown right. */ .mock-exam-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); } .mock-exam-timer { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); min-width: 110px; transition: border-color 200ms, background 200ms; } .mock-exam-timer.urgent { border-color: var(--err, #d67a6a); background: rgba(214, 122, 106, 0.08); animation: mockTimerPulse 1s ease-in-out infinite; } @keyframes mockTimerPulse { 50% { transform: scale(1.02); } } .mock-exam-time { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--text-hi); line-height: 1; letter-spacing: 0.02em; } .mock-exam-timer.urgent .mock-exam-time { color: var(--err, #d67a6a); } .mock-exam-time-label { font-size: 10px; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } /* Results page: 4-card stat grid + per-question review list. */ .mock-exam-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); margin: var(--s-5) 0 var(--s-6); } .mock-exam-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .mock-exam-stat-value { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700; color: var(--text-hi); line-height: 1; } .mock-exam-stat-label { font-size: 11px; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; } .mock-exam-review { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-6); } .mock-exam-review-item { display: grid; grid-template-columns: 32px 1fr 32px; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong, var(--line)); border-radius: var(--r-md); align-items: start; } .mock-exam-review-item.correct { border-left-color: #94d49a; } .mock-exam-review-item.wrong { border-left-color: var(--err, #d67a6a); } .mock-exam-review-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-mut); font-weight: 600; padding-top: 2px; } .mock-exam-review-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .mock-exam-review-q { color: var(--text-hi); font-weight: 500; font-size: 14px; line-height: 1.45; } .mock-exam-review-your, .mock-exam-review-real { font-size: 13px; color: var(--text-lo); line-height: 1.5; word-break: break-word; } .mock-exam-review-label { display: inline-block; min-width: 56px; font-size: 11px; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .mock-exam-review-mark { font-size: 18px; font-weight: 700; text-align: center; padding-top: 2px; } .mock-exam-review-item.correct .mock-exam-review-mark { color: #94d49a; } .mock-exam-review-item.wrong .mock-exam-review-mark { color: var(--err, #d67a6a); } .mock-exam-review-item.partial { border-left-color: var(--accent); } .mock-exam-review-item.partial .mock-exam-review-mark { color: var(--accent); } .mock-exam-review-feedback { font-size: 13px; color: var(--text-hi); line-height: 1.5; background: var(--accent-bg); border-left: 2px solid var(--accent); padding: 6px 10px; border-radius: 4px; margin-top: 2px; } /* Marks numerator stays mono so 2/4 lines up with 12/15 etc. */ .mock-exam-review-mark { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; min-width: 44px; } .mock-exam-review-mark-correct { color: #94d49a; } .mock-exam-review-mark-wrong { color: var(--err, #d67a6a); } .mock-exam-review-mark-partial { color: var(--accent); } /* ============================================================ TEAM LIBRARY drill-down navigation ============================================================ */ .team-breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s-3); padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; } .team-breadcrumb-root { background: transparent; border: none; color: var(--accent); cursor: pointer; font-weight: 600; font-family: inherit; font-size: inherit; padding: 0; } .team-breadcrumb-root:hover { text-decoration: underline; } .team-breadcrumb-link { background: transparent; border: none; color: var(--text-low); cursor: pointer; font-family: inherit; font-size: inherit; padding: 0; } .team-breadcrumb-link:hover { color: var(--text-hi); } .team-breadcrumb-sep { color: var(--text-mut); } .team-breadcrumb-current { color: var(--text-hi); font-weight: 600; } /* Prominent "Study all of " card at the top of a drilled-in team folder. Sits between the breadcrumb and the sub-deck list so members can launch a mixed session without scrolling. */ .team-study-all-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--r-md); flex-wrap: wrap; } .team-study-all-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .team-study-all-text strong { color: var(--accent); font-size: 14px; font-weight: 600; } .team-study-all-text .muted-lead { margin: 0; font-size: 12px; } .team-study-all-card .btn { white-space: nowrap; } /* ============================================================ LIBRARY TABS (My library / Discover) ============================================================ */ .library-tabs { display: flex; gap: 4px; margin: var(--s-3) 0; border-bottom: 1px solid var(--line); } .lib-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-low); padding: 10px 14px; font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; transition: color 120ms ease, border-color 120ms ease; font-family: inherit; } .lib-tab:hover { color: var(--text-hi); } .lib-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .lib-tab-badge { font-size: 9px; padding: 2px 6px; text-transform: uppercase; letter-spacing: 0.08em; background: color-mix(in srgb, #94d49a 18%, transparent); color: #94d49a; border-radius: 4px; font-weight: 700; } /* ============================================================ DISCOVER (public decks) ============================================================ */ .discover-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); } .discover-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); transition: border-color 120ms ease; } .discover-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .discover-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; margin-bottom: 8px; } .discover-card-name { margin: 0; font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--text-hi); letter-spacing: -0.005em; } .discover-card-chips { display: flex; gap: 6px; flex-wrap: wrap; } .discover-chip { display: inline-block; padding: 3px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--text-low); font-weight: 600; white-space: nowrap; } .discover-chip-imports { background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); } .discover-card-desc { margin: 0 0 var(--s-3); font-size: 13px; color: var(--text); line-height: 1.55; } .discover-card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .discover-card-author { font-size: 12px; color: var(--text-mut); font-style: italic; } .discover-card-actions { display: flex; gap: 6px; } /* ============================================================ PUBLISH section in the deck-edit modal ============================================================ */ .publish-section { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); } .publish-section-title { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--text-hi); } .publish-section-desc { margin: 0 0 var(--s-3); font-size: 13px; } .publish-meta { margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); } .publish-meta textarea, .publish-meta input[type="text"] { width: 100%; padding: 8px 10px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font-family: inherit; font-size: 13px; resize: vertical; } .publish-meta input:focus, .publish-meta textarea:focus { outline: none; border-color: var(--accent); } .publish-url-row { margin-top: var(--s-2); } .publish-url-display { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--r-sm); } .publish-url-display code { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .publish-qr-wrap { margin-top: var(--s-3); } .publish-qr { background: #fff; padding: 10px; border-radius: var(--r-sm); width: max-content; } .publish-qr svg { display: block; width: 150px; height: 150px; } .publish-qr-hint { margin-top: 8px; font-size: 12px; } .profile-plan { display: inline-block; margin-top: 8px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-low); background: var(--accent-bg); border: 1px solid var(--line); } .profile-plan.pro { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } /* ============================================================ PREDICTED EXAM GRADE (Stats hero card) ============================================================ */ .predicted-grade { margin: var(--s-2) 0 var(--s-3); } .predicted-grade-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); border-left: 4px solid var(--accent); } .predicted-grade-high { border-left-color: #94d49a; } .predicted-grade-mid { border-left-color: var(--accent); } .predicted-grade-low { border-left-color: var(--err, #d67a6a); } .predicted-grade-band { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 80px; padding: var(--s-3) var(--s-2); background: var(--accent-bg); border-radius: var(--r-sm); } .predicted-grade-high .predicted-grade-band { background: color-mix(in srgb, #94d49a 14%, transparent); } .predicted-grade-low .predicted-grade-band { background: color-mix(in srgb, var(--err, #d67a6a) 14%, transparent); } .predicted-grade-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mut); font-weight: 700; } .predicted-grade-value { font-family: 'Fraunces', serif; font-size: 44px; font-weight: 700; color: var(--accent); line-height: 1; } .predicted-grade-high .predicted-grade-value { color: #94d49a; } .predicted-grade-low .predicted-grade-value { color: var(--err, #d67a6a); } .predicted-grade-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .predicted-grade-pct { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; } .predicted-grade-pct strong { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--text-hi); } .predicted-grade-trend { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--surface-2); color: var(--text-low); } .predicted-grade-trend-up { background: color-mix(in srgb, #94d49a 18%, transparent); color: #94d49a; } .predicted-grade-trend-down { background: color-mix(in srgb, var(--err, #d67a6a) 18%, transparent); color: var(--err, #d67a6a); } .predicted-grade-basis { margin: 0; font-size: 13px; color: var(--text); line-height: 1.5; } .predicted-grade-confidence { margin: 0; font-size: 11px; color: var(--text-mut); font-style: italic; } /* Per-subject breakdown table below the headline card */ .predicted-grade-perdeck { margin-top: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); } .predicted-grade-perdeck-head { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mut); font-weight: 700; } .predicted-grade-perdeck-row { display: grid; grid-template-columns: 4px 1fr auto auto auto; align-items: center; gap: var(--s-3); padding: 8px 0; border-top: 1px solid var(--line); } .predicted-grade-perdeck-row:first-of-type { border-top: none; } .predicted-grade-perdeck-stripe { height: 24px; width: 3px; border-radius: 2px; } .predicted-grade-perdeck-name { font-size: 14px; color: var(--text-hi); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .predicted-grade-perdeck-meta { font-size: 11px; color: var(--text-mut); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; } .predicted-grade-perdeck-pct { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .predicted-grade-perdeck-grade { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700; color: var(--accent); min-width: 24px; text-align: center; } .predicted-grade-perdeck-grade-high { color: #94d49a; } .predicted-grade-perdeck-grade-low { color: var(--err, #d67a6a); } /* Empty state */ .predicted-grade-empty { padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-md); } .predicted-grade-empty p { margin: 0; } /* Locked card shown to free users */ .predicted-grade-locked { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--r-md); } .predicted-grade-locked-band { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 80px; padding: var(--s-3) var(--s-2); background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: var(--r-sm); } .predicted-grade-locked-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .predicted-grade-locked-value { font-family: 'Fraunces', serif; font-size: 44px; font-weight: 700; color: var(--accent); line-height: 1; opacity: 0.6; } .predicted-grade-locked-text { display: flex; flex-direction: column; gap: 6px; } .predicted-grade-locked-text p { margin: 0; font-size: 13px; } .predicted-grade-locked-text .btn { align-self: flex-start; margin-top: 4px; } @media (max-width: 560px) { .predicted-grade-card, .predicted-grade-locked { grid-template-columns: 1fr; } .predicted-grade-band, .predicted-grade-locked-band { flex-direction: row; justify-content: flex-start; gap: var(--s-3); padding: 8px 12px; } .predicted-grade-value, .predicted-grade-locked-value { font-size: 32px; } .predicted-grade-perdeck-row { grid-template-columns: 4px 1fr auto auto; } .predicted-grade-perdeck-meta { display: none; } } /* ============================================================ EXAM PAPER (Mock exam V2 — full paper layout, AI marking) ============================================================ */ .exam-paper { max-width: 760px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-7); } /* Cover page at the top of the exam — looks like a real paper header. */ .exam-paper-cover { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5) var(--s-5) var(--s-4); margin-bottom: var(--s-4); } .exam-paper-board { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-mut); font-weight: 700; } .exam-paper-title { margin: 0 0 var(--s-3); font-family: 'Fraunces', serif; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-hi); } .exam-paper-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: 13px; color: var(--text); padding: var(--s-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .exam-paper-meta strong { font-weight: 600; color: var(--text-mut); margin-right: 4px; text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em; } .exam-paper-instructions { margin-top: var(--s-3); font-size: 13px; color: var(--text); line-height: 1.55; } .exam-paper-instructions strong { display: block; margin-bottom: 4px; color: var(--text-hi); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .exam-paper-instructions ul { margin: 0; padding-left: 22px; } .exam-paper-instructions li { margin-bottom: 2px; } /* Sticky bar with timer + jump nav between questions */ .exam-paper-bar { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); background: color-mix(in srgb, var(--bg-0) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; margin-bottom: var(--s-3); } .exam-bar-counter { font-size: 12px; font-weight: 600; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.06em; } .exam-bar-jumpnav { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .exam-jumpnav-btn { width: 28px; height: 28px; border-radius: 6px; background: var(--bg-1); border: 1px solid var(--line); color: var(--text-low); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 100ms ease; } .exam-jumpnav-btn:hover { border-color: var(--accent); color: var(--text-hi); } .exam-jumpnav-btn.answered { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); } .exam-jumpnav-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg-0); } /* The current question card — looks like a page from an exam booklet */ .exam-question-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); min-height: 360px; display: flex; flex-direction: column; gap: var(--s-3); } .exam-question-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: var(--s-2); } .exam-question-num { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--text-hi); } .exam-question-marks { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--accent); font-weight: 600; } .exam-question-text { font-size: 16px; line-height: 1.6; color: var(--text-hi); } .exam-answer-box { width: 100%; min-height: 120px; background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-3); color: var(--text); font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; resize: vertical; /* Faint horizontal lines so it FEELS like exam paper. */ background-image: repeating-linear-gradient( to bottom, transparent, transparent 27px, color-mix(in srgb, var(--text) 8%, transparent) 27px, color-mix(in srgb, var(--text) 8%, transparent) 28px ); } .exam-answer-box:focus { outline: none; border-color: var(--accent); } .exam-answer-hint { margin: 0; font-size: 11px; color: var(--text-mut); font-style: italic; } .exam-paper-nav { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; } .exam-paper-nav .btn-primary { margin-left: auto; } /* ============================================================ EXAM RESULTS — grade banner + examiner note ============================================================ */ .exam-grade-banner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); align-items: stretch; margin: var(--s-4) 0; padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); border-top: 4px solid var(--accent); } .exam-grade-banner.grade-high { border-top-color: #94d49a; } .exam-grade-banner.grade-mid { border-top-color: var(--accent); } .exam-grade-banner.grade-low { border-top-color: var(--err, #d67a6a); } .exam-grade-band, .exam-grade-marks, .exam-grade-pct { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .exam-grade-label, .exam-grade-marks-label, .exam-grade-pct-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-mut); font-weight: 700; } .exam-grade-value { font-family: 'Fraunces', serif; font-size: 48px; font-weight: 700; color: var(--accent); line-height: 1; } .grade-high .exam-grade-value { color: #94d49a; } .grade-low .exam-grade-value { color: var(--err, #d67a6a); } .exam-grade-marks-value { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; color: var(--text-hi); font-variant-numeric: tabular-nums; } .exam-grade-marks-sep { color: var(--text-mut); margin: 0 4px; font-weight: 400; } .exam-grade-pct-value { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; color: var(--text-hi); } .exam-examiner-note { margin: var(--s-3) 0 var(--s-4); padding: var(--s-3) var(--s-4); background: var(--accent-bg); border-left: 3px solid var(--accent); border-radius: var(--r-sm); } .exam-examiner-note-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; margin-bottom: 4px; } .exam-examiner-note-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-hi); } /* "Writing your exam paper…" loader shown before the questions are ready when AI is generating them. Same visual language as the marking loader for consistency. */ .exam-paper-genloader { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-7) var(--s-4); text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); min-height: 280px; justify-content: center; } .exam-genloader-title { margin: 0; font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--text-hi); } .exam-genloader-sub { margin: 0; max-width: 360px; font-size: 13px; color: var(--text-low); line-height: 1.55; } .exam-marking-loader { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-6) var(--s-4); text-align: center; color: var(--text-low); } .exam-marking-spinner { width: 40px; height: 40px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: ai-spin 0.8s linear infinite; } @media (max-width: 560px) { .exam-grade-banner { grid-template-columns: 1fr; gap: var(--s-2); } .exam-paper-bar { grid-template-columns: 1fr; gap: var(--s-2); text-align: center; } .exam-bar-jumpnav { justify-content: flex-start; } .exam-question-card { padding: var(--s-4); } } /* ============================================================ PROFILE / STATS ============================================================ */ .profile-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; align-items: center; gap: var(--s-4); margin: var(--s-4) 0 var(--s-5); } .profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--bg-0); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; } .profile-card h2 { margin: 0 0 2px; font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--text-hi); } .profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); } .profile-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; } /* Team (Pro) section on Profile + team library block on Library. */ .team-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); } .team-card .muted-lead { margin: 0; font-size: 13px; line-height: 1.55; } .team-card-buttons { display: flex; gap: var(--s-2); flex-wrap: wrap; } .team-join-form { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; } .team-join-form input { flex: 1; min-width: 180px; background: var(--bg-0); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); padding: 10px 12px; font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; } .team-join-form input:focus { outline: none; border-color: var(--accent); } .team-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; } .team-name { margin: 0 0 4px; font-weight: 700; color: var(--text-hi); font-size: 16px; font-family: 'Fraunces', serif; } .team-subline { margin: 0; font-size: 12px; color: var(--text-mut); } .team-code-row { display: flex; align-items: center; gap: var(--s-2); padding: 10px 12px; background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); } .team-code-label { font-size: 11px; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .team-code { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; color: var(--accent); letter-spacing: 0.05em; user-select: all; } .team-members-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .team-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); } .team-member-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--bg-0); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; } .team-member-handle { flex: 1; display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; } .team-member-badge { font-size: 10px; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .team-member-badge-owner { background: rgba(212, 169, 92, 0.18); color: var(--accent); border: 1px solid rgba(212, 169, 92, 0.4); } .team-member-badge-me { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text-mut); border: 1px solid var(--line); } .team-member-remove { background: transparent; border: 1px solid var(--line); color: var(--text-mut); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; } .team-member-remove:hover { color: #d67a6a; border-color: #d67a6a; } .team-footer-hint { margin: 0; font-size: 12px; color: var(--text-mut); line-height: 1.55; } /* Team library block on the Library view (members only). */ .team-library-block { margin-bottom: var(--s-5); } .team-library-by { font-size: 12px; color: var(--text-mut); text-transform: none; letter-spacing: normal; font-weight: 500; margin-left: 8px; } .team-personal-h2 { margin-top: var(--s-5); } .deck-row-team { display: grid; grid-template-columns: 4px 1fr auto; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin: 4px 0; cursor: pointer; align-items: center; transition: border-color 120ms, background 120ms; } .deck-row-team:hover { border-color: var(--accent); background: var(--surface-2); } .deck-row-team .deck-row-stripe { width: 4px; height: 28px; border-radius: 2px; } .deck-row-team .deck-row-name { font-weight: 600; color: var(--text-hi); font-size: 15px; } .deck-row-team .deck-row-meta { font-size: 12px; color: var(--text-mut); margin-top: 2px; } .deck-row-team-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: rgba(212, 169, 92, 0.14); border: 1px solid rgba(212, 169, 92, 0.4); padding: 3px 8px; border-radius: 999px; font-weight: 700; } /* Share-code section on Profile: generate / display / regen / import */ .share-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); } .share-card .muted-lead { margin: 0; font-size: 13px; line-height: 1.55; } .share-code-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .share-code { flex: 1; min-width: 200px; font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; color: var(--accent); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); padding: 10px 14px; letter-spacing: 0.06em; text-align: center; user-select: all; } .share-card .btn-small { padding: 7px 12px; font-size: 12px; } .share-import-form { display: flex; gap: var(--s-2); flex-wrap: wrap; } .share-import-form input { flex: 1; min-width: 220px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); padding: 10px 14px; font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; } .share-import-form input:focus { outline: none; border-color: var(--accent); } /* ============================================================ PROMO CODES (Profile) ============================================================ */ /* Redeem block — visible to all users. Looks like share-card but styled subtly differently so users don't mix them up. */ .promo-redeem-card, .promo-mint-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); } .promo-redeem-form, .promo-mint-form { display: flex; gap: var(--s-2); flex-wrap: wrap; } .promo-redeem-form input, .promo-mint-form input[type="text"], .promo-mint-form select { flex: 1; min-width: 180px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); padding: 10px 14px; font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: 0.04em; } .promo-redeem-form input { text-transform: uppercase; } .promo-redeem-form input:focus, .promo-mint-form input:focus, .promo-mint-form select:focus { outline: none; border-color: var(--accent); } .promo-redeem-msg { font-size: 13px; color: var(--accent); padding: 8px 12px; background: rgba(212, 169, 92, 0.08); border-radius: var(--r-sm, 8px); } .promo-redeem-msg-error { color: var(--danger, #e66); background: rgba(214, 122, 106, 0.08); } /* ============================================================ DEVICES (Profile) ============================================================ */ /* ============================================================ FIRST-RUN GUIDED TOUR ============================================================ */ .tour { position: fixed; inset: 0; z-index: 9990; } /* Transparent click-absorber so the page can't be interacted with mid-tour (only the tooltip buttons work). */ .tour-blocker { position: fixed; inset: 0; z-index: 9991; } /* The spotlight ring — its giant box-shadow dims everything EXCEPT the highlighted element's rect. pointer-events:none so the shadow doesn't block (the blocker behind handles that). */ .tour-spotlight { position: fixed; z-index: 9992; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(8, 7, 11, 0.78), 0 0 0 2px var(--accent); pointer-events: none; transition: left 250ms ease, top 250ms ease, width 250ms ease, height 250ms ease; } .changelog-summary-actions { display: flex; gap: 6px; flex-wrap: wrap; } .tour-tooltip { position: fixed; z-index: 9993; width: min(330px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-md); padding: var(--s-4) var(--s-4) var(--s-3); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); animation: tourIn 220ms cubic-bezier(.2,.9,.3,1.2); } .tour-tooltip-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); } @keyframes tourIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; } } .tour-tooltip-center { animation: none; } .tour-step-count { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; font-family: 'JetBrains Mono', monospace; } .tour-title { margin: 6px 0 6px; font-family: 'Fraunces', serif; font-size: 19px; color: var(--text-hi); } .tour-body { margin: 0 0 var(--s-3); font-size: 13px; line-height: 1.55; color: var(--text); } .tour-dots { display: flex; gap: 5px; margin-bottom: var(--s-3); } .tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: background 150ms, width 150ms; } .tour-dot.active { background: var(--accent); width: 16px; border-radius: 3px; } .tour-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .tour-skip { background: none; border: none; color: var(--text-low); font-size: 12px; cursor: pointer; font-family: inherit; padding: 4px; } .tour-skip:hover { color: var(--text-hi); } .tour-nav-btns { display: flex; gap: 6px; } /* ============================================================ FAMILY PLAN (parent dashboard / child view) ============================================================ */ .family-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); } .family-empty { display: flex; flex-direction: column; gap: var(--s-3); } .family-empty .muted-lead { margin: 0; } .family-empty-actions { display: flex; flex-direction: column; gap: var(--s-3); } .family-create-row, .family-join-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } .family-create-row input, .family-join-row input { flex: 1; min-width: 180px; padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-hi); font-family: inherit; font-size: 13px; } .family-create-row input:focus, .family-join-row input:focus { outline: none; border-color: var(--accent); } .family-pro-required { margin: 0; font-size: 12px; color: var(--text-mut); font-style: italic; } .family-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); } .family-name { margin: 0 0 4px; font-family: 'Fraunces', serif; font-size: 18px; color: var(--text-hi); } .family-header .muted-lead { margin: 0; font-size: 13px; } .family-invite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .family-invite-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mut); font-weight: 700; } .family-invite-code { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-bg); padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .family-children-list { display: flex; flex-direction: column; gap: var(--s-3); } .family-child-row { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-3); display: flex; flex-direction: column; gap: 8px; } .family-child-row.goal-met { border-color: color-mix(in srgb, #94d49a 50%, var(--line)); background: color-mix(in srgb, #94d49a 8%, var(--bg-1)); } .family-child-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .family-child-name { font-size: 14px; color: var(--text-hi); font-weight: 600; margin-right: 6px; } .family-child-streak { font-size: 12px; color: var(--text-low); font-family: 'JetBrains Mono', monospace; } .family-child-afk { display: inline-block; margin-left: 8px; font-size: 11px; padding: 2px 8px; background: color-mix(in srgb, var(--err, #d67a6a) 16%, transparent); color: var(--err, #d67a6a); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--err, #d67a6a) 30%, transparent); font-weight: 600; } /* "Paused — move your mouse to resume" toast shown to the child when they go AFK during a study session. Fixed bottom-centre, gold for visibility. Auto-removes when activity resumes. */ .afk-indicator { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 220; display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--surface); border: 1px solid var(--accent); border-radius: 999px; color: var(--text-hi); font-size: 13px; font-weight: 500; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); animation: afkIn 200ms ease; } .afk-indicator-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: afkPulse 1.2s ease-in-out infinite; } @keyframes afkIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes afkPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .family-child-progress-label { font-size: 12px; color: var(--text-low); font-family: 'JetBrains Mono', monospace; } .family-child-badge { font-size: 11px; padding: 3px 10px; background: color-mix(in srgb, #94d49a 18%, transparent); color: #94d49a; border-radius: 999px; border: 1px solid color-mix(in srgb, #94d49a 35%, transparent); font-weight: 700; letter-spacing: 0.04em; } .family-child-progress-bar { height: 6px; background: var(--bg-0); border-radius: 999px; overflow: hidden; } .family-child-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #94d49a); transition: width 220ms ease; } .family-child-week { display: flex; gap: 6px; align-items: flex-end; padding: 6px 0; min-height: 48px; } .family-child-week-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; } .family-child-week-fill { width: 100%; background: var(--accent); border-radius: 2px; min-height: 2px; opacity: 0.7; } .family-child-week-bar:hover .family-child-week-fill { opacity: 1; } .family-child-week-label { font-size: 9px; color: var(--text-mut); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; } .family-child-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 8px; } .family-child-controls label { font-size: 11px; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .family-child-goal-input { width: 60px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-hi); padding: 4px 6px; font-family: 'JetBrains Mono', monospace; font-size: 12px; text-align: center; } .family-child-goal-input:focus { outline: none; border-color: var(--accent); } /* Child's own view of their family — just their progress + leave btn */ .family-child-self { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-3); display: flex; flex-direction: column; gap: 8px; } .family-child-self.goal-met { border-color: color-mix(in srgb, #94d49a 50%, var(--line)); } .family-child-self-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); } .family-child-self-head strong { color: var(--text-hi); } .family-actions { display: flex; justify-content: flex-end; } /* Leave-request notification banner on the parent dashboard */ .family-leave-banner { background: color-mix(in srgb, var(--err, #d67a6a) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--err, #d67a6a) 40%, transparent); border-radius: var(--r-sm); padding: var(--s-3); display: flex; flex-direction: column; gap: 8px; } .family-leave-banner-head { font-weight: 700; font-size: 13px; color: var(--err, #d67a6a); } .family-leave-request { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; font-size: 13px; color: var(--text); } .family-leave-actions { display: flex; gap: 6px; } /* Child's pending-leave state */ .family-pending-leave { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-3); background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--r-sm); } .family-pending-leave p { margin: 0; font-size: 13px; color: var(--text-hi); } /* ============================================================ SUGGESTIONS (Profile community feedback) ============================================================ */ .suggestions-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); } .suggestions-card .muted-lead { margin: 0; font-size: 13px; } #suggestion-form { display: flex; flex-direction: column; gap: 8px; } #suggestion-form input, #suggestion-form textarea { width: 100%; padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-hi); font-family: inherit; font-size: 13px; resize: vertical; } #suggestion-form input:focus, #suggestion-form textarea:focus { outline: none; border-color: var(--accent); } .suggestion-form-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .suggestion-form-hint { font-size: 11px; color: var(--text-mut); font-style: italic; } .suggestion-filters { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } .suggestion-filter { background: transparent; border: 1px solid transparent; color: var(--text-low); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: color 120ms, background 120ms, border-color 120ms; } .suggestion-filter:hover { color: var(--text-hi); } .suggestion-filter.active { background: var(--accent-bg); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .suggestion-list { display: flex; flex-direction: column; gap: var(--s-2); } .suggestion-item { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-3); padding: var(--s-3); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); align-items: start; } .suggestion-status-shipped { opacity: 0.72; border-left: 3px solid #94d49a; } .suggestion-status-planned { border-left: 3px solid var(--accent); } .suggestion-status-declined { opacity: 0.55; border-left: 3px solid var(--text-mut); } .suggestion-status-new { border-left: 3px solid transparent; } .suggestion-vote { display: flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-low); padding: 6px 4px; cursor: pointer; font-family: inherit; transition: all 120ms; min-width: 44px; } .suggestion-vote:hover { border-color: var(--accent); color: var(--accent); } .suggestion-vote.voted { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } .suggestion-vote-arrow { font-size: 14px; line-height: 1; } .suggestion-vote-count { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .suggestion-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .suggestion-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; } .suggestion-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-hi); font-family: inherit; } .suggestion-status-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 999px; font-weight: 700; background: var(--surface-2); color: var(--text-low); border: 1px solid var(--line); } .suggestion-status-badge.suggestion-status-planned { background: var(--accent-bg); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .suggestion-status-badge.suggestion-status-shipped { background: color-mix(in srgb, #94d49a 18%, transparent); color: #94d49a; border-color: color-mix(in srgb, #94d49a 35%, transparent); } .suggestion-status-badge.suggestion-status-declined { background: color-mix(in srgb, var(--err, #d67a6a) 16%, transparent); color: var(--err, #d67a6a); border-color: color-mix(in srgb, var(--err, #d67a6a) 30%, transparent); } .suggestion-text { margin: 0; font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; } .suggestion-dev-reply { padding: 8px 10px; background: var(--accent-bg); border-left: 2px solid var(--accent); border-radius: 4px; font-size: 12px; color: var(--text-hi); line-height: 1.5; } .suggestion-dev-reply strong { color: var(--accent); margin-right: 4px; } .suggestion-meta { margin: 0; font-size: 11px; color: var(--text-mut); } .suggestion-dev-controls { display: flex; gap: 6px; align-items: center; padding-top: 8px; border-top: 1px dashed var(--line); flex-wrap: wrap; } .suggestion-status-select { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); padding: 4px 8px; font-size: 12px; font-family: inherit; } .suggestion-reply-input { flex: 1; min-width: 120px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); padding: 4px 8px; font-size: 12px; font-family: inherit; } .suggestion-reply-input:focus, .suggestion-status-select:focus { outline: none; border-color: var(--accent); } @media (max-width: 560px) { .suggestion-item { grid-template-columns: 44px 1fr; } } /* ============================================================ CHANGELOG / WHAT'S NEW ============================================================ */ .modal-changelog-card { max-width: 640px; width: calc(100vw - 32px); } .changelog-summary-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-top: var(--s-3); flex-wrap: wrap; } .changelog-summary-title { margin: 0 0 4px; font-weight: 600; color: var(--text-hi); } .changelog-summary-card .muted-lead { margin: 0; font-size: 13px; } .changelog-version { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 600; padding: 2px 8px; background: var(--accent-bg); border-radius: 4px; font-size: 12px; margin-left: 4px; } .changelog-list { display: flex; flex-direction: column; gap: var(--s-4); max-height: 60vh; overflow-y: auto; padding-right: 4px; } .changelog-entry { border-left: 2px solid var(--accent); padding-left: var(--s-3); } .changelog-entry-head { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: 6px; flex-wrap: wrap; } .changelog-entry-version { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: var(--accent); padding: 2px 8px; background: var(--accent-bg); border-radius: 4px; } .changelog-entry-title { font-weight: 600; color: var(--text-hi); font-size: 14px; } .changelog-entry-date { font-size: 11px; color: var(--text-low); font-family: 'JetBrains Mono', monospace; margin-left: auto; } .changelog-entry-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; } .changelog-entry-list li { font-size: 13px; line-height: 1.55; color: var(--text); } .changelog-tag { display: inline-block; padding: 1px 6px; margin-right: 4px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 4px; vertical-align: middle; } .changelog-tag-new { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); } .changelog-tag-fix { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); } .changelog-tag-better { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); } .changelog-tag-pro { background: var(--accent-bg); color: var(--accent); } .changelog-tag-beta { background: color-mix(in srgb, var(--text-mut) 22%, transparent); color: var(--text-low); } /* ============================================================ THEME PICKER (Profile → Appearance) ============================================================ */ .theme-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); } .theme-card .muted-lead { margin: 0; font-size: 13px; } .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-2); } .theme-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--s-3); background: var(--bg-0); border: 1.5px solid var(--line); border-radius: var(--r-sm, 8px); cursor: pointer; transition: border-color 120ms ease, transform 120ms ease; font-family: inherit; } .theme-tile:hover { border-color: var(--line-strong); transform: translateY(-1px); } .theme-tile-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .theme-swatch { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line-strong); } .theme-swatch-dot { width: 22px; height: 22px; border-radius: 50%; } .theme-label { font-size: 12px; color: var(--text); font-weight: 600; } .theme-tile-active .theme-label { color: var(--accent); } .devices-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); } .devices-card .muted-lead { margin: 0; font-size: 13px; line-height: 1.55; } .devices-list { display: flex; flex-direction: column; gap: 6px; } .device-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: var(--s-3); padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); } .device-row-current { border-color: rgba(212, 169, 92, 0.4); background: rgba(212, 169, 92, 0.04); } .device-icon { font-size: 22px; line-height: 1; text-align: center; } .device-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .device-name { color: var(--text-hi); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .device-badge { display: inline-block; padding: 2px 6px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: rgba(212, 169, 92, 0.15); border: 1px solid rgba(212, 169, 92, 0.3); border-radius: 4px; } .device-meta { color: var(--text-low); font-size: 12px; font-family: 'JetBrains Mono', monospace; } .device-country { text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em; } .device-row .btn-small { padding: 6px 12px; font-size: 12px; white-space: nowrap; } .devices-actions { display: flex; justify-content: flex-end; gap: var(--s-2); } @media (max-width: 560px) { .device-row { grid-template-columns: 32px 1fr; grid-template-rows: auto auto; } .device-row .btn-small { grid-column: 1 / span 2; justify-self: stretch; margin-top: 4px; } } /* Dev-only mint section */ .promo-mint-stats { font-size: 12px; color: var(--text-low); font-family: 'JetBrains Mono', monospace; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .promo-stat-num { color: var(--text-hi); font-weight: 700; } .promo-stat-avail { color: var(--accent); } .promo-stat-redeemed { color: var(--text-low); } .promo-mint-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; } .promo-row { display: grid; grid-template-columns: minmax(160px, auto) 1fr auto auto; align-items: center; gap: var(--s-2); padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); } .promo-row-redeemed { opacity: 0.55; } .promo-row-code { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; user-select: all; } .promo-row-redeemed .promo-row-code { color: var(--text-low); text-decoration: line-through; } .promo-row-label { font-size: 12px; color: var(--text-low); font-style: italic; } .promo-row-status { font-size: 11px; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.06em; } .promo-row-status-avail { color: var(--accent); font-weight: 600; } .promo-row-copy { padding: 4px 10px; font-size: 11px; } .promo-row-copy:disabled { opacity: 0.4; cursor: not-allowed; } @media (max-width: 560px) { .promo-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; } .promo-row-code { grid-column: 1 / span 2; } .promo-row-label { grid-column: 1; } .promo-row-status { grid-column: 2; text-align: right; } .promo-row-copy { grid-column: 1 / span 2; justify-self: stretch; } } .profile-danger-card { background: rgba(214, 122, 106, 0.06); border: 1px solid rgba(214, 122, 106, 0.35); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; flex-wrap: wrap; } .profile-danger-text { flex: 1; min-width: 260px; } .profile-danger-title { margin: 0 0 4px; font-weight: 700; color: #d67a6a; font-size: 14px; } .profile-danger-desc { margin: 0; font-size: 13px; color: var(--text-mut); line-height: 1.55; } .profile-legal { margin: var(--s-5) 0 var(--s-3); text-align: center; font-size: 12px; color: var(--text-mut); } .profile-legal a { color: var(--text-mut); text-decoration: none; margin: 0 6px; } .profile-legal a:hover { color: var(--accent); text-decoration: underline; } .profile-password-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); } .profile-password-card .muted-lead { margin: 0; font-size: 13px; } .profile-password-form { display: flex; gap: var(--s-3); flex-wrap: wrap; } .profile-password-form input { flex: 1; min-width: 200px; background: var(--bg-1); border: 1px solid var(--line); color: var(--text-hi); font-size: 14px; padding: 10px 14px; border-radius: var(--r-md); outline: none; } .profile-password-form input:focus { border-color: var(--accent); } .profile-password-msg-ok { background: var(--ok-bg) !important; border-color: rgba(125, 190, 143, 0.35) !important; color: #b6e2c0 !important; } .heatmap-caption { margin: 4px 0 12px; font-size: 12px; } .heatmap { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(7, 14px); grid-auto-flow: column; gap: 3px; max-width: 360px; margin: 0 0 var(--s-3); } .heatmap-cell { border-radius: 3px; width: 100%; height: 100%; } /* Heatmap cells — derived from the theme palette so light themes show visible empty squares (the old rgba(255,255,255,…) values were invisible on cream backgrounds) and accent intensity matches the user's chosen palette. */ .heatmap-l0 { background: var(--surface-2); border: 1px solid var(--line); } .heatmap-l1 { background: color-mix(in srgb, var(--accent) 25%, var(--bg-0)); } .heatmap-l2 { background: color-mix(in srgb, var(--accent) 50%, var(--bg-0)); } .heatmap-l3 { background: color-mix(in srgb, var(--accent) 78%, var(--bg-0)); } .heatmap-l4 { background: var(--accent); } .heatmap-lf { background: transparent; border: none; } .progress-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; gap: var(--s-6); flex-wrap: wrap; margin: var(--s-4) 0; } .progress-summary-item { display: flex; flex-direction: column; gap: 2px; } .progress-summary-item strong { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; color: var(--text-hi); } .progress-summary-item span { font-size: 11px; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; } .progress-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .progress-row-item { display: grid; grid-template-columns: 4px 1fr 1.5fr auto; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); cursor: pointer; transition: background 120ms ease; } .progress-row-item:hover { background: var(--surface); } .progress-row-stripe { width: 4px; height: 24px; background: var(--accent); border-radius: 2px; } .progress-row-name { font-weight: 500; color: var(--text); } .progress-row-bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .progress-row-fill { height: 100%; background: var(--accent); } .progress-row-pct { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-low); font-weight: 500; min-width: 44px; text-align: right; } /* Per-topic mastery rows on Stats — same shape as deck rows but a two-line text column (topic name + decks/cards meta) and a tier color on the fill bar so the eye latches onto weak topics first. */ .topic-mastery-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-bottom: var(--s-4); } .topic-row { display: grid; grid-template-columns: 1fr 1.5fr auto; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); } .topic-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .topic-row-name { color: var(--text-hi); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topic-row-meta { font-size: 11px; color: var(--text-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topic-row-fill { transition: width 400ms ease; } .topic-row-weak .topic-row-fill { background: var(--err, #d67a6a); } .topic-row-mid .topic-row-fill { background: var(--accent); } .topic-row-strong .topic-row-fill { background: #94d49a; } @media (max-width: 560px) { .topic-row { grid-template-columns: 1fr auto; } .topic-row .progress-row-bar { grid-column: 1 / -1; } font-variant-numeric: tabular-nums; } /* ============================================================ XP / LEVEL / LEADERBOARD ============================================================ */ .level-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin: var(--s-4) 0 var(--s-5); } .level-card-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); } .level-eyebrow { margin: 0 0 2px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .level-value { margin: 0; font-family: 'Fraunces', serif; font-size: 36px; font-weight: 500; color: var(--text-hi); line-height: 1; letter-spacing: -0.02em; } .level-xp { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--text-low); font-variant-numeric: tabular-nums; } .level-xp-sep { color: var(--text-mut); margin: 0 2px; } .level-bar { height: 8px; background: var(--bg-1); border-radius: 999px; overflow: hidden; } .level-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); transition: width 400ms ease; } .level-stats { display: flex; gap: var(--s-5); margin-top: var(--s-3); flex-wrap: wrap; } .level-stat { display: flex; align-items: center; gap: 10px; color: var(--text-low); font-size: 13px; } .level-stat-icon { font-size: 18px; width: 28px; text-align: center; } .level-stat > div { display: flex; flex-direction: column; line-height: 1.1; } .level-stat span:first-child + span, .level-stat > div > span:first-child { color: var(--text-hi); font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; } .level-stat-label { font-size: 10px; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-top: 2px; } /* Leaderboard scope toggle (Everyone / My team) — shown above the leaderboard rows when the user is in a team. */ .leaderboard-tabs { display: flex; gap: 4px; background: color-mix(in srgb, var(--text) 3%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin: var(--s-2) 0 var(--s-3); width: fit-content; } .lb-tab { padding: 7px 16px; background: transparent; border: none; border-radius: 999px; color: var(--text-mut); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 120ms, color 120ms; } .lb-tab:hover { color: var(--text); } .lb-tab.active { background: var(--accent); color: var(--bg-0); } .leaderboard { border-top: 1px solid var(--line); } /* Upsell card shown to free users when they tap the Teams leaderboard tab. Gold-tinted, sits where the leaderboard list would normally go. */ .teams-lb-upsell { padding: var(--s-5); text-align: center; background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--r-md); } .teams-lb-upsell-title { margin: 0 0 6px; font-weight: 700; color: var(--accent); font-size: 14px; } .teams-lb-upsell .muted-lead { margin: 0; } /* Search bar used above the collapsible Stats lists (Mastery by topic + Confidence by deck). Slim, theme-aware. */ .list-search-bar { display: flex; align-items: center; gap: 8px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; margin: var(--s-2) 0 var(--s-3); transition: border-color 120ms ease; } .list-search-bar:focus-within { border-color: var(--accent); } .list-search-icon { color: var(--text-low); flex-shrink: 0; } .list-search-bar input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 13px; padding: 2px 0; } .list-search-bar input::placeholder { color: var(--text-mut); } .list-toggle-wrap { display: flex; justify-content: center; margin: var(--s-3) 0 var(--s-2); } /* Podium — top 3 leaderboard entries displayed Olympic-style. 1st in the centre on the tallest pedestal, 2nd left, 3rd right. Mobile reflows them to a single column so the visual still works on phones. */ .leaderboard-podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); min-height: 220px; } .podium-card { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; } .podium-top { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; padding: var(--s-3) 8px var(--s-2); width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; } .podium-medal { font-size: 32px; line-height: 1; margin-bottom: 4px; } .podium-name { font-family: 'Fraunces', serif; font-size: 14px; font-weight: 600; color: var(--text-hi); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.005em; } .podium-meta { font-size: 11px; color: var(--text-low); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; } .podium-xp { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--text-hi); font-variant-numeric: tabular-nums; margin-top: 2px; } .podium-you-badge { position: absolute; top: 6px; right: 6px; background: var(--accent); color: var(--bg-0); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px; } .podium-pedestal { width: 100%; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); border: 1px solid var(--accent); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); display: flex; align-items: center; justify-content: center; } .podium-pedestal-num { font-family: 'Fraunces', serif; font-weight: 700; font-size: 28px; color: var(--accent); line-height: 1; } /* Per-place height (taller = better rank) + slight desaturation on silver/bronze pedestals so gold stands out as the visual hero. */ .podium-place-1 .podium-pedestal { height: 90px; background: color-mix(in srgb, var(--accent) 28%, var(--surface)); } .podium-place-2 .podium-pedestal { height: 60px; background: color-mix(in srgb, var(--text-low) 18%, var(--surface)); border-color: var(--text-low); } .podium-place-2 .podium-pedestal-num { color: var(--text-low); } .podium-place-3 .podium-pedestal { height: 38px; background: color-mix(in srgb, #b87333 22%, var(--surface)); border-color: #b87333; } .podium-place-3 .podium-pedestal-num { color: #b87333; font-size: 22px; } .podium-place-1 .podium-medal { font-size: 40px; } /* "You" highlight — gold ring around the top card. */ .podium-me .podium-top { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } /* Expand / collapse button under the podium */ .leaderboard-toggle-wrap { display: flex; justify-content: center; margin: var(--s-3) 0 var(--s-2); } .leaderboard-toggle { background: transparent; border: 1px solid var(--line); color: var(--text-low); padding: 8px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color 120ms ease, border-color 120ms ease, background 120ms ease; font-family: inherit; } .leaderboard-toggle:hover { color: var(--text-hi); border-color: var(--accent); background: var(--accent-bg); } .leaderboard-toggle-chevron { font-size: 14px; color: var(--accent); transition: transform 120ms ease; } .leaderboard-toggle[aria-expanded="true"] .leaderboard-toggle-chevron { transform: scaleY(-1); } .leaderboard-rest { display: flex; flex-direction: column; margin-top: var(--s-2); } /* Caller's own row shown above the rest list when they're outside top 3 */ .leaderboard-you-wrap { margin: var(--s-2) 0; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* Phone: stack the podium vertically with gold (1st) at the top */ @media (max-width: 560px) { .leaderboard-podium { grid-template-columns: 1fr; min-height: 0; } .podium-pedestal { height: 32px !important; } .podium-place-1 { order: 0; } .podium-place-2 { order: 1; } .podium-place-3 { order: 2; } } .leaderboard-row { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); font-size: 14px; } .leaderboard-row.me { background: var(--accent-bg); border-left: 3px solid var(--accent); padding-left: 12px; } .leaderboard-rank { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--text-mut); text-align: right; font-variant-numeric: tabular-nums; } .leaderboard-row.me .leaderboard-rank { color: var(--accent); font-weight: 600; } .leaderboard-row.top-1 .leaderboard-rank { color: var(--accent); font-weight: 700; } .leaderboard-name { font-family: 'Fraunces', serif; font-size: 16px; color: var(--text-hi); font-weight: 500; letter-spacing: -0.005em; } .leaderboard-row.me .leaderboard-name::after { content: ' (you)'; font-family: 'Inter', sans-serif; font-size: 11px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-left: 4px; } .leaderboard-streak { color: var(--text-low); font-size: 12px; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; } .leaderboard-xp { color: var(--text-hi); font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; } .leaderboard-row.me .leaderboard-xp { color: var(--accent); } .leaderboard-hidden-badge { display: inline-block; margin-left: 8px; padding: 2px 6px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-low); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; vertical-align: middle; } /* Random handle preview shown inside the Profile leaderboard toggle. */ #profile-lb-handle { display: inline-block; padding: 1px 6px; background: var(--surface); border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent); } /* XP toast — slides in bottom-right when an answer earns XP */ /* Auto-update notification — surfaces when the SW finds a new deploy. Sits bottom-centre on mobile, bottom-right on desktop so it doesn't block the side-nav icons. Clickable, dismissible. */ .update-toast { position: fixed; bottom: var(--s-5); left: 50%; transform: translateX(-50%); z-index: 210; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-md); padding: 10px 14px; display: flex; align-items: center; gap: var(--s-2); color: var(--text-hi); font-size: 13px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); animation: updateToastIn 280ms cubic-bezier(.2,.9,.3,1.2); max-width: calc(100vw - 32px); } .update-toast-msg { font-weight: 500; } .update-toast .btn-small { padding: 6px 12px; font-size: 12px; white-space: nowrap; } .update-toast-close { background: transparent; border: none; color: var(--text-low); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; } .update-toast-close:hover { color: var(--text-hi); } @keyframes updateToastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } /* On desktop, anchor bottom-right so it doesn't fight with the pomodoro widget or other bottom-centre UI. */ @media (min-width: 720px) { .update-toast { left: auto; right: var(--s-5); bottom: var(--s-5); transform: none; max-width: 420px; } @keyframes updateToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } } .xp-toast { position: fixed; bottom: var(--s-5); right: var(--s-5); z-index: 200; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-md); padding: 10px 14px; display: flex; align-items: center; gap: 10px; color: var(--text-hi); font-size: 14px; font-weight: 500; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); animation: xpToastIn 220ms cubic-bezier(.2,.9,.3,1.2); pointer-events: none; } .xp-toast.fade { animation: xpToastOut 280ms ease both; } .xp-toast-amount { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 700; font-size: 15px; } .xp-toast-streak { font-size: 12px; color: var(--text-low); font-family: 'JetBrains Mono', monospace; } .xp-toast.level-up { border-color: var(--accent-hi); background: var(--accent-bg); } .xp-toast.level-up::before { content: '★'; color: var(--accent); font-size: 18px; } @keyframes xpToastIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes xpToastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } } /* ============================================================ STREAK PILL (top nav) ============================================================ */ .streak-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--accent-bg); border: 1px solid rgba(212, 169, 92, 0.30); border-radius: 999px; color: var(--accent); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .streak-flame { font-size: 14px; } /* ============================================================ MOCK EXAM HISTORY (Pro) — Stats page ============================================================ */ .mock-exam-history-chart { margin: var(--s-3) 0 var(--s-4); padding: var(--s-3) var(--s-3) 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .mock-exam-svg { width: 100%; height: 220px; display: block; } .mock-exam-history-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .meh-row { display: grid; grid-template-columns: 110px 1fr auto auto; gap: var(--s-4); padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); align-items: center; } .meh-when { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--text-mut); } .meh-date { color: var(--text-low); font-weight: 600; } .meh-time { color: var(--text-mut); font-size: 11px; } .meh-deck { color: var(--text-hi); font-weight: 500; font-size: 14px; } .meh-score { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; color: var(--text-hi); display: flex; align-items: baseline; gap: 6px; } .meh-frac { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; color: var(--text-mut); } .meh-duration { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-mut); } .meh-row-high .meh-score { color: #94d49a; } .meh-row-mid .meh-score { color: var(--accent); } .meh-row-low .meh-score { color: #d67a6a; } @media (max-width: 560px) { .meh-row { grid-template-columns: 1fr auto; gap: var(--s-2); } .meh-when { grid-row: 1; } .meh-deck { grid-row: 2; grid-column: 1 / -1; font-size: 13px; } .meh-score { grid-row: 1; grid-column: 2; } .meh-duration { grid-row: 2; grid-column: 2; justify-self: end; } } /* ============================================================ SMART STUDY PLANNER (Pro) Inline card on the node view + banner on Home. ============================================================ */ /* Empty state when no exam date set yet — invites user to set one. */ .exam-plan-card { margin: var(--s-3) 0 var(--s-5); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--s-3); } .exam-plan-card.exam-plan-empty { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; } .exam-plan-empty-text { flex: 1; min-width: 220px; } .exam-plan-empty-title { margin: 0 0 4px; font-weight: 600; color: var(--text-hi); font-size: 15px; } .exam-plan-empty-desc { margin: 0; color: var(--text-mut); font-size: 13px; line-height: 1.55; } /* Active plan: 3 stat blocks + status pill in a responsive row. */ .exam-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: var(--s-4); align-items: center; } .exam-plan-stat { display: flex; flex-direction: column; gap: 2px; } .exam-plan-stat-value { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700; color: var(--text-hi); line-height: 1; } .exam-plan-stat-label { font-size: 11px; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; } .exam-plan-statuspill { padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); white-space: nowrap; } .exam-plan-card.exam-plan-status-on-track .exam-plan-statuspill { background: rgba(148, 212, 154, 0.14); color: #94d49a; border-color: rgba(148, 212, 154, 0.45); } .exam-plan-card.exam-plan-status-done .exam-plan-statuspill { background: rgba(148, 212, 154, 0.14); color: #94d49a; border-color: rgba(148, 212, 154, 0.45); } .exam-plan-card.exam-plan-status-tight .exam-plan-statuspill { background: rgba(212, 169, 92, 0.14); color: var(--accent); border-color: rgba(212, 169, 92, 0.45); } .exam-plan-card.exam-plan-status-overdue .exam-plan-statuspill, .exam-plan-card.exam-plan-status-today .exam-plan-statuspill { background: rgba(214, 122, 106, 0.14); color: #d67a6a; border-color: rgba(214, 122, 106, 0.45); } .exam-plan-card.exam-plan-status-past .exam-plan-statuspill { background: rgba(255,255,255,0.05); color: var(--text-mut); border-color: var(--line); } /* Left-edge accent stripe tinted by status, for at-a-glance reading. */ .exam-plan-card:not(.exam-plan-empty) { border-left-width: 4px; } .exam-plan-card.exam-plan-status-on-track, .exam-plan-card.exam-plan-status-done { border-left-color: #94d49a; } .exam-plan-card.exam-plan-status-tight { border-left-color: var(--accent); } .exam-plan-card.exam-plan-status-overdue, .exam-plan-card.exam-plan-status-today { border-left-color: #d67a6a; } .exam-plan-card.exam-plan-status-past { border-left-color: var(--line-strong); } .exam-plan-footer { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: 12px; color: var(--text-mut); } .exam-plan-date { margin-right: auto; } .exam-plan-progress { color: var(--text-low); } .exam-plan-link { background: none; border: none; color: var(--accent); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; padding: 4px 8px; } .exam-plan-link:hover { text-decoration: underline; } .exam-plan-link-danger { color: #d67a6a; } @media (max-width: 560px) { .exam-plan-grid { grid-template-columns: 1fr 1fr; } .exam-plan-statuspill { grid-column: 1 / -1; text-align: center; } } /* Home-screen exam banner (most-urgent exam, ≤90 days away). Smaller than the deck-page card; uses the same status colouring. */ .home-exam-banner { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-md); margin: var(--s-3) 0; flex-wrap: wrap; } .home-exam-text { flex: 1; min-width: 200px; } .home-exam-eyebrow { margin: 0 0 2px; font-size: 11px; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .home-exam-title { margin: 0 0 2px; font-weight: 600; color: var(--text-hi); font-size: 15px; } .home-exam-desc { margin: 0; font-size: 13px; color: var(--text-mut); } .home-exam-banner-on-track { border-left-color: #94d49a; } .home-exam-banner-tight { border-left-color: var(--accent); } .home-exam-banner-overdue, .home-exam-banner-today { border-left-color: #d67a6a; } .home-exam-banner-done { border-left-color: #94d49a; } /* ============================================================ DUE CARD on Home ============================================================ */ .due-card { background: var(--accent-bg); border: 1px solid rgba(212, 169, 92, 0.40); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin: var(--s-3) 0 var(--s-3); } .due-text { display: flex; flex-direction: column; gap: 2px; } .due-label { margin: 0; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .due-count { margin: 0; font-family: 'Fraunces', serif; font-size: 20px; color: var(--text-hi); } .due-count span { font-weight: 600; } /* ============================================================ MODE-PICKER SESSION PILLS ============================================================ */ .session-options { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-5) 0; padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .session-option-group { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; } .session-option-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--text-mut); min-width: 50px; } .session-pills { display: flex; gap: 6px; flex-wrap: wrap; } .session-pill { background: transparent; border: 1px solid var(--line); color: var(--text-low); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 120ms ease; } .session-pill:hover { color: var(--text-hi); border-color: var(--line-strong); } .session-pill.active { background: var(--accent); border-color: var(--accent); color: var(--bg-0); font-weight: 600; } .session-pill-badge { background: rgba(0, 0, 0, 0.18); color: inherit; font-size: 11px; padding: 1px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; font-weight: 700; } .session-pill:not(.active) .session-pill-badge { background: var(--bg-1); color: var(--text-low); } /* ============================================================ SEARCH MODAL ============================================================ */ .modal-search-card { max-width: 600px; padding: 0; overflow: hidden; } .search-input-wrap { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); color: var(--text-low); } #search-input { flex: 1; background: transparent; border: none; color: var(--text-hi); font-size: 16px; padding: 6px 0; outline: none; } #search-input::placeholder { color: var(--text-mut); } .search-esc { font-family: 'JetBrains Mono', monospace; font-size: 10px; background: var(--bg-1); color: var(--text-low); padding: 2px 6px; border-radius: 4px; letter-spacing: 0.04em; } .search-results { max-height: 60vh; overflow-y: auto; padding: var(--s-2) 0; } .search-empty { padding: var(--s-5) var(--s-4); text-align: center; margin: 0; } .search-result { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); cursor: pointer; border-left: 3px solid transparent; transition: background 120ms ease, border-color 120ms ease; } .search-result:hover { background: var(--surface-2); border-left-color: var(--accent); } .search-result-q { font-weight: 500; color: var(--text-hi); font-size: 14px; } .search-result-q mark { background: var(--accent-bg); color: var(--accent); padding: 0 2px; border-radius: 3px; } .search-result-a { color: var(--text-low); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-result-deck { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-mut); font-weight: 600; margin-top: 2px; } /* ============================================================ STAR ICON on cards ============================================================ */ .star-btn { background: none; border: none; padding: 6px; cursor: pointer; color: var(--text-mut); border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; transition: color 120ms ease, background 120ms ease, transform 120ms ease; } .star-btn:hover { background: var(--surface-2); color: var(--accent); } .star-btn.starred { color: var(--accent); } .star-btn.starred svg { fill: var(--accent); } .star-btn.just-starred { animation: starPulse 320ms cubic-bezier(.3,1.5,.4,1); } @keyframes starPulse { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } } /* ============================================================ PROFILE TOGGLE ROW (sound) ============================================================ */ .toggle-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; margin-top: var(--s-3); } .toggle-row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .toggle-row-title { font-weight: 600; color: var(--text-hi); font-size: 14px; } .toggle-row-desc { font-size: 12px; color: var(--text-low); } .toggle-input { position: absolute; opacity: 0; pointer-events: none; } /* Voice picker row that appears under the "Read cards aloud" toggle once it's enabled. Inline label + select + preview button. */ .audio-voice-row { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); padding: var(--s-3) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); flex-wrap: wrap; } .audio-voice-row label { font-size: 12px; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .audio-voice-row select { flex: 1; min-width: 220px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); padding: 8px 10px; font-family: inherit; font-size: 13px; } .audio-voice-row select:focus { outline: none; border-color: var(--accent); } .audio-voice-row .btn-small { padding: 7px 12px; font-size: 12px; } .toggle-slider { display: inline-block; width: 44px; height: 24px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 999px; position: relative; flex-shrink: 0; transition: background 160ms ease, border-color 160ms ease; } .toggle-slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--text-low); border-radius: 50%; transition: transform 180ms cubic-bezier(.3,.9,.4,1.2), background 160ms ease; } .toggle-input:checked + .toggle-slider { background: var(--accent); border-color: var(--accent); } .toggle-input:checked + .toggle-slider::after { background: var(--bg-0); transform: translateX(20px); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 720px) { :root { --nav-h: 56px; } .topnav-inner { padding: 0 var(--s-4); gap: var(--s-3); } .topnav-nav .navlink { padding: 8px 10px; font-size: 13px; } .main { padding: var(--s-5) var(--s-4) var(--s-7); } .page-h1 { font-size: 30px; } .card-row { grid-template-columns: 1fr; } .card-row:has(.card-row-thumb) { grid-template-columns: 44px 1fr; } .card-row-actions { justify-content: flex-end; grid-column: 1 / -1; } .focus-view { padding: var(--s-5) var(--s-4) var(--s-7); } .recall-prompt, .test-question { font-size: 22px; padding: var(--s-5) var(--s-4); } .card-text { font-size: 22px; } /* The 12-week heatmap, the comparison-style tables etc — clamp them. */ .heatmap { max-width: 100%; } /* Modals: full-width with a small gap so they don't hug the screen edge. */ .modal-card { max-width: calc(100vw - 24px); } /* Floating widgets shouldn't take up more than half the screen on phone. */ .pomodoro-widget { right: 12px; bottom: 12px; min-width: 0; max-width: calc(100vw - 24px); } .bulk-bar { left: 12px; right: 12px; transform: none; max-width: none; } /* Drop zones (drag-and-drop targets) — touch can't drag, so on phones they're just visual noise. Hide them entirely. */ .root-drop-zone { display: none; } /* The pomodoro preset cards have side-by-side details that can wrap. */ .pomodoro-preset { padding: var(--s-3); } /* Mock-exam header collapses to stacked (title above, timer below right). */ .mock-exam-header { flex-direction: column; align-items: stretch; } .mock-exam-timer { align-self: flex-end; } /* Profile/Stats summary cards can shrink. */ .home-stats, .mock-exam-stats { gap: var(--s-2); } .compare { font-size: 12px; } .compare th, .compare td { padding: 8px 6px; } } /* Phone-width adjustments (≤480px): the topnav has too many items to fit comfortably on a 360-390px screen, so we hide the non-essential icon buttons and shrink everything else. Navigation links keep their text — they're the most important thing in the bar. */ @media (max-width: 480px) { .topnav-inner { padding: 0 12px; gap: 8px; grid-template-columns: auto 1fr auto; } .brand-word { display: none; } /* keep just the Z mark to free space */ .topnav-nav { gap: 2px; justify-content: center; } .topnav-nav .navlink { padding: 6px 9px; font-size: 13px; } .topnav-end { gap: 4px; } .iconbtn { width: 36px; height: 36px; padding: 0; } /* Hide the streak pill on phone — it's also visible on Home + Stats. */ .streak-pill { display: none; } /* Hide the "update app" icon — reachable from Profile → Update app. */ #topnav-update { display: none; } /* Page chrome tightens up. */ .main { padding: var(--s-4) 12px calc(var(--s-7) + env(safe-area-inset-bottom, 0px)); } .page-h1 { font-size: 24px; } .section-h2 { font-size: 17px; } .eyebrow { font-size: 10px; } /* Card list rows: small thumbnails get tinier so text has room. */ .card-row:has(.card-row-thumb) { grid-template-columns: 36px 1fr; } .card-row-thumb { width: 36px; height: 36px; } /* Buttons in horizontal rows shouldn't force overflow. */ .page-actions, .row-actions, .done-buttons, .profile-actions, .judgement-row, .nav-row { flex-wrap: wrap; } /* Mode picker rows: shrink the descriptive text. */ .mode-name { font-size: 16px; } .mode-desc { font-size: 12px; } /* Reduce the giant Fraunces card text further on phone. */ .card-text { font-size: 19px; line-height: 1.35; } .recall-prompt, .test-question { font-size: 19px; padding: var(--s-4); } /* Pomodoro widget mini-mode. */ .pomodoro-widget { padding: 10px 12px; } .pomodoro-widget-time { font-size: 24px; } } /* Stop iOS auto-zooming the page when you focus a text field — any control under 16px triggers it. Only affects phone widths; bigger study inputs keep their own (already ≥16px) size. */ @media (max-width: 768px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; } }