/* StudyPass styles.
Every color lives in the tokens at the top. Change them to re-theme the whole app.
Light is the default. Dark comes from the device setting (unless the student picked
Light) or from . The accent color comes from . */
/* ==========================================================================
Tokens: light theme (default)
========================================================================== */
:root {
/* Neutrals with a slight cool tint, so white cards don't look flat grey. */
--bg: #f3f4f7;
--surface: #ffffff;
--surface-2: #f8f9fb;
--surface-3: #eceef3;
--raised: #ffffff; /* the picked button in a segmented control */
--ink: #151821;
--ink-2: #484e5e;
--ink-3: #626979;
--line: #e3e6ec;
--line-strong: #cfd3dc;
--navy: #1a1e29; /* strong blocks: dark buttons, toasts, "me" chat bubbles */
--on-navy: #f3f5f9;
--hero: #1a1e29; /* the big AI banner and the demo bar */
--on-hero: #f3f5f9;
/* Meaning colors. Text versions pass AA on white and on their soft backgrounds. */
--star: #e9a800;
--good: #11794a;
--good-soft: #e2f4ea;
--on-good: #ffffff;
--bad: #c5283a;
--bad-soft: #fce8ea;
--on-bad: #ffffff;
--learn: #a15200;
--learn-soft: #fdf0dc;
--learn-fill: #ec9a1e; /* bars and dots only, not text */
--info: #1d64b8;
--info-soft: #e5eefa;
--flame: #e8590c;
--flame-soft: #fff0e6;
--switch-off: #8c93a3;
--overlay: rgba(12, 14, 20, .5);
/* Avatar circles: the hue comes from --h on each avatar. */
--av-s: 70%; --av-l: 88%; --av-ink-s: 60%; --av-ink-l: 26%;
/* Accent palettes. Brand text passes AA on every surface, and white text passes AA on the brand. */
--a-coral: #c6380f; --a-coral-hover: #a82d09; --a-coral-soft: #fdece6; --a-coral-on: #ffffff;
--a-ocean: #1a66c2; --a-ocean-hover: #1554a3; --a-ocean-soft: #e6f0fc; --a-ocean-on: #ffffff;
--a-grape: #7442cf; --a-grape-hover: #6034b4; --a-grape-soft: #f0e9fc; --a-grape-on: #ffffff;
--a-forest: #18784b; --a-forest-hover: #12623c; --a-forest-soft: #e2f4ea; --a-forest-on: #ffffff;
--a-sunset: #b04a00; --a-sunset-hover: #903c00; --a-sunset-soft: #fdefdf; --a-sunset-on: #ffffff;
--a-rose: #c52a64; --a-rose-hover: #a71f52; --a-rose-soft: #fdeaf1; --a-rose-on: #ffffff;
/* Coral is the default accent. html[data-accent] swaps these four (see below). */
--brand: var(--a-coral);
--brand-hover: var(--a-coral-hover);
--brand-soft: var(--a-coral-soft);
--on-brand: var(--a-coral-on);
--focus: var(--brand);
--ring: color-mix(in srgb, var(--brand) 26%, transparent);
/* Shape and depth */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 11px;
--r-lg: 16px;
--r-xl: 22px;
--radius: var(--r-lg);
--shadow-sm: 0 1px 2px rgba(17, 20, 30, .06);
--shadow: 0 1px 2px rgba(17, 20, 30, .05), 0 6px 18px -6px rgba(17, 20, 30, .12);
--shadow-lg: 0 2px 6px rgba(17, 20, 30, .06), 0 24px 56px -14px rgba(17, 20, 30, .28);
--header-h: 60px;
--display: 'Bricolage Grotesque', 'Figtree', ui-sans-serif, system-ui, sans-serif;
--body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
color-scheme: light;
}
/* Accent picker */
:root[data-accent="ocean"] { --brand: var(--a-ocean); --brand-hover: var(--a-ocean-hover); --brand-soft: var(--a-ocean-soft); --on-brand: var(--a-ocean-on); }
:root[data-accent="grape"] { --brand: var(--a-grape); --brand-hover: var(--a-grape-hover); --brand-soft: var(--a-grape-soft); --on-brand: var(--a-grape-on); }
:root[data-accent="forest"] { --brand: var(--a-forest); --brand-hover: var(--a-forest-hover); --brand-soft: var(--a-forest-soft); --on-brand: var(--a-forest-on); }
:root[data-accent="sunset"] { --brand: var(--a-sunset); --brand-hover: var(--a-sunset-hover); --brand-soft: var(--a-sunset-soft); --on-brand: var(--a-sunset-on); }
:root[data-accent="rose"] { --brand: var(--a-rose); --brand-hover: var(--a-rose-hover); --brand-soft: var(--a-rose-soft); --on-brand: var(--a-rose-on); }
/* ==========================================================================
Tokens: dark theme. The same list twice: once for "follow my device",
once for "always dark". Keep the two blocks the same.
========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0d0f14; --surface: #15181f; --surface-2: #1b1f27; --surface-3: #252a34; --raised: #353b48;
--ink: #eceef3; --ink-2: #afb5c3; --ink-3: #8c93a4; --line: #262b35; --line-strong: #373d4a;
--navy: #e6e9ef; --on-navy: #12151b; --hero: #1b1f29; --on-hero: #eceef3;
--star: #ffc53d;
--good: #4bd08f; --good-soft: #10301f; --on-good: #04160c;
--bad: #ff7c86; --bad-soft: #3b1a1f; --on-bad: #22060a;
--learn: #ffb44f; --learn-soft: #372812; --learn-fill: #ffb44f;
--info: #74b4ff; --info-soft: #152840;
--flame: #ff8a3d; --flame-soft: #3a2214;
--switch-off: #5d6577; --overlay: rgba(0, 0, 0, .62);
--av-s: 35%; --av-l: 27%; --av-ink-s: 85%; --av-ink-l: 86%;
--a-coral: #ff8260; --a-coral-hover: #ff9c80; --a-coral-soft: #3a1e17; --a-coral-on: #1c0b06;
--a-ocean: #62aefc; --a-ocean-hover: #86c1ff; --a-ocean-soft: #15283f; --a-ocean-on: #04121f;
--a-grape: #b39aff; --a-grape-hover: #c6b3ff; --a-grape-soft: #2a2143; --a-grape-on: #130b26;
--a-forest: #4fcf8f; --a-forest-hover: #74dca7; --a-forest-soft: #12301f; --a-forest-on: #03170c;
--a-sunset: #ffa94d; --a-sunset-hover: #ffbd75; --a-sunset-soft: #3a2812; --a-sunset-on: #1c0f02;
--a-rose: #ff7eaa; --a-rose-hover: #ff9dbf; --a-rose-soft: #3c1826; --a-rose-on: #210611;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px -8px rgba(0, 0, 0, .55);
--shadow-lg: 0 2px 8px rgba(0, 0, 0, .35), 0 28px 60px -12px rgba(0, 0, 0, .7);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #0d0f14; --surface: #15181f; --surface-2: #1b1f27; --surface-3: #252a34; --raised: #353b48;
--ink: #eceef3; --ink-2: #afb5c3; --ink-3: #8c93a4; --line: #262b35; --line-strong: #373d4a;
--navy: #e6e9ef; --on-navy: #12151b; --hero: #1b1f29; --on-hero: #eceef3;
--star: #ffc53d;
--good: #4bd08f; --good-soft: #10301f; --on-good: #04160c;
--bad: #ff7c86; --bad-soft: #3b1a1f; --on-bad: #22060a;
--learn: #ffb44f; --learn-soft: #372812; --learn-fill: #ffb44f;
--info: #74b4ff; --info-soft: #152840;
--flame: #ff8a3d; --flame-soft: #3a2214;
--switch-off: #5d6577; --overlay: rgba(0, 0, 0, .62);
--av-s: 35%; --av-l: 27%; --av-ink-s: 85%; --av-ink-l: 86%;
--a-coral: #ff8260; --a-coral-hover: #ff9c80; --a-coral-soft: #3a1e17; --a-coral-on: #1c0b06;
--a-ocean: #62aefc; --a-ocean-hover: #86c1ff; --a-ocean-soft: #15283f; --a-ocean-on: #04121f;
--a-grape: #b39aff; --a-grape-hover: #c6b3ff; --a-grape-soft: #2a2143; --a-grape-on: #130b26;
--a-forest: #4fcf8f; --a-forest-hover: #74dca7; --a-forest-soft: #12301f; --a-forest-on: #03170c;
--a-sunset: #ffa94d; --a-sunset-hover: #ffbd75; --a-sunset-soft: #3a2812; --a-sunset-on: #1c0f02;
--a-rose: #ff7eaa; --a-rose-hover: #ff9dbf; --a-rose-soft: #3c1826; --a-rose-on: #210611;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px -8px rgba(0, 0, 0, .55);
--shadow-lg: 0 2px 8px rgba(0, 0, 0, .35), 0 28px 60px -12px rgba(0, 0, 0, .7);
color-scheme: dark;
}
/* Text size setting: everything sized in rem grows or shrinks with it. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
html[data-size="small"] { font-size: 93.75%; }
html[data-size="large"] { font-size: 112.5%; }
/* Keyboard hints turned off in Settings */
html.hide-keys .keys { display: none !important; }
/* ==========================================================================
Base
========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
background: var(--bg);
color: var(--ink);
font: 400 1rem/1.5 var(--body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
/* Safety net: one very long word should never make the whole page scroll sideways. */
@supports (overflow: clip) { body { overflow-x: clip; } }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }
svg { flex-shrink: 0; }
::selection { background: color-mix(in srgb, var(--brand) 28%, transparent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#app:focus, #app:focus-visible { outline: none; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -.015em; }
h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: 1.3rem; font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0; }
b, strong { font-weight: 700; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
/* Plain text links (no class) and small links in headings use the accent. */
a:not([class]), a.small, a.link {
color: var(--brand); font-weight: 600;
text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
a:not([class]):hover, a.small:hover, a.link:hover { text-decoration-color: currentColor; }
/* "Skip to content" shows up only when you Tab to it. */
.skip-link:focus {
position: fixed; top: 10px; left: 10px; z-index: 100; width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
padding: 10px 16px; background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none;
border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
/* ==========================================================================
Top bar
========================================================================== */
.topbar {
position: sticky; top: 0; z-index: 30;
background: color-mix(in srgb, var(--surface) 82%, transparent);
-webkit-backdrop-filter: saturate(1.6) blur(14px);
backdrop-filter: saturate(1.6) blur(14px);
border-bottom: 1px solid var(--line);
padding-top: env(safe-area-inset-top, 0px);
}
body.auth-mode .topbar { display: none; }
.topbar-in { max-width: 1120px; height: var(--header-h); margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; border-radius: var(--r-sm); }
.logo-word { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
.logo-mark { width: 32px; height: 32px; flex-shrink: 0; transform: rotate(-8deg); transition: transform .3s cubic-bezier(.3, .7, .3, 1.4); }
.logo-mark .lm-body { fill: var(--brand); }
.logo-mark .lm-check { fill: none; stroke: var(--on-brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.logo:hover .logo-mark { transform: rotate(4deg) translateY(-1px); }
.search {
position: relative; flex: 1; min-width: 0; max-width: 440px; height: 40px;
display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px;
background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.search:hover { border-color: var(--line-strong); }
.search svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 2.2; stroke-linecap: round; }
.search input { border: 0; background: none; outline: none; padding: 0; height: 100%; width: 100%; min-width: 0; }
.search input::placeholder { color: var(--ink-3); opacity: 1; }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.search:focus-within { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--ring); }
/* The "/" hint: press slash to jump to search. */
.search::after {
content: '/'; flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px;
border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px;
font: 600 .72rem/1 var(--body); color: var(--ink-3); background: var(--surface);
}
.search:focus-within::after, html.hide-keys .search::after { display: none; }
.top-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link {
display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px;
border-radius: 999px; color: var(--ink-2); font-weight: 700; text-decoration: none; white-space: nowrap;
transition: background .15s, color .15s;
}
.nav-link::before {
content: ''; width: 18px; height: 18px; flex-shrink: 0; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav-link:hover { background: var(--surface-3); color: var(--ink); }
.nav-link.on, .nav-link[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.create-menu { position: relative; flex-shrink: 0; }
#create-btn span { font-size: 1.2em; line-height: 1; margin-top: -2px; }
.user-wrap { position: relative; flex-shrink: 0; }
.user-btn {
display: inline-flex; align-items: center; gap: 8px; height: 40px; max-width: 210px; padding: 3px 14px 3px 3px;
background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.user-btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.user-btn[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.user-btn .avatar { width: 32px; height: 32px; font-size: .85rem; }
.user-btn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Drop-down menus (Create, the user menu, admin row menus) */
.menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 270px; padding: 6px; display: grid; gap: 1px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
transform-origin: top right; animation: menuIn .14s ease-out;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu-item {
display: grid; gap: 1px; padding: 9px 12px; border-radius: var(--r-md); text-decoration: none; text-align: left;
border: 0; background: none; cursor: pointer; width: 100%; transition: background .12s;
}
.menu-item b { font-weight: 700; }
.menu-item span { font-size: .85rem; color: var(--ink-2); font-weight: 400; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.menu-item:focus-visible { outline-offset: -2px; }
.user-menu { width: 260px; }
.user-menu-head { display: grid; gap: 1px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.user-menu-head b { font-family: var(--display); font-size: 1.05rem; }
.user-menu-head span { font-size: .85rem; color: var(--ink-2); }
/* Announcement from the admins, under the header */
.announce { background: var(--brand-soft); color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); }
.announce-in { max-width: 1120px; margin: 0 auto; padding: 7px 8px 7px 16px; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.announce-in::before {
content: ''; width: 20px; height: 20px; flex-shrink: 0; background: var(--brand);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h3l6 4V5L7 9H4a1 1 0 0 0-1 1Z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h3l6 4V5L7 9H4a1 1 0 0 0-1 1Z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / contain no-repeat;
}
.announce-text { flex: 1; min-width: 0; font-weight: 600; font-size: .925rem; overflow-wrap: anywhere; }
.announce .icon-btn { width: 32px; height: 32px; color: var(--ink-2); }
.announce .icon-btn:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--ink); }
.demo-bar { background: var(--hero); color: var(--on-hero); font-size: .875rem; text-align: center; padding: 8px 16px; }
.demo-bar a { color: inherit; font-weight: 700; }
/* ==========================================================================
Layout
========================================================================== */
.wrap { max-width: 1120px; margin: 0 auto; padding: 32px 16px 88px; display: grid; gap: 30px; outline: none; }
.wrap > * { min-width: 0; }
.narrow { max-width: 780px; margin: 0 auto; width: 100%; }
.stack { display: grid; gap: 12px; }
.stack > * { min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.back-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .95rem; justify-self: start; border-radius: var(--r-sm); min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.back-link svg { flex: none; }
/* Long unbroken words (a 45-letter title) wrap instead of running off a phone screen. */
.row > * { min-width: 0; }
.row > h1, .row > h2 { overflow-wrap: anywhere; }
.back-link:hover { color: var(--ink); }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar .input[type="search"] { flex: 1 1 220px; width: auto; }
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 18px; min-height: 42px; border-radius: 999px; border: 1px solid var(--line-strong);
background: var(--surface); color: var(--ink); font-weight: 700; line-height: 1.25; cursor: pointer; text-decoration: none;
box-shadow: var(--shadow-sm); white-space: nowrap; user-select: none;
transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
.btn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--ink-3) 55%, var(--line-strong)); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled:hover { background: var(--surface); border-color: var(--line-strong); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .12); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-primary:disabled:hover { background: var(--brand); border-color: var(--brand); }
.btn-dark { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.btn-dark:hover { background: color-mix(in srgb, var(--navy) 86%, var(--brand)); border-color: color-mix(in srgb, var(--navy) 86%, var(--brand)); }
.btn-ghost { border-color: transparent; background: none; box-shadow: none; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--ink); }
.btn-ghost:disabled:hover { background: none; border-color: transparent; }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line-strong)); }
.btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.btn-primary.btn-danger { background: var(--bad); border-color: var(--bad); color: var(--on-bad); }
.btn-primary.btn-danger:hover { background: color-mix(in srgb, var(--bad) 86%, #000); border-color: color-mix(in srgb, var(--bad) 86%, #000); }
.btn-sm { padding: 6px 12px; min-height: 32px; font-size: .875rem; gap: 6px; }
.btn-lg { padding: 13px 24px; min-height: 50px; font-size: 1.05rem; }
.icon-btn {
width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 999px; border: 0; background: none;
cursor: pointer; color: var(--ink-2); flex-shrink: 0; transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.on { color: var(--star); }
.icon-btn.on svg { fill: currentColor; }
.spark { color: var(--brand); }
/* ==========================================================================
Form controls
========================================================================== */
.field { display: grid; gap: 6px; }
.field label:not(.check):not(.switch) { font-size: .875rem; font-weight: 700; color: var(--ink); }
.label { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.input, .textarea, .select {
width: 100%; min-height: 42px; padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
background: var(--surface); color: var(--ink); outline: none; box-shadow: inset 0 1px 1px rgba(17, 20, 30, .03);
transition: border-color .15s, box-shadow .15s, background .15s;
}
.input:hover, .textarea:hover, .select:hover { border-color: color-mix(in srgb, var(--ink-3) 55%, var(--line-strong)); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.input:disabled, .textarea:disabled, .select:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--bad); }
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 24%, transparent); }
.input[type="number"] { font-variant-numeric: tabular-nums; }
.textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
/* Selects get our own arrow so they match in every browser. */
.select {
-webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 36px;
background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%;
background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.select.btn-sm { min-height: 32px; padding-right: 30px !important; border-radius: 999px; font-weight: 600; background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; box-shadow: var(--shadow-sm); }
.select option { background: var(--surface); color: var(--ink); }
.title-input { font-family: var(--display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; }
.field-error { color: var(--bad); font-weight: 600; font-size: .875rem; }
.form-error { background: var(--bad-soft); color: var(--bad); font-weight: 600; padding: 10px 14px; border-radius: var(--r-md); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
/* Range slider in the accent color */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 24px; min-width: 0; background: transparent; cursor: pointer; accent-color: var(--brand); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
background: var(--brand); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--brand), 0 1px 3px rgba(0, 0, 0, .25);
transition: transform .12s, box-shadow .15s;
}
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--brand), 0 0 0 5px var(--ring); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-3); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--brand); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--brand); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--brand), 0 0 0 5px var(--ring); }
output { font-variant-numeric: tabular-nums; }
/* On/off switch: */
.switch { position: relative; display: inline-flex; flex-shrink: 0; width: 46px; height: 28px; vertical-align: middle; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--switch-off); transition: background .18s, box-shadow .15s; }
.switch span::after {
content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); transition: transform .2s cubic-bezier(.3, .7, .4, 1.2);
}
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:hover:not(:disabled) + span { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 7%, transparent); }
.switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + span { opacity: .45; }
/* Segmented control. The older .tabs look the same. */
.segmented, .tabs {
display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
background: var(--surface-3); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
}
.segmented::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
.tabs { flex-wrap: wrap; }
.segmented button, .tab {
border: 0; background: none; padding: 7px 15px; border-radius: 999px; font-weight: 700; font-size: .9rem; line-height: 1.25;
color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s;
}
.segmented button:hover, .tab:hover { color: var(--ink); }
.segmented button.on, .tab.on { background: var(--raised); color: var(--ink); box-shadow: 0 1px 3px rgba(17, 20, 30, .12), 0 0 0 1px color-mix(in srgb, var(--line-strong) 60%, transparent); }
.segmented button:focus-visible, .tab:focus-visible { outline-offset: 0; }
.segmented button:disabled { opacity: .5; cursor: not-allowed; }
/* Accent color chips. Each chip shows its own accent, tuned for the current theme. */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px; }
.swatch {
--chip: var(--a-coral);
position: relative; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
background: var(--chip); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
transition: transform .12s, box-shadow .15s;
}
.swatch[data-accent="ocean"] { --chip: var(--a-ocean); }
.swatch[data-accent="grape"] { --chip: var(--a-grape); }
.swatch[data-accent="forest"] { --chip: var(--a-forest); }
.swatch[data-accent="sunset"] { --chip: var(--a-sunset); }
.swatch[data-accent="rose"] { --chip: var(--a-rose); }
.swatch:hover { transform: scale(1.08); }
.swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--chip); }
.swatch.on::after {
content: ''; position: absolute; left: 50%; top: 45%; width: 7px; height: 12px;
border: solid var(--on-brand); border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -50%) rotate(45deg);
}
.swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.check input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.check:has(input:disabled) { opacity: .55; cursor: not-allowed; }
/* Password strength bar:
*/
.pw-meter { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 6%; border-radius: 999px; background: var(--bad); transition: width .3s ease, background .3s; }
.pw-meter i[data-score="1"] { width: 25%; background: var(--bad); }
.pw-meter i[data-score="2"] { width: 50%; background: var(--learn-fill); }
.pw-meter i[data-score="3"] { width: 75%; background: var(--good); }
.pw-meter i[data-score="4"] { width: 100%; background: var(--good); }
.pw-toggle { color: var(--ink-2); }
/* ==========================================================================
Cards, pills, badges, avatars
========================================================================== */
.set-tile {
position: relative; display: grid; gap: 12px; align-content: start; padding: 18px; text-decoration: none; color: inherit;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.set-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow), inset 0 3px 0 var(--brand); border-color: var(--line-strong); }
.set-tile h3, .set-tile p { overflow-wrap: anywhere; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.pill.due { background: var(--brand-soft); color: var(--brand); }
.pill.good { background: var(--good-soft); color: var(--good); }
.badge {
display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; vertical-align: middle;
font-size: .75rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
background: var(--surface-3); color: var(--ink-2);
}
.badge svg { width: 12px; height: 12px; }
.badge-admin { background: var(--brand-soft); color: var(--brand); }
.badge-ok { background: var(--good-soft); color: var(--good); }
.badge-warn { background: var(--learn-soft); color: var(--learn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-public { background: var(--info-soft); color: var(--info); }
.badge-ok:not(:has(svg))::before, .badge-bad:not(:has(svg))::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.avatar {
--h: 215;
display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
background: hsl(var(--h) var(--av-s) var(--av-l)); color: hsl(var(--h) var(--av-ink-s) var(--av-ink-l));
box-shadow: inset 0 0 0 1px hsl(var(--h) 40% 50% / .18);
font: 800 .875rem/1 var(--display); letter-spacing: 0; user-select: none; overflow: hidden;
}
.owner-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; color: var(--ink-2); }
.owner-line b { color: var(--ink); }
.meter { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.meter .m { background: var(--good); }
.meter .l { background: var(--learn-fill); }
.meter > i { display: block; transition: width .4s; }
.folder-tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.folder-tile svg { width: 28px; height: 28px; fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1.6; }
.hero-ai {
position: relative; isolation: isolate; overflow: hidden;
background: var(--hero); color: var(--on-hero); border: 1px solid color-mix(in srgb, var(--on-hero) 8%, transparent);
border-radius: var(--r-xl); padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
/* A field of accent dots that fades in toward the right */
.hero-ai::before {
content: ''; position: absolute; inset: 0 0 0 40%; z-index: -1; opacity: .75;
background-image: radial-gradient(var(--brand) 1.4px, transparent 1.9px); background-size: 16px 16px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 85%); mask-image: linear-gradient(90deg, transparent, #000 85%);
}
.hero-ai h2 { font-size: 1.45rem; }
.hero-ai p { color: color-mix(in srgb, var(--on-hero) 78%, transparent); margin-top: 4px; }
.empty { text-align: center; padding: 48px 20px; display: grid; gap: 12px; justify-items: center; }
.empty > svg { color: var(--brand); }
.empty-note {
padding: 18px 20px; text-align: center; color: var(--ink-2); font-size: .95rem;
border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 50%, transparent);
}
/* ==========================================================================
Home: greeting, streak and daily goal
========================================================================== */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 28px; }
.today-row { display: grid; grid-template-columns: repeat(2, auto); gap: 12px; }
.streak, .goal {
display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 18px 12px 12px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
color: inherit; text-decoration: none;
}
.goal { transition: transform .15s, box-shadow .15s, border-color .15s; }
.goal:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.streak-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-3); color: var(--ink-3); }
.streak.on .streak-ico { background: var(--flame-soft); color: var(--flame); }
.streak.on .streak-ico svg { fill: currentColor; fill-opacity: .2; }
.streak > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: baseline; min-width: 0; }
.streak b { font: 800 1.75rem/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.streak.on b { color: var(--flame); }
.streak span { font-weight: 700; color: var(--ink-2); }
.streak small { grid-column: 1 / -1; margin-top: 4px; font-size: .8rem; color: var(--ink-2); line-height: 1.3; }
.goal > div:last-child { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
/* Ring that fills up with --p (0 to 100) */
.goal-ring { --p: 0; position: relative; width: 56px; height: 56px; flex-shrink: 0; display: grid; place-content: center; justify-items: center; text-align: center; line-height: 1; }
.goal-ring::before {
content: ''; position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--surface-3) 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
}
.goal-ring.done::before { background: var(--good); }
.goal-ring b { position: relative; font: 800 1.05rem/1 var(--display); font-variant-numeric: tabular-nums; }
.goal-ring small { position: relative; margin-top: 2px; font-size: .62rem; font-weight: 700; color: var(--ink-3); }
.goal-ring.done b { color: var(--good); }
.explore-promo h3 { display: flex; align-items: center; gap: 8px; }
.explore-promo h3 svg { color: var(--brand); }
/* ==========================================================================
Set page
========================================================================== */
.set-head { display: grid; gap: 10px; }
.set-head > * { min-width: 0; }
.set-head h1, .set-head p { overflow-wrap: anywhere; }
.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 960px) { .modes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "Study next": the one suggested step on the set page */
.next-up {
display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-xl); text-decoration: none; color: inherit;
background: linear-gradient(120deg, var(--brand-soft), var(--surface) 75%); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s, border-color .15s;
}
.next-up:hover { box-shadow: var(--shadow); transform: translateY(-1px); border-color: var(--brand); }
.next-up .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); flex-shrink: 0; }
.next-up .ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.next-up-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.next-up-text small { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.next-up-text b { font-family: var(--display); font-size: 1.15rem; letter-spacing: -.01em; }
.next-up-text span { color: var(--ink-2); font-size: .92rem; }
.next-up > .btn { flex-shrink: 0; pointer-events: none; }
@media (max-width: 560px) {
.next-up { flex-wrap: wrap; padding: 16px; gap: 12px; }
.next-up .ico { width: 40px; height: 40px; }
.next-up-text { flex-basis: calc(100% - 56px); }
.next-up > .btn { width: 100%; justify-content: center; }
}
/* Flashcard preview on the set page */
.peek { display: grid; gap: 14px; min-width: 0; }
/* A set height, not an aspect ratio: an aspect ratio's minimum size made the card wider than a phone. */
.peek-card .flip-inner { aspect-ratio: auto; min-height: 0; height: clamp(220px, 30vw, 340px); }
.peek-nav { display: flex; align-items: center; justify-content: center; gap: 18px; position: relative; }
.peek-nav .count { min-width: 64px; text-align: center; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.peek-nav .round-btn { width: 46px; height: 46px; }
.peek-full { position: absolute; right: 0; }
.peek-full svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
.peek-full { position: static; }
.peek-nav { flex-wrap: wrap; gap: 12px; }
}
.flip.no-anim .flip-inner { transition: none; }
/* Swiping a flashcard with Track progress on tints it: green = know it, orange = still learning */
.flip { transition: transform .2s ease; }
.flip.drag-yes .face { border-color: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 35%, transparent), var(--shadow); }
.flip.drag-no .face { border-color: var(--learn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--learn) 35%, transparent), var(--shadow); }
.swipe-hint { display: none; text-align: center; font-size: .82rem; color: var(--ink-3); }
@media (pointer: coarse) {
.swipe-hint { display: block; }
.keys { display: none; }
}
/* Mastery bar: mastered + still learning, out of every term */
.mastery { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.mastery-bar { flex: 1 1 100%; display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--surface-3); margin-bottom: 4px; }
.mastery-bar i { display: block; height: 100%; transition: width .5s ease; }
.mastery-bar i.m { background: var(--good); }
.mastery-bar i.l { background: var(--learn); opacity: .75; }
.mastery b { font-family: var(--display); font-size: 1.4rem; letter-spacing: -.02em; color: var(--good); font-variant-numeric: tabular-nums; }
.mastery span { color: var(--ink-2); font-weight: 600; font-size: .9rem; }
.mode {
display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); min-width: 0;
background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none; font-weight: 700;
transition: border-color .15s, transform .15s, box-shadow .15s;
}
.mode:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow); }
.mode > span:last-child { min-width: 0; }
.mode .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; transition: background .15s, color .15s; }
.mode:hover .ico { background: var(--brand); color: var(--on-brand); }
.mode .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mode small { display: block; font-weight: 500; color: var(--ink-3); font-size: .8rem; line-height: 1.3; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { padding: 14px 16px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); min-width: 0; }
.stat b { display: block; font-family: var(--display); font-size: 1.75rem; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat span { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.stat.s-new b { color: var(--ink-2); }
.stat.s-learn b { color: var(--learn); }
.stat.s-master b { color: var(--good); }
.term-list { display: grid; gap: 10px; }
.term-row {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 18px; align-items: start;
background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 14px 10px 14px 18px;
}
.term-row .t { font-weight: 600; border-right: 1px solid var(--line); padding-right: 18px; overflow-wrap: anywhere; white-space: pre-wrap; }
.term-row .d { overflow-wrap: anywhere; white-space: pre-wrap; }
.term-row .tools { display: flex; margin-top: -8px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: middle; background: var(--line-strong); }
.status-dot.learning { background: var(--learn-fill); }
.status-dot.mastered { background: var(--good); }
.panel.setting-row { padding: 16px 20px; }
/* ==========================================================================
Editor
========================================================================== */
.card-edit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color .15s; }
.card-edit:focus-within { border-color: var(--line-strong); }
.card-edit-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.card-edit-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 18px 18px; align-items: start; }
.line-input { display: grid; gap: 4px; }
.line-input textarea {
border: 0; border-bottom: 2px solid var(--line-strong); background: none; resize: none; outline: none;
padding: 6px 0; min-height: 36px; overflow: hidden; line-height: 1.4; transition: border-color .15s;
}
.line-input textarea:hover { border-bottom-color: var(--ink-3); }
.line-input textarea:focus { border-bottom-color: var(--brand); }
.line-input span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.add-card {
width: 100%; padding: 22px; border: 2px dashed var(--line-strong); background: none; border-radius: var(--radius);
font-weight: 800; font-family: var(--display); font-size: 1.05rem; cursor: pointer; color: var(--ink-2); transition: border-color .15s, color .15s, background .15s;
}
.add-card:hover { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 50%, transparent); }
.editor-bar {
position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--bg) 35%);
}
/* ==========================================================================
Study screens
========================================================================== */
.study-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.study-top .count { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.progress { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--good); border-radius: 99px; transition: width .4s; }
.options-row { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle {
border: 1px solid var(--line-strong); background: var(--surface); padding: 6px 13px; border-radius: 999px;
font-weight: 600; font-size: .875rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.toggle:hover { border-color: var(--ink-3); }
.toggle[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
/* flashcard */
.flip { perspective: 1400px; width: 100%; cursor: pointer; border-radius: 22px; }
.flip-inner { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; min-height: 280px; transition: transform .5s cubic-bezier(.3, .7, .3, 1); transform-style: preserve-3d; }
.flip.flipped .flip-inner { transform: rotateX(180deg); }
.face {
position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); border: 1px solid var(--line);
display: grid; place-items: center; padding: 48px 32px; text-align: center; overflow: auto;
}
.face.back { transform: rotateX(180deg); background: linear-gradient(var(--surface), var(--surface-2)); }
.face .txt { font-size: clamp(1.25rem, 1rem + 1.6vw, 2rem); font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; }
.face.small-text .txt { font-size: clamp(1rem, .9rem + .8vw, 1.35rem); }
.face .side { position: absolute; top: 16px; left: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.face .face-tools { position: absolute; top: 8px; right: 8px; display: flex; }
.card-nav { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.round-btn {
width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-sm);
cursor: pointer; display: grid; place-items: center; transition: border-color .15s, background .15s, transform .1s;
}
.round-btn:hover { border-color: var(--ink-3); background: var(--surface-2); }
.round-btn:active { transform: scale(.95); }
.round-btn:disabled { opacity: .45; cursor: not-allowed; }
.round-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.know-btn { min-width: 150px; }
.know-btn.no { color: var(--learn); border-color: color-mix(in srgb, var(--learn) 55%, var(--line)); }
.know-btn.no:hover { background: var(--learn-soft); border-color: var(--learn); }
.know-btn.yes { color: var(--good); border-color: color-mix(in srgb, var(--good) 55%, var(--line)); }
.know-btn.yes:hover { background: var(--good-soft); border-color: var(--good); }
.keys { text-align: center; font-size: .8rem; color: var(--ink-3); }
kbd {
display: inline-block; min-width: 1.7em; text-align: center; font: 600 .75rem/1.5 var(--body); color: var(--ink-2);
border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; background: var(--surface);
}
.slide-left { animation: slideL .25s ease; }
.slide-right { animation: slideR .25s ease; }
@keyframes slideL { from { transform: translateX(24px); opacity: 0; } }
@keyframes slideR { from { transform: translateX(-24px); opacity: 0; } }
/* question card (learn, review) */
.q-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: 26px; display: grid; gap: 22px; }
.q-prompt { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 2.5em; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px 16px;
border: 2px solid var(--line); border-radius: 13px; background: var(--surface); cursor: pointer; font-weight: 500;
overflow-wrap: anywhere; white-space: pre-wrap; transition: border-color .15s, background .15s;
}
.choice:hover:not(:disabled) { border-color: var(--ink-3); background: var(--surface-2); }
.choice .k { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.choice.right { border-color: var(--good); background: var(--good-soft); }
.choice.right .k { background: var(--good); color: var(--on-good); }
.choice.wrong { border-color: var(--bad); background: var(--bad-soft); }
.choice.wrong .k { background: var(--bad); color: var(--on-bad); }
.choice:disabled { cursor: default; color: inherit; }
.choice.dim { opacity: .5; }
.answer-input { font-size: 1.1rem; padding: 13px 16px; }
.feedback { border-radius: 13px; padding: 14px 16px; display: grid; gap: 6px; border: 1px solid transparent; }
.feedback.good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 25%, transparent); }
.feedback.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.feedback .fb-title { font-weight: 800; }
.feedback.good .fb-title { color: var(--good); }
.feedback.bad .fb-title { color: var(--bad); }
.feedback .ans { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 600; }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* test */
.test-q { display: grid; gap: 16px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.test-q .qhead { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: .85rem; font-weight: 700; }
.test-q.ok { border-color: var(--good); box-shadow: inset 4px 0 0 var(--good); }
.test-q.no { border-color: var(--bad); box-shadow: inset 4px 0 0 var(--bad); }
.tf-shown { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.match-q { display: grid; gap: 10px; }
.match-q .mrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.match-q .mrow.ok .select { border-color: var(--good); }
.match-q .mrow.no .select { border-color: var(--bad); }
.score-ring { --p: 0; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--good) calc(var(--p) * 1%), var(--bad-soft) 0); flex-shrink: 0; }
.score-ring b { width: 108px; height: 108px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--display); font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.result-head { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
/* match game */
.match-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile {
min-height: 120px; padding: 12px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--surface);
display: grid; place-items: center; text-align: center; cursor: pointer; font-weight: 600; overflow-wrap: anywhere;
transition: transform .15s, opacity .3s, border-color .15s, background .15s; font-size: .95rem; box-shadow: var(--shadow-sm);
}
.tile:hover { border-color: var(--ink-3); }
.tile.sel { border-color: var(--brand); background: var(--brand-soft); transform: scale(1.03); }
.tile.bad { border-color: var(--bad); background: var(--bad-soft); }
.tile.done { opacity: 0; transform: scale(.85); pointer-events: none; }
.timer { font-family: var(--display); font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.best-list { display: grid; gap: 6px; font-variant-numeric: tabular-nums; margin: 0; padding: 0; list-style: none; }
.best-list li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.best-list li.me { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); font-weight: 700; }
/* finish screens */
.finish { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 34px 20px; }
.finish .big { font-size: 3.2rem; line-height: 1; }
.burst { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 70; }
.burst i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
/* AI chat */
.chat { display: grid; gap: 12px; }
.chat-log { display: grid; gap: 12px; min-height: 240px; align-content: start; }
.bubble { max-width: 85%; padding: 12px 15px; border-radius: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.bubble.me { justify-self: end; background: var(--navy); color: var(--on-navy); border-bottom-right-radius: 5px; white-space: pre-wrap; }
.bubble.bot { justify-self: start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: var(--shadow-sm); }
.bubble.bot p + p, .bubble.bot p + ul, .bubble.bot ul + p { margin-top: 8px; }
.bubble ul, .ai-text ul { margin: 6px 0 0; padding-left: 20px; }
.ai-text p + p, .ai-text p + ul, .ai-text ul + p { margin-top: 8px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 7px 13px;
cursor: pointer; font-weight: 600; font-size: .875rem; transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.chat-input { display: flex; gap: 10px; position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); box-shadow: 0 -12px 12px -4px var(--bg); }
.dots::after { content: '…'; animation: dots 1s steps(3) infinite; display: inline-block; width: 1em; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } to { width: 1em; } }
/* ==========================================================================
Log in, sign up, first-time setup
========================================================================== */
body.auth-mode .wrap { min-height: 100vh; min-height: 100dvh; padding-top: 28px; padding-bottom: 28px; align-content: center; }
.auth-wrap {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); width: 100%; max-width: 1040px; margin: 0 auto;
min-height: min(660px, calc(100dvh - 56px));
background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.auth-side {
position: relative; isolation: isolate; overflow: hidden;
display: flex; flex-direction: column; gap: 26px; padding: 40px;
background: var(--brand); color: var(--on-brand);
}
/* Dotted paper texture on the brand panel */
.auth-side::before {
content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
background-image: radial-gradient(color-mix(in srgb, var(--on-brand) 30%, transparent) 1.2px, transparent 1.7px);
background-size: 18px 18px;
-webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 70%); mask-image: linear-gradient(160deg, #000 10%, transparent 70%);
}
.auth-side h2 { color: inherit; letter-spacing: -.025em; }
.auth-side .logo-mark .lm-body { fill: var(--on-brand); }
.auth-side .logo-mark .lm-check { stroke: var(--brand); }
.auth-points li > span:first-child { background: color-mix(in srgb, var(--on-brand) 15%, transparent) !important; }
.auth-points b { font-weight: 800; }
.free-badge {
justify-self: start; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
background: var(--on-brand); color: var(--brand); font-weight: 800; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
}
.auth-join { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-join p { margin: 0; color: var(--ink-2); }
.auth-deck { margin-top: auto !important; }
.auth-deck-card { border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); transition: transform .35s cubic-bezier(.3, .7, .3, 1.3); }
/* The middle card would vanish into the brand panel, so it gets the strong ink color instead. */
.auth-deck-card:nth-child(2) { background: var(--navy) !important; color: var(--on-navy) !important; border-color: transparent; }
.auth-side:hover .auth-deck-card:nth-child(1) { transform: rotate(-12deg) translate(-6px, 4px) !important; }
.auth-side:hover .auth-deck-card:nth-child(2) { transform: rotate(10deg) translate(6px, -6px) !important; }
.auth-card { display: grid; align-content: center; gap: 18px; padding: clamp(24px, 5vw, 56px); min-width: 0; }
.auth-card h1 { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem); }
.auth-card form { width: 100%; }
.auth-card .input { min-height: 46px; }
.auth-switch { text-align: center; color: var(--ink-2); padding-top: 16px; border-top: 1px solid var(--line); }
.auth-switch a { color: var(--brand); font-weight: 700; }
/* ==========================================================================
Settings and admin: sidebar layout, setting rows
========================================================================== */
.side-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.side-layout > * { min-width: 0; }
.side-nav {
position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 2px; padding: 6px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.side-nav a {
display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md);
color: var(--ink-2); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s;
}
.side-nav a:hover { background: var(--surface-2); color: var(--ink); }
.side-nav a.on { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.side-nav a:focus-visible { outline-offset: -2px; }
.side-content { min-width: 0; }
.setting-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding: 14px 0; }
.setting-row ~ .setting-row { border-top: 1px solid var(--line); }
.setting-row > :first-child { flex: 1 1 160px; min-width: 0; }
.setting-row > :last-child:not(:first-child) { margin-left: auto; }
.setting-row .desc { color: var(--ink-2); font-size: .875rem; margin-top: 2px; line-height: 1.45; }
.setting-text label { cursor: pointer; }
.setting-row b svg { vertical-align: -3px; margin-right: 2px; }
.setting-control { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.panel > .setting-row:first-child { padding-top: 0; }
.panel > .setting-row:last-child { padding-bottom: 0; }
/* Rows bring their own spacing and divider lines, so a stack of them drops its gap. */
.stack:has(> .setting-row) { gap: 0; }
.stack:has(> .setting-row) > * + * { margin-top: 12px; }
.stack:has(> .setting-row) > * + .setting-row, .stack:has(> .setting-row) > .setting-row + * { margin-top: 0; }
.stack:has(> .setting-row) > :not(.setting-row) + .setting-row { padding-top: 16px; }
.danger-zone {
padding: 20px; border-radius: var(--radius);
border: 1px solid color-mix(in srgb, var(--bad) 38%, var(--line));
background: color-mix(in srgb, var(--bad-soft) 55%, var(--surface));
}
.danger-zone h3 { color: var(--bad); }
/* ==========================================================================
Data: KPI tiles and tables
========================================================================== */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 8 tiles = two even rows */
.kpi {
position: relative; overflow: hidden; display: grid; gap: 3px; align-content: start; min-width: 0; padding: 18px 18px 16px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.kpi::before { content: ''; position: absolute; top: 20px; left: 0; width: 3px; height: 26px; border-radius: 0 3px 3px 0; background: var(--brand); }
.kpi b { font: 800 2rem/1.05 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; overflow-wrap: anywhere; }
.kpi span { font-weight: 700; font-size: .9rem; color: var(--ink-2); }
.kpi small { font-size: .8rem; color: var(--ink-3); line-height: 1.35; }
.table-wrap {
overflow: auto; max-height: min(72vh, 760px); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .925rem; }
table.data th {
position: sticky; top: 0; z-index: 1; padding: 10px 14px; text-align: left; white-space: nowrap;
background: var(--surface-2); border-bottom: 1px solid var(--line);
font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 65%, var(--surface)); }
table.data tbody td { transition: background .1s; }
table.data tbody tr:hover td { background: color-mix(in srgb, var(--brand) 5%, var(--surface-2)); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data a:not([class]) { color: var(--ink); text-decoration: none; }
table.data a:not([class]):hover { color: var(--brand); text-decoration: underline; }
/* ==========================================================================
Pop-ups, toasts, loading
========================================================================== */
.modal-back {
position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
background: var(--overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fadeIn .15s ease;
}
.modal {
width: min(560px, 100%); max-height: 88vh; max-height: 88dvh; overflow: auto; padding: 24px; display: grid; gap: 16px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
animation: pop .18s cubic-bezier(.3, .7, .3, 1.2);
}
.modal h2 { font-size: 1.3rem; }
@keyframes pop { from { transform: scale(.96) translateY(6px); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
.modal .actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.toasts { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); }
.toast { background: var(--navy); color: var(--on-navy); padding: 12px 16px; border-radius: 14px; box-shadow: var(--shadow-lg); font-weight: 600; animation: toastIn .22s cubic-bezier(.3, .7, .3, 1.2); }
.toast.good { background: var(--good); color: var(--on-good); }
.toast.error { background: var(--bad); color: var(--on-bad); }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } }
.skeleton { height: 120px; border-radius: var(--radius); background: linear-gradient(90deg, var(--line), var(--surface-3), var(--line)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
/* ==========================================================================
Tablets and phones
========================================================================== */
@media (max-width: 860px) {
.home-top { grid-template-columns: minmax(0, 1fr); align-items: start; }
.today-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: var(--r-xl); }
.auth-side { padding: 24px; gap: 14px; }
.auth-side h2 { font-size: 1.45rem !important; }
.auth-points, .auth-deck { display: none !important; }
body.auth-mode .wrap { align-content: start; padding-top: 16px; }
}
@media (max-width: 800px) {
.side-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
/* The sidebar turns into a strip of tabs you can swipe sideways. */
.side-nav {
position: static; display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px;
background: none; border: 0; border-radius: 0; box-shadow: none; scrollbar-width: none; scroll-snap-type: x proximity;
}
.side-nav::-webkit-scrollbar { display: none; }
.side-nav a { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); scroll-snap-align: start; font-size: .925rem; }
.side-nav a.on { border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
}
@media (max-width: 900px) {
.user-btn { padding: 3px; width: 40px; justify-content: center; }
.user-btn-name { display: none; }
}
@media (max-width: 720px) {
.top-nav { margin-left: 0; }
/* Explore turns into a globe icon. The word stays for screen readers. */
.nav-link { width: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
.nav-link::before { width: 20px; height: 20px; }
.match-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.term-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.term-row .t { border-right: 0; padding-right: 0; }
.term-row .d { grid-column: 1; grid-row: 2; color: var(--ink-2); }
.term-row .tools { grid-row: 1 / span 2; grid-column: 2; flex-direction: column; }
.stats { gap: 8px; }
.stat { padding: 12px; }
.stat b { font-size: 1.5rem; }
.card-edit-body { grid-template-columns: 1fr; gap: 14px; }
.choices { grid-template-columns: 1fr; }
.match-q .mrow { grid-template-columns: 1fr; gap: 6px; }
.table-wrap { max-height: none; }
table.data { font-size: .875rem; }
table.data th { padding: 9px 10px; }
table.data td { padding: 9px 10px; }
.kpi { padding: 14px 14px 12px; }
.kpi::before { top: 16px; height: 22px; }
.kpi b { font-size: 1.6rem; }
.hero-ai { padding: 22px; }
.hero-ai::before { inset: 0 0 0 20%; opacity: .4; }
.q-card { padding: 20px; }
.test-q { padding: 18px; }
.modal { padding: 20px; }
.panel { padding: 16px; }
.panel.setting-row { padding: 14px 16px; }
.danger-zone { padding: 16px; }
}
@media (max-width: 560px) {
:root { --header-h: 56px; }
.logo-word { display: none; }
.topbar-in { gap: 8px; padding: 0 12px; }
.search { padding: 0 12px; }
.search::after { display: none; }
/* The Create button shows just its "+" on phones. Its name stays "Create" for screen readers. */
#create-btn { width: 40px; height: 40px; min-height: 0; padding: 0; font-size: 0; gap: 0; }
#create-btn span { font-size: 1.5rem; margin: -2px 0 0; }
.btn { padding: 9px 15px; }
.btn-sm { padding: 6px 11px; }
.btn-lg { padding: 12px 20px; }
.wrap { padding-top: 20px; gap: 22px; }
.face { padding: 42px 18px; }
.flip-inner { aspect-ratio: auto; height: 320px; }
.streak, .goal { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; }
.streak-ico { width: 44px; height: 44px; border-radius: 12px; }
.streak b { font-size: 1.5rem; }
.goal-ring { width: 48px; height: 48px; }
.goal-ring b { font-size: .95rem; }
.auth-card { padding: 22px 20px 24px; gap: 16px; }
/* A segmented control that drops under its label fills the row; color chips start at the left. */
.setting-control:has(> .segmented) { flex: 1 1 100%; }
.setting-control > .segmented { width: 100%; }
.setting-control > .segmented button { flex: 1; padding-left: 8px; padding-right: 8px; }
.setting-control:has(> .swatches) { flex: 1 1 100%; justify-content: flex-start; }
.setting-control > .swatches { padding-left: 0; }
.know-btn { min-width: 0; flex: 1; }
.modes { gap: 10px; }
.mode { padding: 12px; gap: 10px; }
.mode .ico { width: 34px; height: 34px; }
}
@media (max-width: 440px) {
.match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bubble { max-width: 92%; }
.result-head { justify-content: center; text-align: center; }
}
/* ==========================================================================
Less motion: the Reduce motion setting, or the device setting
========================================================================== */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html.reduce-motion .set-tile:hover, html.reduce-motion .mode:hover, html.reduce-motion .goal:hover,
html.reduce-motion .swatch:hover, html.reduce-motion .tile.sel { transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
}
}
/* Editor: a language for terms and one for definitions */
.lang-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.lang-row label { display: grid; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--ink-2); flex: 1 1 180px; max-width: 260px; }
.lang-row .select { width: 100%; }
.lang-row p { flex-basis: 100%; margin: 0; }
/* ---------- Print / PDF ----------
On screen the pages look like sheets of paper. When printing, only .print-sheet is shown. */
.print-sheet { display: grid; gap: 24px; justify-items: center; margin-top: 8px; }
.ps-page {
width: 100%; max-width: 210mm; background: #fff; color: #111; border-radius: 6px; box-shadow: var(--shadow-lg);
padding: 14mm 12mm; font-size: 11pt; line-height: 1.4; overflow-wrap: anywhere;
}
.ps-head h1 { font-size: 18pt; margin: 0 0 2mm; color: #111; }
.ps-head p { margin: 0 0 4mm; color: #444; }
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 60mm; padding: 10mm; }
.ps-card { border: 1px dashed #999; display: grid; place-content: center; text-align: center; padding: 6mm; position: relative; font-size: 13pt; font-weight: 600; overflow: hidden; }
.ps-card small { position: absolute; top: 3mm; left: 4mm; font-size: 7pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #888; }
.ps-back .ps-card { font-weight: 400; font-size: 11.5pt; }
.ps-empty { border-color: transparent; }
.ps-name { display: flex; gap: 6mm; margin: 2mm 0 6mm; }
.ps-name span { flex: 1; border-bottom: 1px solid #333; padding-bottom: 1mm; font-size: 9pt; color: #555; }
.ps-name span:first-child { flex: 2; }
.ps-part { margin-bottom: 6mm; break-inside: auto; }
.ps-part h2 { font-size: 13pt; color: #111; margin: 0 0 3mm; padding-bottom: 1.5mm; border-bottom: 2px solid #111; }
.ps-part h2 small { font-weight: 400; font-size: 9.5pt; color: #555; margin-left: 2mm; }
.ps-part ol { margin: 0; padding-left: 7mm; }
.ps-part > ol > li { margin-bottom: 4mm; break-inside: avoid; }
.ps-line { border-bottom: 1px solid #999; height: 8mm; }
.ps-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 6mm; margin-top: 1.5mm !important; padding-left: 6mm !important; }
.ps-match { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; }
.ps-match li { margin-bottom: 3mm; break-inside: avoid; }
.ps-blank { display: inline-block; width: 10mm; border-bottom: 1px solid #333; margin-right: 2mm; }
.ps-key h2 { font-size: 14pt; color: #111; margin: 0 0 4mm; }
.ps-key ol { columns: 2; column-gap: 10mm; padding-left: 7mm; font-size: 10pt; }
.ps-key li { break-inside: avoid; margin-bottom: 1.5mm; }
.ps-list { width: 100%; border-collapse: collapse; }
.ps-list th, .ps-list td { text-align: left; vertical-align: top; padding: 2.5mm 3mm; border-bottom: 1px solid #ddd; }
.ps-list th { width: 38%; font-weight: 700; }
.ps-list tr { break-inside: avoid; }
@media (max-width: 640px) {
.ps-page { padding: 16px 12px; font-size: 10pt; }
.ps-grid { grid-auto-rows: 38vw; padding: 8px; }
.ps-card { font-size: 10pt; padding: 12px 8px; }
.ps-choices, .ps-match { grid-template-columns: 1fr; gap: 4px; }
}
@media print {
@page { margin: 10mm; }
html, body { background: #fff !important; }
body > *:not(main), .print-tools, #app > .narrow:first-child { display: none !important; }
#app { padding: 0 !important; margin: 0 !important; max-width: none !important; }
.print-sheet { display: block; margin: 0; }
.ps-page { box-shadow: none; border-radius: 0; max-width: none; padding: 0; break-after: page; }
.ps-page:last-child { break-after: auto; }
/* 255mm fits a Letter page (and A4) inside the 10mm margins */
.ps-grid { padding: 0; height: 255mm; grid-template-rows: repeat(4, 1fr); grid-auto-rows: auto; }
}
/* ---------- Gravity ---------- */
.gravity { display: grid; gap: 14px; max-width: 760px; width: 100%; margin: 0 auto; }
.g-hud { display: flex; align-items: center; gap: 18px; font-weight: 600; color: var(--ink-2); }
.g-hud b { color: var(--ink); font-family: var(--display); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.g-hud .btn { margin-left: auto; }
.g-lives i { font-style: normal; color: var(--line-strong); font-size: 1.2rem; }
.g-lives i.on { color: var(--bad); }
.g-field {
position: relative; height: clamp(260px, 50vh, 520px); border-radius: var(--r-xl); overflow: hidden;
background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 55%), linear-gradient(var(--surface), var(--surface-2));
border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.g-field.paused .g-rock { opacity: .35; filter: blur(3px); }
.g-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(135deg, var(--line-strong) 0 8px, transparent 8px 16px); opacity: .7; }
.g-rock {
position: absolute; top: 0; max-width: 54%; padding: 12px 16px; border-radius: 16px; will-change: transform;
background: var(--raised, var(--surface)); border: 2px solid var(--brand); box-shadow: var(--shadow);
font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; white-space: pre-wrap;
}
.g-rock::before { content: '☄️'; position: absolute; top: -14px; left: -10px; font-size: 1.1rem; }
.g-rock.g-low { border-color: var(--bad); }
.g-rock.g-hit { animation: gHit .35s ease forwards; }
.g-rock.g-landed { border-color: var(--bad); background: var(--bad-soft); animation: shake .35s; }
@keyframes gHit { to { transform: scale(1.35); opacity: 0; } }
.g-banner {
position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 999px; max-width: 90%; text-align: center;
background: var(--ink); color: var(--surface); font-weight: 800; box-shadow: var(--shadow-lg); z-index: 2;
}
.g-banner.good { background: var(--good); color: var(--on-good, #fff); }
.g-banner.warn { background: var(--learn); color: #fff; }
.g-form { display: grid; gap: 6px; }
.g-label { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.g-label b { color: var(--ink); }
.g-form .input { flex: 1; min-width: 0; }
@media (max-width: 560px) { .g-rock { max-width: 80%; padding: 10px 12px; font-size: .95rem; } .g-hud { gap: 12px; } }
/* Home page reminder (uses the .next-up look) */
.reminder-wrap { display: grid; gap: 6px; }
.reminder.urgent { background: linear-gradient(120deg, color-mix(in srgb, var(--learn) 16%, var(--surface)), var(--surface) 75%); border-color: color-mix(in srgb, var(--learn) 45%, var(--line)); }
.reminder.urgent .ico { background: var(--learn); color: #fff; }
.reminder.urgent .next-up-text small { color: var(--learn); }
.reminder-setup { justify-self: end; color: var(--ink-3); font-weight: 600; }
.reminder-setup:hover { color: var(--brand); }
/* ---------- Card pictures ---------- */
.card-img { display: block; max-width: 100%; height: auto; object-fit: contain; border-radius: 10px; background: #fff; }
.def-col { display: grid; gap: 8px; min-width: 0; }
.card-pic { display: flex; align-items: center; gap: 6px; min-height: 32px; }
.card-pic .thumb { width: 88px; height: 64px; object-fit: cover; border: 1px solid var(--line); }
.row-img { width: 72px; height: 54px; object-fit: cover; margin-top: 6px; border: 1px solid var(--line); }
.face-body { display: grid; gap: 12px; justify-items: center; align-content: center; max-height: 100%; min-height: 0; }
.face.has-img { padding-top: 40px; padding-bottom: 24px; }
.face-img { max-height: min(46vh, 190px); max-width: 90%; }
.face.has-img .txt { font-size: clamp(1.05rem, .95rem + .8vw, 1.45rem); }
.peek-card .face-img { max-height: 150px; }
.q-img { max-height: 220px; max-width: min(100%, 420px); margin-bottom: 4px; border: 1px solid var(--line); }
.tile { display: grid; gap: 6px; justify-items: center; align-content: center; }
.tile-img { max-height: 70px; max-width: 100%; }
.rock-img { max-height: 70px; max-width: 160px; margin-bottom: 6px; }
.ps-img { max-height: 30mm; max-width: 100%; margin: 0 auto 2mm; border-radius: 0; }
.ps-list .ps-img { margin: 0 0 1.5mm; max-height: 22mm; }
/* ---------- Live class game ---------- */
.live { display: grid; gap: 18px; max-width: 1040px; width: 100%; margin: 0 auto; }
.lv-player { max-width: 560px; }
.lv-head { display: flex; align-items: center; gap: 14px; }
.lv-head .eyebrow { margin-right: auto; }
.lv-num { font-weight: 800; color: var(--ink-2); }
.lv-conn { position: sticky; top: 8px; z-index: 5; justify-self: center; background: var(--ink); color: var(--surface); padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
/* lobby */
.lv-lobby { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
.lv-codebox { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 28px 20px; border-radius: var(--r-xl); background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow); }
.lv-code { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 5.6vw, 4.6rem); letter-spacing: .04em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-codebox .btn { background: color-mix(in srgb, var(--on-brand) 16%, transparent); color: inherit; border-color: transparent; }
.lv-waiting { display: grid; gap: 14px; padding: 20px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.lv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--surface-3); font-weight: 700; }
.lv-chip.new { animation: popIn .25s ease; }
.lv-kick { border: 0; background: none; color: var(--ink-3); font-size: 1.1rem; line-height: 1; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; }
.lv-kick:hover { background: var(--bad-soft); color: var(--bad); }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } }
/* question */
.lv-q { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 26px 20px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.lv-prompt { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem); line-height: 1.2; overflow-wrap: anywhere; white-space: pre-wrap; }
.lv-q.small { padding: 16px; }
.lv-q.small .lv-prompt { font-size: clamp(1.1rem, 1rem + 1vw, 1.5rem); }
.lv-img { max-height: 240px; max-width: min(100%, 460px); }
.lv-q.small .lv-img { max-height: 140px; }
.lv-timer { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.lv-timer b { font-family: var(--display); font-size: 1.8rem; min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.lv-timer .progress > i { background: var(--brand); transition: width .2s linear; }
.lv-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lv-choice {
position: relative; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 16px 18px; border-radius: 16px; border: 0;
color: #fff; font: inherit; font-weight: 800; font-size: 1.1rem; text-align: left; overflow-wrap: break-word; hyphens: auto; box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
}
.lv-shape { font-size: 1.5rem; line-height: 1; flex-shrink: 0; width: 1.4em; text-align: center; }
.lc-0 { background: #d8392b; } .lc-1 { background: #2563c9; } .lc-2 { background: #e6a700; color: #1d1600; } .lc-3 { background: #178a4c; }
button.lv-choice { cursor: pointer; transition: transform .1s, filter .15s; }
button.lv-choice:hover { filter: brightness(1.07); }
button.lv-choice:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
button.lv-choice:disabled { cursor: default; opacity: .45; }
button.lv-choice.picked { opacity: 1; outline: 4px solid var(--ink); outline-offset: 2px; }
.lv-buttons .lv-choice { min-height: 110px; font-size: 1.05rem; }
.lv-choice.dim { opacity: .45; }
.lv-choice.right { outline: 4px solid var(--good); outline-offset: 2px; }
.lv-count { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 90px; }
.lv-count i { display: block; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .75); }
/* results */
.lv-results { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
.lv-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lv-board li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; }
.lv-board li.me { border-color: var(--brand); background: var(--brand-soft); }
.lv-board b { margin-left: auto; font-variant-numeric: tabular-nums; }
.lv-rank { width: 1.6em; color: var(--ink-3); font-weight: 800; }
.lv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lv-teams { display: grid; gap: 6px; }
.lv-team-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; color: #fff; font-weight: 800; }
.lv-team-row small { opacity: .85; font-weight: 600; }
.lv-team-row b { margin-left: auto; font-size: 1.2rem; }
.lv-team { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: #fff; white-space: nowrap; }
.t-red { background: #d8392b; } .t-blue { background: #2563c9; } .t-green { background: #178a4c; } .t-gold { background: #e6a700; color: #1d1600; }
.lv-chip.t-red, .lv-chip.t-blue, .lv-chip.t-green { color: #fff; }
.lv-chip.t-red .lv-kick, .lv-chip.t-blue .lv-kick, .lv-chip.t-green .lv-kick { color: rgba(255, 255, 255, .8); }
/* player screens */
.lv-me { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; }
.lv-me b { margin-left: auto; font-family: var(--display); font-size: 1.2rem; }
.lv-wait { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 34px 20px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.lv-wait .big { font-size: 3rem; line-height: 1; }
.lv-wait .lv-timer { width: 100%; max-width: 360px; }
.lv-verdict.good { background: var(--good-soft); border-color: var(--good); }
.lv-verdict.good .big { color: var(--good); }
.lv-verdict.bad { background: var(--bad-soft); border-color: var(--bad); }
.lv-verdict.bad .big { color: var(--bad); }
.lv-join .lv-code-input { font-family: var(--display); font-size: 2.2rem; font-weight: 800; letter-spacing: .3em; text-align: center; height: 72px; }
/* podium */
.lv-done { display: grid; gap: 22px; text-align: center; }
.lv-podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; }
.lv-step { display: grid; gap: 4px; width: min(30%, 200px); }
.lv-step b { overflow-wrap: anywhere; }
.lv-step span { color: var(--ink-2); font-weight: 700; }
.lv-step div { border-radius: 14px 14px 0 0; background: var(--brand); color: var(--on-brand); font-family: var(--display); font-weight: 800; font-size: 2rem; display: grid; place-items: center; }
.lv-step.s1 div { height: 150px; } .lv-step.s2 div { height: 105px; opacity: .85; } .lv-step.s3 div { height: 75px; opacity: .7; }
#join-link::before {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8a6 6 0 0 1 0 8.4M7.8 16.2a6 6 0 0 1 0-8.4M19.1 4.9a10 10 0 0 1 0 14.2M4.9 19.1a10 10 0 0 1 0-14.2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8a6 6 0 0 1 0 8.4M7.8 16.2a6 6 0 0 1 0-8.4M19.1 4.9a10 10 0 0 1 0 14.2M4.9 19.1a10 10 0 0 1 0-14.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 720px) {
.lv-lobby { grid-template-columns: 1fr; }
.lv-choice { min-height: 64px; padding: 12px 14px; font-size: 1rem; }
.lv-count { min-width: 60px; }
}
@media (max-width: 440px) {
.lv-choices:not(.lv-buttons) { grid-template-columns: 1fr; }
/* one column on phones, so a long word fits on its line */
.lv-buttons { grid-template-columns: 1fr; gap: 10px; }
.lv-buttons .lv-choice { min-height: 68px; font-size: 1rem; gap: 12px; padding: 12px 16px; }
}
/* ---------- Privacy and Terms ---------- */
.legal { display: grid; gap: 12px; line-height: 1.6; }
.legal h2 { font-size: 1.2rem; margin-top: 14px; }
.legal ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.legal .lead { font-size: 1.05rem; }
.legal-note { background: var(--learn-soft); border-color: color-mix(in srgb, var(--learn) 40%, var(--line)); font-size: .92rem; }
.legal-links { margin-top: 16px; color: var(--ink-3); }
.site-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; padding: 0 16px 28px; margin-top: -56px; font-size: .82rem; color: var(--ink-3); }
.site-footer a { color: inherit; font-weight: 600; }
.site-footer a:hover { color: var(--brand); }
body.auth-mode .site-footer { margin-top: -20px; }
.auth-legal a { color: inherit; text-decoration: underline; }
@media print { .site-footer { display: none; } }
.guest-links { display: flex; gap: 6px; margin-left: auto; }
.create-menu[hidden], #search-form[hidden] { display: none !important; }
/* Recovery code */
.recovery-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(1rem, .7rem + 1.8vw, 1.6rem); font-weight: 800; letter-spacing: .04em; white-space: nowrap; text-align: center; padding: 16px; border-radius: 14px; background: var(--surface-2); border: 2px dashed var(--line-strong); user-select: all; overflow-wrap: anywhere; }
.recovery-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.recover { max-width: 460px; width: 100%; margin: 0 auto; }
/* Reports */
.report-btn { margin-left: auto; color: var(--ink-3); }
.report-reasons { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.report-reasons label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 600; }
.report-reasons label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.report-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.report-list li span { display: block; }
.nav-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .75rem; font-weight: 800; display: inline-grid; place-items: center; }
/* Share link */
.share-link { display: flex; gap: 8px; }
.share-link .input { flex: 1; min-width: 0; font-size: .9rem; }
@media (max-width: 440px) { .share-link { flex-direction: column; } }
/* ---------- Classes ---------- */
#classes-link::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.cl-join { flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.cl-join label { display: grid; margin-right: auto; }
.cl-join .input { width: 150px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.class-tile { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; min-height: 110px; }
.class-tile:hover { border-color: var(--brand); transform: translateY(-1px); }
.class-tile b { font-family: var(--display); font-size: 1.1rem; overflow-wrap: anywhere; }
.class-code-chip { justify-self: start; margin-top: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; letter-spacing: .12em; padding: 3px 10px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); }
.class-codebox { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.class-codebox .row { flex: 1 1 380px; flex-wrap: nowrap; }
.class-codebox .input { flex: 1; min-width: 0; font-size: .88rem; }
.class-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 2.2rem; font-weight: 800; letter-spacing: .14em; color: var(--brand); line-height: 1.1; }
.class-set { position: relative; display: grid; }
.class-set-x { position: absolute; top: 8px; right: 8px; background: var(--surface); }
.progress-table th[scope="row"] { display: grid; gap: 1px; text-align: left; white-space: nowrap; }
.progress-table thead th { white-space: nowrap; }
.progress-table td { min-width: 130px; }
.pt-cell { display: flex; align-items: center; gap: 8px; }
.pt-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; min-width: 50px; }
.pt-bar i { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.pick-list { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.pick-list label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.pick-list label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pick-list span { display: grid; }
@media (max-width: 640px) { .class-codebox .row { flex-wrap: wrap; } .class-codebox .input { flex-basis: 100%; } }
.progress-table tbody th { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); background: var(--surface); font-weight: 700; }
.progress-table tbody th .small { font-weight: 500; }
/* Header links show just their icons (the name shows on hover), so the search box keeps its room */
@media (min-width: 561px) {
.top-nav .nav-link { width: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
.top-nav .nav-link::before { width: 20px; height: 20px; }
}
/* Offline */
.offline-bar { background: var(--ink); color: var(--surface); text-align: center; font-weight: 600; font-size: .88rem; padding: 8px 16px; }
/* Card formatting */
.fmt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.fmt-btn { min-width: 34px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: .95rem; cursor: pointer; }
.fmt-btn:hover { background: var(--surface-3); }
.fmt-btn.sym { min-width: 28px; padding: 0 4px; }
.fmt-sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 4px; }
.fmt-help { margin-left: auto; padding: 0 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.term-col { display: grid; gap: 6px; min-width: 0; }
.fmt-preview { font-size: .95rem; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); border: 1px dashed var(--line-strong); overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 640px) { .fmt-help { display: none; } }
sup, sub { font-size: .7em; line-height: 0; }
/* QR codes */
.lv-or { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.lv-qr { width: min(220px, 60vw); background: #fff; padding: 6px; border-radius: 12px; line-height: 0; }
.lv-qr svg, .class-qr svg { width: 100%; height: auto; display: block; }
.class-qr { width: 112px; flex-shrink: 0; background: #fff; padding: 4px; border-radius: 10px; border: 1px solid var(--line); line-height: 0; }
/* Import */
.imp-seps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.imp-seps label { display: grid; gap: 4px; font-weight: 600; }
.imp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.imp-table th, .imp-table td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.imp-table th { width: 40%; }
.imp-skipped:empty { display: none; }
.imp-skipped { color: var(--learn); }
/* Assignments and hardest cards */
.assign-row, .assign-card summary { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.assign-row.done { opacity: .75; }
.assign-main { display: grid; gap: 4px; flex: 1 1 240px; min-width: 0; }
.assign-main b { overflow-wrap: anywhere; }
.assign-main .pt-cell { max-width: 280px; }
.assign-card { display: block; }
.assign-card summary { cursor: pointer; list-style: none; }
.assign-card summary::-webkit-details-marker { display: none; }
.assign-card[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.assign-card > :not(summary) { margin: 0; padding: 0 16px; }
.assign-card[open] { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding-bottom: 12px; }
.assign-card[open] summary { box-shadow: none; border-width: 0 0 1px; margin-bottom: 10px; }
.assign-count { white-space: nowrap; color: var(--ink-2); }
.assign-count .late { color: var(--bad); font-weight: 700; }
.assign-left { list-style: none; display: grid; gap: 8px; margin: 6px 0 10px !important; }
.assign-left li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 200px) auto; align-items: center; gap: 12px; }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.good-text { color: var(--good); font-weight: 700; }
.hard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.hard-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.hard-list li > div { display: grid; }
.hard-list li { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.hard-stat { text-align: right; white-space: nowrap; color: var(--bad); }
.hard-stat small { display: block; color: var(--ink-3); }
@media (max-width: 560px) { .assign-left li { grid-template-columns: 1fr; gap: 4px; } }
/* Log in with Google, and the "or" line between ways to log in */
.btn-google { width: 100%; justify-content: center; gap: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-google:hover { background: var(--surface-2); }
.btn-google.btn-sm { width: auto; }
.btn-google svg { flex-shrink: 0; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: .85rem; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-sent { background: var(--brand-soft); border-radius: 12px; padding: 12px 14px; }
/* Math help */
#math-link::before {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M7 8.5h4M9 6.5v4M14 8.5h4M7.5 14.5l3 3M10.5 14.5l-3 3M14 15h4M14 17.5h4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M7 8.5h4M9 6.5v4M14 8.5h4M7.5 14.5l3 3M10.5 14.5l-3 3M14 15h4M14 17.5h4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.math-home { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.math-home > div { flex: 1; min-width: 200px; }
.math-home h2 { font-size: 1.2rem; }
.math-home-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; }
.math-page textarea#m-problem { font-size: 1.15rem; line-height: 1.5; }
.math-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.math-key { min-width: 44px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 1.05rem; font-weight: 600; cursor: pointer; }
.math-key:hover { border-color: var(--brand); color: var(--brand); }
.math-key:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.math-examples .chip { font-size: .9rem; }
.math-problem { font-size: 1.3rem; overflow-wrap: anywhere; }
.math-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.math-step { position: relative; padding: 12px 14px 12px 52px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; gap: 4px; counter-increment: step; }
.math-step::before { content: counter(step); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: .9rem; }
.math-step.new { border-color: var(--brand); }
@media (prefers-reduced-motion: no-preference) { .math-step.new { animation: math-in .25s ease-out; } }
@keyframes math-in { from { opacity: 0; transform: translateY(6px); } }
.math-work { font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.math-answer { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--good-soft, var(--brand-soft)); border: 2px solid var(--good, var(--brand)); }
.math-answer b { font-size: 1.5rem; overflow-wrap: anywhere; }
.math-msg { padding: 10px 14px; border-radius: 14px; max-width: 90%; overflow-wrap: anywhere; }
.math-msg.user { justify-self: end; background: var(--brand); color: var(--on-brand); }
.math-msg.assistant { justify-self: start; background: var(--surface-2); border: 1px solid var(--line); }
.math-msg p { margin: 0; }
.math-chat #mc-list { display: grid; }
.panel-inset { padding: 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.linklike { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.math-lost-tip { display: grid; gap: 4px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.math-lost-tip .linklike { justify-self: start; }
.math-hint { padding: 12px 14px; border-radius: 12px; border: 2px dashed var(--brand); background: var(--brand-soft); display: grid; gap: 4px; }
.math-lost { justify-self: start; margin-top: 2px; }
.math-simpler { margin-top: 6px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--brand); }
.math-simpler p, .math-simpler ul, .math-simpler ol { margin: 0 0 6px; }
.math-step.wrong { border-color: var(--bad); border-width: 2px; }
.math-mistake { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.math-mistake b svg { vertical-align: -3px; }
.math-mistake s { text-decoration-color: var(--bad); text-decoration-thickness: 2px; }
.math-mistake.good { border-color: var(--good); background: var(--good-soft); }
.math-mistake p { margin: 0; }
.math-words summary { cursor: pointer; }
.math-words dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 10px 0 0; }
.math-words dt { font-weight: 800; }
.math-words dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .math-words dl { grid-template-columns: 1fr; } .math-words dd { margin-bottom: 6px; } }
.math-concept ul { margin: 4px 0 0; padding-left: 20px; }
.math-example { padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }