/* ============================================================================ SAT Freshman -- the interface (spec/rebuild-v2.md 2.1, 2.3, Shell 2.13) Rules 1 Functionality first. Every control a student acts on has a visible text label; legends carry counts, numbers carry units; a control that changes how practice behaves has a one-line helper under it. An empty state shows a dimmed sample row, says what will appear, and offers the smallest action that fills it, with its cost (UI.empty). 2 One primary per region (a page header, a card, a sheet, a player, an action bar): the filled orange .pill. Secondary is .btn (a white face with a fine edge, a light top edge and a contact shadow, --ctl tall, radius 10, Geist 600 14px, ink). Tertiary is .quiet. Hierarchy comes from size and position. 3 Depth, not lines. The page is warm (--page), cards are white (--raised) with a soft see-through edge inside --shadow-1; a clickable card steps to --shadow-2 on hover; the page's one hero (.card.hero) sits at --shadow-3 on --hero-wash. Menus, popovers, tips and toasts --shadow-3/4, sheets and the palette --shadow-5. Shadows are warm-tinted, never grey or blue. Hairlines (1px --line) only split rows inside a surface. Radius 12 (--radius-card), padding 20 (--card-pad; 16 on a phone), 32 between groups. 4 Orange is the only accent. It marks what is yours or live: the selection, the key, the recommended action, your row, open-mistake dots, goal fills. Orange fills carry --ink-deep text (white on #F18508 is 2.4:1). Status is never colour alone: every state has a glyph and text. Destructive actions are graphite behind a confirm sheet, never red. Gradients: three only (the pill's faint top sheen, the amber fade under trend lines, --hero-wash). The pill's shadow is a warm contact shadow under 4px blur: no halo, no glow. 5 One source per fact; each shows its working (UI.fact). 6 The session and the test window have no chrome, and the test window stays flat (.rn-exam: no sheen, no shadows). Floats are menus, popovers, tips, toasts, sheets and the bars a list docks. 7 Nothing a student does is lost. 8 Four states per card: loading (cached copy, else static skeletons at final size, no shimmer), error (inside the card, with Retry), new student (the frame and its empty-state action stay), lots of history (paging, collapse). 9 Phone at 390px: 16px gutters, no horizontal page scroll, 44px touch targets (--touch), sheets become bottom sheets, nothing hidden that desktop shows. 10 Motion: one short page entry per visit (blocks rise 8px, at most 6, 30ms apart, never on back or refresh, the primary never delayed); hero numbers count or roll on a new score; the gauge sweeps on a fresh test; nothing else on load. Presses go down fast and come back slower; no hover lifts. Nothing loops but a spinner while it waits. prefers-reduced-motion and html[data-motion="reduce"] turn the movement off. 11 Type: Geist for UI; Geist Mono (.mono) for clocks, codes and ids; Source Serif 4 for question text at --q-size / --q-opt. 12 Copy: no emoji. "Question 7 of 22". Thousands separators. 1:12, 42h 10m. 13 Speed is measured (Check -> verdict 100ms, Next -> stem 50ms, CLS 0.02). 14 One question, one row (UI.questionActions). 15 Readable without sight. Look: html[data-theme="dark"|"light"] (light is the default; head.js resolves System), html[data-text="small"|"large"] (question text only), html[data-motion="reduce"]. Breakpoints: phone < 760px, rail < 1100px. Question states (2.3, R20, R35, R52, SR25): an element that shows one sets data-status and reads these tokens; it never paints a state by itself. --st-fill solid fill (SVG points, legend swatches) --st-bg background: --st-fill, or the split / slash of mixed and voided; correct and repaired cells are the amber wash (--wash-2: a wall of solid amber outshouted the primary), their --st-fill stays amber --st-edge, --st-edge-style 1.5px edge colour and style (transparent: none) --st-fg the number --st-halo text-shadow for the number (mixed) --st-glyph the corner glyph (content: var(--st-glyph)), --st-mark its colour --st-badge a second glyph (fixed since), drawn in --amber-deep --st-flag the flag notch colour on this fill Values: correct incorrect mixed repaired fixed unanswered blank skipped voided removed repeat not_reached answered, and the type states unmet met ready. Overlays: data-flag (notch, top-right, 9px), data-saved (bookmark), data-note (7px glyph, bottom-left), aria-current (--ring), data-filtered (30% opacity; the component also takes it out of Tab), an open mistake is an orange dot, being fixed is --hatch. Difficulty: data-tier="easy|medium|hard" gives --lvl (tint), --lvl-ink, --lvl-letter (E M H) and --lvl-n (bars filled, 1-3). Bars are ink on --mat. Mastery: a bar (--m-track, --m-fill) plus UI.masteryWord and accuracy. Print: the shell, overlays, controls and every button are hidden, dark prints light, state fills print exactly, rows never split. .no-print hides, .print-only shows only on paper, .page-break starts a page, .keep never splits, button.print-keep stays. Components, in this order; each group opens with the markup it expects: shell .side (.rail .open) .scrim .pbar .tabs .tabs-grip .ibtn .nextup .side-day .now-strip .sections controls .pill .btn .split-btn .spin .verb .seg .tablist .switch .pref .chips .check .field .counter .otp .dd .filters .selbar .score-slider .choices, range, checkbox data .card (.hero .go .line) .ledge .hero-num .card-head .card-err .skel .stat .stats .meter .badge .kbd .table .table-wrap .thumbs .empty .pts [data-fact] .ring .avatar marks .cell .cell-grid .sw .legend .strip .atlas .pips .dbars charts .chart .chart-hits .ch-* .gauge .scale .cal .heat .spread .q-* .spark .sb-* .ds-* overlays dialog.sheet dialog.more .menu .popover [role=option] .tip .toasts .banner dialog.palette .calc kit .checks .filters-sec .date-form .skill-row .countdown .fact-pop .avatar.mark Where a page still defines one of these names itself (.seg, .cell, .tip, .legend, .stat, .card), the shared rule is written so the page's own rule wins until the page is rebuilt. ========================================================================== */ /* Geist and Geist Mono, variable, self-hosted (OFL, assets/fonts/OFL.txt): Latin and Cyrillic */ @font-face { font-family: "Geist"; src: url("/assets/fonts/Geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } /* 1. the Marks font: the marks Geist lacks (✓ ✕ ✗ ⋯ ▾ ▴ ▸ ⌄ ⓘ ↻ ↺ ⊘ ⊖ ◐ ★ ✎ ⚑ ■ □ ⌫ ⌇ ⠿ ⁻), drawn the same on every device. Goes beside Geist's @font-face. One weight serves all (100 900), so 9px/700 cells get no faux bold. block, not swap: it is 2 KB, and a mark that swaps shape mid-load is the bug being fixed. */ @font-face { font-family: "Marks"; src: url("/assets/fonts/Marks.woff2") format("woff2"); font-weight: 100 900; font-display: block; unicode-range: U+00AB, U+00B7, U+00BB, U+2039-203A, U+207B, U+21BA-21BB, U+22EF, U+2296, U+2298, U+2304, U+2307, U+232B, U+24D8, U+25A0-25A1, U+25B4, U+25B8, U+25BE, U+25CB, U+25CF-25D0, U+2605, U+2691, U+270E, U+2713, U+2715, U+2717, U+283F; } :root { color-scheme: light; --paper: #FFFFFF; --ink: #3F3F3F; /* the brand graphite */ --ink-deep: #1E1E1E; /* the label on orange: 6.4:1 where graphite is 4.1 */ --amber: #F18508; /* the brand orange, for fills */ --amber-deep: #D97705; /* 3.2:1 on paper, enough to carry an edge alone */ --wash: #FEF4E7; /* orange at reading strength */ --wash-2: #FDEBD3; --tile: #F6F4F0; --tile-2: #EFECE6; --mat: #E9E5DF; --line: #E4E1DC; --soft: #6F6A62; /* 4.55:1 on --tile-2, 4.88:1 on --tile: small text passes AA (#8A847C was 3.1-3.7:1) */ --faint: #B7B1A8; --on-ink: #FFFFFF; /* a number or glyph on an --ink fill */ --knob: #FFFFFF; /* a switch's knob, light in both themes */ --track: rgba(63, 63, 63, .1); --backdrop: rgba(40, 38, 34, .32); --ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); /* current: 2px ink, 2px paper gap */ /* surfaces (premium A1): a warm page, white cards on it, white floats. --paper stays white: the test window, fields and keycaps keep it. Dark lifts each level a step lighter. */ --page: #F7F5F1; /* the canvas: body, sidebar, sticky bars */ --raised: #FFFFFF; /* cards, stats, the hero, the sidebar Now card (shadow 1 to 3) */ --float: #FFFFFF; /* menus, popovers, toasts, sheets, the palette (shadow 3 to 5) */ --face: #FFFFFF; /* the face of .btn, chips and the seg thumb */ --ink-strong: #1E1E1E; /* headings and the one hero number; body text stays --ink */ --ink-2: #55514B; /* secondary values, between --ink and --soft */ --fs-hero: clamp(56px, 2.5vw + 28px, 64px); /* the one number a page is about (.hero-num) */ /* the amber ramp, light to deep; 500 is the brand fill */ --amber-100: var(--wash); --amber-200: var(--wash-2); --amber-300: #F8BE7A; --amber-400: #F5A142; --amber-500: var(--amber); --amber-600: var(--amber-deep); --amber-700: #A85B03; /* elevation: warm-tinted layers (offsets 1:2, alpha falling as they widen) behind a soft see-through edge, so one token works on the page, on a card and in dark. 1 card, 2 a clickable card on hover, 3 the hero, menus, popovers, 4 toasts and docked bars, 5 sheets and the palette */ --sh: 60 52 44; /* the warm shadow tint; under orange it is 140 70 0 */ --edge: 0 0 0 1px rgb(var(--sh) / .09); --shadow-1: var(--edge), 0 1px 2px rgb(var(--sh) / .06), 0 2px 4px -2px rgb(var(--sh) / .06); --shadow-2: var(--edge), 0 1px 2px rgb(var(--sh) / .06), 0 2px 4px rgb(var(--sh) / .05), 0 6px 12px -4px rgb(var(--sh) / .08); --shadow-3: var(--edge), 0 1px 2px rgb(var(--sh) / .05), 0 3px 6px rgb(var(--sh) / .05), 0 8px 16px -4px rgb(var(--sh) / .07), 0 16px 24px -8px rgb(var(--sh) / .08); --shadow-4: var(--edge), 0 1px 2px rgb(var(--sh) / .05), 0 4px 8px rgb(var(--sh) / .05), 0 12px 24px -6px rgb(var(--sh) / .08), 0 24px 40px -12px rgb(var(--sh) / .10); --shadow-5: var(--edge), 0 1px 2px rgb(var(--sh) / .04), 0 4px 8px rgb(var(--sh) / .04), 0 16px 32px -8px rgb(var(--sh) / .10), 0 32px 64px -16px rgb(var(--sh) / .18); --shadow-float: var(--shadow-3); /* the old names, kept */ --shadow-pop: var(--shadow-5); --shadow-scroll: 0 1px 0 rgb(var(--sh) / .07), 0 6px 12px -8px rgb(var(--sh) / .22); /* a sticky bar while content slides under it */ /* the faint warm corner tint behind the one hero (.card.hero) */ --hero-wash: radial-gradient(120% 90% at 100% 0, rgb(241 133 8 / .07), transparent 60%); /* controls: the .btn and chip face (fine edge, contact shadow, a lip at the foot), a field's well, the hover band on a clickable row, the one selected look, and disabled as a solid grey */ --edge-ctl: 0 0 0 1px rgb(var(--sh) / .14); --shadow-btn: var(--edge-ctl), inset 0 -1px 0 rgb(var(--sh) / .05), 0 1px 2px -1px rgb(var(--sh) / .18); --shadow-btn-down: var(--edge-ctl), inset 0 1px 2px rgb(var(--sh) / .16); --face-hover: #F7F6F3; --seg-thumb: var(--edge-ctl), 0 1px 3px rgb(var(--sh) / .12), 0 1px 2px -1px rgb(var(--sh) / .12); /* a raised white thumb; no orange (it stays on the chosen row and Start) */ --shadow-field: inset 0 0 0 1px rgb(var(--sh) / .18), inset 0 1px 2px rgb(var(--sh) / .07); --halo: 0 0 0 4px rgb(241 133 8 / .2); /* the focused field's soft orange halo */ --hover: rgb(var(--sh) / .06); --sel-bg: var(--wash-2); --sel-edge: inset 0 0 0 1.5px var(--amber); --off-bg: #EFECE6; --off-fg: #8C867D; /* the orange pill (REFERENCES R1): a faint top sheen, a darker edge lit at the top, a warm contact shadow */ --pill-sheen: .2; --pill-edge: color-mix(in srgb, var(--amber), #000 18%); --pill-edge-top: color-mix(in srgb, var(--amber), #000 5%); --pill-hover: color-mix(in srgb, var(--amber), #fff 9%); --pill-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -3px 6px -3px rgb(120 55 0 / .28), 0 1px 1px rgb(140 70 0 / .14), 0 2px 3px rgb(140 70 0 / .14); --pill-down: inset 0 1px 3px rgb(120 55 0 / .35), 0 1px 1px rgb(140 70 0 / .12); /* tooltips: a dark chip with white text in both themes */ --tip-bg: #2A2723; --tip-fg: #FFFFFF; --tip-soft: rgb(255 255 255 / .68); /* a drawn check, for masks and for the checkbox (stroke in --ink-deep, the same in both themes) */ --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231E1E1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* UI.ICON.caret_down (Phosphor caret-down) as a mask, 1.4px at 16px: the drawn chevron of a value trigger */ --caret-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpolyline points='208 96 128 176 48 96' fill='none' stroke='black' stroke-width='22.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --hatch: repeating-linear-gradient(-45deg, var(--amber) 0 1.5px, transparent 1.5px 5px); /* difficulty tints, ascending; each carries its own text colour */ --lvl-easy: #FDEBD3; --lvl-easy-ink: var(--ink-deep); --lvl-med: #F8BE7A; --lvl-med-ink: var(--ink-deep); --lvl-hard: #F18508; --lvl-hard-ink: var(--ink-deep); /* mastery bar */ --m-track: var(--track); --m-fill: var(--ink); /* question text, by prefs.text */ --q-size: 20px; --q-opt: 18.5px; --font: "Geist", "Marks", "Helvetica Neue", system-ui, sans-serif; --mono: "Geist Mono", "Marks", ui-monospace, SFMono-Regular, Menlo, monospace; --serif: "Source Serif 4", "Marks", Georgia, "Times New Roman", serif; --radius: 10px; /* .btn, fields, tiles */ --radius-card: 12px; --card-pad: 20px; /* 16 on a phone (BUILD rule 8) */ --card-gap: 32px; /* between cards in a grid or a column: groups get air (20 on a phone) */ --row-h: 40px; /* a list row; rows sit inside one card with hairlines */ --touch: 44px; --ctl: 36px; /* .btn, .seg, .chips, tabs, menu rows; --touch on a phone or a coarse pointer */ /* what you sit on, and a track or button one step darker; cards, menus and sheets reset both (surfaces) */ --surface: var(--page); --well: var(--mat); --ease: cubic-bezier(.23, 1, .32, 1); --max: 1120px; --gutter: clamp(16px, 4vw, 40px); --bar: 64px; --side-w: 248px; --rail-w: 68px; /* the has-note glyph: three text lines in currentColor, used as a background */ --note-glyph: linear-gradient(currentColor 0 0) 0 0 / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 62% 1.5px no-repeat; } :root[data-text="small"] { --q-size: 17px; --q-opt: 15.5px; } :root[data-text="large"] { --q-size: 23px; --q-opt: 21px; } @media (max-width: 759px) { :root { --card-pad: 16px; --card-gap: 20px; } } @media (max-width: 759px), (pointer: coarse) { :root { --ctl: var(--touch); } } /* dark (Shell 2.13); screen only, so paper always prints light */ @media screen { :root[data-theme="dark"] { color-scheme: dark; --paper: #1A1917; --ink: #ECE8E1; --ink-deep: #1E1E1E; /* stays: it is the label on orange */ --amber: #F18508; --amber-deep: #F59B32; --wash: rgba(241, 133, 8, .13); --wash-2: rgba(241, 133, 8, .22); --tile: #242220; --tile-2: #2D2A27; --mat: #3A3631; --line: #34312C; --soft: #A39C92; --faint: #6E685F; --on-ink: #1A1917; --track: rgba(236, 232, 225, .14); --backdrop: rgba(0, 0, 0, .55); /* premium A1: higher is lighter; a soft white edge and a 1px top highlight instead of black outlines */ --page: #1A1917; --raised: #242220; --float: #2C2926; --face: #312E2A; --ink-strong: #F5F2EC; --ink-2: #CFC9C0; --amber-700: #FFC37A; --sh: 0 0 0; --edge: 0 0 0 1px rgb(255 255 255 / .07); --hi: inset 0 1px 0 rgb(255 255 255 / .05); --shadow-1: var(--edge), var(--hi), 0 1px 2px rgb(0 0 0 / .3), 0 2px 4px -2px rgb(0 0 0 / .3); --shadow-2: var(--edge), var(--hi), 0 1px 2px rgb(0 0 0 / .3), 0 2px 4px rgb(0 0 0 / .25), 0 6px 12px -4px rgb(0 0 0 / .35); --shadow-3: var(--edge), var(--hi), 0 1px 2px rgb(0 0 0 / .3), 0 3px 6px rgb(0 0 0 / .25), 0 8px 16px -4px rgb(0 0 0 / .35), 0 16px 24px -8px rgb(0 0 0 / .4); --shadow-4: var(--edge), var(--hi), 0 1px 2px rgb(0 0 0 / .3), 0 4px 8px rgb(0 0 0 / .25), 0 12px 24px -6px rgb(0 0 0 / .4), 0 24px 40px -12px rgb(0 0 0 / .45); --shadow-5: var(--edge), var(--hi), 0 1px 2px rgb(0 0 0 / .3), 0 4px 8px rgb(0 0 0 / .25), 0 16px 32px -8px rgb(0 0 0 / .45), 0 32px 64px -16px rgb(0 0 0 / .6); --shadow-scroll: 0 1px 0 rgb(255 255 255 / .06), 0 6px 12px -8px rgb(0 0 0 / .6); --hero-wash: radial-gradient(120% 90% at 100% 0, rgb(241 133 8 / .08), transparent 60%); --edge-ctl: 0 0 0 1px rgb(255 255 255 / .09); --shadow-btn: var(--edge-ctl), inset 0 1px 0 rgb(255 255 255 / .07), 0 1px 2px rgb(0 0 0 / .4); --shadow-btn-down: var(--edge-ctl), inset 0 1px 2px rgb(0 0 0 / .4); --face-hover: #393530; --seg-thumb: var(--edge-ctl), inset 0 1px 0 rgb(255 255 255 / .06), 0 1px 2px rgb(0 0 0 / .45); --shadow-field: inset 0 0 0 1px rgb(255 255 255 / .1), inset 0 1px 2px rgb(0 0 0 / .4); --halo: 0 0 0 4px rgb(241 133 8 / .22); --hover: rgb(255 255 255 / .05); --off-bg: #2A2724; --off-fg: #7A746B; --pill-sheen: .14; --pill-edge: color-mix(in srgb, var(--amber), #000 40%); --pill-edge-top: color-mix(in srgb, var(--amber), #000 22%); --pill-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -3px 6px -3px rgb(120 55 0 / .3), 0 1px 1px rgb(0 0 0 / .4), 0 2px 3px rgb(0 0 0 / .35); --pill-down: inset 0 1px 3px rgb(80 35 0 / .45), 0 1px 1px rgb(0 0 0 / .35); --tip-bg: #46413B; --tip-fg: #F5F2EC; --tip-soft: rgb(245 242 236 / .7); /* dark ramps up in brightness; the two darker tints take light text */ --lvl-easy: #4A3219; --lvl-easy-ink: var(--ink); --lvl-med: #8A500B; --lvl-med-ink: var(--ink); --lvl-hard: #F18508; --lvl-hard-ink: var(--ink-deep); } } /* ------------------------------------------------------------------ question states (2.3) */ [data-status] { --st-fill: var(--paper); --st-bg: var(--st-fill); --st-edge: transparent; --st-edge-style: solid; --st-fg: var(--ink); --st-halo: none; --st-glyph: ""; --st-mark: var(--ink); --st-badge: ""; --st-flag: var(--amber); } /* right on the first try: check, top-right */ [data-status="correct"] { --st-fill: var(--amber); --st-bg: var(--wash-2); --st-fg: var(--ink); --st-mark: var(--ink); --st-glyph: "\2713"; --st-flag: var(--amber-deep); } /* wrong: cross */ [data-status="incorrect"] { --st-fill: var(--ink); --st-fg: var(--on-ink); --st-mark: var(--on-ink); --st-glyph: "\2715"; } /* right on try 2 or 3 in retry mode: a diagonal split, tilde */ [data-status="mixed"] { --st-fill: var(--amber); --st-edge: color-mix(in srgb, var(--amber) 45%, transparent); --st-glyph: "~"; --st-bg: linear-gradient(135deg, var(--wash-2) 50%, var(--paper) 50%); --st-halo: 0 0 2px var(--paper), 0 0 2px var(--paper); } /* right on the repair after a miss: an ink cycle corner */ [data-status="repaired"] { --st-fill: var(--amber); --st-bg: var(--wash-2); --st-fg: var(--ink); --st-mark: var(--ink); --st-glyph: "\21BB"; --st-flag: var(--amber-deep); } /* wrong then, the mistake has closed since: cross plus a small amber check */ [data-status="fixed"] { --st-edge: var(--ink); --st-glyph: "\2715"; --st-badge: "\2713"; } /* not answered: never Incorrect (R35); en dash */ [data-status="unanswered"], [data-status="blank"] { --st-edge: var(--faint); --st-edge-style: dashed; --st-fg: var(--soft); --st-mark: var(--soft); --st-glyph: "\2013"; } /* skipped, can still be answered before Finish: guillemet */ [data-status="skipped"] { --st-edge: var(--soft); --st-edge-style: dashed; --st-glyph: "\BB"; } /* a contest question voided by leaving or copying: a diagonal ink slash; a faint edge keeps it a box */ [data-status="voided"] { --st-fg: var(--soft); --st-glyph: "\2298"; --st-edge: var(--faint); --st-bg: linear-gradient(to top right, transparent calc(50% - .75px), var(--ink) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)), var(--paper); } /* taken out of scoring by a key correction (SR25): dotted ink edge, circled minus */ [data-status="removed"] { --st-edge: var(--ink); --st-edge-style: dotted; --st-fg: var(--soft); --st-glyph: "\2296"; } /* an exact re-attempt, left out of mastery: outline only, equals */ [data-status="repeat"] { --st-fill: transparent; --st-edge: var(--ink); --st-glyph: "="; } /* a set ended with this on screen, left out of counts: dotted faint edge, middle dot */ [data-status="not_reached"] { --st-edge: var(--faint); --st-edge-style: dotted; --st-fg: var(--soft); --st-mark: var(--soft); --st-glyph: "\B7"; } /* answered, no verdict shown (exam, end mode) */ [data-status="answered"] { --st-fill: var(--ink); --st-fg: var(--on-ink); --st-mark: var(--on-ink); --st-glyph: "\2013"; } /* question types (R52): unmet dashed, met --tile-2, ready ink with a check */ [data-status="unmet"] { --st-edge: var(--faint); --st-edge-style: dashed; --st-fg: var(--soft); --st-mark: var(--soft); --st-glyph: "\25CB"; } [data-status="met"] { --st-fill: var(--tile-2); --st-glyph: "\25CF"; } [data-status="ready"] { --st-fill: var(--ink); --st-fg: var(--on-ink); --st-mark: var(--on-ink); --st-glyph: "\2713"; } /* outside the active filter */ [data-filtered] { opacity: .3; } /* difficulty: tint, its text, the corner letter and the bars filled */ [data-tier="easy"] { --lvl: var(--lvl-easy); --lvl-ink: var(--lvl-easy-ink); --lvl-letter: "E"; --lvl-n: 1; } [data-tier="medium"] { --lvl: var(--lvl-med); --lvl-ink: var(--lvl-med-ink); --lvl-letter: "M"; --lvl-n: 2; } [data-tier="hard"] { --lvl: var(--lvl-hard); --lvl-ink: var(--lvl-hard-ink); --lvl-letter: "H"; --lvl-n: 3; } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; accent-color: var(--amber); /* native radios and progress; checkboxes are drawn (controls) */ scroll-padding-top: calc(var(--bar) + 8px); /* anchors land below a sticky bar */ scrollbar-color: var(--mat) transparent; scrollbar-width: thin; /* thin warm scrollbars; scrollbar-color inherits */ } /* from 760px there is no top bar: an anchor lands 16px down, or under the section bar where a page has one */ @media (min-width: 760px) { html { scroll-padding-top: 16px; } html:has(main > .sections:not([hidden])) { scroll-padding-top: 72px; } } html, body { min-height: 100%; } body { margin: 0; background: var(--page); color: var(--ink); font: 400 14.5px/1.5 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre, ol, ul { margin: 0; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p { text-wrap: pretty; } ol, ul { padding: 0; list-style: none; } img, video { max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* phone taps: no grey flash on anything tappable, no text selection or callout on controls */ a, label, summary, [role="button"], [role="tab"], [role="option"], [role^="menuitem"] { -webkit-tap-highlight-color: transparent; } :where(.pill, .btn, .ibtn, .x, .quiet, .chips > *, .seg > *, .choice-row, [role="tab"], .side-item, .split-btn) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea { caret-color: var(--amber); } button:disabled { cursor: default; } textarea { resize: vertical; } fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } legend { padding: 0; } table { border-collapse: collapse; font-variant-numeric: tabular-nums; } th { text-align: left; font-weight: 600; } hr { height: 1px; margin: 0; border: 0; background: var(--line); } kbd, code, samp, pre { font-family: var(--mono); font-size: .92em; } /* a highlighter stroke over the lower part of the line; runner.css's mark.hl resets the background */ mark { background: linear-gradient(transparent 45%, var(--wash-2) 45%); color: inherit; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } summary { cursor: pointer; } a { color: inherit; } a:not([class]) { text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--faint); transition: text-decoration-color .16s var(--ease); } @media (hover: hover) and (pointer: fine) { a:not([class]):hover { text-decoration-color: var(--amber); } } ::selection { background: color-mix(in srgb, var(--amber) 32%, transparent); } dialog { background: var(--float); color: var(--ink); } dialog::backdrop { background: var(--backdrop); } [hidden] { display: none !important; } /* heard, not seen */ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* a fraction in the line: numerator over a bar over denominator (UI.fracText); the slash and brackets stay in the text, visually hidden, so highlights' offsets and screen readers are unchanged */ .frac { position: relative; display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; margin: 0 .12em; font-size: .9em; line-height: 1.2; text-align: center; white-space: nowrap; text-indent: 0; } .frac > .fn { padding: 0 .2em .08em; border-bottom: max(1px, .065em) solid currentColor; } .frac > .fd { padding: .1em .2em 0; } .frac .frac { font-size: 1em; } .fh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* "Skip to content": the first Tab stop, seen only when focused */ .skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: var(--radius); background: var(--ink); color: var(--on-ink); font: 600 14px var(--font); text-decoration: none; transform: translateY(calc(-100% - 24px)); } .skip:focus { transform: none; } /* focus (keyboard only): a thin amber-deep ring 2px out that follows the control's corners and leaves its own shadows under it, never ink. Text links get no box: the underline turns amber-deep and 2px, on a faint wash */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 2px; } :is(a:not([class]), .link, .quiet, .fold-s, .why-q.word):focus-visible { outline: none; border-radius: 4px; background-color: var(--wash); background-clip: content-box; text-decoration: underline 2px var(--amber-deep); text-underline-offset: 4px; } main[tabindex="-1"]:focus { outline: none; } /* the skip link's target */ .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* an icon inside running text sits on the baseline like a letter (flex rows ignore this). Icon sizes: 16 beside 12.5-14px text (.btn.sm, .quiet), 18 in .btn, .pill, menus and sidebar rows, 20 in .ibtn, 24 in the phone tabs */ :where(p, li, .meta, .help, .k, .note, .link) > svg { vertical-align: -.125em; } @media screen { .print-only { display: none !important; } } /* surfaces: the page (and the sidebar on it) is --page with --mat wells; a card, a panel, a stat and the Now card are --raised (white) with --tile-2 wells; anything that floats is --float. Dark steps each level lighter, so its wells are --mat inside cards and floats. Components read --surface and --well instead of patching themselves. */ :where(.card, .panel, .stat, .nextup, .side-day, .now-strip > *) { --surface: var(--raised); --well: var(--tile-2); } :where(dialog, .popover, .menu) { --surface: var(--float); --well: var(--tile-2); } @media screen { :root[data-theme="dark"] { --well: var(--tile-2); } :root[data-theme="dark"] :where(.card, .panel, .stat, .nextup, .side-day, .now-strip > *, dialog, .popover, .menu) { --well: var(--mat); } } /* .twocol: the task in main, context in aside.twocol-side. From 1280px wide the aside is a 300px column, sticky under the top (--twocol-top, 16px; a page with a sticky bar sets it; --twocol-bottom clears a fixed bottom bar) and scrolling inside itself; below that it follows main, or leads it with .twocol.side-first. (.split is the Check button's, runner.css.) */ .twocol { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); align-items: start; } .twocol > * { min-width: 0; } .twocol-side { display: grid; gap: var(--card-gap); align-content: start; } .twocol.side-first > .twocol-side { order: -1; } @media (min-width: 1280px) { .twocol { grid-template-columns: minmax(0, 1fr) 300px; } .twocol.side-first > .twocol-side { order: 0; } .twocol-side { position: sticky; top: var(--twocol-top, 16px); max-height: calc(100vh - var(--twocol-top, 16px) - var(--twocol-bottom, 16px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 8px; margin: -8px; /* room for focus rings and card shadows at its edges */ } } /* .reveal: a row's secondary actions and metas, shown while its parent is hovered or holds focus, on a fine pointer; always shown on a coarse one. Opacity only, so nothing shifts and its buttons stay in the tab order. */ @media (hover: hover) and (pointer: fine) { .reveal { opacity: 0; transition: opacity .16s var(--ease); } :hover > .reveal, :focus-within > .reveal, .reveal:focus-within, .reveal-host:hover .reveal, .reveal-host:focus-within .reveal { opacity: 1; } } /* scroll edges fade where there is more to scroll: UI.edgeFade(el[, x]) sets .fade-s (more before) and .fade-e (more after); .fade-x runs them across instead of down */ .fade-s:not(.fade-x) { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16px); mask-image: linear-gradient(to bottom, transparent, #000 16px); } .fade-e:not(.fade-x) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); } .fade-s.fade-e:not(.fade-x) { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 16px), transparent); } .fade-x.fade-s { -webkit-mask-image: linear-gradient(to right, transparent, #000 24px); mask-image: linear-gradient(to right, transparent, #000 24px); } .fade-x.fade-e { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); } .fade-x.fade-s.fade-e { -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); } /* .choice-row: a row-shaped toggle (a deck, a filter row, a tile choice): --row-h tall, 8px corners, the label left and a count or meta right. At rest no fill, a hairline (a grey well read as disabled); hover the --hover band; pressed, checked or current is the chips' look (wash-2, the amber inset) */ .choice-row { appearance: none; border: 0; cursor: pointer; width: 100%; text-align: left; text-decoration: none; position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--row-h); padding: 6px 12px; border-radius: 8px; background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 500 14px/1.3 var(--font); transition: background-color .16s var(--ease), box-shadow .16s var(--ease); } .choice-row > :is(.n, .meta, .choice-meta) { margin-left: auto; font: 500 12.5px var(--font); color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .choice-row svg { width: 18px; height: 18px; flex: none; } .choice-row[aria-pressed="true"], .choice-row[aria-checked="true"], .choice-row[aria-current="true"], label.choice-row:has(input:checked) { background: var(--sel-bg); box-shadow: var(--sel-edge); font-weight: 600; } .choice-row:disabled, .choice-row[aria-disabled="true"], label.choice-row:has(input:disabled) { color: var(--faint); cursor: default; } label.choice-row > input { position: absolute; opacity: 0; pointer-events: none; } label.choice-row:has(input:focus-visible) { outline: 2px solid var(--amber-deep); outline-offset: 2px; } @media (pointer: coarse) { .choice-row { min-height: var(--touch); } } @media (hover: hover) and (pointer: fine) { .choice-row:not(:disabled):not([aria-disabled="true"]):not(:has(input:disabled)):not([aria-pressed="true"]):not([aria-checked="true"]):not([aria-current="true"]):not(:has(input:checked)):hover { background: var(--hover); } } /* ------------------------------------------------------------------ shell */ .bar { position: sticky; top: 0; z-index: 30; background: var(--page); padding-top: env(safe-area-inset-top, 0px); transition: box-shadow .2s var(--ease); } .bar.scrolled { box-shadow: var(--shadow-scroll); } .bar-in { max-width: var(--max); margin: 0 auto; height: var(--bar); padding: 0 var(--gutter); display: flex; align-items: center; gap: 30px; } .brand { display: flex; align-items: center; flex: none; } .brand svg { width: 26px; height: 26px; display: block; } .nav { display: flex; gap: 4px; } .nav a { position: relative; padding: 8px 10px; border-radius: 8px; font: 500 14.5px var(--font); color: var(--soft); text-decoration: none; transition: color .16s var(--ease), background-color .16s var(--ease); } .nav a[aria-current="page"] { color: var(--ink); font-weight: 600; } .nav a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--amber); } @media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--ink); } } .bar-end { margin-left: auto; display: flex; align-items: center; gap: 14px; } .streak { display: inline-flex; align-items: center; gap: 5px; font: 500 13px var(--font); font-variant-numeric: tabular-nums; color: var(--soft); text-decoration: none; } button.streak { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; } .streak svg { width: 16px; height: 16px; } .streak.on { color: var(--ink); } .streak.on .flame { fill: var(--amber); stroke: var(--amber-deep); } .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--well); color: var(--ink); text-decoration: none; font: 600 13px var(--font); transition: background-color .16s var(--ease); } @media (hover: hover) and (pointer: fine) { .avatar:hover { background: color-mix(in srgb, var(--well), var(--ink) 7%); } } /* UI.avatar (U22): an initial, a topic glyph, the living mark (an svg) or this device's photo; .lg 40px, .xl 72px (Me); data-ring is an earned glyph: a 2px orange ring and a small check */ .avatar.lg { width: 40px; height: 40px; font-size: 15px; } .avatar.xl { width: 72px; height: 72px; font-size: 26px; } .avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .avatar[data-ring] { position: relative; box-shadow: 0 0 0 2px var(--amber); } .avatar[data-ring]::after { content: "\2713"; position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: var(--ink-deep); font: 700 9px/1 var(--font); box-shadow: 0 0 0 2px var(--paper); } .avatar.xl[data-ring]::after { width: 22px; height: 22px; font-size: 13px; } .tabs { display: none; } .page { max-width: var(--max); margin: 0 auto; padding: 32px var(--gutter) 64px; /* page top 32 (BUILD rule 8); 20 on a phone */ } @media (max-width: 759px) { .nav { display: none; } .bar-in { gap: 12px; } .tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); /* the one blur besides a sheet's backdrop: content slides under the tab bar */ background: color-mix(in srgb, var(--page) 86%, transparent); box-shadow: 0 -1px 0 var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .tabs a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px; text-decoration: none; font: 500 11.5px var(--font); color: var(--soft); } .tabs svg { width: 24px; height: 24px; } .tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; } .tabs a[aria-current="page"]::before { content: ""; position: absolute; top: -6px; width: 18px; height: 2px; border-radius: 2px; background: var(--amber); } .tabs { min-height: calc(64px + env(safe-area-inset-bottom, 0px)); } /* hold a tab for its shortcut menu (U26): no callout, no text selection */ .tabs a { justify-content: center; min-height: 52px; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .tabs a .dot { position: absolute; top: 4px; left: calc(50% + 7px); box-shadow: 0 0 0 2px var(--page); } /* graphite: see .side-meta .dot */ .page { padding-top: 20px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } } /* the grip: a 44x24 button centred on the tab bar's top edge; it opens the menu sheet (U26) */ .tabs-grip { position: absolute; top: -12px; left: 50%; width: 44px; height: 24px; margin-left: -22px; padding: 0; border: 0; border-radius: 12px 12px 0 0; cursor: pointer; background: var(--page); box-shadow: 0 -1px 0 var(--line); } .tabs-grip::before { content: ""; position: absolute; left: 50%; top: 7px; width: 28px; height: 4px; margin-left: -14px; border-radius: 2px; background: var(--faint); } /* "Hold a tab for shortcuts", once, above the tabs; centred by margins, since rise animates transform */ .tabs-hint { position: fixed; z-index: 31; left: 0; right: 0; width: max-content; max-width: calc(100% - 32px); margin-inline: auto; bottom: calc(64px + 18px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 12px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font: 500 13px var(--font); white-space: nowrap; box-shadow: var(--shadow-4); animation: rise .3s var(--ease) both; } .tabs-hint .x { width: 30px; height: 30px; color: inherit; opacity: .75; } /* ------------------------------------------------------------------ the v2 shell (Shell 2.1-2.4, U1, U26) F2 renders it; these classes are the contract. body.has-side | body.has-rail pages are inset by the sidebar (248px) or the rail (68px)