/* ---- Self-hosted type system ---------------------------------------- */ @font-face { font-family: 'Albert Sans Variable'; font-style: normal; font-display: optional; font-weight: 100 900; src: url('/fonts/albert-sans-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'DM Serif Display'; font-style: normal; font-display: optional; font-weight: 400; src: url('/fonts/dm-serif-display-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---- End self-hosted type system ------------------------------------ */ /* ===================================================================== v9.1-rebrand · Cream & Sage v4 (light) + Forest Floor v2.1 (dark) See DESIGN-SYSTEM.md §1 for the canonical palette + four-tier surface hierarchy. Pure white / pure black are reserved for inputs, code, and small inset wells only — primary cards live on warm tones in both modes. ===================================================================== */ :root{ color-scheme:light; /* §1 Surfaces — 4 canonical tiers (WS3 semantic ladder, v9.1) PAGE → --bg full-screen background (warm paper) CARD → --surface primary content surface (cards, rows, inputs) FLOAT → --surface-elevated elevated above content (modals, sheets, cinema card, floating banners, hover-lift) INPUT → --surface-bright pure-white role — form inputs + code blocks only (RARE) Legacy aliases (correct resolution, kept for back-compat — prefer canonical tokens in new code): --surface-alt → var(--surface-elevated) (FLOAT alias) --surface-alt2 → var(--surface) (CARD alias) Anti-patterns: §11 — do not use --bg for cards; --surface for floats; invent new tiers. */ --bg-sunken:#E5E0D2; /* SUNKEN — below page (rare; wells, sunken trays). WS11 v9.7-foundation 2026-05-19. */ --bg:#EFEBE0; /* PAGE — warm paper */ --surface:#F5F1E6; /* CARD — primary card surface */ --surface-elevated:#F8F5EE; /* FLOAT — hover lift, modals, sheets, cinema card, banners */ --surface-floating:var(--surface-elevated); /* TOP-FLOAT — modal/sheet ceiling. Light: aliases to FLOAT (plenty of contrast headroom). Dark block overrides with a visibly higher rung. WS11 v9.7-foundation. */ --surface-bright:#FFFFFF; /* INPUT — pure white (RARE) */ /* utility pivots — general-purpose text-on-accent + color-mix use in component CSS (distinct from --surface-bright's RARE form-input role). WS11. */ --white:#fff; --black:#000; --border:#DCD5C4; --border-strong:#BFB6A0; --text:#1F1D1A; --text-muted:#57524A; --text-faint:#6B6457; /* WS10-fix: was #857F71 (3.1:1 FAIL on #EFEBE0) → 5.0:1 AA body ✓ */ /* WS11 v9.7-foundation (2026-05-19) — Stronger-than-muted text for places where opacity stacks were used to dim secondary content (cloze siblings, captions, tooltips). Pre-mixed to ≥4.5:1 AA body so consumers never need `opacity:` to look "calm". Light #3F3A33 = 10.6:1 on cream paper ✓ AAA. */ --text-muted-strong:#3F3A33; /* WS11 v9.7-foundation — Disabled-state foreground. Use on icons/labels that are intentionally inactive. ≥3:1 UI (not body). Light #777670 = 3.80:1 on cream — meets WCAG 2.2 SC 1.4.11 non-text contrast for state. */ --text-disabled:#777670; /* §1 Multi-accent — sage (primary), honey, coral, periwinkle, sky. Each family has deep (text on cream / AAA), mid, and fill (soft chip). */ --sage-deep:#2D4730; --sage:#4F7050; --sage-fill:#DDE8D9; --honey-deep:#6E4509; --honey:#C8861E; --honey-fill:#FBE8C8; --coral-deep:#8B3D34; --coral:#C8625A; --coral-fill:#F4D7D2; /* Vivid red — pushed-saturation coral used where the surface needs to grab attention (collapsed miss-tag pill). Stays warm so it doesn't clash with the rest of the warm-paper palette. */ --coral-vivid:#D8463F; /* Lifted coral — used for icon + label fill on the open miss-tag tiles. In light mode the standard --coral reads fine on cream so they're equivalent; the dark-mode override pushes this toward a peachy tone so coral text/icons stay readable on the dark coral-tinted tile surface. */ --coral-lift:#C8625A; --peri-deep:#382F86; --peri:#786BC8; --peri-fill:#E0DDF5; --sky-deep:#2D6B95; --sky:#4D8CB0; --sky-fill:#DCEAF3; /* patch-007 — violet ramp for Pharmacopia (drug cards). Uses the same stop pattern as the other accents: deep (text on light fill), mid, fill. A separate --violet-soft (dark-mode equivalent of -fill) is defined in the dark-mode block below so the fc-type-label pills match the rest. */ /* WS10 2026-05-05: Pharma hue shift periwinkle H=244° → magenta H=286°, matches dark mode. Mid token improves from 2.9:1 FAIL → 4.9:1 AA ✓ as a side-effect of the hue shift. */ --violet-deep:#6A1A80; --violet:#9A38BE; --violet-fill:#EFD8FA; --violet-soft:#EFD8FA; /* patch-007 — indigo ramp (Routine identity in practice; SAQ card uses --rose below). */ --indigo-deep:#1E3266; --indigo:#3B5A9C; --indigo-fill:#DCE4F5; --indigo-soft:#DCE4F5; /* WS10 — SAQ rose ramp H=330°. Replaces --honey as SAQ card identity; fixes SAQ/Hazy collision (both amber H=38°). deep = 6.6:1 AAA on cream ✓. */ --rose-deep:#9D1E5E; --rose:#C44484; --rose-fill:#F7DDEF; --rose-soft:#F7DDEF; /* v10 Saltbush core ramp (Axiom identity — DEC-024) */ --saltbush-deep:#5E6670; /* 6.6:1 on cream — body AA ✓ */ --saltbush: #808890; /* mid identity */ --saltbush-fill:#DDE0E4; /* soft chip / tinted bg */ --saltbush-soft:rgba(128,136,144,.14); /* v10 Phase 2c (2026-05-19) — lime ramp deletion. Was deprecated alias to saltbush during Phase 2a; Phase 2c swept 52 --lime-* consumers in CSS+JS → --saltbush-*. 6 residual references remain in code comments (historical context, harmless). The --hero-axiom-accent var(--lime, fallback) at line ~113 still references --lime; that var() resolves to undefined-then-fallback, which we keep for back-compat. */ /* v10 Dusk Terrain — 9-hue secondary palette (LOCKED 2026-05-19, body-system mapped). Curriculum sections A–Q map via SECTION_DUSK helper in pwa/app.js — see DESIGN-SYSTEM.md §1. Cross-cutting sections (Pharma B, Body Fluids F, MSK I, Nutrition K, Endocrine L, Thermoreg M, Obstetrics P, Antidotes Q) bucket into the closest family as inline oklch() tonal variants — no per-tonal tokens, computed at render time. */ --dusk-mauve: #8c6080; /* O Microbiology — purple */ --dusk-slate-rose: #A03540; /* D Cardiovascular — red (v10-rev3 shifted from #996070 toward true red) */ --dusk-ochre: #8a5448; /* N Haematology — maroon */ --dusk-mulga: #6a7858; /* J GI — warm green */ --dusk-heather: #7a6878; /* H Neurology — purple-grey */ --dusk-wattle: #8B7000; /* E Renal — deep gold-yellow (v10-rev3 deepened for 3.99:1 UI contrast) */ --dusk-eucalypt: #4D8270; /* A Cellular — silver blue-green */ --dusk-coolibah: #5E7A8E; /* C Respiratory — dusty desert-sky blue */ --dusk-pindan: #B25028; /* G Acid-base — burnt orange-red */ /* Hero accent tokens — resolve to card-type identity per mode. Dark mode redefines these so --sage=sky-blue and --sky=lime-gold. */ --hero-recall-accent:var(--sky,#4D8CB0); --hero-axiom-accent:var(--saltbush,#5E6670); /* v10: was var(--lime, #8A9E1A) — migrated DEC-024 */ /* Role aliases — components reference these, not the palette by name */ --accent:var(--sage); --accent-pressed:var(--sage-deep); --accent-soft:var(--sage-fill); --accent-text:var(--sage); /* text-safe alias; light mode: sage #4F7050 = 5.53:1 on bg ✓ (same as --accent) */ /* `--accent-on` — text colour for content sitting on a `var(--accent)` fill. Light mode: `var(--bg)` (cream) reads at 4.59:1 on sage `#4F7050` — passes body AA. Dark mode (Phase 8c retune 2026-05-05) overrides to `white` so the teal `--mint #157570` (WS7) keeps body AA legibility (white on it is 5.51:1; cream-on-it would be 4.12:1 — passes, but white kept for parity). All `background:var(--accent); color:var(--bg)` rules migrated to `color:var(--accent-on)` so the right value follows the theme automatically. */ --accent-on: var(--bg); --success:var(--sage-deep); --warn:var(--honey-deep); --err:var(--coral-deep); --info:var(--sky-deep); /* Grade colour aliases — single source of truth for app-context grade colour references. Cinema scope continues to use `--fc-badge-*` directly (defined below in §4). The alias indirection lets the queued palette + light/dark audit sprint flip Mastered (or any grade) in one line, decoupling app- context use from the cinema-scope WCAG-tuned values when the two diverge. `--grade-mastered-glow` is computed from the colour so a recolour propagates without a second token edit. */ --grade-mastered: var(--fc-badge-mastered); --grade-mastered-glow: color-mix(in srgb, var(--grade-mastered) 35%, transparent); --grade-missed: var(--fc-badge-missed); --grade-missed-glow: color-mix(in srgb, var(--grade-missed) 35%, transparent); --grade-honed: var(--fc-badge-honed); --grade-honed-glow: color-mix(in srgb, var(--grade-honed) 35%, transparent); /* AUDIT-2026-05-06 #15 — hazy alias completes the grade-* set so app-context code never reaches into cinema-scope --fc-badge-* tokens. Identity is the same; the alias indirection lets a future audit retune one mode without touching the other. */ --grade-hazy: var(--fc-badge-hazy); --grade-hazy-text: var(--fc-badge-hazy-text); /* AUDIT-2026-05-06 #20 — Per-theme hover tokens. In LIGHT mode tap-feedback darkens the chip (mix toward black) — works against cream bg. In DARK mode (override below) the same darkening would push the chip toward `--bg #111118` and the button "disappears" on hover. The dark-mode block flips direction to mix toward white, keeping the chip visible against Slate Dusk. White text on either fill remains 5:1+ AA. */ --grade-honed-hover: color-mix(in srgb, var(--grade-honed) 85%, #000); --grade-missed-hover: color-mix(in srgb, var(--coral-vivid) 85%, #000); --grade-mastered-hover: color-mix(in srgb, var(--grade-mastered) 85%, #000); /* AUDIT-2026-05-06 #21 — SAQ history pill palette. Previous code hardcoded #48c78e/#6bd6a8/#f14668 as var() fallbacks for tokens that were never defined, so the hex always rendered (no theme flip). Now: foreground defined here per theme; bg + border derived via color-mix at use sites. Light values keep current Bulma look; dark-mode block deepens to fit Slate Dusk's muted accent palette. */ --saq-pass: #48c78e; --saq-borderline: #6bd6a8; --saq-fail: #f14668; /* AUDIT-2026-05-06 #23 — Axiom-formula honey label. WS11 v9.7-foundation re-audit (2026-05-19): previous comment claimed 7.4:1 AAA but actual contrast of #a07800 on cream #EFEBE0 = 3.59:1 (FAIL body 4.5). Darkened to #845F00 = 4.85:1 ✓ AA body. Dark mode override below lifts to soft gold #D4B250 = 8.45:1 ✓ AAA on Slate Dusk surface. */ --axiom-honey: #845F00; /* AUDIT-2026-05-06 #22 — Pharma chip foreground. Light: pure white on the pharma violet brand (4.7:1 AA). Dark: softened to #f0e4ff so the chip foreground reads alongside the muted Slate Dusk text instead of glare-edge stark white. */ --text-on-pharma: #fff; /* Legacy semantic aliases — kept until Phase 2 migrates renderer references. Drift report §3: "--gold → kept as alias to --honey". Same pattern for red/amber/green/orange/purple so existing component CSS still resolves. */ --green:var(--sage); --green-bg:var(--sage-fill); --green-soft:var(--sage-fill); --orange:var(--coral); --orange-bg:var(--coral-fill); --purple:var(--peri); --purple-bg:var(--peri-fill); --red:var(--coral-deep); --red-bg:var(--coral-fill); --amber:var(--honey); --amber-bg:var(--honey-fill); --gold:var(--honey); --warn-bg:var(--honey-fill); /* Surface aliases — WS3 (v9.1, 2026-05-05): old consumer names cascade to the 4-tier canonical tokens. Resolution is semantically correct: --surface-alt → FLOAT (surface-elevated) — used for hover backgrounds, chips, badges --surface-alt2 → CARD (surface) — used for card bodies, list rows, form skins New code should use canonical tokens directly; aliases are not deprecated, just not the preferred spelling for new components. */ --surface-alt:var(--surface-elevated); --surface-alt2:var(--surface); /* §3 Layout */ --page-max:1440px; --section-gap:12px; /* §2 Typography */ --font-sans:"Albert Sans Variable",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; --font-display:"DM Serif Display",Georgia,"Times New Roman",serif; --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --radius:12px; --radius-sm:8px; --radius-md:10px; --radius-lg:16px; /* AUDIT-2026-05-06 #17 — Two new tokens name the legitimately-small decorative radii (identity bars at 2px, inline code/equation chips at 4px) so audits stop re-flagging them. --radius-pill aliases the existing button-pill token so non-button pills (badges, chips) can reach for the same canonical 999px without minting a duplicate. */ --radius-2xs:2px; --radius-tiny:4px; --radius-pill:var(--btn-radius-pill); --shadow-sm:0 1px 3px rgba(0,0,0,0.06); --shadow-md:0 4px 12px rgba(0,0,0,0.08); --shadow-lg:0 10px 30px rgba(0,0,0,0.12); --shadow-glow:0 4px 16px rgba(45,71,48,0.18); /* H-P2-01: pharma-specific shadow tokens — pill active + floating bulk-bar. */ --shadow-pill:0 1px 3px rgba(0,0,0,.15); --shadow-floating-bar:0 -2px 16px rgba(0,0,0,.12); /* WS1 (Phase 9, 2026-05-05) — Motion + shadow token foundation. Codifies the canonical patterns that emerged organically across the codebase: `.12s` (389 uses) is the standard duration; cubic-bezier `(.4,.05,.2,1)` (10 uses) is the canonical curve; cubic-bezier `(.34,1.56,.64,1)` (9 uses) is the spring/overshoot reserved for cinema card entry and joyful events. Tokens land here; full literal sweep deferred to WS9 (motion polish). Shadow numeric scale aliases the existing semantic names so consumers can migrate gradually. */ --ease-out: cubic-bezier(.4,.05,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --duration-xs: 80ms; --duration-sm: 120ms; /* canonical hover / press / state-flip */ --duration-md: 200ms; /* sheets, sidebars, modal entries */ --duration-lg: 280ms; /* cinema card entry, joyful celebrations */ --duration-xl: 380ms; /* full-screen overlay (cinema enter/exit) */ --ease-enter: cubic-bezier(.05,.7,.1,1); /* M3 emphasized-decelerate — directional arrivals */ --ease-exit: cubic-bezier(.3,0,.8,.15); /* M3 emphasized-accelerate — leaving */ --ease-sheet-spring: cubic-bezier(.32,1,.48,1); /* sheet snap-back (matches sheet.js) */ /* WS6 (2026-05-05) — Typography scale: canonical 8-stop font-size ramp. All component font-size declarations reference these tokens; literal px forbidden in new code. Half-px values consolidated semantically: 10.5→xs · 11.5→sm · 12.5→md · 13.5→lg. Outliers left raw: 15px (inputs/axiom headers), 18px (emoji/icons), 20px (display numerics), 28px+(display). */ --font-size-2xs: 10px; /* micro uppercase labels, counts */ --font-size-xs: 11px; /* badges, meta text */ --font-size-sm: 12px; /* secondary text, tags */ --font-size-md: 13px; /* primary body text, rows */ --font-size-lg: 14px; /* h3, buttons, drug names */ --font-size-xl: 16px; /* body base, recall prompt */ --font-size-2xl: 17px; /* h2, list rows */ --font-size-3xl: 22px; /* h1, wordmark */ /* Phase 1 card-system — intermediate half-step tokens. --font-size-2xs-plus replaces hardcoded 10.5px; --font-size-sm-plus replaces hardcoded 12.5px; --font-size-lg-plus replaces hardcoded 15px in axiom-header / axiom-formula. */ --font-size-2xs-plus: 11px; --font-size-sm-plus: 13px; --font-size-lg-plus: 15px; /* WS5 (2026-05-05) — Sheet surface tokens */ --backdrop-sheet: rgba(0,0,0,0.5); /* all sheet backdrops */ --backdrop-preview: rgba(8,8,16,0.82); /* preview overlay (heavy, intentionally distinct) */ --z-sheet: 250; /* all .sheet-backdrop instances (above tab bar 200) */ --z-settings: 254; /* settings sidebar (above sheets) */ --z-palette: 260; /* ⌘K search palette */ --z-picker: 265; /* curriculum picker — above palette so it works from search Explore */ --z-preview: 270; /* preview overlay (above palette) */ --z-refs-sheet: 290; /* refs bottom sheet — stacks above preview overlay */ --shadow-1: var(--shadow-sm); --shadow-2: var(--shadow-md); --shadow-3: var(--shadow-lg); /* WS2 (Phase 9, 2026-05-05) — Button taxonomy + token foundation. 3 sizes (xs/sm/md) + lg for composite tiles. 4 variants (primary/ghost/destructive/pill). Per-accent ghost via [data-accent]. Cinema scope override via .focus-overlay .btn--primary cascade. */ --btn-radius: 6px; --btn-radius-pill: 999px; --btn-padding-block-xs: 3px; --btn-padding-block-sm: 6px; --btn-padding-block-md: 9px; --btn-padding-block-lg: 14px; --btn-padding-inline-xs: 8px; --btn-padding-inline-sm: 12px; --btn-padding-inline-md: 16px; --btn-padding-inline-lg: 24px; --btn-font-size-xs: 10px; --btn-font-size-sm: 12px; --btn-font-size-md: 13px; --btn-font-size-lg: 15px; --btn-font-weight: 500; /* §2 cap; override per-button if evidence */ --btn-shadow-press: var(--shadow-1); /* WS1 alias */ --btn-min-tap: 44px; /* iOS HIG mandate at pointer:coarse */ /* Per-variant fills + text + border */ --btn-bg-primary: var(--accent); --btn-text-primary: var(--accent-on); --btn-bg-ghost: transparent; --btn-text-ghost: var(--accent); --btn-border-ghost: var(--accent); --btn-bg-destructive: var(--coral-deep); --btn-text-destructive: white; --btn-border-destructive: transparent; --btn-bg-pill: var(--surface); --btn-text-pill: var(--text-muted); --btn-border-pill: var(--border); /* §4 Focus-overlay fixed palette — the cinema overlay is a coloured-dark midnight regardless of app theme, so these tokens are NOT theme-split. Phase 7 (2026-05-02): cinema bg moved from near-black #0f0f10 → deep midnight #08083B. Two reasons: (a) impeccable "no pure black" anti- pattern — `#0f0f10` had ~0 chroma, lifeless beside the brand; midnight adds meaningful blue-purple chroma. (b) the violet swipe-up wash for Mastered retains hue separation from this bg (washed out on the aubergine alternative). Only use inside `.focus-overlay`. */ /* Slate Ink (2026-05-26 cinema-mode pass): retuned from indigo #08083B to a calmer near-neutral slate per user review. Low chroma at low lightness (oklch ~0.18 0.016 248) so the cream card and the grade washes pop without the indigo glow. Only use inside `.focus-overlay`. */ --focus-overlay-bg: #141A25; /* Grade badge colours — mapped to FSRS vocabulary (Missed/Hazy/Honed/Mastered). Phase 7: fills darkened so a white symbol meets WCAG 2.2 AA body 4.5:1 AND each fill remains ≥3:1 against `#08083B` (UI dot threshold). Mastered migrated gold → violet (Stage 2 D3:a) so the badge echoes the compass swipe-up wash and the spectrum is monotonic (no warm→cool→warm loop). Hazy stays as amber/black — already passes both thresholds. */ --fc-badge-missed: #F05A50; /* grade 1 Missed — coral-deeper; white 4.16:1 on fill, on bg 3.34:1 (WS9 2026-05-05: red→coral to unify grade-btn + badge; hue H=5°) */ --fc-badge-hazy: #f59e0b; /* grade 2 Hazy — amber; MUST use dark text (#111118 9.78:1); white FAILS (2.2:1) */ --fc-badge-hazy-text:#111118; /* WS9-fix: explicit dark-text companion — enforce on any solid Hazy fill */ --fc-badge-honed: #15803D; /* grade 3 Honed — green-700; white ✓ 5.02:1, on bg 3.78:1 */ --fc-badge-mastered: #9F72F8; /* grade 4 Mastered — amethyst-lighter; white 4.7:1 AA body ✓ (WS9-fix: was #8B5CF6 white 4.23:1 FAIL; lifted ~12L. H=262°, Δhue from Honed=120°, Δhue from Recall=61°.) */ /* F-P1-04 — Cinema-scoped counter tokens (mobile tap-target pill). Keeps all rgba literals out of component rules; defined here next to the badge palette where the cinema scope is established. */ --fc-counter-bg: rgba(124,106,175,.12); --fc-counter-border: rgba(124,106,175,.3); --fc-counter-fg: rgba(200,180,240,.85); --fc-counter-bg-open: rgba(124,106,175,.24); --fc-counter-fg-open: rgba(220,200,255,.95); /* F-P2-41/42 — Cinema chrome tokens: overlay header/button/text layer. --fc-chrome-border : hairline dividers and icon-button borders --fc-chrome-bg : icon-button and utility surfaces --fc-chrome-fg : primary readable text on cinema --fc-chrome-fg-muted: secondary/dim text on cinema */ --fc-chrome-border: rgba(255,255,255,.08); --fc-chrome-bg: rgba(255,255,255,.07); --fc-chrome-fg: rgba(255,255,255,.75); --fc-chrome-fg-muted: rgba(255,255,255,.45); /* Phase 7 — fifth chrome token: progress-bar empty track. Promoted from a literal because the F-P2-45 fix from `.12 → .18` still missed the ≥3:1 UI threshold on the new cinema bg (was 1.62:1 at α 0.18). At α 0.36 the track hits 3.19:1 on `#08083B`. */ --fc-chrome-track: rgba(255,255,255,.36); /* §1 Badge tier medals — Phase 7 (Stage 2 D4:a): light-mode lifts so all four tiers meet WCAG 2.2 UI ≥3:1 on `--bg #EFEBE0` warm paper. Previous light-mode values (`#CD7F32` / `#C0C0C0` / `#9BD5FF` / `--gold`) failed 1.32–2.64:1 on cream paper. Platinum aliased to `--sky-deep` so it theme-resolves automatically. Gold aliased to `--honey-deep` for the same reason. */ --tier-bronze: #A65A1F; /* light: 4.30:1 on #EFEBE0 (was #CD7F32 = 2.64) */ --tier-silver: #5A6470; /* light: 5.05:1 (was #C0C0C0 = 1.53) */ --tier-gold: var(--honey-deep); /* light: 7.00:1 via #6E4509 */ --tier-platinum: var(--sky-deep); /* light: 4.83:1 via #2D6B95 */ /* WS4 (Phase 9, 2026-05-05) — Card primitive tokens. Single shape across recall/saq/pharma/axiom. Type identity carried by [data-card-type] + stripe colour. Padding aligns 14/14 standard. Tints proven 8% light / 12% dark (WS3 audit). Stripe width unified at 4px (Q1). */ --card-padding-block: 14px; --card-padding-inline: 14px; --card-radius: var(--radius); /* 12px */ --card-stripe-width: 4px; --card-tint-light: 0%; /* Card-redesign 2026-05-05: WS11 14%→0% restrained palette. Stripe carries identity; bg stays neutral so 4 stacked types don't read as a circus. Light-mode tint dropped entirely — paper surface speaks. */ --card-tint-dark: 6%; /* Card-redesign 2026-05-05: WS11 18%→6% restrained palette. DM keeps a faint lift so card reads against page-bg dusk; stripe still does most of the identity work. */ --card-flag-top: 8px; --card-flag-right: 8px; --card-shadow: var(--shadow-1); /* WS1 alias */ --card-shadow-hover: var(--shadow-2); /* Card redesign 2026-05-05 — .study-card primitive (docs/CARD-REDESIGN-SPEC.md). Restrained palette: 0% light tint / 6% dark tint — stripe carries identity. Coexists with legacy .recall-card / .saq-card-face / .pharma-card / .axiom CSS until phase 2 migrates the JS render functions to .study-card. */ --study-card-tint-light: 0%; --study-card-tint-dark: 6%; --study-card-padding-cmf: 14px; --study-card-padding-cmp-y: 10px; --study-card-padding-cmp-x: 12px; --study-card-min-h-cmp: 48px; --study-card-marked-tint: 5%; --study-card-flag-offset: 32px; /* Ribbon primitive — used in focus haul end, session-completion popup, Sessions undo tab, Lore daily roll-up. Spec §9. */ --ribbon-h: 36px; --ribbon-stripe-w: 3px; --ribbon-radius: 7px; /* Ph6 — card type text colors (readable on light cream surface ≥4.5:1) */ /* WS11 v9.7-foundation audit (2026-05-19): --type-pharma #5E3E9E on cinema bg #08083B = 4.93:1 ✓ AA body; on --surface #F5F1E6 = 8.4:1 ✓ AAA. Dark-mode counterpart #B090F0 on #1A1A24 = 9.2:1 ✓ AAA. No change. */ /* v10 (2026-05-19): Axiom identity migrated lime #546409 → saltbush #5E6670 per design-language-v10 review (DEC-024). 6.6:1 on cream ✓ AA body. */ --type-saq:#A82840;--type-axiom:var(--saltbush-deep);--type-recall:#2D6B95;--type-pharma:#5E3E9E; /* Phase 1 card-system — nemesis identity palette (Nemesis card stripe + UI accents). Crimson → header/stripe, Ember → action/alert, Gold → reward/highlight. */ --nemesis-crimson: #A02030; --nemesis-ember: #E85D26; --nemesis-gold: #F5C26B; /* Card v2 Phase 2 — deep -label tokens (AA-hardened, ≥4.5:1 on tinted surfaces). Grade labels: dark text on 12-14% grade-tinted light surface. Reveal labels: dark text on 12% type-tinted light surface. */ --grade-mastered-label:#5B2A86; --grade-missed-label:#8B3D34; --grade-honed-label:#0f6032; --grade-hazy-label:#6E4509; --grade-blank-label:#8B3D34; --recall-reveal-label:#1E5070; --saq-reveal-label:#9D1E5E; --pharma-reveal-label:#6A1A80; --axiom-reveal-label:#454C54; } html.dark{ color-scheme:dark; /* §1 Slate Dusk — surfaces (WS9 v9.6, 2026-05-05: Forest Floor warm-green → cool blue-purple neutral) WS11 v9.7-foundation (2026-05-19): widened to 5-rung Material 3-style tint-on-base ladder so nested cards perceive elevation. Cool Slate Dusk hue family (~245°, mauve-leaning) preserved; each rung baked with subtle primary-hue tint (not pure luminance step). See DESIGN-SYSTEM.md §1. PAGE → --bg, CARD → --surface, FLOAT → --surface-elevated, TOP-FLOAT → --surface-floating, INPUT → --surface-bright. Shadows alone don't carry elevation in dark mode — pair with `border-top:1px solid color-mix(in srgb,white 8%,transparent)` hairline highlight on raised surfaces. */ --bg-sunken:#0B0B12; /* SUNKEN — below page (wells/trays). WS11 v9.7-foundation. */ --bg:#111118; /* PAGE — Slate Dusk deep (unchanged) */ --surface:#1A1A24; /* CARD — Slate Dusk card. WS11: was #18181F (+2L, +3% tint). */ --surface-elevated:#262632; /* FLOAT — Slate Dusk elevated. WS11: was #222229 (+3L, +6% tint). */ --surface-floating:#34344A; /* TOP-FLOAT — modal/sheet ceiling. WS11: NEW rung above FLOAT (+10% tint), gives sheets clear elevation. */ --surface-bright:#2C2C38; /* INPUT — equivalent of pure-white role (UNCHANGED — INPUT role kept; was previously also doing duty as top elevation). */ --border:#2D2D3A; --border-strong:#3E3E52; --text:#EEF0F8; --text-muted:#B8B9C8; --text-faint:#8080A5; /* WS9-fix: was #78789A (4.43:1 FAIL) → #8080A5 (4.6:1 AA ✓) */ /* WS11 v9.7-foundation — Dark-mode parity for new text tokens. --text-muted-strong: #D0D2E0 on bg #111118 = 11.8 AAA; on surface #1A1A24 = 10.4 AAA. --text-disabled: #686878 on bg #111118 = 3.33 — meets WCAG 2.2 SC 1.4.11 UI. */ --text-muted-strong:#D0D2E0; --text-disabled:#686878; /* Mid tones — multi-accent. Periwinkle pushed violet (#A89AE8) so SAQ pills stay distinct from sky / Key Fact for users with mild blue-yellow colour vision variation. AAA preserved on every surface. Phase 8b → 8c retune (2026-05-05): `--mint` migrated `#7FE0AD → #1D9E75 → #157C5C` (deep emerald). Path: original bright mint `#7FE0AD` read as neon glare (10.95:1 vs bg). 8b shipped `#1D9E75` (c-teal-400) but the full Stripe/Linear-style depth wanted `#157C5C` — currently 3.65:1 vs bg, white-on-accent 4.71:1 body AA. Crossing this threshold required migrating all `background:var(--accent); color:var(--bg)` rules to `color:var(--accent-on)` (token defined at :root + html.dark for theme-correct text). Cascade touched 20 sites + the existing dead `var(--accent-on)` reference at line 5943 now resolves correctly. WS7 (2026-05-05): `--mint` shifted #157C5C → #157570 (teal, H=177°). Hue separation from Honed `#15803D` (H=143°): 13° → 34.5°, now ≥30° target. white-on-mint: 5.51:1 body AA ✓. `--mint-soft` hue-shifted #1A3F30→#193E3C. `--accent-pressed` hue-shifted #2A8B6A→#298985. */ --mint:#157570; --mint-soft:#193E3C; --honey:#F5C26B; --honey-soft:#3D2E15; --coral:#F09687; --coral-soft:#3D241F; --coral-vivid:#F05A50; /* WS9: unified with --fc-badge-missed; was #FF7B6F (grade btn now matches badge) */ --coral-lift:#FFB8AE; --peri:#A89AE8; --peri-soft:#2A234A; --sky:#8EA020; --sky-soft:rgba(142,160,32,.14); /* WS9: repurposed for Axiom card identity (lime-gold H=68°); --info + --tier-platinum now carry explicit #79B9DD */ /* patch-007 — Pharmacopia violet (dark-mode pair). --violet-deep is intentionally a *lift* in dark mode (one ramp stop brighter than --violet) so it can serve as a high-contrast meta header on the violet-tinted card surface. Light mode keeps --violet-deep dark. --violet-fill aliases to --violet-soft so type-label pills behave like the other dark-mode accent pills (e.g. .peri-fill resolves to the same deep-tone fill in dark mode). */ --violet-deep:#E898F4; --violet:#B058CC; --violet-soft:#380A42; --violet-fill:#380A42; /* WS9: Pharma identity → magenta-purple H=288°, Δhue from Mastered=26°, Δhue from Recall=87° */ /* patch-007 — Indigo (SAQ) dark-mode pair. Same lift convention as violet: -deep is bright (text on dark fill), -fill aliases to a deep tone so type-label pills sit on a saturated surface like the other accents. */ --indigo-deep:#F5A0CC; --indigo:#DD4490; --indigo-soft:#380A20; --indigo-fill:#380A20; /* WS9b: SAQ → rose H=332°, identity #C02870 (Δhue from Missed H=5° = 37° ✓, was crimson H=345° Δ=20° ✗). --indigo #DD4490 = 4.67:1 AA body ✓; was #E84870 4.73:1 same tier. */ /* WS10 dark-mode aliases — global card rules use --rose for SAQ identity */ --rose-deep:#F5A0CC; --rose:#DD4490; --rose-fill:#380A20; --rose-soft:#380A20; /* v10 Saltbush core ramp dark pair (Axiom identity — DEC-024) */ --saltbush-deep:#C4CAD0; /* 10.8:1 on Slate Dusk #1A1A24 — AAA ✓ */ --saltbush: #A0AAAA; --saltbush-soft:rgba(160,170,170,.14); /* v10 Phase 2c (2026-05-19): --lime-* ramp aliases retired post-sweep — all consumers migrated to --saltbush-*. See feat(design) Phase 2c commit. */ /* v10 Dusk Terrain dark pair (9 hues — locked v10-rev3 values, body-system mapped) */ --dusk-mauve: #b08aaa; --dusk-slate-rose: #C46068; /* v10-rev3: was #c08898, brick-red for Cardio */ --dusk-ochre: #b07868; --dusk-mulga: #8c9870; --dusk-heather: #a08fa0; --dusk-wattle: #D4BC58; /* v10-rev3: was #BFC468, golden-yellow for Renal */ --dusk-eucalypt: #7DAE96; --dusk-coolibah: #8AA4B8; --dusk-pindan: #D8694A; /* v10 Nemesis dark override — crimson lifted #A02030 → #C84050 for AA body on Slate Dusk (--nemesis-ember + --nemesis-gold pass dark without override) */ --nemesis-crimson: #C84050; /* Cross-palette aliasing — "deep" tokens resolve to bright equivalents in dark, "fill" tokens resolve to *-soft. Components reference --sage-deep etc. and get the right value per mode without switching token names. */ --sage-deep:#79B9DD; --sage:#79B9DD; --sage-fill:rgba(121,185,221,.15); /* WS9: Recall identity = sky #79B9DD; decoupled from accent --mint (#157570) */ --honey-deep:var(--honey); --honey-fill:var(--honey-soft); --coral-deep:var(--coral); --coral-fill:var(--coral-soft); --peri-deep:var(--peri); --peri-fill:var(--peri-soft); --sky-deep:var(--sky); --sky-fill:var(--sky-soft); /* AUDIT-2026-05-06 #20 — Dark-mode hover override. Recall grade buttons in dark mode must LIGHTEN on hover (mix toward white), not darken (mix toward #000) which would push the chip toward --bg #111118 and visually disappear. White text on lightened fills: --grade-honed #15803D + 15% white ≈ #2F9355 — white on it ≥4.5:1 AA ✓ --grade-missed #F05A50 + 15% white ≈ #F37368 — white ≥3:1 large/icon OK --grade-mastered #9F72F8 + 15% white ≈ #AC85F9 — white ≥3:1 OK Each fill is also visibly distinct from --bg #111118 (was the bug). */ --grade-honed-hover: color-mix(in srgb, var(--grade-honed) 85%, #fff); --grade-missed-hover: color-mix(in srgb, var(--coral-vivid) 85%, #fff); --grade-mastered-hover: color-mix(in srgb, var(--grade-mastered) 85%, #fff); /* AUDIT-2026-05-06 #21 — SAQ history pill dark-mode palette. Bulma-default greens/red looked neon against Slate Dusk; deepening to muted variants: --saq-pass #2A9D6D — 5.4:1 on --bg #111118 (was 9.0:1 #48c78e — too bright) --saq-borderline #3FA57D — sits between pass and bg --saq-fail #C03450 — 4.9:1 on --bg (was 6.7:1 #f14668 — neon) Pill bg + border still derived via color-mix at use sites. */ --saq-pass: #2A9D6D; --saq-borderline: #3FA57D; --saq-fail: #C03450; /* AUDIT-2026-05-06 #23 — Axiom-formula honey on dark. Light #a07800 on Slate Dusk reads ~3.05:1 (FAIL body AA). Lift to soft gold #D4B250: D4B250 on #111118 = 7.6:1 ✓ AA body, AAA large. Hue preserved (~46° honey-gold) to maintain identity. */ --axiom-honey: #D4B250; /* AUDIT-2026-05-06 #22 — Pharma chip foreground on dark. Pure white on dark-mode violet `var(--violet) #B058CC` reads ~3.65:1 — passes large but feels glare-edge. Soften to #F0E4FF: F0E4FF on #B058CC = 3.55:1 (large/UI ≥3:1 ✓) Visually muted to fit dark-mode ambient palette. */ --text-on-pharma: #F0E4FF; /* Role aliases */ --accent:var(--mint); --accent-pressed:#298985; --accent-soft:var(--mint-soft); /* Phase 8c: text on `--accent` flips to white in dark mode. White on `#157570` is 5.51:1 — passes body AA ✓. `--accent-pressed` #298985 (H=177°, hue-matched to new mint) — used mainly as box-shadow accent edge on buttons; 4.26:1 on dark bg passes large-text AA. */ --accent-on: white; --accent-text: #1E9E98; /* WS9-fix: text-safe accent — 5.3:1 AA body ✓ on --surface. --accent #157570 = 3.1:1 (icon/fill OK, body text FAIL). Use --accent-text for body-size text labels. */ --success:var(--mint); --warn:#FFB347; --err:#E07A70; --info:#79B9DD; /* WS9: explicit — sky repurposed for Axiom identity */ --hero-recall-accent:var(--sage,#79B9DD); --hero-axiom-accent:var(--saltbush,#C4CAD0); /* v10: was var(--lime, #8EA020) — migrated DEC-024 */ /* Dark-mode button overrides: destructive bg must stay dark enough for white text. In dark mode --coral-deep→var(--coral)=#F09687 (salmon) = 2.2:1 FAIL. Use light-mode coral-deep value (#8B3D34) which gives white 7.7:1 AAA. */ --btn-bg-destructive: #8B3D34; /* Legacy semantic aliases */ --green:var(--mint); --green-bg:var(--mint-soft); --green-soft:var(--mint-soft); --orange:var(--coral); --orange-bg:var(--coral-soft); --purple:var(--peri); --purple-bg:var(--peri-soft); --red:var(--coral); --red-bg:var(--coral-soft); --amber:var(--honey); --amber-bg:var(--honey-soft); --gold:var(--honey); --warn-bg:var(--honey-soft); /* Surface aliases — dark-mode parity with :root (WS3 v9.1). Same canonical resolution. --surface-alt → FLOAT (surface-elevated #222229) --surface-alt2 → CARD (surface #18181F) */ --surface-alt:var(--surface-elevated); --surface-alt2:var(--surface); --shadow-sm:0 1px 3px rgba(0,0,0,0.4); --shadow-md:0 4px 12px rgba(0,0,0,0.4); --shadow-lg:0 10px 30px rgba(0,0,0,0.6); --shadow-glow:0 4px 16px rgba(21,117,112,0.22); /* §1 Badge tier medals — dark-mode values for Slate Dusk bg (#111118). Phase 7 (Stage 2 D4:a): platinum + gold now alias to theme-split tokens so they auto-resolve correctly. Bronze + silver keep their explicit dark lifts (different design intent than light-mode lifts). */ --tier-bronze: #E09040; /* dark: 7.37:1 on #111118 */ --tier-silver: #D4D4D4; /* dark: 12.67:1 */ --tier-gold: var(--honey-deep); /* dark resolves to #F5C26B */ --tier-platinum: #79B9DD; /* dark: explicit — was var(--sky-deep) but sky repurposed for Axiom */ /* Ph6 — card type text colors dark-mode overrides (≥4.5:1 on dark surface) */ /* v10 (2026-05-19): Axiom dark migrated lime #A8C020 → saltbush #C4CAD0 (10.8:1 AAA on Slate Dusk ✓) */ --type-saq:#F08098;--type-axiom:var(--saltbush-deep);--type-recall:#79B9DD;--type-pharma:#B090F0; /* Card v2 Phase 2 — deep -label tokens dark-mode overrides (light text on dark tinted surfaces ≥4.5:1). */ --grade-mastered-label:#C4A8FF; --grade-missed-label:#FF8F85; --grade-honed-label:#22c55e; --grade-hazy-label:#F59E0B; --grade-blank-label:#FF8F85; --recall-reveal-label:#79B9DD; --saq-reveal-label:#F070BA; --pharma-reveal-label:#CC82E8; --axiom-reveal-label:#A0AAAA; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* Native-feel audit: single nuclear reduced-motion override. Zeroes the duration tokens so every token-driven transition/animation collapses. 0.01ms (not 0) keeps transitionend/animationend firing for JS state. */ @media (prefers-reduced-motion: reduce){ :root{ --duration-xs:0.01ms; --duration-sm:0.01ms; --duration-md:0.01ms; --duration-lg:0.01ms; --duration-xl:0.01ms; } } /* ═══════════════════════════════════════════════ KNOWLEDGE-MAP DESIGN TOKENS (WS11: moved verbatim from knowledge-map.css) The map is an always-dark canvas; these #mapRoot-scoped vars override the :root/html.dark palette for elements inside #mapRoot (id specificity wins regardless of source order). Hex is permitted here (tokens.css is exempt). ═══════════════════════════════════════════════ */ #mapRoot { --bg: #0E1117; --surface: #161B25; --surface2: #1E2535; --surface3: #252D3F; --border: #2A3347; --border2: #3A4560; --text: #E7ECF3; --text-muted: #8A93A5; --text-dim: #5A6473; /* ── MASTERY palette ──────────────────────────────────────────────── Amethyst / Honey / Coral per spec. Distinct from high-yield overlay. ────────────────────────────────────────────────────────────────────── */ --mastery-strong: #9F72F8; /* amethyst — Mastered */ --mastery-developing: #E0A23A; /* honey — Developing */ --mastery-needs-work: #F05A50; /* coral — Needs work */ --mastery-not-started: #38BDF8; /* sky — Not started (has cards, no reviews yet) */ --mastery-no-cards: #3A4250; /* hollow — no cards (corpus gap) */ /* ── grade distribution bar (detail panel only) ──────────────────── Same CVD-safe ramp: warm rose → amber → teal → blue-violet → grey ────────────────────────────────────────────────────────────────────── */ --grade-1: #F87171; /* rose-400 — Blank (missed) */ --grade-2: #FBBF24; /* amber-400 — Hazy & Mixed */ --grade-3: #34D399; /* emerald-400 — Honed */ --grade-4: #818CF8; /* indigo-400 — Mastered */ --grade-u: #3A4250; /* slate — Ungraded */ /* ── COOL hue reserved for structural / cross relationships ───────── Distinct from grade-2 amber. Blue used ONLY for cross edges / integration. ────────────────────────────────────────────────────────────────────── */ --cool-cross: #38BDF8; /* sky-400 — cross-chapter structural */ --cool-cross-bg: rgba(56,189,248,0.10); --cool-cross-border: rgba(56,189,248,0.35); /* ── frontier / ready-to-introduce ─────────────────────────────────── */ --frontier-ring: #38BDF8; /* sky-400 — Ready to introduce (per spec) */ /* co-requisite edge (dashed, neutral) */ --edge-coreq: #4A5568; /* prerequisite edge (warm grey) */ --edge-prereq: #8A93A5; /* ── HIGH-YIELD fill-heatmap tints ────────────────────────────────── FILL tints applied to node background. Distinct from mastery border ring. Strengthened for dark-mode legibility: high/med/low clearly distinct. high = rose-red (warm, high luminance+saturation) med = vivid amber-gold (mid luminance, high saturation — NOT muddy brown) low = teal (cool, lower luminance — clearly different axis from med) CVD-safe: luminance AND hue differ across all three levels. ────────────────────────────────────────────────────────────────────── */ --hy-high-fill: rgba(239,68,68,0.38); /* rose-500 fill tint — vivid red */ --hy-high-bg: rgba(239,68,68,0.28); --hy-high-border:rgba(239,68,68,0.75); --hy-high-color: #FC8585; /* brighter rose for text on dark */ --hy-med-fill: rgba(251,191,36,0.32); /* amber-400 fill tint — vivid gold */ --hy-med-bg: rgba(251,191,36,0.22); --hy-med-border: rgba(251,191,36,0.65); --hy-med-color: #FCD34D; /* amber-300 — bright on dark bg */ --hy-low-fill: rgba(20,184,166,0.22); /* teal-500 fill tint — distinct from amber */ --hy-low-bg: rgba(20,184,166,0.15); --hy-low-border: rgba(20,184,166,0.45); --hy-low-color: #2DD4BF; /* teal-400 — clearly distinct from red+amber */ /* section accents */ --accent-c: #38BDF8; --accent-d: #818CF8; /* WS11: tokens for the two out-of-block hex refs relocated from knowledge-map.css */ --scope-toggle-active-text: #bfe7fb; /* active state on rgba(sky,0.14) bg */ --km-hy-active: #F87171; /* = --grade-1; hy-toggle chip active */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; --detail-w: 490px; --spine-max: 680px; } /* ==================================================================== toast.css — styling for the unified toast singleton (pwa/toast.js). Sprint E2 / Track A. Consolidates the inline styles previously scattered across app.js (.cicm-toast), planner-overview.js (#po-toast), coverage-spine-badges.js (.cov-toast) and focus-mode.css (nemesis-tamed). Register after tokens.css in pwa/css/_manifest.js. ==================================================================== */ /* Host is a logical wrapper only — the positioned stacks do the layout. */ .cicm-toast-host { display: contents; } /* Two ARIA live regions per stack collapse into one visual column. */ .cicm-toast-region { display: contents; } /* One fixed visual stack per position. */ .cicm-toast-stack { position: fixed; z-index: 9999; /* above tab bar (200) + sheets/modals (≤999) */ display: flex; flex-direction: column; gap: 6px; pointer-events: none; /* toasts re-enable pointer-events themselves */ } .cicm-toast-stack--bottom-center { left: 0; right: 0; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); align-items: center; } .cicm-toast-stack--top-right { top: calc(16px + env(safe-area-inset-top, 0px)); right: 14px; align-items: flex-end; } /* --- The toast itself ------------------------------------------------ */ .cicm-toast { pointer-events: auto; display: flex; align-items: center; gap: 8px; max-width: min(86vw, 440px); padding: 10px 16px; border: 1px solid var(--border, rgba(255, 255, 255, .12)); border-radius: var(--radius-md, 10px); background: var(--surface, #222); color: var(--text, #fff); font-family: var(--font-sans, 'Albert Sans', system-ui, sans-serif); font-size: 13px; line-height: 1.4; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(8px); transition: opacity .14s ease, transform .14s ease; } .cicm-toast--in { opacity: 1; transform: translateY(0); } .cicm-toast--out { opacity: 0; transform: translateY(8px); } .cicm-toast--clickable { cursor: pointer; } .cicm-toast__body { flex: 1 1 auto; min-width: 0; } /* --- Tone variants (token-driven) ----------------------------------- */ .cicm-toast--error { font-weight: 500; border-color: var(--coral-deep, #8B3D34); background: var(--coral-fill, #F4D7D2); color: var(--coral-deep, #8B3D34); } .cicm-toast--success { border-color: var(--grade-honed); } .cicm-toast--warn { border-color: var(--honey, #E0A33A); } .cicm-toast--info { border-color: var(--border, rgba(255, 255, 255, .12)); } .cicm-toast--loading { border-color: var(--border, rgba(255, 255, 255, .12)); opacity: .96; } /* --- Action + dismiss controls -------------------------------------- */ .cicm-toast__action { flex: 0 0 auto; background: transparent; border: 0; padding: 4px 6px; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; border-radius: var(--btn-radius); } .cicm-toast__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; /* 44px hit target while staying visually compact via negative margin. */ width: 44px; height: 44px; margin: -12px -10px -12px 0; background: transparent; border: 0; color: inherit; font-size: 18px; line-height: 1; opacity: .6; cursor: pointer; } .cicm-toast__close:hover, .cicm-toast__close:focus-visible { opacity: 1; } .cicm-toast__action:focus-visible, .cicm-toast__close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; } /* --- Reduced motion: fade only, no slide --------------------------- */ @media (prefers-reduced-motion: reduce) { .cicm-toast { transition: opacity var(--duration-sm) linear; transform: none; } .cicm-toast--in, .cicm-toast--out { transform: none; } } /* §3 Page container — body IS the centred container in this codebase. The v9.1 spec lists both direct and a dedicated .app-root wrapper as canonical; this PWA uses body. Drift report §6 makes this explicit so nobody adds an .app-root nest later. */ /* v172 — Status-zone backdrop. iOS Safari + standalone PWA both render the status bar text over page content when scrolled; the body's padding-top only protects the FIRST element, not subsequent headings (e.g. SAQ Block, block subheadings). A fixed-position backdrop covering the safe-area-top zone hides scrolled content behind it without changing layout. */ @media(max-width:600px){ body::before{ content:''; position:fixed;top:0;left:0;right:0; height:env(safe-area-inset-top,0); background:var(--bg); z-index:100;pointer-events:none; } /* Bottom safe-area filler — prevents dark strip below tab bar */ body::after{ content:''; position:fixed;bottom:0;left:0;right:0; height:env(safe-area-inset-bottom,0); background:color-mix(in srgb,var(--bg) 90%,transparent); z-index:199;pointer-events:none; } } body{ margin:0 auto;max-width:var(--page-max); padding:env(safe-area-inset-top,12px) 24px calc(72px + env(safe-area-inset-bottom,0px)); font-family:var(--font-sans); /* v9.1 §2 spec is 15px base; this codebase ships at 16px from earlier UX feedback re. small text on large displays. Leaving at 16px in P1 and flagging the divergence as a follow-up note for v9.2 review. */ font-size:16px;line-height:1.55;color:var(--text);background:var(--bg); -webkit-font-smoothing:antialiased; } /* R-015: dark-mode body transition guarded by reduced-motion preference */ @media(prefers-reduced-motion:no-preference){ body{transition:background var(--duration-md),color .2s} } /* On wide screens the page bg shows behind the centred body — keep the surround flush with --bg so the four-tier surface hierarchy stays clean (warm paper page → warm cream cards). */ html{background:var(--bg)} html.dark{background:var(--bg)} @supports(padding:max(0px)){body{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}} h1{font-size:var(--font-size-3xl);font-weight:500;margin:0;letter-spacing:-0.01em} /* §13 Wordmark — DM Serif Display 400, the only display-font usage outside §4G streak number / §5 done screen. Letter-spacing -0.005em per spec. */ .wordmark{font-family:var(--font-display);font-weight:400;font-size:var(--font-size-3xl);letter-spacing:-0.005em;line-height:1} @media(max-width:600px){.wordmark{font-size:20px}} /* P1·2 + Today-fix #6 — h2 sections feel quiet at §2-spec weight 500. Bump to 600 + breathing room. Numbered prefixes ('1 · ', '2 · ', etc.) replaced by a small coloured identity bar via ::before, scoped per card-type class. Authors drift from §2 ('h2 — 17px / 500'); flag for v9.2 §2 review. */ h2{font-size:var(--font-size-2xl);font-weight:500;margin:28px 0 12px;padding-top:20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:9px} /* The author `h2{display:flex}` above overrides the UA `[hidden]{display:none}` rule, so the `hidden` attribute alone won't collapse a section header. This restores it (used to collapse empty Today sections — recall/SAQ/pharma/ axiom/more-cards). */ h2[hidden]{display:none!important} /* Coloured identity bar — small 4×18 rounded rectangle before the heading text, color-mapped to the card type: section-recall → sky (WS10: sky-blue, matches card identity) section-saq → rose (WS10: rose H=330°, matches card identity · was honey) section-axiom → lime (WS10: lime-gold H=68°, matches card identity · was sky) section-routine → indigo (calm scheduling · was honey, swapped with SAQ for H1) */ h2.section-recall::before, h2.section-saq::before, h2.section-axiom::before, h2.section-routine::before, h2.section-pharma::before, h2.section-more-cards::before{ content:"";display:inline-block;width:4px;height:18px; border-radius:var(--radius-2xs);flex-shrink:0; /* Lift the bar onto the text baseline so it reads as a leading mark. */ align-self:center; } /* Center the Today-tab section headings so they line up over their centered cards (product request). The colored identity bar + title + sub all center as a row. */ h2.section-recall, h2.section-saq, h2.section-axiom, h2.section-pharma, h2.section-more-cards, h2.section-routine{justify-content:center} /* WS10 — section heading identity bars aligned with card hue families */ h2.section-recall::before {background:var(--sky)} h2.section-saq::before {background:var(--rose)} h2.section-axiom::before {background:var(--saltbush)} h2.section-routine::before {background:var(--indigo)} /* patch-007 — Pharmacopia identity bar in violet (Iatrogenic drug accent). */ h2.section-pharma::before {background:var(--violet, #7F77DD)} h2.section-more-cards::before{background:color-mix(in srgb,var(--text-muted, #888) 50%,transparent)} /* Wave 6c-4 — More Cards ribbon section. Rows render at reduced opacity so they read as a "preview" of cards the user is filtering out via intensity; clicking promotes them into the live session. */ .more-cards-grid{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;} .more-cards-row{ opacity:0.62; filter:saturate(0.7); cursor:pointer; transition:opacity var(--duration-sm),filter var(--duration-sm),transform var(--duration-sm); } .more-cards-row:hover{opacity:1;filter:saturate(1);transform:translateX(2px);} .more-cards-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .more-cards-row::before{ content:"+ add to session"; position:absolute;right:8px;top:50%;transform:translateY(-50%); font:600 9px/1 'Albert Sans',system-ui,sans-serif; color:var(--accent);text-transform:uppercase;letter-spacing:0.6px; padding:3px 6px;border-radius:var(--radius-tiny); background:color-mix(in srgb,var(--accent) 12%,transparent); opacity:0;transition:opacity var(--duration-sm);pointer-events:none; } .more-cards-row:hover::before{opacity:1;} h2:first-of-type{border-top:none;padding-top:0;margin-top:14px} h2 .sub{font-weight:400;font-size:var(--font-size-md);color:var(--text-muted)} h3{font-size:var(--font-size-lg);font-weight:500;margin:12px 0 5px} /* --- Lucide-style inline SVG icon support --- */ .icn{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} /* --- Header --- Post-audit: 3-column grid so the wordmark + meta line sits centred horizontally, the avatar + XP rank dot anchor left, and the search / settings buttons anchor right. Equal 1fr columns for the side slots keep the centre column geometrically centred regardless of how wide the side groups grow. */ .app-header{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:18px 0 20px; } @media(max-width:600px){.wordmark{display:none}} .app-header-left{display:flex;align-items:center;gap:8px;justify-self:start;min-width:0} .app-title{display:flex;flex-direction:column;gap:2px;min-width:0;justify-self:center;text-align:center;align-items:center;overflow:hidden} .app-title h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .app-actions{display:flex;gap:6px;align-items:center;justify-self:end} @media(max-width:600px){.app-actions{gap:8px}}/* iOS-005 — raises center-to-center to 44px */ .account-btn{ width:38px;height:38px;border-radius:50%; border:1px solid var(--border);background:var(--accent-soft);color:var(--accent-pressed); cursor:pointer;display:inline-flex;align-items:center;justify-content:center; font-size:var(--font-size-lg);font-weight:700;flex-shrink:0;transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s,opacity .15s; font-family:inherit; } .account-btn:hover{background:var(--accent);color:white;transform:scale(1.04)} .account-btn:active{transform:scale(0.96)} html.dark .account-btn{background:var(--accent-soft);color:var(--accent)} html.dark .account-btn:hover{background:var(--accent);color:var(--accent-on)} /* XP rank dot — small coloured indicator in the header. Colour encodes the user's current rank (Intern → Director). Tooltip on hover shows the rank name + XP. Clicking jumps to the History tab. */ .xp-rank-dot{ display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer; padding:4px;border-radius:50%;background:transparent;border:none; transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm);font-family:inherit;line-height:1; margin-left:4px; } .xp-rank-dot:hover{background:var(--surface-alt);transform:scale(1.15)} .xp-rank-dot:active{transform:scale(0.96)} .xp-rank-dot .dot{ width:10px;height:10px;border-radius:50%;display:block; background:currentColor; box-shadow:0 0 0 2px var(--bg),0 0 0 3px currentColor; } /* Daily XP goal bar — sits directly under the streak bar. Pulls today's XP from localStorage 'cicm-focus-day' (set by Focus Mode on session end) and the goal from state.settings.dailyXpGoal. */ /* T-P1-01 — XP goal merged into streak-bar bottom edge. .streak-xp-bar is a 3px absolute indicator at bottom of the streak card; .streak-xp is an inline counter that appears inside the flex row. Both are hidden until the user earns today's first XP (updateXpGoalBar). */ .streak-xp-bar{position:absolute;bottom:0;left:0;height:3px;background:var(--accent);border-radius:0 0 var(--radius) var(--radius);width:0%;transition:width .4s ease,background .25s ease,box-shadow .25s ease;pointer-events:none} .streak-bar.hit .streak-xp-bar{background:var(--gold);box-shadow:0 0 8px rgba(255,217,61,0.6)} .streak-xp{display:none;align-items:center;gap:3px;font-size:var(--font-size-xs);color:var(--text-muted);font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap;margin-left:auto} .streak-xp.shown{display:inline-flex} .streak-xp .xp-flash{color:var(--accent-text);font-weight:600} .streak-bar.hit .streak-xp .xp-flash{color:var(--honey-deep);font-weight:700} html.dark .streak-bar.hit .streak-xp .xp-flash{color:var(--honey)} /* Badge haul — sits between stats row and Save&exit on the Focus done screen. Only renders if newBadges.length > 0. Each badge slides in from right staggered var(--duration-xs) apart for a parade-style reveal. */ .fc-haul{margin:18px 0 4px;padding:14px 12px 18px;background:var(--surface-alt);border-radius:var(--radius-lg);border:1px solid var(--border)} .fc-haul-title{font-size:var(--font-size-xs);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:11px} .fc-haul-row{display:flex;justify-content:center;gap:14px;overflow-x:auto;padding:6px 4px 4px;scrollbar-width:none} .fc-haul-row::-webkit-scrollbar{display:none} @keyframes haulSlideIn{from{opacity:0;transform:translateX(40px) scale(0.7)}to{opacity:1;transform:none}} .fc-badge-haul{ display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0; animation:haulSlideIn .42s var(--ease-spring) backwards; } .fc-badge-haul:nth-child(1){animation-delay:0ms} .fc-badge-haul:nth-child(2){animation-delay:80ms} .fc-badge-haul:nth-child(3){animation-delay:160ms} .fc-badge-haul:nth-child(4){animation-delay:240ms} .fc-badge-haul:nth-child(5){animation-delay:320ms} .fc-badge-haul:nth-child(6){animation-delay:400ms} /* B9-fix: suppress haul slide-in animation under reduced motion. */ @media(prefers-reduced-motion:reduce){.fc-badge-haul{animation:none}} .fc-badge-haul-icon{ width:48px;height:48px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:24px;line-height:1; background:var(--bg); border:2px solid var(--gold); box-shadow:0 0 0 4px rgba(255,217,61,0.2),0 2px 8px rgba(0,0,0,0.08); transition:transform .15s; } .fc-badge-haul.tier-silver .fc-badge-haul-icon{border-color:var(--tier-silver);box-shadow:0 0 0 4px rgba(192,192,192,0.25),0 2px 8px rgba(0,0,0,0.08)} .fc-badge-haul.tier-bronze .fc-badge-haul-icon{border-color:var(--tier-bronze);box-shadow:0 0 0 4px rgba(205,127,50,0.22),0 2px 8px rgba(0,0,0,0.08)} .fc-badge-haul.tier-platinum .fc-badge-haul-icon{border-color:var(--tier-platinum);box-shadow:0 0 0 4px rgba(155,213,255,0.3),0 2px 8px rgba(0,0,0,0.1)} .fc-badge-haul:hover .fc-badge-haul-icon{transform:scale(1.1)} .fc-badge-haul-name{font-size:var(--font-size-2xs);font-weight:700;color:var(--text);max-width:72px;line-height:1.2;text-align:center} .fc-badge-haul-tier{font-size:9px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em} /* Nemesis card — top-missed recall card, sits below the streak bar. Contrast bumped per Julian feedback: title uses coral 800 (light) / coral 100 (dark) for ~9:1 contrast vs the surface-alt2 background. */ /* P1·4 — coral left-stripe rendered as an inset overlay rather than a 3px border. The card carries a uniform 1px border on all four sides (so the corners radius cleanly), and a position:absolute ::before draws the coral 3px bar inside the rounded-corner inset. Net effect: the coral reads as the primary visual anchor without the asymmetric- border-width corner artefacts the previous border-left:3px caused. */ .nem{ position:relative;margin:var(--section-gap,12px) 0 0;padding:11px 13px 11px 16px; background:var(--surface-alt2);border:1px solid var(--border); border-radius:var(--radius);cursor:pointer; transition:transform var(--duration-sm),box-shadow .15s;overflow:hidden; } .nem::before{ content:"";position:absolute;left:0;top:0;bottom:0; width:3px;background:var(--coral); } .nem.tamed::before{background:var(--accent)} .nem:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)} /* (border-left-color rule retired — tamed colour now lives on ::before above) */ .nem-head{display:flex;align-items:center;gap:8px;font-size:var(--font-size-sm)} .nem-emoji{font-size:18px;line-height:1;flex-shrink:0} .nem-title{font-weight:700;font-size:var(--font-size-sm);color:var(--coral-deep);text-transform:uppercase;letter-spacing:0.05em} html.dark .nem-title{color:var(--coral)} .nem.tamed .nem-title{color:var(--accent-pressed)} html.dark .nem.tamed .nem-title{color:var(--accent-text)} /* Today-fix v2 #3 — Nemesis attempt pips. Three slots showing last 3 attempts (or pending placeholders when no history yet). Got = sage, missed = coral, pending = neutral grey. The whole strip carries a screen-reader aria-label summarising the history. */ .nem-misses{ margin-left:auto; display:inline-flex;align-items:center;gap:5px; } .nem-pip{ width:9px;height:9px;border-radius:50%; border:1px solid var(--border); background:var(--surface-alt); flex-shrink:0; } /* patch-009 — four-tier grade pips (Mastered / Honed / Hazy / Blank). */ .nem-pip--g4 {background:var(--accent); border-color:var(--accent)} .nem-pip--g3 {background:var(--sage); border-color:var(--sage)} .nem-pip--g2 {background:var(--amber); border-color:var(--amber)} .nem-pip--g1 {background:var(--coral); border-color:var(--coral)} .nem-pip--pending{background:transparent; border-color:var(--border-strong);opacity:0.7} .nem-prompt{font-size:var(--font-size-lg);font-weight:500;color:var(--text);margin:7px 0 8px;line-height:1.4} .nem-history{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .nem-dots{display:flex;gap:5px} .nem-dot{width:9px;height:9px;border-radius:50%;background:var(--surface-alt);border:1px solid var(--border)} .nem-dot--g4{background:var(--accent);border-color:var(--accent)} .nem-dot--g3{background:var(--sage); border-color:var(--sage)} .nem-dot--g2{background:var(--amber); border-color:var(--amber)} .nem-dot--g1{background:var(--coral); border-color:var(--coral)} .nem-tag{font-size:var(--font-size-xs);color:var(--text-muted);font-style:italic} .nem-tame{margin-top:7px;font-size:var(--font-size-xs);color:var(--accent-pressed);font-weight:600} html.dark .nem-tame{color:var(--accent-text)} .nem-tame .progress{font-variant-numeric:tabular-nums;background:var(--accent-soft);padding:1px 5px;border-radius:var(--btn-radius);margin-left:4px;color:var(--accent-pressed)} html.dark .nem-tame .progress{color:var(--accent-text)} .icon-btn{ width:38px;height:38px;border-radius:var(--radius-md); border:1px solid var(--border);background:var(--surface); cursor:pointer;display:inline-flex;align-items:center;justify-content:center; font-size:var(--font-size-2xl);color:var(--text);transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s,opacity .15s; } .icon-btn:hover{background:var(--surface-alt);border-color:var(--accent);color:var(--accent)} .icon-btn:active{transform:scale(0.96)} .icon-btn .icn{width:18px;height:18px} /* R-027 — :focus-visible rings for all icon-level interactive elements. Restores keyboard-visible focus that outline:none strips. Phase 4: transition:outline-offset .1s so ring pops in rather than snapping. */ .icon-btn:focus-visible, .gear-tap:focus-visible, .ns-modal-close:focus-visible, .card-flag-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;transition:outline-offset .1s} @media(prefers-reduced-motion:reduce){ .icon-btn:focus-visible,.gear-tap:focus-visible, .ns-modal-close:focus-visible,.card-flag-btn:focus-visible, .tab:focus-visible{transition:none} } /* WS11 v9.7-foundation (2026-05-19) — Universal :focus-visible baseline. WCAG 2.2 SC 2.4.13 (Focus Appearance): ≥2px ring, ≥3:1 contrast vs adjacent. Specificity 0,0,1 (the * + :focus-visible pseudo) so any per-component ring (R-027, .saq-callout-btn, .toggle, etc.) still wins. Sites that previously stripped outline:none without replacement now inherit this ring automatically. Per-element `outline:none` should be paired with a custom ring (box-shadow) or removed — never left bare. */ *:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} /* v10 (2026-05-19) — .phase-dot primitive. Section/phase taxonomy chip used in Today queue, Library, Curriculum tree, and any list/row where a card needs "which body system?" wayfinding. Set --phase-color on the element (typically via inline style from a render fn that calls sectionColor(letter)). Default size 6px dot; the inline label is optional. See DESIGN-SYSTEM.md §1 v10 + DEC-026 (body-system mapping). */ .phase-dot{ display:inline-flex;align-items:center;gap:6px; padding:2px 8px 2px 6px; background:color-mix(in srgb,var(--phase-color) 14%,transparent); border:1px solid color-mix(in srgb,var(--phase-color) 40%,transparent); border-radius:var(--radius-pill); font-size:var(--font-size-2xs,10px);font-weight:600; color:color-mix(in srgb,var(--phase-color) 30%,var(--text)); white-space:nowrap; } .phase-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--phase-color);display:inline-block;flex-shrink:0} .phase-dot--bare{padding:0;background:transparent;border:none;color:var(--text-faint)} /* dot-only variant */ /* v10 — .pp-grade-bar segmented progress primitive (grade tokens, NOT Dusk). 4 segments: mastered, honed, hazy, missed. Pending = empty bar bg. Width set inline per segment from per-phase grade counts. See DESIGN-SYSTEM.md §1 v10 — phase-progress uses grade tokens; phase identity stays in a small header dot, never on the bar (Tier-D discipline #4). */ .pp-grade-bar{ height:6px;background:var(--surface-elevated);border-radius:var(--radius-pill); overflow:hidden;border:1px solid var(--border);display:flex; } .pp-grade-bar>.seg{height:100%;transition:width .15s} .pp-grade-bar>.seg--mastered{background:var(--grade-mastered)} .pp-grade-bar>.seg--honed{background:var(--grade-honed)} .pp-grade-bar>.seg--hazy{background:var(--grade-hazy)} .pp-grade-bar>.seg--missed{background:var(--grade-missed)} .subtitle{color:var(--text-muted);font-size:var(--font-size-md)} .badges{display:flex;gap:5px;flex-wrap:wrap} .badge{display:inline-block;padding:3px 8px;border-radius:var(--btn-radius);font-size:var(--font-size-xs);font-weight:600;line-height:1.3} .badge-day1{background:var(--sky-fill);color:var(--sky-deep)} html.dark .badge-day1{background:var(--sky-soft);color:var(--sky)} .badge-warn{background:var(--warn-bg);color:var(--warn)} .badge-verify{background:var(--amber-bg);color:var(--honey-deep)} html.dark .badge-verify{color:var(--amber)} .badge-live{background:var(--green-bg);color:var(--green)} /* §4E confidence pill mapping — multi-accent per v9.1 §1. Critical → coral, Low → honey, Intermediate → sage-fill (light) / sage-deep (dark via aliasing), High → sage filled. Token-driven so light/dark resolve automatically. */ .badge-confidence{padding:2px 7px;font-size:var(--font-size-xs);font-weight:600;letter-spacing:0.02em} /* patch-008 — universal Missed / Honed / Mastered. The library card confidence badge is rendered via badge-{Missed|Honed|Mastered}. */ .badge-Missed {background:var(--coral-fill);color:var(--coral-deep)} .badge-Honed {background:var(--honey-fill);color:var(--honey-deep)} .badge-Mastered {background:var(--accent); color:var(--accent-on)} .badge-unrated{background:var(--surface-alt);color:var(--text-faint)} /* --- Tabs (adaptive: icon-only mobile, icon+text desktop) --- Centred horizontally per post-v9.1 audit feedback. Below 640px the tab text hides anyway; the icon row stays scrollable for narrow viewports without losing the centre alignment on wide screens. */ .tabs{ display:flex;justify-content:center;gap:4px; border-bottom:1px solid var(--border); margin:0 0 14px;position:sticky;top:0;background:var(--bg); z-index:8;padding:6px 0 0;overflow-x:auto;scrollbar-width:none; } .tabs::-webkit-scrollbar{display:none} .tab{ padding:10px 12px;min-height:44px;background:transparent;border:none;border-bottom:2px solid transparent; cursor:pointer;font-size:var(--font-size-md);font-weight:600;color:var(--text-muted); font-family:inherit;display:flex;align-items:center;gap:7px;white-space:nowrap; transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } .tab:hover{color:var(--text)} .tab.active{color:var(--accent-text);border-bottom-color:var(--accent)} /* §4H Active state — underline only, no rounded outline. The browser focus ring is gated behind :focus-visible so keyboard navigation still gets a visible ring without polluting mouse / touch interaction. AP9 fix. */ .tab:focus{outline:none} .tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:0;transition:outline-offset .1s} .tab .icn{width:18px;height:18px} .tab .tab-text{display:none} @media(min-width:640px){ .tab{padding:9px 16px} .tab .tab-text{display:inline} } /* Admin flag badge — only flex when not hidden (avoids ghost dot from inline display:flex + hidden attr clash) */ #adminFlagCount:not([hidden]){display:flex} /* §4H Tab count chip — numeric badge, never an unlabelled colour-only dot. Renderer hides the chip entirely when count is 0. AP4 fix. Today-fix #11 — count chip ONLY renders when its parent tab is the active tab. When the user is on a different tab, the count hides so the menu bar stays uncluttered. */ .tab .count{ display:inline-block;background:var(--accent-soft);color:var(--accent-text); font-size:var(--font-size-2xs);padding:1px 6px;border-radius:var(--radius-pill);font-weight:500; min-width:14px;text-align:center;line-height:1.4;margin-left:4px; } .tab .count[hidden]{display:none} .tab .count{display:none!important}/* v125 — never show card counts on tabs */ .tab-content{display:none;background:var(--bg)} .tab-content.active{display:block;animation:fadeIn .15s} /* Opacity-only animation — the prior transform:translateY triggered GPU layer creation on iOS which invalidated the tab bar backdrop-filter, causing a white flash. Pure opacity avoids the stacking-context churn. */ @keyframes fadeIn{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion: reduce){.tab-content.active{animation:none}} /* --- Setup strip — Phase 1 dynamic dashboard --- */ /* Post-audit: subtitle-row is now justified to the centre under the wordmark. The subtitle-text drops its flex:1 stretch so the content can shrink-to-fit and stay properly centred, with ellipsis still active on overflow. */ .subtitle-row{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:2px;max-width:100%;min-width:0} /* hdr-block truncates long block names (e.g. "B3 Respiratory") with ellipsis; abbreviated form set by JS — full block name always present in title tooltip. */ .hdr-block{font-size:var(--font-size-sm);font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--btn-radius);border:1px solid transparent;transition:background var(--duration-sm),border-color .12s} .hdr-block:hover{background:var(--surface-alt2);border-color:var(--border)} .hdr-block::after{content:'⌄';font-size:var(--font-size-2xs);opacity:.55;line-height:1} .hdr-block.has-mismatch{background:color-mix(in srgb,var(--coral) 12%,transparent);border-color:color-mix(in srgb,var(--coral) 35%,var(--border));color:var(--coral-deep, var(--text))} html.dark .hdr-block.has-mismatch{color:var(--coral)} .hdr-meta{font-size:var(--font-size-xs);color:var(--text-muted);white-space:nowrap;display:flex;align-items:center;gap:5px} .hdr-date{display:none;font-size:var(--font-size-sm);color:var(--text-muted)} .hdr-due-badge{display:inline-flex;align-items:center;padding:0px 6px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--red) 12%,var(--surface));border:0.5px solid var(--red);font-size:var(--font-size-xs);font-weight:600;color:var(--red);line-height:18px} .hdr-due-badge.done{background:color-mix(in srgb,var(--green) 10%,var(--surface));border-color:var(--green);color:var(--green)} /* hdr-stats: replaces pill chips in header; plain coloured spans, no border/padding overhead */ .hdr-stats{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;color:var(--text-muted);font-size:11px} .hdr-stat--due {color:var(--red);font-weight:600} .hdr-stat--axiom {color:var(--saltbush);font-weight:600} .hdr-stat--pearl {color:var(--honey);font-weight:600;display:inline-flex;align-items:center;gap:2px} .hdr-stat--pearl .icn{width:11px;height:11px} /* FSRS global-state row (D) + session-split row (B) */ .hdr-stat--fsrs-new {color:var(--sky-deep);font-weight:600} .hdr-stat--fsrs-learn{color:var(--amber);font-weight:600} .hdr-stat--fsrs-mat {color:var(--sage);font-weight:600} .hdr-stat--fsrs-over {color:var(--red);font-weight:700} .hdr-stat--fsrs-rev {color:var(--text-faint);font-weight:600} /* dark: --sky-deep resolves to lime-gold (axiom); override to sky-blue (recall). --sage→sky-blue clashes with new, so mature gets --sky (lime-gold) */ html.dark .hdr-stat--fsrs-new {color:var(--sage)} html.dark .hdr-stat--fsrs-mat {color:var(--sky)} /* Tooltip — pointer:fine only (no hover on iOS) */ @media(pointer:fine){ /* Both .app-title and .hdr-stats carry overflow:hidden by default to constrain text. That also clips the absolutely-positioned ::after tooltip. Override both here so the tooltip can escape its container. The h1 handles its own overflow independently (text-overflow:ellipsis). */ .app-title{overflow:visible} .hdr-stats{overflow:visible} .hdr-tip{position:relative} .hdr-tip::after{ content:attr(data-tip); position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%); background:var(--text);color:var(--bg); font-size:10px;font-weight:500;line-height:1.3; padding:4px 8px;border-radius:var(--btn-radius);white-space:nowrap; pointer-events:none;z-index:200; opacity:0;transition:opacity var(--duration-sm) .25s; } .hdr-tip:hover::after{opacity:1} } /* Wide header (>480px): single horizontal row — [dots | node | stats], centred as a group */ @media(min-width:481px){ .app-title{ display:flex; flex-direction:row; justify-content:center; align-items:center; gap:16px; width:100%; text-align:left; } .subtitle-row{display:contents} .hdr-block{order:2;max-width:280px;font-size:13px;font-weight:600} .hdr-stats{order:3;font-size:12px;gap:6px;flex-shrink:0} .hdr-stat--pearl .icn{width:12px;height:12px} #hdrDeckState{order:2} #hdrMeta{order:3} } /* Compact header (≤480px): 3-row layout — node / stats / dots, within same height budget */ @media(max-width:480px){ .app-header{padding:4px 0 2px} .app-title{gap:1px} .hdr-block{font-size:10.5px;padding:0 4px} .hdr-block::after{display:none} .hdr-stats{font-size:9.5px;gap:3px} .hdr-stat--pearl .icn{width:9px;height:9px} } .gear-tap{ display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px;border-radius:50%;border:none;background:transparent; color:var(--text-muted);cursor:pointer;font-family:inherit;padding:0;flex-shrink:0; transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } .gear-tap:hover,.gear-tap.active{background:var(--surface-alt);color:var(--accent)} .gear-tap .icn{width:15px;height:15px} /* Gear in subtitle-row: only visible on wide pointer screens */ .gear-tap--subtitle{align-self:center} body[data-input="touch"] .gear-tap--subtitle{display:none!important} @media(max-width:599px){.gear-tap--subtitle{display:none!important}} /* WS2 (Phase 9, 2026-05-05) — .gen-cta + .gen-cta-head removed (#genCtaPanel retired session 68; HTML deleted + CSS unused). .gen-cta-pills KEPT — still consumed by live setupExpandedPanel layout. */ .gen-cta-pills{display:flex;gap:7px;flex-wrap:wrap} .setup-pill{ display:inline-flex;align-items:center;gap:6px;position:relative; padding:8px 12px;font-size:var(--font-size-md);font-weight:600; background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm); color:var(--text);cursor:pointer;font-family:inherit; transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm);flex:1;justify-content:center;min-width:130px; } .setup-pill:hover{border-color:var(--accent);color:var(--accent)} .setup-pill .icn{width:14px;height:14px} .setup-pill .chev{width:11px;height:11px;color:var(--text-faint);margin-left:auto} .btn-primary-fw{ width:100%;padding:13px;background:var(--accent);color:white; border:none;border-radius:var(--radius-md);font-size:var(--font-size-lg);font-weight:700;cursor:pointer; font-family:inherit;box-shadow:0 3px 0 var(--accent-pressed);transition:background .1s,color .1s,border-color .1s,box-shadow .1s,transform .1s,opacity .1s; display:inline-flex;align-items:center;justify-content:center;gap:7px; } .btn-primary-fw:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--accent-pressed)} .btn-primary-fw:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-pressed)} .btn-primary-fw:disabled{opacity:0.6;cursor:wait;box-shadow:0 2px 0 var(--accent-pressed)} .btn-primary-fw .icn{width:15px;height:15px} .setup-expanded{ margin:11px 0 0;padding:12px 13px; background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius); display:flex;flex-direction:column;gap:10px;animation:slideDown var(--duration-md) ease-out; } @keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .setup-expanded-head{display:flex;align-items:center;font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;font-weight:600} .setup-expanded-head .close{margin-left:auto;background:none;border:none;color:var(--text-faint);cursor:pointer;padding:2px;display:inline-flex;align-items:center} .setup-expanded-head .close:hover{color:var(--text)} .setup-expanded-head .close .icn{width:14px;height:14px} .setup-expanded-meta{font-size:var(--font-size-xs);color:var(--text-muted);font-style:italic;margin-top:1px} .setup-dropdown{ position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm); box-shadow:var(--shadow-md);padding:5px 0;font-size:var(--font-size-md);width:230px;z-index:60; top:100%;left:0;margin-top:4px;display:none; } .setup-dropdown.open{display:block} .setup-dropdown .opt{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--text)} .setup-dropdown .opt:hover{background:var(--surface-alt)} .setup-dropdown .opt.sel{background:var(--accent-soft);color:var(--accent-pressed);font-weight:600} html.dark .setup-dropdown .opt.sel{color:var(--accent)} .setup-dropdown .opt-sub{font-size:var(--font-size-xs);color:var(--text-muted);font-weight:400;margin-left:auto} .setup-dropdown .opt .icn{width:14px;height:14px} /* --- Streak bar (v2 polish — primary streak block + secondary stats) --- */ .streak-bar{ display:flex;align-items:center;gap:12px;padding:11px 14px; background:linear-gradient(135deg,var(--accent-soft) 0%,var(--bg) 60%); border:1px solid var(--border);border-radius:var(--radius); /* §3 T5 — use --section-gap (12px) so the rhythm between Streak → Hero → Nemesis → Rapid Recall heading is consistent. */ margin:var(--section-gap,12px) 0 0;font-size:var(--font-size-sm);flex-wrap:wrap;cursor:pointer; transition:transform var(--duration-sm), box-shadow .15s; /* T-P1-01 — needed for .streak-xp-bar absolute bottom-edge indicator */ position:relative;overflow:hidden; } .streak-bar:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)} /* Primary streak block — flame + bold number + label, visually dominant */ .streak-primary{ display:flex;align-items:center;gap:8px;padding-right:12px; border-right:1px solid var(--border); } .streak-primary .streak-flame{font-size:var(--font-size-3xl);line-height:1} .streak-primary .streak-number{font-size:20px;font-weight:700;color:var(--accent-pressed);line-height:1;font-variant-numeric:tabular-nums} html.dark .streak-primary .streak-number{color:var(--accent)} /* Today-fix #1 — number + label sit inline (was display:block which stacked the label below the number). Now baseline-aligned in the parent flex row so they read as a single 'X DAY STREAK' phrase. */ .streak-primary .streak-label{font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;font-weight:600;align-self:baseline} /* Freeze count badge — only renders when freezes are banked. Sky family for "reference / informational" per v9.1 §1. */ .streak-freeze{ display:none;align-items:center;gap:4px; font-size:var(--font-size-xs);font-weight:600;color:var(--sky-deep); background:var(--sky-fill);border-radius:var(--radius-sm);padding:2px 7px; } html.dark .streak-freeze{color:var(--sky);background:var(--sky-soft)} .streak-freeze.shown{display:inline-flex} .streak-item{display:flex;align-items:center;gap:5px;color:var(--text);font-weight:500} /* P1·1 — uppercase every meta label in the streak band so the band reads as a tight stat strip alongside the 'DAY STREAK' primary label. The numeric values stay in their natural casing (mostly digits anyway). */ .streak-item .label{color:var(--text-muted);font-size:var(--font-size-xs);font-weight:500;text-transform:uppercase;letter-spacing:0.05em} .streak-item .icn{width:14px;height:14px;color:var(--accent)} /* Today-fix #2 — week pips render Monday→Sunday with day labels. Today's column is the visual anchor: pip bumps to 14px, fills solid with var(--accent), gets a glow ring; weekday label is bolder + brighter. Filled (mint) days are completed; partial (honey) means a partial session; future days render outlined; before-today days that you missed render in --text-faint outline. */ .streak-progress{display:flex;gap:10px;margin-left:auto;align-items:flex-end} /* Audit fix — column min-width so today's 14px pip doesn't shift the layout vs the 12px non-today pips. All columns reserve the same horizontal real-estate; only the contents differ. */ .streak-day{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:18px} .streak-day-label{font-size:9.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.04em;line-height:1;font-weight:500} .streak-day--today .streak-day-label{color:var(--text);font-weight:700;font-size:var(--font-size-xs)} .streak-day--future .streak-day-label{color:var(--text-faint);opacity:0.55} .streak-dot{width:12px;height:12px;border-radius:50%;background:var(--surface-alt);border:1px solid var(--border);transition:background .2s} .streak-dot.filled{background:var(--green);border-color:var(--green);box-shadow:0 0 6px color-mix(in srgb,var(--accent) 35%,transparent)} .streak-dot.partial{background:var(--amber);border-color:var(--amber)} /* Today-fix v2 — today's pip stays the SAME size as the others (12px) so the pip row reads as an even rhythm. Honey fill marks today (warm colour family, distinct from mint completed days), with a subtle honey-soft ring for emphasis. The bold weekday letter (set via .streak-day--today .streak-day-label) carries the secondary cue. */ .streak-dot.today{ background:var(--honey);border-color:var(--honey); box-shadow:0 0 0 2px color-mix(in srgb,var(--honey) 30%,transparent); } .streak-day--future .streak-dot{opacity:0.5} /* --- Banners --- */ .banner{ padding:12px 14px;border-radius:var(--radius-sm);margin:11px 0 8px; font-size:var(--font-size-md);display:flex;align-items:flex-start;gap:9px;line-height:1.45; } .banner-info{background:var(--accent-soft);color:var(--accent-pressed);border-left:3px solid var(--accent)} html.dark .banner-info{color:var(--accent)} .banner-warn{background:var(--warn-bg);color:var(--honey-deep);border-left:3px solid var(--warn)} html.dark .banner-warn{color:var(--warn)} .banner-err{background:var(--red-bg);color:var(--coral-deep);border-left:3px solid var(--red)} html.dark .banner-err{color:var(--red)} .banner-ok{background:var(--green-bg);color:var(--sage-deep);border-left:3px solid var(--green)} html.dark .banner-ok{color:var(--green)} .all-done-banner{display:flex;align-items:center;justify-content:space-between;gap:8px} .all-done-banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;opacity:.5;padding:2px 6px;font-size:14px;line-height:1;border-radius:var(--radius-tiny);flex-shrink:0} .all-done-banner-dismiss:hover{opacity:1;background:rgba(0,0,0,.08)} /* --- Cards (general) — stats / chart tiles --- WS4 (2026-05-05): original .card renamed to .tile so .card can become the unified study-card primitive. Stat-cards + chart-cards compose .stat-card / .chart-card directly; .tile is used by any generic wrapper that needs the same neutral surface treatment. */ .tile{background:var(--surface-alt2);border:1px solid var(--border);border-radius:var(--radius);padding:13px;transition:transform var(--duration-sm),box-shadow .15s} .tile:hover{box-shadow:var(--shadow-sm)} /* --- Details/Toggles --- */ details{margin:8px 0;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)} details>summary{padding:10px 13px;cursor:pointer;list-style:none;font-weight:500;display:flex;align-items:center;gap:8px;font-size:var(--font-size-lg)} details>summary::-webkit-details-marker{display:none} /* §9 Disclosure carets — SVG chevron data URI, never Unicode ▸ ▾. Inline data URI keeps the all-CSS / no-build constraint while killing AP19. Stroke uses currentColor so the caret follows summary text colour. */ details>summary::before{ content:"";display:inline-block;width:14px;height:14px;flex-shrink:0; background-color:var(--text-muted); -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; transition:transform .15s; } details[open]>summary::before{transform:rotate(90deg)} details .toggle-body{padding:10px 13px 13px 30px;border-top:1px solid var(--border);font-size:var(--font-size-lg);line-height:1.55} details .toggle-body p{margin:6px 0} details .toggle-body ul{margin:6px 0;padding-left:20px} details .toggle-body strong.hl{font-weight:600;background:var(--honey-fill);padding:0 2px;border-radius:var(--radius-2xs)} html.dark details .toggle-body strong.hl{background:var(--honey-soft);color:var(--honey)} .eq{font-family:var(--font-mono);background:var(--surface-alt);padding:6px 10px;border-radius:var(--radius-tiny);display:inline-block;margin:3px 0;font-size:var(--font-size-md)} /* Today-fix v2 #4 — math formula wrap. KaTeX renders display equations inside .katex-display (a centred block) with white-space:nowrap so the formula never breaks; long formulae overflow the recall card. Override: - .katex-display: allow inline-line wrap via white-space:normal + word-break, plus overflow-x:auto as a fallback for genuinely unbreakable content (e.g., single fraction taller than the card). - .katex (inline math): also allow wrap so inline mid-paragraph formulae don't push the column. Tweaking the inner .katex-html is risky (KaTeX repositions glyphs absolutely); leaving its layout alone and just relaxing the parent white-space + max-width is the safe surgical fix. */ .katex-display{ white-space:normal !important; overflow-x:auto; max-width:100%; margin:8px 0; } .katex-display>.katex{ white-space:normal; display:block; text-align:center; } .katex{max-width:100%;display:inline-block;white-space:normal} /* Long fractions / radicals can still exceed the column when content is unbreakable (e.g., single denominator longer than the card width). The horizontal scroll bar on .katex-display catches that fall-through so the formula stays readable rather than clipped. */ .recall-answer .katex-display, .recall-card .katex-display, .fc-answer .katex-display{max-width:100%;overflow-x:auto} /* ===================================================== WS4 (Phase 9, 2026-05-05) — Unified Card primitive Single shape for recall / saq / pharma / axiom. Type identity via [data-card-type] + left-stripe colour. Mode contracts (browse/today/preview) preserved exactly. ===================================================== */ /* Card base — all 4 study card types compose this */ .card{ position:relative; background:var(--surface-alt2); border:1px solid var(--border); border-left:var(--card-stripe-width) solid var(--card-stripe,var(--accent)); border-radius:var(--card-radius); padding:var(--card-padding-block) var(--card-padding-inline); display:flex;flex-direction:column;gap:9px; box-shadow:var(--card-shadow); transition: background var(--duration-sm) var(--ease-out), border-color var(--duration-sm) var(--ease-out), box-shadow var(--duration-sm) var(--ease-out), transform var(--duration-sm) var(--ease-out); } .card:hover{box-shadow:var(--card-shadow-hover)} /* Slots */ .card__header{display:flex;align-items:flex-start;gap:8px;margin-bottom:0;padding-right:calc(var(--card-flag-right) + 14px)} .card__body{display:flex;flex-direction:column;gap:8px} .card__footer{display:flex;gap:6px;margin-top:auto} /* Sticky footer — opt-in via [data-sticky]; used by SAQ rate row */ .card__footer[data-sticky]{ position:sticky;bottom:0; background:var(--surface); margin-inline:-14px;margin-bottom:-14px; padding:8px 14px 14px; border-top:1px solid var(--border); z-index:2; } /* Type variants — WS11: aligned to WS10 identity tokens. Recall=sky(LM)/sage(DM), SAQ=rose, Axiom=lime, Pharma=violet */ .card[data-card-type="recall"]{ --card-stripe:var(--sky); background:color-mix(in srgb,var(--sky) var(--card-tint-light),var(--surface)); } .card[data-card-type="saq"]{ --card-stripe:var(--rose); background:color-mix(in srgb,var(--rose) var(--card-tint-light),var(--surface)); } .card[data-card-type="pharma"]{ --card-stripe:var(--violet); background:color-mix(in srgb,var(--violet) var(--card-tint-light),var(--surface)); } .card[data-card-type="axiom"]{ --card-stripe:var(--saltbush); background:color-mix(in srgb,var(--saltbush) var(--card-tint-light),var(--surface)); } /* WS11 — DM overrides. --sky DM = lime-gold (Axiom); recall must use --sage (sky-blue) */ html.dark .card[data-card-type="recall"]{--card-stripe:var(--sage);background:color-mix(in srgb,var(--sage) var(--card-tint-dark),var(--surface))} html.dark .card[data-card-type="saq"] {background:color-mix(in srgb,var(--rose) var(--card-tint-dark),var(--surface))} html.dark .card[data-card-type="pharma"]{background:color-mix(in srgb,var(--violet) var(--card-tint-dark),var(--surface))} html.dark .card[data-card-type="axiom"] {background:color-mix(in srgb,var(--saltbush) var(--card-tint-dark),var(--surface))} /* Mode contracts */ .card[data-mode="browse"]{cursor:pointer} .card[data-mode="browse"] *[data-no-card-click]{cursor:auto} /* Preview mode — footer hidden (preview is read-only; rate row not shown) */ .card[data-mode="preview"] .card__footer{display:none} /* Active-card state — unified Effect 6. Single rule for all types. */ .card.keyboard-focused{ transition:transform var(--duration-sm) var(--ease-out), box-shadow var(--duration-sm) var(--ease-out), padding var(--duration-sm) var(--ease-out), background var(--duration-sm) var(--ease-out), border-left-width var(--duration-sm) var(--ease-out); transform:translateY(-1px); border-left-width:calc(var(--card-stripe-width) + 2px); padding-left:calc(var(--card-padding-inline) - 2px); background:color-mix(in srgb,var(--card-stripe,var(--accent)) 10%,var(--surface-alt2)); box-shadow:0 4px 14px -4px color-mix(in srgb,var(--card-stripe,var(--accent)) 40%,transparent); } @media(prefers-reduced-motion:reduce){ .card.keyboard-focused{transform:none;transition:background var(--duration-sm) var(--ease-out)} } /* ===================================================== CARD REDESIGN 2026-05-05 — .study-card primitive Replaces the dead WS4-phase-9 .card[data-card-type] system above. Coexists with legacy .recall-card / .saq-card-face / .pharma-card / .axiom rules below until phase 2 migrates the JS render functions. Spec: docs/CARD-REDESIGN-SPEC.md ===================================================== */ .study-card{ position:relative; background:var(--surface); border:1px solid var(--border); border-left:var(--card-stripe-width) solid var(--card-accent,var(--sky)); border-radius:var(--card-radius); padding:var(--study-card-padding-cmf); display:flex;flex-direction:column;gap:9px; transition: background var(--duration-sm) var(--ease-out), border-color var(--duration-sm) var(--ease-out), border-left-color var(--duration-sm) var(--ease-out), box-shadow var(--duration-sm) var(--ease-out), transform var(--duration-sm) var(--ease-out); } .study-card:hover{box-shadow:var(--shadow-1)} /* Restrained palette — bg lifts only in dark mode (6%); light mode keeps surface neutral so stripe alone carries identity. Spec §2 + §21. */ html.dark .study-card{ background:color-mix(in srgb,var(--card-accent,var(--sky)) var(--study-card-tint-dark),var(--surface)); } /* Cinema-scope override (2026-05-05 IMPROVE) — cinema cards (.fc-card) define their own padding via children's margins; the .study-card 14 px padding double-pads cinema and mis-aligns the Show Answer button + clips tall SAQ content. Reset padding/gap for cinema to restore legacy layout. */ .fc-card.study-card{padding:0;gap:0} /* Type variants — only set --card-accent. Card-redesign 2026-05-05 IMPROVE: use *-deep tokens for stronger stripe contrast on warm paper. Mid-tone accent (--sky/--rose/etc) blended into cream looked too quiet. */ .study-card--recall{--card-accent:var(--sky-deep)} .study-card--saq {--card-accent:var(--rose-deep)} .study-card--pharma{--card-accent:var(--violet-deep)} .study-card--axiom {--card-accent:var(--saltbush-deep)} html.dark .study-card--recall{--card-accent:var(--sage-deep)} /* DM Recall via --sage-deep alias */ html.dark .study-card--saq { --card-accent: var(--type-saq); } html.dark .study-card--pharma { --card-accent: var(--type-pharma); } html.dark .study-card--axiom { --card-accent: var(--type-axiom); } /* Density modifier — comfortable (default) and compact. Compact body is collapsed by default; revealed via [data-revealed]. Refs slot inlines chips in compact and uses the icon-tray pattern in comfortable. */ .study-card[data-density="compact"]{ padding:var(--study-card-padding-cmp-y) var(--study-card-padding-cmp-x); gap:6px;min-height:var(--study-card-min-h-cmp); } /* Slots */ .study-card__header{ display:flex;align-items:center;gap:8px; padding-right:var(--study-card-flag-offset); } .study-card__glyph{ font-size:14px;line-height:1;color:var(--card-accent);font-weight:500; display:inline-flex;align-items:center;justify-content:center; width:14px;flex:0 0 auto; } .study-card__stem{font-size:14px;line-height:1.4;font-weight:500} .study-card[data-density="compact"] .study-card__stem{font-size:13px} .study-card__body{display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.6} .study-card[data-density="compact"] .study-card__body{display:none} .study-card[data-density="compact"][data-revealed] .study-card__body{display:flex} /* References slot — solidity rule §21: solid 1px separator, not dashed. Comfortable: icon button + tray (variant B). Compact: inline chips, no icon. */ .study-card__refs{ display:flex;align-items:center;gap:8px; padding-top:6px;border-top:1px solid var(--border); font-size:11px;flex-wrap:wrap; } .study-card__refs > .refs-icon{ width:24px;height:24px;border-radius:var(--btn-radius); border:0.5px solid var(--border);background:transparent; display:inline-flex;align-items:center;justify-content:center; font-size:11px;color:var(--text-muted);cursor:pointer;flex:0 0 auto; } .study-card__refs > .refs-icon:hover{background:var(--surface-elevated);color:var(--text)} .study-card__refs > .refs-tray{ display:flex;align-items:center;gap:5px;flex-wrap:wrap; font-size:10.5px;flex:1 1 auto; } .study-card[data-density="comfortable"] .study-card__refs > .refs-tray[hidden]{display:none} .study-card[data-density="compact"] .study-card__refs > .refs-icon{display:none} .study-card[data-density="compact"] .study-card__refs > .refs-tray[hidden]{display:flex} .ref-chip{ display:inline-flex;align-items:center;gap:4px; padding:3px 7px;border-radius:var(--btn-radius); border:0.5px solid var(--border);background:transparent; font-size:10.5px;color:var(--text-muted); text-decoration:none;cursor:pointer; font-family:inherit; } .ref-chip:hover{background:var(--surface-elevated);color:var(--text)} /* Footer + sticky-on-overflow contract. Sticky engages only when content exceeds card height (opt-in via [data-overflow] data-attr set by JS). */ .study-card__footer{margin-top:auto;padding-top:8px} .study-card__footer[data-overflow]{ position:sticky;bottom:0; background:color-mix(in srgb,var(--surface) 92%,transparent); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); margin-inline:calc(-1 * var(--study-card-padding-cmf)); margin-bottom:calc(-1 * var(--study-card-padding-cmf)); padding:8px var(--study-card-padding-cmf) var(--study-card-padding-cmf); border-top:1px solid var(--border); } /* Marked-state hybrid — stripe shifts to grade colour, body bg gains 5% grade tint, footer collapses inverted-T → chip. Body / refs / stem never truncate per spec §8.3 solidity preservation rule. */ .study-card[data-graded]{ border-left-color:var(--grade-color); background:color-mix(in srgb,var(--grade-color) var(--study-card-marked-tint),var(--surface)); } html.dark .study-card[data-graded]{ background:color-mix(in srgb,var(--grade-color) calc(var(--study-card-marked-tint) + 2%),var(--surface)); } .study-card[data-graded="missed"] {--grade-color:var(--grade-missed)} .study-card[data-graded="honed"] {--grade-color:var(--grade-honed)} .study-card[data-graded="mastered"]{--grade-color:var(--grade-mastered)} /* Solidity preservation — opacity stays 1.0 on body content even when graded. §8.3 + §21 — body / refs / stem / header never fade. */ .study-card .study-card__body, .study-card .study-card__stem, .study-card .study-card__refs, .study-card .study-card__header{opacity:1} /* Marked-state collapse pill — replaces inverted-T post-grade. Tap to undo. */ .study-card__chip{ display:none;align-items:center;gap:6px; padding:7px 10px;border-radius:var(--btn-radius); border:0.5px solid var(--grade-color); color:var(--grade-color); background:color-mix(in srgb,var(--grade-color) 12%,transparent); cursor:pointer;font-size:12px;font-weight:500; width:auto;align-self:stretch; font-family:inherit; } .study-card__chip-tag{font-weight:500;text-transform:lowercase} .study-card__chip-undo{margin-left:auto;font-size:10.5px;opacity:.65;font-weight:400} .study-card[data-graded] .study-card__chip{display:flex} /* Phase 5 full — collapse footer when graded (chip replaces inverted-T). Grade 1 deferred to tagMiss() so miss-tag overlay stays visible first. */ .study-card[data-graded] .recall-actions .post-reveal,.study-card[data-graded] .recall-actions .miss-tag-overlay{display:none} .study-card[data-graded] .saq-card-cf-footer{display:none} /* Sprint B PR1 (B1) — carry-over graded cards from the previous session stay visible but frozen on the Today list until session N+1 begins. pointer-events:none is load-bearing — prevents stale grade taps. */ .study-card[data-session-context="last"]{opacity:0.55;pointer-events:none} .study-card[data-session-context="last"] .study-card__chip-tag, .study-card[data-session-context="last"] [data-grade-chip]{pointer-events:auto;opacity:1} /* Sprint B PR1 (B3) — top-3 MRU preset chips inside the Custom action card. Compact pills sit on the colored card background, adjacent to SET UP. Card shape stays unchanged — chips inherit the column flex flow. */ .sh-act-presets{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:4px;max-width:100%} .sh-act-preset-chip{ display:inline-flex;align-items:center;gap:4px; padding:3px 8px 3px 4px;border-radius:99px; background:rgba(255,255,255,.18);color:#fff;border:none; cursor:pointer;font-family:inherit;font-size:11px;line-height:1;font-weight:500; max-width:100%; transition:background var(--duration-sm); } .sh-act-preset-chip:hover{background:rgba(255,255,255,.28)} .sh-act-preset-chip:active{background:rgba(255,255,255,.34)} .sh-act-preset-chip:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:1px} .sh-act-preset-chip__key{ display:inline-flex;align-items:center;justify-content:center; min-width:16px;height:16px;padding:0 3px;border-radius:var(--radius-tiny); background:rgba(255,255,255,.22);color:#fff; font-size:10px;font-weight:700;font-variant-numeric:tabular-nums; } .sh-act-preset-chip__name{ font-weight:500; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px; } /* Sprint D D1 — quiet chip (no fill, no outline). Single biggest visual quietener. Was Ph6 .curriculum-chip with tinted fill/border; now text-only across today/library/focus. */ .curriculum-chip{ display:inline-flex;align-items:center;gap:5px; padding:2px 4px;border-radius:0; border:0;background:transparent; font-size:10.5px;font-weight:500;color:var(--card-accent); cursor:pointer;text-decoration:none;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:240px; } .curriculum-chip:hover{color:color-mix(in srgb,var(--card-accent) 80%,var(--text))} .curriculum-chip__icon{font-size:11px;opacity:.55} /* Sprint D D1/D2/D3 — unified library card header row. [chips left] · [history dots centre] · [due + ⋯ right]. Used across Recall/SAQ/Axiom/Drug library cards. Replaces type-specific status rows in library mode only. */ .lib-header{display:flex;align-items:center;gap:8px;width:100%;min-height:22px} .lib-header__chips{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;overflow:hidden} /* Sprint D card-polish — header text matches the "Overdue Nd" font (var(--font-size-2xs)) so chip / dots-new / due all sit on the same visual weight. Topic title truncates to a single line with ellipsis when wider than the chip slot allows. */ .lib-header__chip{display:inline-flex;align-items:center;font-size:var(--font-size-2xs,10px);font-weight:500;color:var(--card-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;line-height:1.3} .lib-header__chip + .lib-header__chip{padding-left:6px;border-left:0;position:relative;flex-shrink:0} .lib-header__chip + .lib-header__chip::before{content:"·";color:var(--text-faint);margin-right:6px} .lib-header__chip--btn{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit} .lib-header__chip--btn:hover{color:color-mix(in srgb,var(--card-accent) 80%,var(--text))} .lib-header__dots{display:flex;align-items:center;gap:4px;flex:0 0 auto;margin:0 4px} .lib-header__dots--new{font-size:var(--font-size-2xs,10px);color:var(--text-faint);font-style:italic;letter-spacing:.02em} .lib-header__dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;background:var(--text-faint);opacity:.55} .lib-header__dot--mastered{background:var(--grade-mastered,#9F72F8);opacity:1} .lib-header__dot--honed{background:var(--grade-honed,#15803D);opacity:1} .lib-header__dot--missed{background:var(--grade-missed,#F05A50);opacity:1} .lib-header__right{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto} .lib-header__due{font-size:var(--font-size-2xs,10px);color:var(--text-muted);white-space:nowrap} .lib-header__due--overdue{color:var(--grade-missed,#F05A50);font-weight:600} .lib-header__due--today{color:var(--card-accent);font-weight:600} .lib-header__due--new{color:var(--text-faint);font-style:italic} .lib-header__menu{background:none;border:0;padding:2px 6px;color:var(--text-muted);cursor:pointer;font-size:14px;line-height:1;border-radius:var(--radius-tiny);transition:background .12s} .lib-header__menu:hover{background:var(--surface-alt);color:var(--text)} /* Sprint D card-polish — focus-mode breadcrumb inlined into the type-row (recall) and fc-saq-header-row (saq). Reserves space on the right for the absolute ⋯ menu so breadcrumb chip + menu never overlap. font-size matches "Overdue" weight. */ .fc-type-row__crumb, .fc-saq-header-row__crumb, .fc-pharma-meta__crumb{ margin-left:8px; font-size:var(--font-size-2xs,10px); pointer-events:auto; /* leave clearance for the absolute card-options-btn (≈30px from right edge) */ max-width:calc(100% - 140px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fc-type-row__crumb .chip, .fc-saq-header-row__crumb .chip, .fc-pharma-meta__crumb .chip{ font-size:inherit; padding:1px 6px; } /* Pharma focus meta needs flex to keep the inline crumb on the same line. */ .fc-pharma-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap} /* Sprint D card-polish — library cards must not paint the data-graded grade-tint backdrop. The unified header's dot row already shows last-5 grades; the whole-card tint duplicates that signal AND bleeds into adjacent UI. data-graded persists from focus-mode rateToday() runs that share state.ratings keys with library row keys. */ .saq-card--lib[data-graded], .recall-card--lib[data-graded], .axiom--lib[data-graded]{ background:var(--surface-alt2,var(--surface)) !important; border-left-color:var(--card-stripe,var(--border)) !important; } html.dark .saq-card--lib[data-graded], html.dark .recall-card--lib[data-graded], html.dark .axiom--lib[data-graded]{ background:var(--surface-alt2,var(--surface)) !important; } /* Sprint D — Recall library tab in 'axiom' mode reuses buildRecallCard() but the card is conceptually an axiom — repaint to lime identity. */ .recall-card.recall-card--axiom-mode{ background:color-mix(in srgb,var(--saltbush) var(--card-tint-light),var(--surface-alt2)); border-left-color:var(--saltbush-deep); --card-accent:var(--saltbush-deep); } html.dark .recall-card.recall-card--axiom-mode{ background:color-mix(in srgb,var(--saltbush) var(--card-tint-dark),var(--surface-alt2)); } /* Sprint D D4 — library cards skip footer DOM entirely (recall-actions / saq-card-cf-footer / study-card__chip). The CSS hides for older mounts that haven't re-rendered yet. */ .recall-card--lib .recall-actions, .recall-card--lib .study-card__chip, .recall-card--lib .recall-status-row, .saq-card--lib .saq-card-cf-footer, .saq-card--lib .study-card__chip, .saq-card--lib .saq-answer-btn, .saq-card--lib .ref-chip--related, .axiom--lib .study-card__chip, .axiom--lib .axiom-actions{display:none !important} /* Ph6 — References bottom sheet */ .refs-sheet-overlay{ position:fixed;inset:0;background:var(--backdrop-sheet); z-index:var(--z-refs-sheet);display:flex;flex-direction:column; justify-content:flex-end;align-items:center; backdrop-filter:blur(2px);animation:backdropIn .15s ease; } .refs-sheet{ width:100%;max-width:560px;background:var(--surface-elevated); border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:var(--shadow-lg);max-height:94dvh;min-height:70dvh;overflow-y:auto; overscroll-behavior:contain; padding-bottom:max(24px,env(safe-area-inset-bottom,24px)); animation:sheetUp var(--duration-md) cubic-bezier(.32,.72,0,1); } @media(min-width:700px){.refs-sheet{padding-bottom:24px}} .refs-sheet__handle{width:36px;height:4px;background:var(--border-strong);border-radius:var(--radius-2xs);margin:10px auto 0;opacity:.6;touch-action:none} .refs-sheet__ctx{display:flex;align-items:center;gap:8px;padding:10px 14px 9px;border-bottom:1px solid var(--border)} .refs-sheet__ctx-glyph{font-size:12px;color:var(--text-faint);flex:0 0 auto} .refs-sheet__ctx-title{font-size:12.5px;color:var(--text-muted);font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .refs-sheet__close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:18px;width:28px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-family:inherit;line-height:1} .refs-sheet__close:hover{background:var(--surface);color:var(--text)} .ref-row{display:flex;align-items:center;gap:8px;padding:8px 14px;min-height:38px;border-bottom:0.5px solid var(--border);cursor:pointer;color:var(--text);transition:background .1s;background:transparent;border:none;font-family:inherit;font-size:inherit;width:100%;text-align:left} .ref-row:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface-elevated))} .ref-row:last-child{border-bottom:none} .ref-row__glyph{font-size:11px;flex:0 0 13px;text-align:center;line-height:1} .ref-row__glyph--saq{color:var(--type-saq)}.ref-row__glyph--axiom{color:var(--type-axiom)}.ref-row__glyph--recall{color:var(--type-recall)}.ref-row__glyph--pharma{color:var(--type-pharma)} .ref-row__meta{display:inline-flex;align-items:center;justify-content:center;width:100px;flex:0 0 100px;padding:2px 5px;border-radius:var(--radius-tiny);background:var(--surface);border:0.5px solid var(--border);font-size:9.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.3} .ref-row__title-wrap{flex:1;display:flex;align-items:center;gap:5px;min-width:0} .ref-row__title{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1} .ref-row__title--saq{color:var(--type-saq)}.ref-row__title--axiom{color:var(--type-axiom)}.ref-row__title--recall{color:var(--type-recall)}.ref-row__title--pharma{color:var(--type-pharma);font-weight:400} .ref-row__pearl{font-size:10px;color:var(--pearl,#9A7200);flex:0 0 auto} .ref-row__arrow{font-size:11px;color:var(--border-strong);flex:0 0 auto} .ref-drug-list{display:flex;flex-direction:column;padding:0 14px 4px 35px} .ref-drug-list[hidden]{display:none} .ref-drug-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:0.5px solid var(--border);cursor:pointer;font-size:12px;color:var(--type-pharma);transition:color .1s;background:none;border:none;font-family:inherit;width:100%;text-align:left} .ref-drug-item:last-child{border-bottom:none} .ref-drug-item:hover{color:color-mix(in srgb,var(--type-pharma) 70%,var(--text))} .ref-drug-item__glyph{font-size:11px;color:var(--type-pharma);opacity:.5} .ref-show-more{display:flex;align-items:center;padding:7px 14px 7px 35px;font-size:11.5px;color:var(--accent);background:none;border:none;border-bottom:0.5px solid var(--border);font-family:inherit;cursor:pointer;width:100%;text-align:left} .ref-show-more:hover{text-decoration:underline} .ref-source-div{height:1px;background:var(--border)} .ref-source{display:flex;align-items:center;gap:10px;padding:9px 14px;border:none;border-bottom:0.5px solid var(--border);text-decoration:none;color:var(--text);cursor:pointer;transition:background .1s;background:transparent;font-family:inherit;font-size:inherit;text-align:left;appearance:none;-webkit-appearance:none} .ref-source:last-child{border-bottom:none} .ref-source:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface-elevated))} .ref-source--static{cursor:default}.ref-source--static:hover{background:transparent} .ref-source__icon{width:15px;height:15px;flex:0 0 15px;color:var(--text-faint)} .ref-source__icon svg{width:15px;height:15px;display:block;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .ref-source__label{font-size:13px;flex:1} .ref-source__sub{font-size:11px;color:var(--text-faint)} .ref-source__arrow{font-size:11px;color:var(--border-strong)} .ref-source-entry{display:block} .ref-source-entry .ref-source{border-bottom:none} .ref-source__quote{font-size:11px;color:var(--text-faint);font-style:italic;padding:2px 14px 9px 39px;border-bottom:.5px solid var(--border);margin:0} .ref-source-entry:last-child .ref-source__quote{border-bottom:none} .ref-browse-chapters{display:flex;align-items:center;padding:6px 14px 9px 39px;font-size:11.5px;color:var(--accent);background:none;border:none;font-family:inherit;cursor:pointer;width:100%;text-align:left} .ref-browse-chapters:hover{text-decoration:underline} .book-chapters-list{overflow-y:auto;-webkit-overflow-scrolling:touch} .refs-skel-row{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:0.5px solid var(--border)} .refs-skel__icon{width:13px;height:13px;border-radius:3px;flex:0 0 13px} .refs-skel__chip{height:18px;width:100px;border-radius:var(--radius-tiny);flex:0 0 100px} .refs-skel__bar{height:10px;border-radius:var(--radius-tiny)} .refs-skel__icon,.refs-skel__chip,.refs-skel__bar{background:var(--border);animation:skelPulse 1.3s ease-in-out infinite} @keyframes skelPulse{0%,100%{opacity:.4}50%{opacity:.85}} /* F1 — Refs sheet breadcrumb (Section › Chapter › Topic) */ .refs-sheet__breadcrumb{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;overflow:hidden;padding:5px 14px 6px;border-bottom:1px solid var(--border)} .refs-breadcrumb__sep{font-size:10px;color:var(--text-faint);padding:0 2px;user-select:none;flex:0 0 auto} .refs-breadcrumb__chip{font-size:10.5px;color:var(--text-muted);background:none;border:none;padding:2px 4px;border-radius:var(--radius-tiny);cursor:pointer;font-family:inherit;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .refs-breadcrumb__chip:hover{background:var(--surface);color:var(--accent)} /* F2/F3 — Refs sheet section label (Progression / See also / Related) */ .refs-section-hdr{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);padding:8px 14px 3px;border-top:0.5px solid var(--border)} .refs-section-hdr:first-child{border-top:none} .refs-related-loading{padding:12px 14px;font-size:11px;color:var(--text-faint)} /* Track 2 — Provenance badges (right-aligned, per source row) */ .prov-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:var(--radius-pill);white-space:nowrap;flex:0 0 auto;margin-left:auto} .prov-badge--written{background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent)} .prov-badge--awaits{background:var(--honey-fill);color:var(--honey-deep);border:1px solid color-mix(in srgb,var(--honey-deep) 34%,transparent)} .prov-badge--ref{background:var(--surface-elevated);color:var(--text-muted);border:1px solid var(--border-strong)} .prov-badge--topical{background:var(--surface-elevated);color:var(--text-muted);border:1px solid var(--border-strong)} /* Awaits-validation stacked badge + caption (badge on top, "suggested source" caption below) */ .prov-stack{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-left:auto;flex:0 0 auto} .prov-stack .prov-badge{margin-left:0} .prov-cap{font-size:10px;color:var(--text-faint);white-space:nowrap} /* Partial-verdict caveat line (honey-tinted, under written-from rows) */ .ref-prov-caveat{display:flex;gap:5px;align-items:flex-start;font-size:10.5px;color:var(--honey-deep);padding:0 14px 8px 39px;margin:0;border-bottom:0.5px solid var(--border)} .ref-prov-caveat svg{width:12px;height:12px;flex:0 0 12px;margin-top:1px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} .ref-source-entry:last-child .ref-prov-caveat{border-bottom:none} /* Hairline group-gap between card-owned sources and node-inherited topical sources */ .ref-group-gap{height:7px;border-top:0.5px solid var(--border);background:var(--surface-elevated)} /* Track 2 — Why-linked chip on related-card rows (right-aligned, before arrow) */ .ref-why{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:var(--radius-pill);white-space:nowrap;flex:0 0 auto;margin-left:auto} .ref-why--builds{background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent)} .ref-why--author{background:var(--violet-fill);color:var(--violet-deep);border:1px solid color-mix(in srgb,var(--violet-deep) 34%,transparent)} .ref-why--topic{background:var(--surface-elevated);color:var(--text-muted);border:1px solid var(--border-strong);font-variant-numeric:tabular-nums} .ref-why--similar{background:var(--surface-elevated);color:var(--text-muted);border:1px solid var(--border-strong)} .ref-conf-dots{display:inline-flex;gap:2px;margin-left:2px} .ref-conf-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.3} .ref-conf-dot.on{opacity:1} /* F7 — Drug card section dividers */ .drug-section{padding:10px 0 6px} .drug-section+.drug-section{border-top:0.5px solid var(--border)} .drug-section__label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);margin:0 0 5px} /* Active-card / keyboard-focused state — single rule for all types. Stripe widens by 2px and bg gains 8% type tint; box-shadow lifts. */ .study-card.is-keyboard-focused{ transform:translateY(-1px); border-left-width:calc(var(--card-stripe-width) + 2px); padding-left:calc(var(--study-card-padding-cmf) - 2px); background:color-mix(in srgb,var(--card-accent) 8%,var(--surface)); box-shadow:0 4px 14px -4px color-mix(in srgb,var(--card-accent) 40%,transparent); } @media(prefers-reduced-motion:reduce){ .study-card.is-keyboard-focused{transform:none} } /* ===================================================== TRUST PAIR — verified pip + flag (spec §7) .card-flag-btn is the new canonical name; legacy .recall-flag-btn styling preserved until JS render swap in phase 2. ===================================================== */ .card-verified-pip{ position:absolute;top:8px;right:38px; /* sits 30px left of flag */ width:22px;height:22px;border-radius:50%; background:var(--grade-honed);color:#fff; border:0;cursor:default; display:inline-flex;align-items:center;justify-content:center; font-size:11px;font-weight:500;line-height:1; z-index:2; } .card-verified-pip[hidden]{display:none} html.dark .card-verified-pip{background:var(--grade-honed)} /* Flag-count badge — appears when reports >= 2. data-count="0" or "1" stays unbadged. */ .card-flag-btn[data-count]:not([data-count="0"]):not([data-count="1"])::after{ content:attr(data-count); position:absolute;top:-4px;right:-4px; min-width:14px;height:14px; background:var(--grade-missed);color:#fff; border:1.5px solid var(--surface);border-radius:var(--radius-pill); font-size:9px;font-weight:500;line-height:1; display:flex;align-items:center;justify-content:center; padding:0 3px; } /* Summary header — sister component for ribbon mount points */ .study-ribbon-summary{ display:flex;justify-content:space-between;align-items:center; padding:9px 12px;border-radius:var(--radius-sm);font-size:11px; background:color-mix(in srgb,var(--text) 4%,var(--surface)); border:0.5px solid var(--border); margin-bottom:8px; } .study-ribbon-summary__stats{display:flex;gap:10px;align-items:center;font-variant-numeric:tabular-nums} .study-ribbon-summary__stat{display:flex;align-items:center;gap:4px} .study-ribbon-summary__pip{width:8px;height:8px;border-radius:50%;display:inline-block} .study-ribbon-summary__pip[data-grade="missed"] {background:var(--grade-missed)} .study-ribbon-summary__pip[data-grade="honed"] {background:var(--grade-honed)} .study-ribbon-summary__pip[data-grade="mastered"]{background:var(--grade-mastered)} .study-ribbon-summary__coverage{opacity:.55;font-size:10.5px} /* ribbon-card styles moved to pwa/ribbon/ribbon.css */ /* Haul stats panel */ .haul-stats{ display:grid;grid-template-columns:1fr 1fr;gap:8px; margin-top:12px; } .haul-stat-tile{ background:color-mix(in srgb,var(--text) 3%,var(--surface)); border:0.5px solid var(--border);border-radius:var(--radius-sm); padding:10px 12px; } .haul-stat-tile__hdr{ display:flex;align-items:center;gap:5px;margin-bottom:5px; } .haul-stat-tile__hdr svg{width:12px;height:12px;color:var(--text-faint);stroke-width:2;flex-shrink:0} .haul-stat-tile__label{ font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em; color:var(--text-faint); } .haul-stat-tile__value{ font-size:22px;font-weight:700;font-variant-numeric:tabular-nums; font-family:var(--font-mono,ui-monospace,monospace); color:var(--text);line-height:1; } .haul-stat-tile__sub{ font-size:10px;color:var(--text-muted);margin-top:3px; } /* Haul curriculum heatmap */ .haul-heatmap{ display:grid;grid-template-columns:repeat(17,1fr);gap:3px; margin-top:12px; } .haul-heatmap__cell{ aspect-ratio:1;border-radius:3px; background:var(--border); display:flex;align-items:center;justify-content:center; font-size:8px;font-weight:700;color:var(--text-faint); } .haul-heatmap__cell--active{ background:color-mix(in srgb,var(--sage) 30%,var(--surface)); color:var(--sage-deep); } @media (prefers-reduced-motion:no-preference){ .haul-heatmap__cell--active{ animation:heatmap-pulse 2s ease-in-out infinite; } @keyframes heatmap-pulse{ 0%,100%{opacity:1} 50%{opacity:0.6} } } /* ── Haul modal (Sprint G) ─────────────────────────────────────────────── */ @keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}} .haul-backdrop{ position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px); z-index:400;display:flex;align-items:center;justify-content:center;padding:16px; } .haul-modal{ background:var(--surface);border-radius:var(--radius-lg); width:min(720px,100%);max-height:min(88dvh,860px); display:flex;flex-direction:column;overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.1); padding-bottom:env(safe-area-inset-bottom); } @media(prefers-reduced-motion:no-preference){ .haul-modal{animation:modalIn .22s cubic-bezier(.32,1,.54,1) both} } /* Hero zone: title(left) | XP(centre) | rank+close(right) */ .haul-hero{ display:grid;grid-template-columns:1fr auto 1fr; align-items:center;gap:8px; padding:12px 14px 10px; border-bottom:1px solid var(--border);flex-shrink:0; } .haul-hero-left{display:flex;align-items:center;gap:8px;min-width:0} .haul-hero-text{min-width:0} .haul-hdr-icon{ width:28px;height:28px;border-radius:var(--radius-sm); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .haul-hdr-icon svg{width:15px;height:15px;stroke-width:2} .haul-hdr-icon--default{background:rgba(21,128,61,.1);color:var(--mint)} .haul-hdr-icon--missed{background:rgba(240,90,80,.12);color:var(--coral-vivid)} .haul-hdr-icon--rankup{background:rgba(201,160,48,.15);color:#c89a30} .haul-hdr-icon--badge{background:rgba(139,92,246,.12);color:var(--violet)} .haul-hdr-title{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .haul-hdr-expl{font-size:11px;color:var(--text-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .haul-hero-xp{ display:flex;align-items:flex-end;justify-content:center;gap:3px; padding:4px 8px; } .haul-xp-number{ font-size:44px;font-weight:700;font-family:var(--font-mono,monospace); color:var(--text);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em; } .haul-xp-unit{ font-size:14px;font-weight:600;color:var(--text-muted);margin-bottom:5px; } .haul-hero-right{display:flex;align-items:center;justify-content:flex-end;gap:8px} .haul-hero-rank-stack{text-align:right;min-width:0} .haul-rank-badge{ display:inline-flex;align-items:center;gap:5px; background:var(--surface-alt);border:1px solid var(--border); border-radius:20px;padding:3px 10px 3px 7px;font-size:12px;font-weight:600;color:var(--text); } .haul-rank-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .haul-rank-to-next{font-size:11px;color:var(--text-muted);margin-top:3px} .haul-close{ width:28px;height:28px;border-radius:50%;background:var(--surface-alt); border:none;display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--text-muted);flex-shrink:0; } .haul-close svg{width:14px;height:14px;stroke-width:2} .haul-close:hover{background:var(--border)} /* Scrollable body */ .haul-body{ flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:0 16px 8px; } .haul-body::-webkit-scrollbar{width:0} /* Rank progress bar */ .haul-rank-bar{height:2px;background:var(--border);border-radius:1px;margin-bottom:14px;overflow:hidden} .haul-rank-fill{height:100%;border-radius:1px;transition:width 1.1s cubic-bezier(.4,0,.2,1) .2s} /* Grade pills */ .haul-grade-row{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:10px;flex-wrap:wrap} .haul-grade-pill{ display:flex;align-items:center;gap:5px; font-size:13px;font-weight:600;padding:4px 10px;border-radius:20px; } .haul-grade-pill--missed{background:rgba(240,90,80,.13);color:var(--coral-vivid)} .haul-grade-pill--honed{background:rgba(21,117,112,.13);color:var(--mint)} .haul-grade-pill--mastered{background:rgba(139,92,246,.13);color:var(--violet)} /* 4px stacked health bar */ .haul-health-bar{ height:4px;border-radius:var(--radius-2xs);display:flex;overflow:hidden;margin-bottom:14px; } .haul-health-seg--missed{background:var(--coral-vivid)} .haul-health-seg--honed{background:var(--mint)} .haul-health-seg--mastered{background:var(--violet)} /* Rank-up banner */ .haul-rankup{ display:flex;align-items:center;gap:10px; background:rgba(201,160,48,.08);border:1px solid rgba(201,160,48,.25); border-radius:var(--radius-sm);padding:10px 13px;margin-bottom:14px; } .haul-rankup svg{width:16px;height:16px;color:#c89a30;flex-shrink:0} .haul-rankup-text{font-size:13px;font-weight:600;color:#c89a30} .haul-rankup-sub{font-size:12px;color:var(--text-muted)} /* Stat tile modifiers */ .haul-stat-tile.good .haul-stat-tile__value{color:var(--mint)} .haul-stat-tile.warn .haul-stat-tile__value{color:var(--fc-badge-hazy,#b45309)} .haul-stat-tile.muted .haul-stat-tile__value{color:var(--text-muted)} /* Heatmap wrapper */ .haul-heatmap-wrap{margin-bottom:16px} /* Notable events */ .haul-events{margin-bottom:14px} .haul-event-item{ display:flex;align-items:center;gap:9px; padding:7px 0;border-bottom:1px solid var(--border); } .haul-event-item:last-child{border-bottom:none} .haul-event-icon{ width:28px;height:28px;border-radius:7px; display:flex;align-items:center;justify-content:center;flex-shrink:0; } .haul-event-icon svg{width:14px;height:14px;stroke-width:1.75} .haul-event-icon--badge{background:rgba(139,92,246,.12);color:var(--violet)} .haul-event-icon--streak{background:rgba(245,158,11,.12);color:#d97706} .haul-event-icon--nemesis{background:rgba(240,90,80,.12);color:var(--coral-vivid)} .haul-event-icon--pearl{background:rgba(21,117,112,.1);color:var(--mint)} .haul-event-body{min-width:0} .haul-event-title{font-size:13px;color:var(--text);font-weight:500} .haul-event-sub{font-size:11px;color:var(--text-muted)} /* Miss nudge */ .haul-miss{ background:rgba(240,90,80,.08);border:1px solid rgba(240,90,80,.15); border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:14px; } .haul-miss-hdr{ display:flex;align-items:center;gap:6px; font-size:12px;font-weight:600;color:var(--coral-vivid);margin-bottom:3px; } .haul-miss-body{font-size:12px;color:var(--text-muted);line-height:1.45} /* Ribbon collapse */ /* Breakdown — always visible */ .haul-ribbon-wrap{margin:0 -16px;border-top:1px solid var(--border)} .haul-ribbon-hdr{ padding:7px 16px 5px;font-size:11px;font-weight:600; color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase; } .haul-ribbon-list{display:block;padding:0 0 4px} /* Haul ribbon card rows (modal-scoped, prefix rc-) */ .haul-ribbon-card{ display:flex;align-items:center; border-bottom:1px solid var(--border);background:var(--surface); cursor:default; } .haul-ribbon-card:last-child{border-bottom:none} .rc-stripe{width:3px;flex-shrink:0;align-self:stretch} .rc-stripe--missed{background:var(--coral-vivid)} .rc-stripe--honed{background:var(--mint)} .rc-stripe--mastered{background:var(--violet)} .rc-glyph{ width:32px;height:32px;border-radius:var(--radius-sm); margin:10px 8px 10px 10px; display:flex;align-items:center;justify-content:center;flex-shrink:0; } .rc-glyph svg{width:16px;height:16px;stroke-width:1.75} .rc-glyph--recall{background:rgba(45,107,149,.12);color:var(--type-recall,#2D6B95)} .rc-glyph--saq{background:rgba(168,40,64,.1);color:var(--type-saq,#A82840)} .rc-glyph--pharma{background:rgba(94,62,158,.1);color:var(--type-pharma,#5E3E9E)} .rc-glyph--axiom{background:rgba(84,100,9,.1);color:var(--type-axiom,#546409)} .rc-body{flex:1;min-width:0;padding:10px 0} .rc-stem{ font-size:13px;color:var(--text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px; } .rc-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)} .rc-meta-chip{ background:var(--surface-alt);border:1px solid var(--border); border-radius:var(--radius-tiny);padding:1px 5px;font-size:10px;font-weight:600;color:var(--text-muted); } .rc-right{display:flex;align-items:center;gap:6px;padding:0 10px 0 6px;flex-shrink:0} .rc-grade-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .rc-grade-dot--missed{background:var(--coral-vivid)} .rc-grade-dot--honed{background:var(--mint)} .rc-grade-dot--mastered{background:var(--violet)} /* Per-ribbon next-due label — filled asynchronously after session-end save */ .haul-ribbon-due{font-size:var(--font-size-xs,11px);color:var(--text-faint);margin-top:2px;line-height:1.3} /* Footer */ .haul-footer{ flex-shrink:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--border);background:var(--surface); display:flex;flex-direction:column;gap:8px; } .haul-footer-row{display:flex;gap:8px} .haul-cta{ flex:1;padding:12px 14px;border-radius:var(--radius-sm);border:none; font-family:var(--font-sans);font-size:14px;font-weight:700;cursor:pointer; display:flex;align-items:center;justify-content:center;gap:8px; transition:opacity .1s;color:#fff; } .haul-cta:active{opacity:.8} /* Coral — Drill misses */ .haul-cta--drill{background:var(--grade-missed)} .haul-cta--drill:hover{background:color-mix(in srgb,var(--grade-missed) 88%,#000)} /* Sky — Review */ .haul-cta--review{background:var(--sky)} .haul-cta--review:hover{background:color-mix(in srgb,var(--sky) 88%,#000)} /* Honed green — Continue */ .haul-cta--continue{background:var(--grade-honed)} .haul-cta--continue:hover{background:color-mix(in srgb,var(--grade-honed) 88%,#000)} /* Neutral secondary (exam recover etc) */ .haul-cta--secondary{ background:var(--surface-alt);border:1px solid var(--border);color:var(--text); } .haul-cta-left{display:flex;flex-direction:column;gap:1px} .haul-cta-sub{font-size:11px;font-weight:400;opacity:.75;margin-top:1px} /* XP rank row in Lore tab */ .lore-rank-row{ display:flex;align-items:center;gap:10px; padding:10px 12px;margin-bottom:14px; background:var(--surface-alt);border:1px solid var(--border); border-radius:var(--radius-sm); } .lore-rank-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} .lore-rank-info{flex:1;min-width:0} .lore-rank-label{font-size:14px;font-weight:600;color:var(--text)} .lore-rank-xp{font-size:12px;color:var(--text-muted);margin-top:1px} .lore-rank-bar{height:3px;background:var(--border);border-radius:var(--radius-2xs);margin-top:6px;overflow:hidden} .lore-rank-fill{height:100%;border-radius:var(--radius-2xs)} /* --- Recall cards --- Today-fix #8 — card type identity carried by left-border + tinted bg. Type pills dropped from the status row; the card's own visual treatment is the type marker. Sage for Recall (WS4: 4px unified stripe). Today-fix v2 (revert) — back to CSS Grid with align-items:start. */ .recall-grid{margin:11px 0} .recall-group{margin-bottom:14px} .recall-group:last-child{margin-bottom:0} /* patch-032 round 5 — .recall-group-cards + .recall-col layout retired. The recall-group cards container now uses col-stack(3) (the .recall-group-cards class is preserved on the wrapper as an extraClass for forward-compat). */ /* WS4: .recall-card composes .card + [data-card-type="recall"]. The base visual (bg, border, stripe, padding, radius, transition) comes from .card. Only recall-specific layout tweaks live here. */ .recall-card{ position:relative; background:color-mix(in srgb,var(--sky) var(--card-tint-light),var(--surface-alt2)); /* WS11: --sage→--sky (Recall LM identity) */ border:1px solid var(--border); /* Card-redesign IMPROVE: deeper stripe for visibility on cream. */ border-left:var(--card-stripe-width) solid var(--sky-deep); border-radius:var(--radius); padding:14px;display:flex;flex-direction:column;gap:9px; transition:background var(--duration-sm) var(--ease-out),border-color var(--duration-sm) var(--ease-out),box-shadow var(--duration-sm) var(--ease-out),transform var(--duration-sm) var(--ease-out); } /* Card-redesign IMPROVE: soften from --card-shadow-hover (--shadow-2) to --shadow-1 so hover lift feels lighter on the now-restrained card surface. */ .recall-card:hover{box-shadow:var(--shadow-1)} /* patch-007 — Pharmacopia variant of recall-card. Reuses the same DOM pattern (recall-card.pharma-card) so all keyboard, swipe, and grading handlers apply unchanged; only the accent shifts to violet. WS4: stripe unified to 4px (--card-stripe-width). Accessibility — dark-mode contrast ratios on #131F24 surface: · meta (#CECBF6) → 11.4 : 1 · WCAG AAA · body (--text) → 13.4 : 1 · WCAG AAA · accent border → 9.7 : 1 · WCAG AAA */ .pharma-card{ background:color-mix(in srgb,var(--violet) 8%,var(--surface-alt2)); /* Card-redesign IMPROVE: deeper stripe. */ border-left:var(--card-stripe-width) solid var(--violet-deep); } /* patch-032 round 5 — .pharma-grid layout rules retired. The pharmacopia section now uses the col-stack(3) primitive (defined later in this file). The .pharma-grid class is preserved on the wrapper as an extraClass so card-styling rules below (.pharma-card, etc.) still target the right scope. */ .pharma-card .recall-prompt{color:var(--text)} .pharma-card .recall-tag, .pharma-card .pharma-meta{color:var(--violet-deep);font-weight:500} .pharma-card .pharma-lvl{font-size:9.5px;font-weight:500;padding:1px 6px;border-radius:var(--btn-radius);letter-spacing:0.02em} .pharma-card .pharma-lvl--l1{background:var(--violet);color:var(--violet-soft,#26215C)} .pharma-card .pharma-lvl--l2{background:transparent;color:var(--violet-deep);border:0.5px solid var(--violet)} .pharma-card .pharma-lvl--l3{background:transparent;color:var(--violet-deep);border:0.5px dotted var(--violet)} /* Action buttons inherit recall-actions but tint the borders + hover violet so the affordance reads as part of the same family. */ .pharma-card .recall-actions button{border-color:color-mix(in srgb,var(--violet) 40%,var(--border));color:var(--text)} .pharma-card .recall-actions button:hover{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 8%,transparent)} .pharma-grid:empty{display:none} /* ── Pharmacopia Library tab (patch-016) ───────────────────────────────── */ /* Scope + filter toolbar */ .pharma-toolbar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;align-items:center} .pharma-scope-chip,.pharma-filter-chip{ display:inline-flex;align-items:center;gap:5px; padding:10px 14px;min-height:44px;border-radius:var(--radius-sm);font-size:var(--font-size-md);font-weight:600; border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted); cursor:pointer;transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm);white-space:nowrap; } .pharma-scope-chip.active,.pharma-filter-chip.active{ background:color-mix(in srgb,var(--violet) 12%,var(--surface)); border-color:var(--violet);color:var(--violet-deep); } .pharma-scope-chip:hover,.pharma-filter-chip:hover{border-color:var(--violet);color:var(--text)} .pharma-session-btn{ /* margin-left:auto removed — now in dedicated top row */ display:inline-flex;align-items:center;gap:6px; padding:10px 16px;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:700; border:none;background:var(--violet);color:var(--text-on-pharma); cursor:pointer;transition:background .1s,color .1s,border-color .1s,box-shadow .1s,transform .1s,opacity .1s; box-shadow:0 2px 0 var(--violet-deep); } .pharma-session-btn:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--violet-deep)} .pharma-session-btn:active{transform:translateY(1px);box-shadow:none} .pharma-session-btn svg{width:13px;height:13px} /* R-024 — on very narrow phones (≤480px) dial scope chips back to 40px (still ≥ WCAG 2.5.8 AA 24px floor) so Row 1 reads quieter. */ @media(max-width:480px){ .pharma-scope-chip,.pharma-filter-chip{min-height:40px;padding:8px 12px} } /* patch-032 round 5 — .pharma-lib-list flex layout retired. Pharma library uses col-stack(3) (defined later in this file). The .pharma-lib-list class is preserved on the wrapper as an extraClass for any styling that scopes to it (none currently — kept for forward-compat). */ /* ── Drug entity card ───────────────────────────────────────────────────── */ .pharma-drug-card{ background:var(--surface-alt2);border:1px solid var(--border);border-radius:var(--radius); border-left:3px solid var(--violet);overflow:hidden; transition:box-shadow var(--duration-sm); } .pharma-drug-card:hover{box-shadow:var(--shadow-sm)} /* Header = name-row (left, grows) + header-right (dots + chev, never wraps) */ .pharma-drug-header{ display:flex;align-items:flex-start;gap:8px;padding:11px 12px;cursor:pointer;user-select:none; } /* Name column: header line (level · name) → taxonomy sub-line */ .pharma-drug-name-row{ display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;overflow:hidden; } /* Header line — level badge + drug name on ONE row (kicker style). */ .pharma-drug-name-line{ display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden; } .pharma-drug-name-sep{color:var(--text-faint);flex-shrink:0;font-size:var(--font-size-md)} .pharma-drug-name{font-size:var(--font-size-lg);font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .pharma-drug-taxonomy{font-size:var(--font-size-xs);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Right cluster: dots + chev — flex-shrink:0 so it never collapses or wraps */ .pharma-drug-header-right{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-top:1px} /* Level badge */ .pharma-drug-level{font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:var(--btn-radius);letter-spacing:0.02em;white-space:nowrap;flex-shrink:0} .pharma-drug-level.l1{background:var(--violet);color:var(--violet-soft)} .pharma-drug-level.l2{background:transparent;color:var(--violet-deep);border:1px solid var(--violet)} .pharma-drug-level.l3{background:transparent;color:var(--violet-deep);border:1px dotted var(--violet)} .pharma-drug-level.extra{background:transparent;color:var(--text-faint);border:1px solid var(--border)} /* FSRS field-dot row */ .pharma-field-dots{display:flex;gap:4px;align-items:center} .pharma-fdot{ width:8px;height:8px;border-radius:50%;border:1.5px solid var(--border); transition:background .15s;flex-shrink:0; } .pharma-fdot.state-new{background:transparent} .pharma-fdot.state-learning{background:var(--amber)} .pharma-fdot.state-review{background:var(--green)} .pharma-fdot.state-due{background:var(--red)} .pharma-fdot.state-overdue{background:var(--red);box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 25%,transparent)} /* Expand chevron */ .pharma-drug-chev{width:15px;height:15px;color:var(--text-faint);transition:transform var(--duration-md);flex-shrink:0} .pharma-drug-card.expanded .pharma-drug-chev{transform:rotate(180deg)} /* ── Expanded detail panel ──────────────────────────────────────────────── */ .pharma-drug-detail{ display:none;border-top:1px solid var(--border);padding:10px 12px 12px; animation:fadeIn .15s; } .pharma-drug-card.expanded .pharma-drug-detail{display:block} .pharma-field-list{display:flex;flex-direction:column;gap:4px;margin-bottom:10px} /* Field row — clickable; collapses/expands inline text */ .pharma-field-row{ display:flex;flex-direction:column;border-radius:var(--radius-sm);overflow:hidden; background:var(--surface);border:1px solid var(--border); cursor:pointer;transition:border-color var(--duration-sm); } .pharma-field-row:hover{border-color:var(--violet)} .pharma-field-row.field-open{border-color:var(--violet)} .pharma-field-row-top{ display:flex;align-items:center;gap:10px;padding:7px 10px; } .pharma-field-label{font-size:var(--font-size-md);font-weight:500;color:var(--text);flex:1} .pharma-field-fsrs{display:flex;align-items:center;gap:6px} .pharma-field-state{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;padding:2px 7px;border-radius:var(--radius-tiny)} .pharma-field-state.new{display:none} .pharma-field-state.learning{color:var(--honey-deep);background:var(--amber-bg)} .pharma-field-state.review{color:var(--sage-deep);background:var(--green-bg)} .pharma-field-state.due{color:var(--coral-deep);background:var(--red-bg)} .pharma-field-stability{font-size:var(--font-size-2xs);color:var(--text-faint);font-variant-numeric:tabular-nums} /* Small chevron on the field row to signal tap-to-expand */ .pharma-field-chev{width:13px;height:13px;color:var(--text-faint);transition:transform .15s;flex-shrink:0} .pharma-field-row.field-open .pharma-field-chev{transform:rotate(180deg)} /* Inline text panel revealed on tap */ .pharma-field-text{ padding:8px 10px 10px;border-top:1px solid var(--border); font-size:var(--font-size-md);line-height:1.6;color:var(--text); animation:fadeIn var(--duration-sm); } .pharma-field-text--loading{color:var(--text-faint);font-style:italic;font-size:var(--font-size-md)} /* ── Card actions footer ────────────────────────────────────────────────── */ .pharma-drug-actions{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding-top:8px;border-top:1px solid var(--border); } .pharma-drug-source-link{font-size:var(--font-size-sm);color:var(--violet-deep);text-decoration:none;font-weight:500} .pharma-drug-source-link:hover{text-decoration:underline} .pharma-drug-synced{font-size:var(--font-size-2xs);color:var(--text-faint);margin-left:auto} /* Drill-down session button (per-drug) */ .pharma-drug-drill-btn{ display:inline-flex;align-items:center;gap:5px;margin-left:auto; padding:5px 12px;border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:700; border:1.5px solid var(--violet);color:var(--violet-deep);background:transparent; cursor:pointer;transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } .pharma-drug-drill-btn:hover{background:color-mix(in srgb,var(--violet) 10%,transparent)} /* ── Session builder sheet ──────────────────────────────────────────────── */ .pharma-session-sheet{max-width:560px} .pharma-session-sheet .sheet-head{margin-bottom:14px} .pharma-session-templates{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px} @media(max-width:480px){.pharma-session-templates{grid-template-columns:repeat(2,1fr)}} .pharma-tmpl-btn{ padding:10px 8px;border-radius:var(--radius-md);text-align:center;border:1.5px solid var(--border); background:var(--surface);cursor:pointer;transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } .pharma-tmpl-btn.active{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 8%,var(--surface))} .pharma-tmpl-btn:hover{border-color:var(--violet)} .pharma-tmpl-icon{font-size:18px;margin-bottom:4px} .pharma-tmpl-name{font-size:var(--font-size-sm);font-weight:600;color:var(--text)} .pharma-tmpl-desc{font-size:var(--font-size-xs);color:var(--text-faint);margin-top:2px} .pharma-session-row{margin-bottom:12px} .pharma-session-row-label{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-faint);margin-bottom:6px} .pharma-session-chips{display:flex;flex-wrap:wrap;gap:6px} .pharma-session-chip{ display:inline-flex;align-items:center; padding:10px 13px;min-height:44px;border-radius:var(--radius-pill);font-size:var(--font-size-sm);font-weight:600; border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer; transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } .pharma-session-chip.active{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 10%,var(--surface));color:var(--violet-deep)} /* Card cap slider row */ .pharma-session-cap-row{margin-bottom:12px} .pharma-session-cap-label-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px} .pharma-session-cap-val{font-size:var(--font-size-sm);font-weight:600;color:var(--violet-deep);font-variant-numeric:tabular-nums} .pharma-session-cap-slider{ width:100%;accent-color:var(--violet);cursor:pointer; height:4px;border-radius:var(--radius-2xs); } /* Count preview + launch */ .pharma-session-count{ text-align:center;font-size:var(--font-size-md);font-weight:600;color:var(--violet-deep); padding:8px 0 4px;min-height:22px;transition:color .15s; } .pharma-session-count--empty{color:var(--text-faint)} .pharma-session-launch{ width:100%;padding:12px;margin-top:4px;border-radius:var(--radius-md); font-size:var(--font-size-lg);font-weight:700;border:none; background:var(--violet);color:var(--text-on-pharma);cursor:pointer; box-shadow:0 2px 0 var(--violet-deep);transition:background .1s,color .1s,border-color .1s,box-shadow .1s,transform .1s,opacity .1s; } .pharma-session-launch:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--violet-deep)} .pharma-session-launch:active{transform:translateY(1px);box-shadow:none} .pharma-session-launch:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none} /* ── Pharma toolbar rows ────────────────────────────────────────────────── */ .pharma-tb-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .pharma-tb-row--filters{flex-wrap:wrap} /* ── View toggle (Drugs / Classes) — equal-width ─────────────────────────── */ .pharma-view-toggle{ display:flex;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-md);padding:2px;gap:2px;flex-shrink:0; } @media(max-width:480px){.pharma-view-toggle{width:100%}} .pharma-view-btn{ /* flex:1 makes both Drugs and Classes buttons the same width */ flex:1;padding:4px 12px;border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:600; border:none;background:transparent;color:var(--text-muted);cursor:pointer;white-space:nowrap; transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } .pharma-view-btn.active{background:var(--violet);color:var(--text-on-pharma);box-shadow:var(--shadow-pill)} /* ── Filter disclosure toggle (H-P1-04) ────────────────────────────────── */ /* Collapses row 2 (level + status + extras chips) behind a single chip. Shows active filter count as a small badge. Row 2 auto-opens when any filter is active; JS also respects state.pharmaLib.filterRowOpen. */ .pharma-filter-toggle{ padding:5px 11px;border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:600; border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer; display:flex;align-items:center;gap:5px; transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } .pharma-filter-toggle.active{ border-color:var(--violet);background:color-mix(in srgb,var(--violet) 10%,var(--surface));color:var(--violet-deep); } .pharma-filter-count{ display:inline-flex;align-items:center;justify-content:center; width:16px;height:16px;border-radius:50%; background:var(--violet);color:var(--text-on-pharma);font-size:9px;font-weight:700; } /* ── Select mode toggle ─────────────────────────────────────────────────── */ .pharma-select-toggle{ padding:5px 11px;border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:600; border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer; transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } .pharma-select-toggle.active{ border-color:var(--violet);background:color-mix(in srgb,var(--violet) 10%,var(--surface));color:var(--violet-deep); } /* ── Drug card select ring + checkbox ──────────────────────────────────── */ .pharma-drug-card.pharma-selected{ border-color:var(--violet); box-shadow:0 0 0 2px color-mix(in srgb,var(--violet) 30%,transparent); } .pharma-select-check{ width:20px;height:20px;border-radius:50%;border:2px solid var(--border); background:var(--surface);display:flex;align-items:center;justify-content:center; flex-shrink:0;margin-right:4px;transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } .pharma-select-check.checked{background:var(--violet);border-color:var(--violet);color:white} .pharma-select-check svg{width:11px;height:11px;stroke:white} /* ── Bulk action bar ────────────────────────────────────────────────────── */ .pharma-bulk-bar{ position:fixed;bottom:0;left:0;right:0;z-index:250; /* above tab bar (200) */ display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--surface-alt2);border-top:1px solid var(--border); box-shadow:var(--shadow-floating-bar); /* H-P2-01: token replaces literal */ animation:sheetUp var(--duration-md) ease-out; /* WS5: canonical sheetUp (full-slide) */ } /* WS5 (2026-05-05): @keyframes sheetUp = full-slide bottom-sheet enter (translateY(100%)→none). @keyframes sheetCentreIn = peek-fade for centred modals + banners (translateY(20px)+opacity). @keyframes backdropIn = backdrop opacity fade. All three defined as singletons below. */ .pharma-bulk-count{font-size:var(--font-size-md);font-weight:600;color:var(--text);flex:1} .pharma-bulk-btn{ display:inline-flex;align-items:center;justify-content:center; padding:10px 16px;min-height:44px;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:700; border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted); cursor:pointer;transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm);white-space:nowrap; } .pharma-bulk-btn--primary{ background:var(--violet);color:var(--text-on-pharma);border-color:var(--violet); box-shadow:0 2px 0 var(--violet-deep); } .pharma-bulk-btn--primary:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--violet-deep)} /* ── Class grid ─────────────────────────────────────────────────────────── */ /* patch-032 round 5 — .pharma-class-grid rules removed. The class is preserved on the col-stack wrapper as an extraClass; the grid-template-columns media rules were never effective (parent was display:flex, ignored). */ /* ── Class card ─────────────────────────────────────────────────────────── */ .pharma-class-card{ background:var(--surface-alt2);border:1px solid var(--border);border-radius:var(--radius); border-left:3px solid var(--violet);overflow:hidden;transition:box-shadow var(--duration-sm); display:flex;flex-direction:column; } .pharma-class-card:hover{box-shadow:var(--shadow-sm)} .pharma-class-card.expanded{border-color:var(--violet)} .pharma-class-header{ display:flex;align-items:flex-start;gap:8px;padding:10px 12px 8px;cursor:pointer;user-select:none; } .pharma-class-name-wrap{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0} .pharma-class-name{font-size:var(--font-size-lg);font-weight:600;color:var(--text)} .pharma-class-levels{display:flex;gap:4px;flex-wrap:wrap} .pharma-class-header-right{display:flex;align-items:center;gap:5px;flex-shrink:0;padding-top:1px} .pharma-class-drug-count{font-size:var(--font-size-xs);color:var(--text-faint);font-weight:600;font-variant-numeric:tabular-nums} .pharma-class-card.expanded .pharma-drug-chev{transform:rotate(180deg)} /* Per-field rows */ .pharma-class-field-list{padding:0 12px 8px;display:flex;flex-direction:column;gap:3px} .pharma-class-field-row{ display:flex;align-items:center;gap:8px;padding:3px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 40%,transparent); } .pharma-class-field-row:last-child{border-bottom:none} .pharma-class-field-label{font-size:var(--font-size-xs);font-weight:500;color:var(--text-muted);flex:1;white-space:nowrap} .pharma-class-field-dots{display:flex;gap:3px;align-items:center;flex-wrap:wrap} .pharma-class-field-more{font-size:9px;color:var(--text-faint);margin-left:2px} .pharma-class-field-stat{ font-size:var(--font-size-2xs);font-weight:600;color:var(--text-faint); font-variant-numeric:tabular-nums;white-space:nowrap;min-width:32px;text-align:right; } .pharma-class-field-stat--new{color:color-mix(in srgb,var(--text-faint) 70%,transparent)} /* Expanded drug list inside class card */ .pharma-class-drug-list{ border-top:1px solid var(--border); display:flex;flex-direction:column; } .pharma-class-drug-row{ display:flex;align-items:center;gap:8px;padding:7px 12px; border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent); cursor:pointer;transition:background .1s; } .pharma-class-drug-row:last-child{border-bottom:none} .pharma-class-drug-row:hover{background:color-mix(in srgb,var(--violet) 5%,var(--surface-alt2))} .pharma-class-drug-row.pharma-selected{background:color-mix(in srgb,var(--violet) 10%,var(--surface-alt2))} .pharma-class-drug-name{font-size:var(--font-size-md);font-weight:500;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* smaller select check variant */ .pharma-select-check--sm{width:16px;height:16px;border-radius:var(--radius-tiny)} .pharma-select-check--sm svg{width:9px;height:9px} .pharma-select-check.partial{ background:color-mix(in srgb,var(--violet) 30%,var(--surface)); border-color:var(--violet);color:var(--violet-deep); font-size:var(--font-size-xs);font-weight:700;display:flex;align-items:center;justify-content:center; } /* Class card footer */ .pharma-class-footer{ display:flex;align-items:center;gap:8px;padding:8px 12px; border-top:1px solid var(--border);margin-top:auto; } .pharma-class-add-all{ padding:4px 10px;border-radius:var(--btn-radius);font-size:var(--font-size-sm);font-weight:600; border:1.5px solid var(--border);background:transparent;color:var(--text-muted); cursor:pointer;transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } .pharma-class-add-all:hover{border-color:var(--violet);color:var(--violet-deep)} /* Extras filter chip variant */ .pharma-filter-chip--extras{ opacity:.55;font-style:italic; } .pharma-filter-chip--extras.active{opacity:1;font-style:normal} /* ── Comparison sheet ───────────────────────────────────────────────────── */ .pharma-compare-sheet{ max-width:none;width:min(98vw,960px);max-height:88dvh; display:flex;flex-direction:column;overflow:hidden; } /* Scrollable wrapper — horizontal scroll on narrow screens */ .pharma-cmp-scroll{ flex:1;overflow-y:auto;overflow-x:auto; /* ensure field-label col sticks on horizontal scroll */ } .pharma-cmp-name-row,.pharma-cmp-row{ display:grid;gap:1px;background:var(--border); /* 90px sticky label col + min 160px per drug col */ grid-template-columns:90px repeat(var(--cmp-cols,2),minmax(160px,1fr)); min-width:calc(90px + var(--cmp-cols,2)*160px); } .pharma-cmp-name-row{border-bottom:2px solid var(--border);position:sticky;top:0;z-index:2} .pharma-cmp-drug-header{ display:flex;flex-direction:column;gap:4px;padding:10px 10px; background:var(--surface-alt2); } .pharma-cmp-drug-name{font-size:var(--font-size-md);font-weight:600;color:var(--text);line-height:1.3} .pharma-cmp-field-label{ display:flex;align-items:center; padding:0 8px;font-size:var(--font-size-2xs);font-weight:700;text-transform:uppercase; letter-spacing:.05em;color:var(--text-faint);background:var(--surface); border-right:1px solid var(--border);position:sticky;left:0;z-index:1; } .pharma-cmp-cell{ padding:8px 10px;background:var(--surface-alt2); display:flex;flex-direction:column;gap:5px; transition:background var(--duration-sm); } .pharma-cmp-cell--has-text{cursor:pointer} .pharma-cmp-cell--has-text:hover{background:color-mix(in srgb,var(--violet) 5%,var(--surface-alt2))} /* Compact FSRS state row: dot + short label */ .pharma-cmp-state-row{display:flex;align-items:center;gap:5px} .pharma-cmp-state-dot{ width:8px;height:8px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0; } .pharma-cmp-state-label{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .pharma-cmp-state-label--new{display:none} .pharma-cmp-state-label--learning{color:var(--honey-deep)} .pharma-cmp-state-label--review{color:var(--sage-deep)} .pharma-cmp-state-label--due,.pharma-cmp-state-label--overdue{color:var(--coral-deep)} .pharma-cmp-cell-text{font-size:var(--font-size-md);line-height:1.6;color:var(--text);animation:fadeIn .15s} .pharma-cmp-cell-text--collapsed{ display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; color:var(--text-muted); } .pharma-cmp-cell--expanded .pharma-cmp-cell-text--collapsed{ display:block;-webkit-line-clamp:unset;overflow:visible;color:var(--text); } .pharma-cmp-loading{padding:24px;text-align:center;color:var(--text-faint);font-size:var(--font-size-md)} /* patch-007 — Active-card state, Effect 6 (composed). WS4: consolidated into .card.keyboard-focused above; per-type rules kept here for recall + pharma (which still emit .recall-card/.pharma-card) as composition aliases that delegate to the unified token-driven rule. SAQ — Sprint J: outer wrapper merged into single element; rule targets .saq-card directly (no longer needs .saq-card-face descendant). */ .recall-card.keyboard-focused{ transition:transform var(--duration-sm) var(--ease-out), box-shadow var(--duration-sm) var(--ease-out), padding var(--duration-sm) var(--ease-out), background var(--duration-sm) var(--ease-out), border-left-width var(--duration-sm) var(--ease-out); transform:translateY(-1px); border-left-width:calc(var(--card-stripe-width) + 2px); /* 6px */ padding-left:calc(var(--card-padding-inline) - 2px); /* 12px */ background:color-mix(in srgb,var(--sky) 10%,var(--surface-alt2)); /* WS11: --sage→--sky */ box-shadow:0 4px 14px -4px color-mix(in srgb,var(--sky) 40%,transparent); } .pharma-card.keyboard-focused{ background:color-mix(in srgb,var(--violet) 10%,var(--surface-alt2)); box-shadow:0 4px 14px -4px color-mix(in srgb,var(--violet) 40%,transparent); } /* SAQ — Sprint J: single element; rule targets .saq-card directly. */ .saq-card.keyboard-focused.active{ transition:transform var(--duration-sm) var(--ease-out), box-shadow var(--duration-sm) var(--ease-out), padding var(--duration-sm) var(--ease-out), background var(--duration-sm) var(--ease-out), border-left-width var(--duration-sm) var(--ease-out); transform:translateY(-1px); border-left-width:calc(var(--card-stripe-width) + 2px); /* 6px */ padding-left:calc(var(--card-padding-inline) + 3px); /* 17px */ background:color-mix(in srgb,var(--rose) 10%,var(--surface-alt2)); /* WS11: --honey→--rose */ box-shadow:0 4px 14px -4px color-mix(in srgb,var(--rose) 40%,transparent); } @media (prefers-reduced-motion: reduce){ .recall-card.keyboard-focused, .saq-card.keyboard-focused.active{transform:none;transition:background var(--duration-sm) var(--ease-out)} } .recall-prompt{font-weight:500;font-size:var(--font-size-xl);line-height:1.45} /* v172 — Answer body bg one shade darker than card surface (Issue #21). Cream-on-cream lacked depth; color-mix darkens --surface by ~6% for a subtle nested-surface feel. Border now solid 0.5px instead of dashed. */ /* Card-redesign 2026-05-05 IMPROVE — solidity rule §21: no inner box-within-card chrome. Body text sits flush on the card surface; no bg, no border. Padding compensates for the lost inset. */ /* Sprint J — .recall-answer display rules DELETED. recallCard() now emits .fc-answer; visibility handled by .study-card.revealed .fc-answer. Only typography rules (p, li, table etc) remain below — they cover both classes. */ /* card-unification sprint J: contenteditable styling for fc-answer */ .recall-answer[contenteditable="true"],.fc-answer[contenteditable="true"]{border-color:var(--accent);border-style:solid;background:var(--accent-soft);outline:none} /* v176 — Rich-text typography for ALL markdown-rendered card bodies. Applies to every renderRichTextIn target so paragraphs, lists, code, blockquotes, and headings get proper spacing + styling instead of collapsing into a wall of text. */ .recall-answer p,.fc-answer p,.fc-callout-body p,.fc-callout-body-inline p, .saq-callout-body p, .fc-tab-panel p,.model-body p,.toggle-body p,.card-body p{margin:0 0 .55em} .recall-answer p:last-child,.fc-answer p:last-child,.fc-callout-body p:last-child, .fc-callout-body-inline p:last-child,.saq-callout-body p:last-child,.fc-tab-panel p:last-child, .model-body p:last-child,.toggle-body p:last-child,.card-body p:last-child{margin-bottom:0} .recall-answer ul,.recall-answer ol,.fc-answer ul,.fc-answer ol, .fc-callout-body ul,.fc-callout-body ol,.fc-callout-body-inline ul,.fc-callout-body-inline ol, .saq-callout-body ul, .fc-tab-panel ul,.saq-callout-body ol,.fc-tab-panel ol,.model-body ul,.model-body ol, .toggle-body ul,.toggle-body ol,.card-body ul,.card-body ol{margin:.3em 0 .55em;padding-left:1.4em} .recall-answer li,.fc-answer li,.fc-callout-body li,.fc-callout-body-inline li, .saq-callout-body li, .fc-tab-panel li,.model-body li,.toggle-body li,.card-body li{margin:.15em 0} .recall-answer code,.fc-answer code,.fc-callout-body code,.fc-callout-body-inline code, .saq-callout-body code, .fc-tab-panel code,.model-body code,.toggle-body code,.card-body code{ font-family:var(--font-mono);font-size:.92em; background:color-mix(in srgb,var(--text) 8%,transparent); padding:1px 5px;border-radius:var(--radius-tiny); } .recall-answer blockquote,.fc-answer blockquote,.fc-callout-body blockquote, .fc-callout-body-inline blockquote,.saq-callout-body blockquote,.fc-tab-panel blockquote,.model-body blockquote, .toggle-body blockquote,.card-body blockquote{ margin:.4em 0;padding:6px 12px; border-left:3px solid color-mix(in srgb,var(--accent) 50%,var(--border)); background:color-mix(in srgb,var(--accent) 5%,transparent); color:var(--text-muted);font-style:italic; } .recall-answer h1,.recall-answer h2,.recall-answer h3,.recall-answer h4, .fc-answer h1,.fc-answer h2,.fc-answer h3,.fc-answer h4, .fc-callout-body h1,.fc-callout-body h2,.fc-callout-body h3, .saq-callout-body h1, .fc-tab-panel h1,.saq-callout-body h2,.fc-tab-panel h2,.saq-callout-body h3,.fc-tab-panel h3, .model-body h1,.model-body h2,.model-body h3, .card-body h1,.card-body h2,.card-body h3{ font-size:1em;font-weight:600;margin:.5em 0 .25em;color:var(--text); border:0;padding:0;display:block; } .recall-answer strong,.fc-answer strong,.fc-callout-body strong, .saq-callout-body strong, .fc-tab-panel strong,.model-body strong,.card-body strong{font-weight:600;color:var(--text)} .recall-answer em,.fc-answer em,.fc-callout-body em, .saq-callout-body em, .fc-tab-panel em,.model-body em,.card-body em{font-style:italic;color:var(--text)} /* patch-032 — markdown tables in answer bodies (model-body / saq-callout-body / card-body / fc-callout-body / recall-answer). Default browser tables render borderless which makes dense PK / compare-and-contrast tables impossible to parse. Faint cell borders + tinted header row + zebra rows give the structure the eye needs without competing with the prose. Numbers stay tabular for alignment. */ .recall-answer table,.fc-answer table,.fc-callout-body table,.fc-callout-body-inline table, .saq-callout-body table, .fc-tab-panel table,.model-body table,.card-body table,.toggle-body table{ /* iOS-render audit 2026-05-23 — dense PK / compare-and-contrast tables exceed the card width and used to overflow off the right edge (clipped). GitHub- standard CSS-only fix: make the table a block box that scrolls horizontally within the card. width:max-content lets columns size to content; max-width caps narrow tables at the card width; overscroll-x:contain stops the swipe from hijacking page scroll. No renderer change needed. */ display:block; width:max-content; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; border-collapse:collapse;margin:8px 0; font-size:.95em;line-height:1.4; font-variant-numeric:tabular-nums; } .recall-answer th,.recall-answer td,.fc-answer th,.fc-answer td, .fc-callout-body th,.fc-callout-body td,.fc-callout-body-inline th,.fc-callout-body-inline td, .saq-callout-body th, .fc-tab-panel th,.saq-callout-body td,.fc-tab-panel td,.model-body th,.model-body td, .card-body th,.card-body td,.toggle-body th,.toggle-body td{ border:1px solid color-mix(in srgb,var(--border) 70%,transparent); padding:5px 8px;text-align:left;vertical-align:top; } .recall-answer th,.fc-answer th,.fc-callout-body th,.fc-callout-body-inline th, .saq-callout-body th, .fc-tab-panel th,.model-body th,.card-body th,.toggle-body th{ background:color-mix(in srgb,var(--surface-alt) 60%,transparent); font-weight:600;color:var(--text); } /* Zebra: every even body row tinted; keeps header distinct without a heavier border */ .recall-answer tbody tr:nth-child(even) td, .fc-answer tbody tr:nth-child(even) td, .fc-callout-body tbody tr:nth-child(even) td, .fc-callout-body-inline tbody tr:nth-child(even) td, .saq-callout-body tbody tr:nth-child(even) td, .fc-tab-panel tbody tr:nth-child(even) td, .model-body tbody tr:nth-child(even) td, .card-body tbody tr:nth-child(even) td, .toggle-body tbody tr:nth-child(even) td{ background:color-mix(in srgb,var(--surface-alt) 30%,transparent); } /* First column (label column for compare-and-contrast tables) tinted slightly so the eye anchors to the parameter names. */ .recall-answer td:first-child,.fc-answer td:first-child, .fc-callout-body td:first-child,.fc-callout-body-inline td:first-child, .saq-callout-body td:first-child, .fc-tab-panel td:first-child,.model-body td:first-child, .card-body td:first-child,.toggle-body td:first-child{ color:var(--text-muted);font-weight:500; } /* v177 — SAQ model-answer formatting refinements. Three groups of rules: (1) kill the deadspace between headings and their first following sibling (paragraphs and lists no longer add their own margin-top); (2) strengthen GFM table borders so the cells are obviously gridded (the prior 70%-transparent border was near-invisible on cream); (3) typed examiner-callout blockquotes — classifyCallouts() in app.js tags
s whose first matches a known label ("Examiner misses to nail:", "One thing to remember:", "Definition:", "Keystone:", "Safety margin:") with .callout + .callout-. The source markdown is unchanged for export fidelity; the in-app render hides the verbose label and draws an icon + coloured left-bar. */ /* (1) Heading deadspace — zero top-margin on the first element after a heading. Existing rule sets h2/h3/h4 to margin:.5em 0 .25em; sibling paragraphs and lists were adding their own .55em / .3em top, producing visible deadspace. */ .recall-answer h1+*,.recall-answer h2+*,.recall-answer h3+*,.recall-answer h4+*, .fc-answer h1+*,.fc-answer h2+*,.fc-answer h3+*,.fc-answer h4+*, .fc-callout-body h1+*,.fc-callout-body h2+*,.fc-callout-body h3+*, .fc-callout-body-inline h1+*,.fc-callout-body-inline h2+*,.fc-callout-body-inline h3+*, .saq-callout-body h1+*, .fc-tab-panel h1+*,.saq-callout-body h2+*,.fc-tab-panel h2+*,.saq-callout-body h3+*,.fc-tab-panel h3+*, .model-body h1+*,.model-body h2+*,.model-body h3+*, .card-body h1+*,.card-body h2+*,.card-body h3+*, .toggle-body h1+*,.toggle-body h2+*,.toggle-body h3+*{margin-top:0} /* (2) Table border strengthening — same selectors as the patch-032 rules above but with a solid, visible border colour. Header row gets a slightly darker tint to lock it as the heading. */ .recall-answer th,.recall-answer td,.fc-answer th,.fc-answer td, .fc-callout-body th,.fc-callout-body td,.fc-callout-body-inline th,.fc-callout-body-inline td, .saq-callout-body th, .fc-tab-panel th,.saq-callout-body td,.fc-tab-panel td,.model-body th,.model-body td, .card-body th,.card-body td,.toggle-body th,.toggle-body td{ border-color:color-mix(in srgb,var(--border) 100%,transparent); } .recall-answer th,.fc-answer th,.fc-callout-body th,.fc-callout-body-inline th, .saq-callout-body th, .fc-tab-panel th,.model-body th,.card-body th,.toggle-body th{ background:color-mix(in srgb,var(--accent) 12%,var(--surface-alt)); border-bottom:2px solid color-mix(in srgb,var(--accent) 40%,var(--border)); } /* (3a) Common chrome for typed callouts. 4px coloured left-bar, gentle tint, 16px left padding leaves room for the absolutely-positioned icon. */ .recall-answer blockquote.callout,.fc-answer blockquote.callout, .fc-callout-body blockquote.callout,.fc-callout-body-inline blockquote.callout, .saq-callout-body blockquote.callout, .fc-tab-panel blockquote.callout,.model-body blockquote.callout, .card-body blockquote.callout,.toggle-body blockquote.callout{ position:relative; margin:.6em 0;padding:8px 12px 8px 38px; border-left:4px solid var(--accent); background:color-mix(in srgb,var(--accent) 5%,transparent); color:var(--text);font-style:normal; border-radius:0 4px 4px 0; } .recall-answer blockquote.callout::before,.fc-answer blockquote.callout::before, .fc-callout-body blockquote.callout::before,.fc-callout-body-inline blockquote.callout::before, .saq-callout-body blockquote.callout::before, .fc-tab-panel blockquote.callout::before,.model-body blockquote.callout::before, .card-body blockquote.callout::before,.toggle-body blockquote.callout::before{ content:'';position:absolute;left:12px;top:10px;width:18px;height:18px; background-position:center;background-repeat:no-repeat;background-size:contain; } /* Tighten body spacing inside callouts so the icon aligns with the first line. */ .recall-answer blockquote.callout > *:first-child, .fc-answer blockquote.callout > *:first-child, .fc-callout-body blockquote.callout > *:first-child, .fc-callout-body-inline blockquote.callout > *:first-child, .saq-callout-body blockquote.callout > *:first-child, .fc-tab-panel blockquote.callout > *:first-child, .model-body blockquote.callout > *:first-child, .card-body blockquote.callout > *:first-child, .toggle-body blockquote.callout > *:first-child{margin-top:0} .recall-answer blockquote.callout > *:last-child, .fc-answer blockquote.callout > *:last-child, .fc-callout-body blockquote.callout > *:last-child, .fc-callout-body-inline blockquote.callout > *:last-child, .saq-callout-body blockquote.callout > *:last-child, .fc-tab-panel blockquote.callout > *:last-child, .model-body blockquote.callout > *:last-child, .card-body blockquote.callout > *:last-child, .toggle-body blockquote.callout > *:last-child{margin-bottom:0} /* (3b) callout-examiner — high-yield / examiner-pitfalls. Iconless: the peri (purple) left-bar carries the signal, no glyph. Most common callout (63% of SAQs). Reduce left-padding since there's no icon slot to reserve. */ .recall-answer blockquote.callout-examiner,.fc-answer blockquote.callout-examiner, .fc-callout-body blockquote.callout-examiner,.fc-callout-body-inline blockquote.callout-examiner, .saq-callout-body blockquote.callout-examiner, .fc-tab-panel blockquote.callout-examiner,.model-body blockquote.callout-examiner, .card-body blockquote.callout-examiner,.toggle-body blockquote.callout-examiner{ border-left-color:var(--peri,#7c5cb8); background:color-mix(in srgb,var(--peri,#7c5cb8) 6%,transparent); padding-left:14px; } .recall-answer blockquote.callout-examiner::before,.fc-answer blockquote.callout-examiner::before, .fc-callout-body blockquote.callout-examiner::before,.fc-callout-body-inline blockquote.callout-examiner::before, .saq-callout-body blockquote.callout-examiner::before, .fc-tab-panel blockquote.callout-examiner::before,.model-body blockquote.callout-examiner::before, .card-body blockquote.callout-examiner::before,.toggle-body blockquote.callout-examiner::before{ content:none; } /* (3c) callout-key — "One thing to remember". Lightbulb icon, honey accent. */ .recall-answer blockquote.callout-key,.fc-answer blockquote.callout-key, .fc-callout-body blockquote.callout-key,.fc-callout-body-inline blockquote.callout-key, .saq-callout-body blockquote.callout-key, .fc-tab-panel blockquote.callout-key,.model-body blockquote.callout-key, .card-body blockquote.callout-key,.toggle-body blockquote.callout-key{ border-left-color:var(--honey,#d4922b); background:color-mix(in srgb,var(--honey,#d4922b) 7%,transparent); } .recall-answer blockquote.callout-key::before,.fc-answer blockquote.callout-key::before, .fc-callout-body blockquote.callout-key::before,.fc-callout-body-inline blockquote.callout-key::before, .saq-callout-body blockquote.callout-key::before, .fc-tab-panel blockquote.callout-key::before,.model-body blockquote.callout-key::before, .card-body blockquote.callout-key::before,.toggle-body blockquote.callout-key::before{ /* Lucide `lightbulb` */ background-image:url("data:image/svg+xml;utf8,"); } /* (3d) callout-definition — vocabulary clarification. Book icon, sage accent. */ .recall-answer blockquote.callout-definition,.fc-answer blockquote.callout-definition, .fc-callout-body blockquote.callout-definition,.fc-callout-body-inline blockquote.callout-definition, .saq-callout-body blockquote.callout-definition, .fc-tab-panel blockquote.callout-definition,.model-body blockquote.callout-definition, .card-body blockquote.callout-definition,.toggle-body blockquote.callout-definition{ border-left-color:var(--sage,#5e8b6c); background:color-mix(in srgb,var(--sage,#5e8b6c) 6%,transparent); } .recall-answer blockquote.callout-definition::before,.fc-answer blockquote.callout-definition::before, .fc-callout-body blockquote.callout-definition::before,.fc-callout-body-inline blockquote.callout-definition::before, .saq-callout-body blockquote.callout-definition::before, .fc-tab-panel blockquote.callout-definition::before,.model-body blockquote.callout-definition::before, .card-body blockquote.callout-definition::before,.toggle-body blockquote.callout-definition::before{ /* Lucide `book-open` */ background-image:url("data:image/svg+xml;utf8,"); } /* (3e) callout-safety — "Keystone" / "Safety margin". Warning-triangle icon. */ .recall-answer blockquote.callout-safety,.fc-answer blockquote.callout-safety, .fc-callout-body blockquote.callout-safety,.fc-callout-body-inline blockquote.callout-safety, .saq-callout-body blockquote.callout-safety, .fc-tab-panel blockquote.callout-safety,.model-body blockquote.callout-safety, .card-body blockquote.callout-safety,.toggle-body blockquote.callout-safety{ border-left-color:#c0573a; background:color-mix(in srgb,#c0573a 7%,transparent); } .recall-answer blockquote.callout-safety::before,.fc-answer blockquote.callout-safety::before, .fc-callout-body blockquote.callout-safety::before,.fc-callout-body-inline blockquote.callout-safety::before, .saq-callout-body blockquote.callout-safety::before, .fc-tab-panel blockquote.callout-safety::before,.model-body blockquote.callout-safety::before, .card-body blockquote.callout-safety::before,.toggle-body blockquote.callout-safety::before{ /* Lucide `triangle-alert` */ background-image:url("data:image/svg+xml;utf8,"); } /* v178 — Six new typed callouts: Pitfall, Mnemonic, Clinical pearl, Equation, Mechanism, Heuristic. Same chrome pattern as the existing four (4px coloured left-bar, 5% tint background, ::before Lucide SVG icon, 38px left-padding to reserve the icon slot). Background opacity halved from sky-fill / lime-fill per user feedback ("less vibrant — try 50%"). Each variant adds its colour token + icon override. */ /* (3g) callout-pitfall — common-mistake / wrong-track signal. Red bar (shares with safety) but distinct icon (Lucide `octagon-alert`). */ .recall-answer blockquote.callout-pitfall,.fc-answer blockquote.callout-pitfall, .fc-callout-body blockquote.callout-pitfall,.fc-callout-body-inline blockquote.callout-pitfall, .saq-callout-body blockquote.callout-pitfall, .fc-tab-panel blockquote.callout-pitfall,.model-body blockquote.callout-pitfall, .card-body blockquote.callout-pitfall,.toggle-body blockquote.callout-pitfall{ border-left-color:#c0573a; background:color-mix(in srgb,#c0573a 7%,transparent); } .recall-answer blockquote.callout-pitfall::before,.fc-answer blockquote.callout-pitfall::before, .fc-callout-body blockquote.callout-pitfall::before,.fc-callout-body-inline blockquote.callout-pitfall::before, .saq-callout-body blockquote.callout-pitfall::before, .fc-tab-panel blockquote.callout-pitfall::before,.model-body blockquote.callout-pitfall::before, .card-body blockquote.callout-pitfall::before,.toggle-body blockquote.callout-pitfall::before{ /* Lucide `octagon-alert` */ background-image:url("data:image/svg+xml;utf8,"); } /* (3h) callout-mnemonic — peri (matches examiner family). Lucide `brain`. The body uses the .mnem-letter chip pattern (see below) so `**M**ethanol` in source renders as a coloured-chip "M" continuous with "ethanol". */ .recall-answer blockquote.callout-mnemonic,.fc-answer blockquote.callout-mnemonic, .fc-callout-body blockquote.callout-mnemonic,.fc-callout-body-inline blockquote.callout-mnemonic, .saq-callout-body blockquote.callout-mnemonic, .fc-tab-panel blockquote.callout-mnemonic,.model-body blockquote.callout-mnemonic, .card-body blockquote.callout-mnemonic,.toggle-body blockquote.callout-mnemonic{ border-left-color:var(--peri,#7c5cb8); background:color-mix(in srgb,var(--peri,#7c5cb8) 6%,transparent); } .recall-answer blockquote.callout-mnemonic::before,.fc-answer blockquote.callout-mnemonic::before, .fc-callout-body blockquote.callout-mnemonic::before,.fc-callout-body-inline blockquote.callout-mnemonic::before, .saq-callout-body blockquote.callout-mnemonic::before, .fc-tab-panel blockquote.callout-mnemonic::before,.model-body blockquote.callout-mnemonic::before, .card-body blockquote.callout-mnemonic::before,.toggle-body blockquote.callout-mnemonic::before{ /* Lucide `brain` */ background-image:url("data:image/svg+xml;utf8,"); } /* Mnemonic letter chips — `**M**ethanol` source renders as `Methanol`. Inside callout-mnemonic, the surviving s (after classifier strips the "Mnemonic:" label) get a small coloured chip-pill. Continuous with the following text (no trailing margin) so `ethanol` reads as one word. */ .recall-answer blockquote.callout-mnemonic strong,.fc-answer blockquote.callout-mnemonic strong, .fc-callout-body blockquote.callout-mnemonic strong,.fc-callout-body-inline blockquote.callout-mnemonic strong, .saq-callout-body blockquote.callout-mnemonic strong, .fc-tab-panel blockquote.callout-mnemonic strong,.model-body blockquote.callout-mnemonic strong, .card-body blockquote.callout-mnemonic strong,.toggle-body blockquote.callout-mnemonic strong{ background:color-mix(in srgb,var(--peri,#7c5cb8) 18%,transparent); color:var(--peri-deep,var(--peri,#7c5cb8)); padding:1px 5px;border-radius:3px; font-weight:700;font-size:1.05em; margin-right:0; } /* (3i) callout-pearl — Clinical pearl. Sky family + Lucide `search-check`. Background tinted at 7% per "less vibrant" feedback (was 14% sky-fill). */ .recall-answer blockquote.callout-pearl,.fc-answer blockquote.callout-pearl, .fc-callout-body blockquote.callout-pearl,.fc-callout-body-inline blockquote.callout-pearl, .saq-callout-body blockquote.callout-pearl, .fc-tab-panel blockquote.callout-pearl,.model-body blockquote.callout-pearl, .card-body blockquote.callout-pearl,.toggle-body blockquote.callout-pearl{ border-left-color:var(--sky,#4D8CB0); background:color-mix(in srgb,var(--sky,#4D8CB0) 7%,transparent); } .recall-answer blockquote.callout-pearl::before,.fc-answer blockquote.callout-pearl::before, .fc-callout-body blockquote.callout-pearl::before,.fc-callout-body-inline blockquote.callout-pearl::before, .saq-callout-body blockquote.callout-pearl::before, .fc-tab-panel blockquote.callout-pearl::before,.model-body blockquote.callout-pearl::before, .card-body blockquote.callout-pearl::before,.toggle-body blockquote.callout-pearl::before{ /* Lucide `search-check` */ background-image:url("data:image/svg+xml;utf8,"); } /* (3j) callout-equation — Lime family + Lucide `sigma`. Source content can be either `> **Equation:** [[axiom:slug]]` (transcluded from the axiom catalog) OR inline KaTeX `> **Equation:** $V_D / V_T = (P_{aCO_2} - P_{ECO_2}) / P_{aCO_2}$`. When transclusion target is missing, falls back silently to the inline text. */ .recall-answer blockquote.callout-equation,.fc-answer blockquote.callout-equation, .fc-callout-body blockquote.callout-equation,.fc-callout-body-inline blockquote.callout-equation, .saq-callout-body blockquote.callout-equation, .fc-tab-panel blockquote.callout-equation,.model-body blockquote.callout-equation, .card-body blockquote.callout-equation,.toggle-body blockquote.callout-equation{ border-left-color:var(--saltbush, #5E6670); background:color-mix(in srgb,var(--saltbush, #5E6670) 7%,transparent); } .recall-answer blockquote.callout-equation::before,.fc-answer blockquote.callout-equation::before, .fc-callout-body blockquote.callout-equation::before,.fc-callout-body-inline blockquote.callout-equation::before, .saq-callout-body blockquote.callout-equation::before, .fc-tab-panel blockquote.callout-equation::before,.model-body blockquote.callout-equation::before, .card-body blockquote.callout-equation::before,.toggle-body blockquote.callout-equation::before{ /* Lucide `sigma` */ background-image:url("data:image/svg+xml;utf8,"); } /* (3k) callout-mechanism — Sky family (shares with pearl), distinct icon (Lucide `atom`). Content typically renders as a chip-pipeline (see .md-flow). */ .recall-answer blockquote.callout-mechanism,.fc-answer blockquote.callout-mechanism, .fc-callout-body blockquote.callout-mechanism,.fc-callout-body-inline blockquote.callout-mechanism, .saq-callout-body blockquote.callout-mechanism, .fc-tab-panel blockquote.callout-mechanism,.model-body blockquote.callout-mechanism, .card-body blockquote.callout-mechanism,.toggle-body blockquote.callout-mechanism{ border-left-color:var(--sky,#4D8CB0); background:color-mix(in srgb,var(--sky,#4D8CB0) 7%,transparent); } .recall-answer blockquote.callout-mechanism::before,.fc-answer blockquote.callout-mechanism::before, .fc-callout-body blockquote.callout-mechanism::before,.fc-callout-body-inline blockquote.callout-mechanism::before, .saq-callout-body blockquote.callout-mechanism::before, .fc-tab-panel blockquote.callout-mechanism::before,.model-body blockquote.callout-mechanism::before, .card-body blockquote.callout-mechanism::before,.toggle-body blockquote.callout-mechanism::before{ /* Lucide `atom` */ background-image:url("data:image/svg+xml;utf8,"); } /* (3l) callout-heuristic — Honey family + Lucide `scale`. Body preserves source newlines as visual line breaks (no bullets, no run-on sentence). marked.js with {breaks:true} already converts \n to
, so this rule just kills any inherited list-style and tightens line-height. */ .recall-answer blockquote.callout-heuristic,.fc-answer blockquote.callout-heuristic, .fc-callout-body blockquote.callout-heuristic,.fc-callout-body-inline blockquote.callout-heuristic, .saq-callout-body blockquote.callout-heuristic, .fc-tab-panel blockquote.callout-heuristic,.model-body blockquote.callout-heuristic, .card-body blockquote.callout-heuristic,.toggle-body blockquote.callout-heuristic{ border-left-color:var(--honey,#d4922b); background:color-mix(in srgb,var(--honey,#d4922b) 7%,transparent); } .recall-answer blockquote.callout-heuristic::before,.fc-answer blockquote.callout-heuristic::before, .fc-callout-body blockquote.callout-heuristic::before,.fc-callout-body-inline blockquote.callout-heuristic::before, .saq-callout-body blockquote.callout-heuristic::before, .fc-tab-panel blockquote.callout-heuristic::before,.model-body blockquote.callout-heuristic::before, .card-body blockquote.callout-heuristic::before,.toggle-body blockquote.callout-heuristic::before{ /* Lucide `scale` */ background-image:url("data:image/svg+xml;utf8,"); } .recall-answer blockquote.callout-heuristic p,.fc-answer blockquote.callout-heuristic p, .fc-callout-body blockquote.callout-heuristic p,.fc-callout-body-inline blockquote.callout-heuristic p, .saq-callout-body blockquote.callout-heuristic p, .fc-tab-panel blockquote.callout-heuristic p,.model-body blockquote.callout-heuristic p, .card-body blockquote.callout-heuristic p,.toggle-body blockquote.callout-heuristic p{ line-height:1.6; } /* v178 — Wikilinks: in-app cross-references emitted by the preprocessor for [[topic:CODE]] / [[drug:slug]] / [[recall:slug]] syntax. Style is restrained: inherit colour, dotted underline that strengthens on hover. Cursor pointer signals interactivity. The .wikilink-{type} variants tint the underline so readers can distinguish the cross-reference target at a glance. */ .recall-answer a.wikilink,.fc-answer a.wikilink,.fc-callout-body a.wikilink, .fc-callout-body-inline a.wikilink,.saq-callout-body a.wikilink,.fc-tab-panel a.wikilink,.model-body a.wikilink, .card-body a.wikilink,.toggle-body a.wikilink{ color:inherit;text-decoration:none;cursor:pointer; border-bottom:1px dotted color-mix(in srgb,var(--text) 35%,transparent); transition:border-bottom-color .15s, color .15s; } .recall-answer a.wikilink:hover,.fc-answer a.wikilink:hover, .fc-callout-body a.wikilink:hover,.fc-callout-body-inline a.wikilink:hover, .saq-callout-body a.wikilink:hover, .fc-tab-panel a.wikilink:hover,.model-body a.wikilink:hover, .card-body a.wikilink:hover,.toggle-body a.wikilink:hover{ border-bottom-color:var(--accent);color:var(--accent); } .recall-answer a.wikilink-topic,.fc-answer a.wikilink-topic, .fc-callout-body a.wikilink-topic,.fc-callout-body-inline a.wikilink-topic, .saq-callout-body a.wikilink-topic, .fc-tab-panel a.wikilink-topic,.model-body a.wikilink-topic, .card-body a.wikilink-topic,.toggle-body a.wikilink-topic{ border-bottom-color:color-mix(in srgb,var(--sage,#5e8b6c) 55%,transparent); } .recall-answer a.wikilink-drug,.fc-answer a.wikilink-drug, .fc-callout-body a.wikilink-drug,.fc-callout-body-inline a.wikilink-drug, .saq-callout-body a.wikilink-drug, .fc-tab-panel a.wikilink-drug,.model-body a.wikilink-drug, .card-body a.wikilink-drug,.toggle-body a.wikilink-drug{ border-bottom-color:color-mix(in srgb,var(--honey,#d4922b) 55%,transparent); } .recall-answer a.wikilink-recall,.fc-answer a.wikilink-recall, .fc-callout-body a.wikilink-recall,.fc-callout-body-inline a.wikilink-recall, .saq-callout-body a.wikilink-recall, .fc-tab-panel a.wikilink-recall,.model-body a.wikilink-recall, .card-body a.wikilink-recall,.toggle-body a.wikilink-recall{ border-bottom-color:color-mix(in srgb,var(--peri,#7c5cb8) 55%,transparent); } /* Mnemonic inline expansion (from [[mnemonic:slug]]). Renders as a stack of chipped letter + expansion rows, sharing the callout-mnemonic chip pattern. */ .recall-answer .md-mnemonic,.fc-answer .md-mnemonic,.fc-callout-body .md-mnemonic, .fc-callout-body-inline .md-mnemonic,.saq-callout-body .md-mnemonic,.fc-tab-panel .md-mnemonic,.model-body .md-mnemonic, .card-body .md-mnemonic,.toggle-body .md-mnemonic{ display:inline-flex;flex-direction:column;gap:2px; margin:.3em 0; padding:6px 10px; border-left:3px solid var(--peri,#7c5cb8); background:color-mix(in srgb,var(--peri,#7c5cb8) 5%,transparent); border-radius:0 4px 4px 0; vertical-align:middle; } .recall-answer .md-mnemonic-row,.fc-answer .md-mnemonic-row, .fc-callout-body .md-mnemonic-row,.fc-callout-body-inline .md-mnemonic-row, .saq-callout-body .md-mnemonic-row, .fc-tab-panel .md-mnemonic-row,.model-body .md-mnemonic-row, .card-body .md-mnemonic-row,.toggle-body .md-mnemonic-row{ display:block;line-height:1.5; } .recall-answer .md-mnemonic .md-mnemonic-row strong, .fc-answer .md-mnemonic .md-mnemonic-row strong, .fc-callout-body .md-mnemonic .md-mnemonic-row strong, .fc-callout-body-inline .md-mnemonic .md-mnemonic-row strong, .saq-callout-body .md-mnemonic .md-mnemonic-row strong, .fc-tab-panel .md-mnemonic .md-mnemonic-row strong, .model-body .md-mnemonic .md-mnemonic-row strong, .card-body .md-mnemonic .md-mnemonic-row strong, .toggle-body .md-mnemonic .md-mnemonic-row strong{ background:color-mix(in srgb,var(--peri,#7c5cb8) 18%,transparent); color:var(--peri-deep,var(--peri,#7c5cb8)); padding:1px 5px;border-radius:3px; font-weight:700;font-size:1.05em;margin-right:0; } /* v178 (patch-055) — Foundation-weak SAQ indicator. Set when worker dashboard marks the SAQ payload with `foundation_weak: true` because it transcludes one or more axioms the user has lapsed ≥2 times. Soft amber accent + small badge — not a blocker, just a hint that underlying material needs review. Title attribute exposes the specific axioms. */ .saq-card.saq-card--foundation-weak{ position:relative; } .saq-card.saq-card--foundation-weak::before{ content:'foundation review'; position:absolute;top:8px;right:8px; font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--honey-deep,var(--honey,#d4922b)); background:color-mix(in srgb,var(--honey,#d4922b) 14%,transparent); padding:2px 6px;border-radius:3px; pointer-events:none; z-index:1; } /* v178 — Highlight `==text==` markdown extension. Renders as . Peri-tinted at 7% (matches the "less vibrant" reduction applied to sky/lime callouts). Inherits text colour so it works in both light and dark themes. */ .recall-answer mark,.fc-answer mark,.fc-callout-body mark,.fc-callout-body-inline mark, .saq-callout-body mark, .fc-tab-panel mark,.model-body mark,.card-body mark,.toggle-body mark{ background:color-mix(in srgb,var(--peri,#7c5cb8) 18%,transparent); color:inherit; padding:1px 3px;border-radius:3px; } /* v178 — Subscript / superscript size + line-height. Browser defaults are close but inconsistent across iOS Safari / Chrome; pin them for predictability. */ .recall-answer sub,.fc-answer sub,.fc-callout-body sub,.fc-callout-body-inline sub, .saq-callout-body sub, .fc-tab-panel sub,.model-body sub,.card-body sub,.toggle-body sub, .recall-answer sup,.fc-answer sup,.fc-callout-body sup,.fc-callout-body-inline sup, .saq-callout-body sup, .fc-tab-panel sup,.model-body sup,.card-body sup,.toggle-body sup{ font-size:.72em;line-height:0; } /* (3f) Numbered-circle list markers inside any typed callout. The migration converts inline "(1) X; (2) Y; (3) Z" prose into ordered-list markdown ("1. X\n2. Y\n3. Z"), which marked renders as
  1. ...
. The default decimal markers get hidden and replaced with a filled coloured circle counter, matching the accent of the parent callout. */ .recall-answer blockquote.callout ol,.fc-answer blockquote.callout ol, .fc-callout-body blockquote.callout ol,.fc-callout-body-inline blockquote.callout ol, .saq-callout-body blockquote.callout ol, .fc-tab-panel blockquote.callout ol,.model-body blockquote.callout ol, .card-body blockquote.callout ol,.toggle-body blockquote.callout ol{ list-style:none;padding-left:0;margin:.25em 0;counter-reset:callout-item; } .recall-answer blockquote.callout ol > li,.fc-answer blockquote.callout ol > li, .fc-callout-body blockquote.callout ol > li,.fc-callout-body-inline blockquote.callout ol > li, .saq-callout-body blockquote.callout ol > li, .fc-tab-panel blockquote.callout ol > li,.model-body blockquote.callout ol > li, .card-body blockquote.callout ol > li,.toggle-body blockquote.callout ol > li{ counter-increment:callout-item;position:relative; padding-left:28px;margin:4px 0; } .recall-answer blockquote.callout ol > li::before,.fc-answer blockquote.callout ol > li::before, .fc-callout-body blockquote.callout ol > li::before,.fc-callout-body-inline blockquote.callout ol > li::before, .saq-callout-body blockquote.callout ol > li::before, .fc-tab-panel blockquote.callout ol > li::before,.model-body blockquote.callout ol > li::before, .card-body blockquote.callout ol > li::before,.toggle-body blockquote.callout ol > li::before{ content:counter(callout-item); position:absolute;left:0;top:.15em; width:20px;height:20px;line-height:20px;text-align:center; border-radius:50%;font-size:.78em;font-weight:600; background:var(--callout-accent,var(--peri,#7c5cb8));color:#fff; } .recall-answer blockquote.callout-examiner ol > li::before, .fc-answer blockquote.callout-examiner ol > li::before, .fc-callout-body blockquote.callout-examiner ol > li::before, .fc-callout-body-inline blockquote.callout-examiner ol > li::before, .saq-callout-body blockquote.callout-examiner ol > li::before, .fc-tab-panel blockquote.callout-examiner ol > li::before, .model-body blockquote.callout-examiner ol > li::before, .card-body blockquote.callout-examiner ol > li::before, .toggle-body blockquote.callout-examiner ol > li::before{background:var(--peri,#7c5cb8)} .recall-answer blockquote.callout-key ol > li::before,.fc-answer blockquote.callout-key ol > li::before, .fc-callout-body blockquote.callout-key ol > li::before,.fc-callout-body-inline blockquote.callout-key ol > li::before, .saq-callout-body blockquote.callout-key ol > li::before, .fc-tab-panel blockquote.callout-key ol > li::before,.model-body blockquote.callout-key ol > li::before, .card-body blockquote.callout-key ol > li::before,.toggle-body blockquote.callout-key ol > li::before{ background:var(--honey,#d4922b) } .recall-answer blockquote.callout-definition ol > li::before, .fc-answer blockquote.callout-definition ol > li::before, .fc-callout-body blockquote.callout-definition ol > li::before, .fc-callout-body-inline blockquote.callout-definition ol > li::before, .saq-callout-body blockquote.callout-definition ol > li::before, .fc-tab-panel blockquote.callout-definition ol > li::before, .model-body blockquote.callout-definition ol > li::before, .card-body blockquote.callout-definition ol > li::before, .toggle-body blockquote.callout-definition ol > li::before{background:var(--sage,#5e8b6c)} .recall-answer blockquote.callout-safety ol > li::before, .fc-answer blockquote.callout-safety ol > li::before, .fc-callout-body blockquote.callout-safety ol > li::before, .fc-callout-body-inline blockquote.callout-safety ol > li::before, .saq-callout-body blockquote.callout-safety ol > li::before, .fc-tab-panel blockquote.callout-safety ol > li::before, .model-body blockquote.callout-safety ol > li::before, .card-body blockquote.callout-safety ol > li::before, .toggle-body blockquote.callout-safety ol > li::before{background:#c0573a} /* v178 — circle colours for the six new typed callouts. */ .recall-answer blockquote.callout-pitfall ol > li::before, .fc-answer blockquote.callout-pitfall ol > li::before, .fc-callout-body blockquote.callout-pitfall ol > li::before, .fc-callout-body-inline blockquote.callout-pitfall ol > li::before, .saq-callout-body blockquote.callout-pitfall ol > li::before, .fc-tab-panel blockquote.callout-pitfall ol > li::before, .model-body blockquote.callout-pitfall ol > li::before, .card-body blockquote.callout-pitfall ol > li::before, .toggle-body blockquote.callout-pitfall ol > li::before{background:#c0573a} .recall-answer blockquote.callout-mnemonic ol > li::before, .fc-answer blockquote.callout-mnemonic ol > li::before, .fc-callout-body blockquote.callout-mnemonic ol > li::before, .fc-callout-body-inline blockquote.callout-mnemonic ol > li::before, .saq-callout-body blockquote.callout-mnemonic ol > li::before, .fc-tab-panel blockquote.callout-mnemonic ol > li::before, .model-body blockquote.callout-mnemonic ol > li::before, .card-body blockquote.callout-mnemonic ol > li::before, .toggle-body blockquote.callout-mnemonic ol > li::before{background:var(--peri,#7c5cb8)} .recall-answer blockquote.callout-pearl ol > li::before, .fc-answer blockquote.callout-pearl ol > li::before, .fc-callout-body blockquote.callout-pearl ol > li::before, .fc-callout-body-inline blockquote.callout-pearl ol > li::before, .saq-callout-body blockquote.callout-pearl ol > li::before, .fc-tab-panel blockquote.callout-pearl ol > li::before, .model-body blockquote.callout-pearl ol > li::before, .card-body blockquote.callout-pearl ol > li::before, .toggle-body blockquote.callout-pearl ol > li::before{background:var(--sky,#4D8CB0)} .recall-answer blockquote.callout-equation ol > li::before, .fc-answer blockquote.callout-equation ol > li::before, .fc-callout-body blockquote.callout-equation ol > li::before, .fc-callout-body-inline blockquote.callout-equation ol > li::before, .saq-callout-body blockquote.callout-equation ol > li::before, .fc-tab-panel blockquote.callout-equation ol > li::before, .model-body blockquote.callout-equation ol > li::before, .card-body blockquote.callout-equation ol > li::before, .toggle-body blockquote.callout-equation ol > li::before{background:var(--saltbush, #5E6670)} .recall-answer blockquote.callout-mechanism ol > li::before, .fc-answer blockquote.callout-mechanism ol > li::before, .fc-callout-body blockquote.callout-mechanism ol > li::before, .fc-callout-body-inline blockquote.callout-mechanism ol > li::before, .saq-callout-body blockquote.callout-mechanism ol > li::before, .fc-tab-panel blockquote.callout-mechanism ol > li::before, .model-body blockquote.callout-mechanism ol > li::before, .card-body blockquote.callout-mechanism ol > li::before, .toggle-body blockquote.callout-mechanism ol > li::before{background:var(--sky,#4D8CB0)} .recall-answer blockquote.callout-heuristic ol > li::before, .fc-answer blockquote.callout-heuristic ol > li::before, .fc-callout-body blockquote.callout-heuristic ol > li::before, .fc-callout-body-inline blockquote.callout-heuristic ol > li::before, .saq-callout-body blockquote.callout-heuristic ol > li::before, .fc-tab-panel blockquote.callout-heuristic ol > li::before, .model-body blockquote.callout-heuristic ol > li::before, .card-body blockquote.callout-heuristic ol > li::before, .toggle-body blockquote.callout-heuristic ol > li::before{background:var(--honey,#d4922b)} /* ════════════════════════════════════════════════════════════════════════ v179 — Drug-card chip-section schema. Applied to blockquotes that classifyCallouts/applyV2Section tag with `.section` (when ≥2 V2_SECTION_MAP labels appear in a card) OR directly by _renderDrugPreview / _appendPharmaFieldSection for single-field leaves. Each section carries a custom --section-color CSS var. ════════════════════════════════════════════════════════════════════════ */ .recall-answer blockquote.section,.fc-answer blockquote.section, .fc-callout-body blockquote.section,.fc-callout-body-inline blockquote.section, .saq-callout-body blockquote.section, .fc-tab-panel blockquote.section,.model-body blockquote.section, .card-body blockquote.section,.toggle-body blockquote.section{ position:relative;margin:.55em 0;padding:8px 12px 10px; border-left:3px solid var(--section-color,var(--accent)); border-radius:0 6px 6px 0; background:color-mix(in srgb, var(--section-color,var(--accent)) 6%, var(--surface)); color:var(--text);font-style:normal;quotes:none; } .recall-answer blockquote.section::before,.fc-answer blockquote.section::before, .fc-callout-body blockquote.section::before,.fc-callout-body-inline blockquote.section::before, .saq-callout-body blockquote.section::before, .fc-tab-panel blockquote.section::before,.model-body blockquote.section::before, .card-body blockquote.section::before,.toggle-body blockquote.section::before{content:none} /* Chip header — pill sitting above the section body. applyV2Section + _appendPharmaFieldSection both place .section-chip as the FIRST direct child of blockquote.section, so it stacks above siblings. */ .section-chip{ display:inline-block;margin:0 0 6px;padding:2px 10px; font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--section-color,var(--accent)); background:color-mix(in srgb, var(--section-color,var(--accent)) 14%, var(--surface)); border:1px solid color-mix(in srgb, var(--section-color,var(--accent)) 28%, var(--surface)); border-radius:var(--radius-pill);line-height:1.4;white-space:nowrap; } /* Body content directly after the chip — collapse top margin */ blockquote.section > .section-chip + p, blockquote.section > .section-chip + ul, blockquote.section > .section-chip + ol, blockquote.section > .section-chip + blockquote, blockquote.section > .section-chip + div{margin-top:0} blockquote.section > p:first-child{margin-top:0} /* drug-section__body — inner wrapper inside _renderDrugPreview / _appendPharmaFieldSection so CardBody-rendered prose has its own container. */ blockquote.section > .drug-section__body{margin-top:2px} blockquote.section > .drug-section__body > p:first-child{margin-top:0} blockquote.section > .drug-section__body > blockquote:first-child{margin-top:0} /* Nested tier-2 chips (CVS / GU / RS inside pd_adverse; Class / Indications / Dose inside class_indications_dose). Reduce vertical rhythm so nested sections stack tightly. */ blockquote.section blockquote.section{margin:.4em 0;padding:6px 10px 8px} blockquote.section blockquote.section .section-chip{font-size:10px;padding:1px 8px} /* PK / Dose two-column definition grid. applyV2Section + enhanceDrugFieldBody convert `
  • Field value
    • ` into spans .field-name + .field-value. CSS lays them out as a 2-col grid. */ blockquote.section[data-section="pk"] ul, blockquote.section[data-section="dose"] ul, ul[data-field-grid="pk"],ul[data-field-grid="dose"]{ list-style:none;padding:0;margin:.4em 0 .2em; display:grid;grid-template-columns:max-content 1fr;gap:2px 12px; } blockquote.section[data-section="pk"] ul li, blockquote.section[data-section="dose"] ul li, ul[data-field-grid="pk"] li,ul[data-field-grid="dose"] li{display:contents;margin:0} blockquote.section .field-name,ul[data-field-grid] .field-name{ font-weight:600;color:var(--section-color,var(--accent)); white-space:nowrap;align-self:start; } blockquote.section .field-value,ul[data-field-grid] .field-value{ color:var(--text);align-self:start; } /* Mechanism arrow flow — chipMechanismFlows turns `A → B → C` chains into inline .mech-flow with colored connectors between plain step text. */ .mech-flow{display:inline} .mech-step{color:inherit} .mech-arrow{color:var(--section-color,#7c5cb8);font-weight:700;margin:0 .15em} /* §4D T6 — taxonomy single line, ellipsis on overflow. The link inherits the truncation; tooltip surfaces the full path on hover/focus. */ .recall-tag{font-size:var(--font-size-sm);color:var(--text-muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0} .recall-tag a{color:var(--text-muted);text-decoration:none;border-bottom:1px dotted var(--text-faint);max-width:100%;display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom} .recall-tag a:hover{color:var(--accent);border-bottom-color:var(--accent)} /* Today-fix v2 — recall topic sub-header. Anchors to its .recall-group parent section width (NOT the page width). Sub-header sits at the top of each group; the masonry .recall-group-cards underneath matches the same width. Sub-header is clickable: opens Notion topic URL or modal fallback. */ .recall-group-header{ display:flex;align-items:center;gap:8px; font-size:var(--font-size-xs);font-weight:600;color:var(--text-muted); text-transform:uppercase;letter-spacing:0.05em; padding:8px 0 6px;margin:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; text-decoration:none; cursor:pointer; transition:color var(--duration-sm); } /* v172 — On narrow viewports the topic heading was clipped mid-word ("D3I · NORMAL PRESSURE AND FLOW PAT…"). Allow wrap so the full chapter name is readable. (Issue #14) */ @media(max-width:600px){ .recall-group-header{ white-space:normal;word-break:break-word; line-height:1.35;text-overflow:clip; } } .recall-group-header:hover{color:var(--accent)} .recall-group-header::before{ content:"";flex:0 0 12px;height:1px;background:var(--border);transition:background var(--duration-sm); } .recall-group-header::after{ content:"";flex:1;height:1px;background:var(--border);transition:background var(--duration-sm); } .recall-group-header:hover::before, .recall-group-header:hover::after{background:var(--accent)} .recall-card--grouped .recall-tag{display:none} /* §4F Visually hidden but screen-reader accessible (utility). */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Predict row */ /* Self-confidence scale (was 1-5 numeric pips). Five Lucide face icons from "guessing" → "certain" with semantic colour ramp + hover labels. Stored value is still 1–5 for FSRS compatibility. */ .predict-row{display:flex;align-items:center;gap:9px;font-size:var(--font-size-sm);color:var(--text-muted);flex-wrap:wrap} .predict-row .predict-label{text-transform:uppercase;letter-spacing:0.04em;font-weight:600;font-size:var(--font-size-xs)} .predict-dots{display:flex;gap:5px} .predict-dot{ width:32px;height:32px;border:1.5px solid var(--border);background:var(--surface); border-radius:var(--radius-sm);cursor:pointer; display:inline-flex;align-items:center;justify-content:center;padding:0; transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm);color:var(--text-muted); } .predict-dot .icn{width:18px;height:18px} .predict-dot:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)} /* Per-level resting tints — subtle so unselected stays calm */ .predict-dot[data-pick="1"]:hover{border-color:var(--red);color:var(--red)} .predict-dot[data-pick="2"]:hover{border-color:var(--orange);color:var(--orange)} .predict-dot[data-pick="3"]:hover{border-color:var(--amber);color:var(--honey-deep)} .predict-dot[data-pick="4"]:hover{border-color:var(--green);color:var(--green)} .predict-dot[data-pick="5"]:hover{border-color:var(--accent);color:var(--accent)} /* Selected state — fully colour-filled per level */ .predict-dot.selected{color:white} .predict-dot.selected[data-pick="1"]{background:var(--red);border-color:var(--red)} .predict-dot.selected[data-pick="2"]{background:var(--orange);border-color:var(--orange)} .predict-dot.selected[data-pick="3"]{background:var(--amber);border-color:var(--amber);color:var(--honey-deep)} .predict-dot.selected[data-pick="4"]{background:var(--green);border-color:var(--green)} .predict-dot.selected[data-pick="5"]{background:var(--accent);border-color:var(--accent)} .predict-meta{font-size:var(--font-size-xs);color:var(--text-faint);font-style:italic} .recall-actions{display:flex;gap:6px;margin-top:auto;flex-wrap:wrap;--grade-bar-h:83px} .recall-actions button{ padding:8px 13px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface); cursor:pointer;font-size:var(--font-size-md);color:var(--text);font-weight:600;transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } .recall-actions button:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)} .recall-actions button:active{transform:scale(0.97)} /* patch-008 — Show Answer is the quiet ghost; the three grade buttons carry the colour ramp: • r-grade--missed (1) red — Missed; opens the miss-tag overlay • r-grade--honed (3) green — Honed (var(--fc-badge-honed)) • r-grade--mastered (4) violet — Mastered (var(--fc-badge-mastered)) Review is unchanged (advanced affordance). */ .recall-actions button.show{flex:1;color:var(--text);border-color:var(--border);background:var(--surface)} .recall-actions button.show:hover{color:var(--accent);border-color:var(--accent);background:var(--surface)} .recall-actions button.r-grade{flex:1} /* Inverted-T (grid): Mastered spans both columns in row-1; Missed/Honed fill row-2 col-by-col. Height locked to --grade-bar-h so swapping to the miss-tag overlay causes zero vertical displacement. AUDIT-2026-05-06 #26 — gap:0 + inner-radius:0 makes the inverted-T read as one unified segmented control instead of three disjoint pills. Outer corners stay rounded; the active-collapse state (below) restores full radius on the lone visible button. */ .recall-actions .post-reveal{ display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr; gap:0;width:100%;height:var(--grade-bar-h,83px);box-sizing:border-box; transition:height .15s ease; } .recall-actions .post-reveal .r-grade{border-radius:0} .recall-actions .post-reveal .r-grade:hover{transform:none} .recall-actions .post-reveal .r-grade--mastered{ grid-column:1/-1;grid-row:1; border-top-left-radius:10px;border-top-right-radius:10px; } .recall-actions .post-reveal .r-grade--missed { grid-column:1;grid-row:2; border-bottom-left-radius:10px; } .recall-actions .post-reveal .r-grade--honed { grid-column:2;grid-row:2; border-bottom-right-radius:10px; } /* Active collapse: flatten to single full-width cell at half height. Height halves toward the bottom edge — top row folds away. */ .recall-actions .post-reveal:has(.r-grade.active){ grid-template-rows:1fr;grid-template-columns:1fr; height:calc(var(--grade-bar-h,83px) / 2); } .recall-actions .post-reveal:has(.r-grade.active) .r-grade.active{ grid-column:1/-1;grid-row:1; /* Single visible button gets full radius back (overrides the inverted-T selective-corner rules above). AUDIT-2026-05-06 #26. */ border-radius:var(--radius-md); } /* Resting tint — each grade carries its identity colour at low saturation */ /* #2 — INVERTED: ungraded=filled (eye-catching), graded=outline (recedes) */ /* Ungraded = solid fill (eye-catching). Uses --fc-badge-* for all three so the palette is mode-invariant — --red shifts to salmon in dark mode. */ .recall-actions button.r-grade--missed {background:var(--coral-vivid); border-color:var(--coral-vivid); color:#fff} .recall-actions button.r-grade--hazy {background:var(--grade-hazy); border-color:var(--grade-hazy); color:var(--grade-hazy-text)} /* amber MUST use dark text */ .recall-actions button.r-grade--honed {background:var(--grade-honed); border-color:var(--grade-honed); color:#fff} .recall-actions button.r-grade--mastered {background:var(--grade-mastered);border-color:var(--grade-mastered);color:#fff} /* Hover — theme-aware tint via --grade-*-hover tokens (see :root + html.dark §1 grade aliases). Light mode darkens; dark mode lightens — keeps the chip visible against the active page bg in either theme. */ .recall-actions button.r-grade--missed:hover {background:var(--grade-missed-hover); border-color:var(--coral-vivid)} .recall-actions button.r-grade--honed:hover {background:var(--grade-honed-hover); border-color:var(--grade-honed)} .recall-actions button.r-grade--mastered:hover {background:var(--grade-mastered-hover);border-color:var(--grade-mastered)} /* Graded/active = outline (task done, recedes) */ .recall-actions button.r-grade--missed.active {background:color-mix(in srgb,var(--coral-vivid) 10%,var(--surface));border-color:var(--coral-vivid);color:var(--coral-vivid)} .recall-actions button.r-grade--honed.active {background:color-mix(in srgb,var(--grade-honed) 10%,var(--surface));border-color:var(--grade-honed);color:var(--grade-honed)} .recall-actions button.r-grade--mastered.active {background:color-mix(in srgb,var(--grade-mastered) 10%,var(--surface));border-color:var(--grade-mastered);color:var(--grade-mastered)} .recall-actions:has(.r-grade.active) .r-grade:not(.active){display:none} .recall-actions:has(.r-grade.selected) .r-grade:not(.selected){display:none} /* selected mirrors active: outline */ .r-grade--missed.selected {background:color-mix(in srgb,var(--coral-vivid) 10%,var(--surface));border-color:var(--coral-vivid);color:var(--coral-vivid)} .r-grade--honed.selected {background:color-mix(in srgb,var(--grade-honed) 10%,var(--surface));border-color:var(--grade-honed);color:var(--grade-honed)} .r-grade--mastered.selected{background:color-mix(in srgb,var(--grade-mastered) 10%,var(--surface));border-color:var(--grade-mastered);color:var(--grade-mastered)} .fc-grade-btns{display:flex;gap:0;margin-bottom:0} .fc-grade-btns:has(.fc-grade-btn.active) .fc-grade-btn:not(.active){display:none} /* WS4 (2026-05-05): .fact > .recall-actions DEAD CODE DELETED. .fact class no longer emitted. */ .recall-actions button.review{flex:0 0 auto;background:transparent;color:var(--text-muted)} .recall-actions button.review:hover,.recall-actions button.review.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)} .recall-card .post-reveal{display:none} .recall-card.revealed .show{display:none} .recall-card.revealed .post-reveal{display:grid} /* --- Today-fix v3 — Miss-tag overlay (recovery-based: Forgot / Almost / Slipped). Replaces the old .miss-tag-row chip cluster. Visible only when the recall card is in .tag-open (i.e., the user tapped Missed). When open, the post-reveal Got it/Missed pair hides and the overlay fills the action area. Surface treatment: coral-tinted bg + 2px coral border, matching the §4D 'missed' identity. Three large icon buttons in a 3x1 row. */ /* Card-redesign 2026-05-05 IMPROVE — flat in-place transform of the inverted-T into the miss-tag selector. Drops the coral outline + bg so the overlay sits inside the existing footer chrome rather than reading as a separate box on top of it. The header text + button outlines still carry the coral identity. */ .miss-tag-overlay{ display:none; width:100%; background:transparent; border:0; border-radius:0; padding:0; animation:fadeIn .18s ease both; } .recall-card.tag-open .miss-tag-overlay{display:flex;flex-direction:column;height:var(--grade-bar-h,83px);box-sizing:border-box} .recall-card.tag-open .post-reveal{display:none} .recall-card.tag-collapsed .miss-tag-overlay{display:block;background:transparent;border:none;padding:0;animation:none;height:auto} .recall-card.tag-collapsed .miss-tag-header, .recall-card.tag-collapsed .miss-tag-grid{display:none} .recall-card.tag-collapsed .post-reveal{display:none} /* Today SAQ / card — confidenceRow() produces .post-reveal + .miss-tag-overlay siblings inside .recall-actions, matching recall cards exactly. Tag-open/collapsed rules are identical to the recall pattern. WS4 (2026-05-05): .fact selectors removed (dead); .card added alongside .saq-card for unified primitive coverage. */ .saq-card .post-reveal,.card .post-reveal,.axiom .post-reveal,.pharma-card .post-reveal,.fc-card .post-reveal{display:grid} .saq-card.tag-open .miss-tag-overlay,.card.tag-open .miss-tag-overlay,.axiom.tag-open .miss-tag-overlay,.pharma-card.tag-open .miss-tag-overlay,.fc-card.tag-open .miss-tag-overlay{display:flex;flex-direction:column;height:var(--grade-bar-h,83px);box-sizing:border-box} .saq-card.tag-open .post-reveal,.card.tag-open .post-reveal,.axiom.tag-open .post-reveal,.pharma-card.tag-open .post-reveal,.fc-card.tag-open .post-reveal{display:none} .saq-card.tag-collapsed .miss-tag-overlay,.card.tag-collapsed .miss-tag-overlay,.axiom.tag-collapsed .miss-tag-overlay,.pharma-card.tag-collapsed .miss-tag-overlay,.fc-card.tag-collapsed .miss-tag-overlay{display:block;background:transparent;border:none;padding:0;animation:none;height:auto} .saq-card.tag-collapsed .miss-tag-header,.card.tag-collapsed .miss-tag-header,.axiom.tag-collapsed .miss-tag-header,.pharma-card.tag-collapsed .miss-tag-header,.fc-card.tag-collapsed .miss-tag-header, .saq-card.tag-collapsed .miss-tag-grid,.card.tag-collapsed .miss-tag-grid,.axiom.tag-collapsed .miss-tag-grid,.pharma-card.tag-collapsed .miss-tag-grid,.fc-card.tag-collapsed .miss-tag-grid{display:none} .saq-card.tag-collapsed .post-reveal,.card.tag-collapsed .post-reveal,.axiom.tag-collapsed .post-reveal,.pharma-card.tag-collapsed .post-reveal,.fc-card.tag-collapsed .post-reveal{display:none} .saq-card.tag-collapsed .miss-tag-collapsed,.card.tag-collapsed .miss-tag-collapsed,.axiom.tag-collapsed .miss-tag-collapsed,.pharma-card.tag-collapsed .miss-tag-collapsed,.fc-card.tag-collapsed .miss-tag-collapsed{display:flex} /* Phase 1.3 — Force-tag refusal shake. Applied when user hits Escape on a tag-open card while force-tag is on and no tag has been picked yet. */ @keyframes tagShakeKf { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-3px); } 40%,80% { transform: translateX(3px); } } .tag-shake{animation:tagShakeKf .42s cubic-bezier(.36,.07,.19,.97)} @media (prefers-reduced-motion: reduce){ .tag-shake{animation:none;outline:2px solid var(--coral);outline-offset:-2px} } .miss-tag-header{ display:flex;align-items:center;justify-content:center;gap:5px; font-size:var(--font-size-sm);font-weight:600;color:var(--coral); margin-bottom:7px; } .miss-tag-header-icon{width:13px;height:13px;flex-shrink:0} .miss-tag-grid{display:flex;gap:6px;flex:1;align-items:stretch} /* miss-tag-btn: outline style (consistent with btn--ghost taxonomy). Was filled coral — changed to outline so it reads as an interactive choice, not a status badge. The selected state was already outline; now both states share the same visual language. Specificity note: .recall-actions button sets background:var(--surface) at (0,1,1). Override with (0,2,0) to keep miss-tag transparent in all contexts. */ .miss-tag-btn{ position:relative; flex:1;min-width:0; /* Card-redesign 2026-05-05 IMPROVE — match grade button height (44px floor) so miss-tag selector visually replaces the inverted-T at the same scale. */ padding:12px 6px;min-height:44px; border:1.5px solid var(--coral-vivid); background:transparent; border-radius:var(--radius-sm); cursor:pointer; color:var(--coral-vivid); font-family:inherit;font-size:var(--font-size-md);font-weight:600; display:inline-flex;flex-direction:row;align-items:center;justify-content:center; gap:6px;min-height:0; transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } /* specificity bump — beats .recall-actions button (0,1,1) */ .recall-actions .miss-tag-btn,.miss-tag-overlay .miss-tag-btn{background:transparent;border-color:var(--coral-vivid);color:var(--coral-vivid)} .miss-tag-btn svg{width:16px;height:16px;flex-shrink:0} .miss-tag-label{font-size:var(--font-size-md);font-weight:600;color:inherit} .miss-tag-btn.selected .miss-tag-label{color:inherit} .miss-tag-btn:hover{ transform:translateY(-1px); background:color-mix(in srgb,var(--coral-vivid) 12%,transparent); border-color:var(--coral-vivid); color:var(--coral-vivid); } /* #2 — miss-tag-btn.selected=outline (graded, recedes) — transparent bg so the outline reads correctly on both --surface (Today) and --focus-overlay-bg (cinema). */ .miss-tag-btn.selected{ background:transparent;color:var(--coral-vivid); border-color:var(--coral-vivid); } .miss-tag-shortcut{ position:absolute;top:4px;right:6px; font-size:9px;font-weight:600; color:color-mix(in srgb,var(--coral-lift) 70%,transparent); font-variant-numeric:tabular-nums; pointer-events:none; /* patch-007 — shortcut indicator follows the shift-to-reveal policy. Hidden by default; visible only while Shift is held. */ opacity:0; transition:opacity .15s ease; } body.shift-armed .miss-tag-shortcut{opacity:1} .miss-tag-btn.selected .miss-tag-shortcut{color:color-mix(in srgb,var(--bg) 70%,transparent)} @media (prefers-reduced-motion: reduce){.miss-tag-shortcut{transition:none}} /* Cinema-mode pass 2026-05-26 — Hazy + Mixed are grade-2, so they read HONEY to match the grade-2 identity; Blank stays coral (grade 1). App-wide via the data-tag attribute (Today / Focus / Library). --honey-deep is the contrast-safe honey and flips with theme, matching the card surface in both modes. */ .miss-tag-btn[data-tag="hazy"], .miss-tag-btn[data-tag="mixed"], .recall-actions .miss-tag-btn[data-tag="hazy"], .recall-actions .miss-tag-btn[data-tag="mixed"], .miss-tag-overlay .miss-tag-btn[data-tag="hazy"], .miss-tag-overlay .miss-tag-btn[data-tag="mixed"]{ border-color:var(--honey-deep); color:var(--honey-deep); } .miss-tag-btn[data-tag="hazy"]:hover, .miss-tag-btn[data-tag="mixed"]:hover{ background:color-mix(in srgb,var(--honey-deep) 12%,transparent); border-color:var(--honey-deep); color:var(--honey-deep); } .miss-tag-btn[data-tag="hazy"].selected, .miss-tag-btn[data-tag="mixed"].selected{ border-color:var(--honey-deep); color:var(--honey-deep); } .miss-tag-btn[data-tag="hazy"] .miss-tag-shortcut, .miss-tag-btn[data-tag="mixed"] .miss-tag-shortcut{ color:color-mix(in srgb,var(--honey-deep) 70%,transparent); } /* Pulse animation — 240ms scale + brightness flash. Triggered by tagMiss() applying .miss-tag-pulse for one frame. */ @keyframes missTagPulse{ 0% {transform:scale(1)} 45% {transform:scale(1.12);filter:brightness(1.18)} 100%{transform:scale(1);filter:none} } .miss-tag-btn.miss-tag-pulse{animation:missTagPulse .24s var(--ease-spring)} @media(prefers-reduced-motion:reduce){.miss-tag-btn.miss-tag-pulse{animation:fadeIn var(--duration-sm) ease}} /* Today-fix v4 — collapsed pill (Today only). Hidden by default; .recall-card.tag-collapsed reveals it (and the Today-only branch of buildMissTagOverlay only appends it for non-focus surfaces). Solid coral pill, centred 'Missed' + soft chip showing the chosen tag. Click anywhere → tap-to-change uncollapses the overlay. Selectors are scoped under .recall-actions so they outrank .recall-actions button (0,1,1) and the coral fill actually applies — bare .miss-tag-collapsed (0,1,0) lost the cascade. */ .recall-actions .miss-tag-collapsed{ display:none; width:100%;height:42px; padding:0; border:none;border-radius:var(--radius-md); background:var(--coral-vivid);color:white; font-family:inherit;font-size:var(--font-size-md);font-weight:500; cursor:pointer; align-items:center;justify-content:center;gap:10px; transition:filter var(--duration-sm),transform var(--duration-sm); animation:fadeIn .18s ease both; } .recall-actions .miss-tag-collapsed:hover{ filter:brightness(1.06);transform:none;box-shadow:none; } .recall-actions .miss-tag-collapsed:active{transform:scale(0.99)} .recall-card.tag-collapsed .miss-tag-collapsed{display:flex} .recall-actions .miss-tag-collapsed .mtc-x{font-weight:500;opacity:0.9;color:white} .recall-actions .miss-tag-collapsed .mtc-label-l{font-weight:500;letter-spacing:0.2px;color:white} .recall-actions .miss-tag-collapsed .mtc-chip{ display:inline-flex;align-items:center;gap:6px; background:rgba(255,255,255,0.20); color:white; padding:5px 12px;border-radius:var(--radius-pill); font-size:var(--font-size-sm);font-weight:500;letter-spacing:0.2px; } .recall-actions .miss-tag-collapsed .mtc-chip svg{width:14px;height:14px;flex-shrink:0;color:white} /* Focus-mode variant — bigger icons + bigger header so the overlay reads at the higher takeover scale. */ .miss-tag-overlay--focus{ border-radius:0;border-left:none;border-right:none; padding:18px 20px; } .miss-tag-overlay--focus .miss-tag-header{font-size:var(--font-size-lg);margin-bottom:14px} .miss-tag-overlay--focus .miss-tag-btn svg{width:18px;height:18px} .miss-tag-overlay--focus .miss-tag-label{font-size:var(--font-size-lg)} .miss-tag-overlay--focus .miss-tag-shortcut{font-size:var(--font-size-2xs);top:6px;right:8px} /* Ring fill micro-interaction */ @keyframes ringFill{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}} .ring-pop{animation:ringFill .25s ease-out} @media (prefers-reduced-motion: reduce){.ring-pop{animation:none}} /* Today-fix v4 — Today undo button. Mirrors the focus-mode undo visual but gets a peri tint (rewind = different intent from coral miss). Hidden via [hidden] attribute when state.todayUndo is empty; JS toggles it after the first grade lands in a session. On click, the entire viewport gets a single var(--duration-lg) peri veil pulse so the rewind feels acknowledged across the whole screen. */ .today-undo-btn[hidden]{display:none} .today-undo-btn{color:var(--peri-deep);position:relative;animation:fadeIn .18s ease both} .today-undo-btn:hover{background:var(--peri-fill);color:var(--peri)} /* Today-fix v4b — veil flash on Today undo. Asymmetric pulse — fast ramp in (28% of duration), slower exhale (sustained mid-opacity at 65%, fade to 0 by 100%). 440ms total. Background uses a radial gradient that's punchier at the centre + softer at the edges so the rewind reads as 'centred event' rather than a flat wash. */ @keyframes todayUndoVeilPulse{ 0% {opacity:0; transform:scale(1.04)} 28% {opacity:1; transform:scale(1)} 65% {opacity:0.6; transform:scale(1)} 100% {opacity:0; transform:scale(0.98)} } .today-undo-veil{ position:fixed;inset:0;z-index:250; /* above tab bar (200) */ background:radial-gradient(ellipse at center, color-mix(in srgb,var(--peri) 38%,transparent) 0%, color-mix(in srgb,var(--peri) 22%,transparent) 60%, color-mix(in srgb,var(--peri) 8%,transparent) 100%); pointer-events:none; transform-origin:center; animation:todayUndoVeilPulse .44s cubic-bezier(.4,0,.2,1) both; } @media(prefers-reduced-motion:reduce){ .today-undo-veil{animation:fadeIn .15s ease both;background:color-mix(in srgb,var(--peri) 14%,transparent);transform:none} } /* --- SAQ card system (post-v9.1 audit redesign + saqflow rewrite) --- Sprint J: two-element structure (.saq.saq-card outer + .saq-card-face inner) merged into a single element with all classes combined. The .saq rules below keep the transparent positioning behaviour from the old outer wrapper; .saq-card-face rules carry the visual surface. */ .saq{ position:relative; background:transparent; border:none; border-radius:0; transition:none; } .saq:hover{box-shadow:none} .saq-question{font-weight:500;font-size:var(--font-size-xl);line-height:1.45;margin-bottom:0} .saq-meta{font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:14px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-right:32px} .pill{background:var(--surface-alt);padding:2px 8px;border-radius:var(--btn-radius);font-size:var(--font-size-xs);font-weight:500} .pill-low{background:var(--red-bg);color:var(--red);font-weight:600} .pill-mid{background:var(--amber-bg);color:var(--honey-deep);font-weight:600} html.dark .pill-mid{color:var(--amber)} .pill-high{background:var(--green-bg);color:var(--green);font-weight:600} /* Flip-card scaffolding — grid-stacked faces. Both faces occupy the same 1×1 grid cell, so the .saq-card-inner intrinsic height = max(front, back) content height. Cards GROW with content; never an internal scroll bar. backface-visibility hides the inactive face visually without removing its layout contribution, which is what makes the stacked-grid trick keep both heights in sync. Post-audit fix: the previous absolute-positioned + overflow-y:auto approach clipped long callout bodies behind a scroll bar. Grid stacking ditches both. */ .saq-card{ margin:0; padding:0; position:relative; /* needed for absolute-positioned flag button */ } /* Belt-and-suspenders: hide Show Answer btn via CSS on revealed state */ .saq-card.revealed .saq-answer-btn{display:none} /* patch-007 — Today-tab SAQ now uses a drop-down reveal instead of a 3D flip. The header stays anchored; .saq-reveal expands below on .revealed. */ .saq-reveal{display:none} .saq-card.revealed .saq-reveal{ display:flex;flex-direction:column;gap:14px;margin-top:14px; animation:fcRevealAnswerIn var(--duration-lg) var(--ease-out) both; } @media(prefers-reduced-motion:reduce){ .saq-card.revealed .saq-reveal{animation:fadeIn .15s ease both} } /* WS4 (2026-05-05): .saq-card-inner{display:contents} DEAD CODE DELETED. Vestigial flip-scaffolding wrapper — no JS emits .saq-card-inner. */ /* Each face carries the full visual treatment (bg + border + radius + peri left-stripe) so when the inner rotates, the whole frame rotates with it. backface-visibility hides the inactive face. Today-fix #8 — accent switched from var(--accent) (sage) to var(--peri) so SAQ identity is consistent with §4E and the focus mode SAQ card. patch-007 — SAQ identity migrated peri → indigo → honey (final, H1 swap). Peri retained for back-face Model Answer callout. Indigo took over Routine. */ .saq-card-face{ grid-area:1/1; background:color-mix(in srgb,var(--rose) var(--card-tint-light),var(--surface-alt2)); /* WS11: --honey→--rose */ border:1px solid var(--border); border-radius:var(--radius); /* Card-redesign IMPROVE: deeper stripe. */ border-left:var(--card-stripe-width) solid var(--rose-deep); padding:var(--card-padding-block) var(--card-padding-inline); backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex;flex-direction:column; /* WS4 (Q3): min-height:240 dropped. Short SAQs no longer need the floor now that Today uses a drop-down reveal (not a 3D flip). Skeleton already has its own 240px floor for the loading state. */ box-shadow:var(--card-shadow); transition:background var(--duration-sm) var(--ease-out),border-color var(--duration-sm) var(--ease-out),box-shadow var(--duration-sm) var(--ease-out),transform var(--duration-sm) var(--ease-out); } .saq-card-face:hover{box-shadow:var(--card-shadow-hover)} /* patch-007 — Today SAQ flip retired in favour of drop-down. The .saq-card-front / .saq-card-back / .saq-back-head / .saq-flipback-btn / .saq-back-q rules here have been removed; the new drop-down rules live near .saq-reveal above. Removed: ~14 lines of CSS that no DOM still creates. */ .saq-card .saq-question{font-size:var(--font-size-xl);line-height:1.45;margin:4px 0 12px} .saq-answer-btn{ margin-top:auto;align-self:stretch; padding:12px 22px;border:none;border-radius:var(--radius-md); background:var(--accent);color:var(--accent-on); font-size:var(--font-size-lg);font-weight:700;font-family:inherit;cursor:pointer; box-shadow:0 2px 0 var(--accent-pressed);transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); display:inline-flex;align-items:center;justify-content:center;gap:6px; } .saq-answer-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-glow)} .saq-answer-btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--accent-pressed)} /* Today-fix v2 — Continuous-outline pattern (replaces fill + left-stripe). Active button: 2px coloured border on all sides, no background fill. Content panel: 2px coloured border on all sides matching the active button's colour. The two pieces visually bind because their borders share the same colour at the same width. Inactive buttons keep a neutral border so the active state stands out clearly. */ /* Connected-tab toggle — tabs span full content width (flex:1), active tab border "droops" into the panel below via border-bottom erase trick: unified panel: row (top half) + bodies (bottom half) share one continuous border. No per-button border; no hard rectangle on the active tab. Active tab bg matches the body below → seamless colour join. */ /* Unified panel: outer border wraps the row+bodies as one shape. */ .saq-callout-wrap{ border:1.5px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:14px; } .saq-callout-row{display:flex;border-bottom:1.5px solid var(--border)} .saq-callout-btn{ flex:1;min-width:0; padding:9px 8px 10px; border:none;border-right:1.5px solid var(--border); background:color-mix(in srgb,var(--surface-alt) 55%,var(--surface)); color:var(--text-muted);font-size:var(--font-size-md);font-weight:600;font-family:inherit; cursor:pointer; transition:background var(--duration-sm),color var(--duration-sm); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .saq-callout-btn:last-child{border-right:none} .saq-callout-btn:hover{background:var(--surface-alt);color:var(--text)} .saq-callout-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)} .saq-callout-btn--sage.active {background:color-mix(in srgb,var(--sage) 10%,var(--surface));color:var(--sage-deep)} .saq-callout-btn--peri.active {background:color-mix(in srgb,var(--peri) 10%,var(--surface));color:var(--peri-deep)} .saq-callout-btn--honey.active{background:color-mix(in srgb,var(--honey) 10%,var(--surface));color:var(--honey-deep)} .saq-callout-body{ font-size:var(--font-size-md);line-height:1.55;color:var(--text); background:var(--surface); padding:12px 14px; animation:fadeIn .18s ease both; } .saq-callout-body[hidden]{display:none} .saq-callout-body--sage {background:color-mix(in srgb,var(--sage) 10%,var(--surface))} .saq-callout-body--peri {background:color-mix(in srgb,var(--peri) 10%,var(--surface))} .saq-callout-body--honey{background:color-mix(in srgb,var(--honey) 10%,var(--surface))} .saq-callout-body p, .fc-tab-panel p{margin:6px 0} .saq-callout-body p:first-child, .fc-tab-panel p:first-child{margin-top:0} .saq-callout-body ul, .fc-tab-panel ul{margin:6px 0;padding-left:18px} .saq-callout-body h1, .fc-tab-panel h1,.saq-callout-body h2,.fc-tab-panel h2,.saq-callout-body h3,.fc-tab-panel h3{font-size:var(--font-size-lg);font-weight:600;margin:8px 0 4px} .saq-callout-header{display:flex;justify-content:flex-end;margin-bottom:6px} /* P0·1 — Sticky-pin the confidence row to the bottom of the back face. When the card grows past the viewport (long callout body), the four Critical/Low/Intermediate/High pills stick to the bottom edge of the card so the rating is always reachable. The backdrop fade + border-top read as anchored, not floating. margin-top:auto pushes the footer to the bottom of the flex column when content is shorter than the card. */ /* F8-A-05 — SAQ Today/lib rate footer: tile layout matching fc-grade-btn rhythm. Fixes the "Honed floating disconnected" layout drift (F8-B-09 subsumed). WS4 (Q4): sticky behaviour preserved; margins use card-padding tokens so the footer hugs the card edge regardless of card padding value. */ .saq-card-cf-footer{ margin:0 calc(var(--card-padding-inline) * -1) calc(var(--card-padding-block) * -1); margin-top:auto; padding:8px var(--card-padding-inline) var(--card-padding-block); background:var(--surface); border-top:1px solid var(--border); z-index:2; } .saq-card-cf-footer .recall-actions{margin-top:0;gap:6px;flex-wrap:nowrap} /* Notes empty-state link buttons */ /* saq-notes-links kept for backwards compat (v172 focus card renderer) */ .saq-notes-links{display:flex;gap:8px;flex-wrap:wrap} .saq-notes-link{ display:inline-flex;align-items:center;gap:6px; padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm); background:var(--surface);color:var(--text); font-size:var(--font-size-md);font-weight:500;text-decoration:none; transition:background var(--duration-sm),color var(--duration-sm),border-color var(--duration-sm),box-shadow var(--duration-sm),transform var(--duration-sm),opacity var(--duration-sm); } .saq-notes-link:hover{border-color:var(--accent);color:var(--accent)} /* patch-030 — empty-state text in Notes panel */ .saq-notes-empty{color:var(--text-muted);font-style:italic;font-size:var(--font-size-md);margin:0 0 10px} /* patch-030 — compact reference chip row */ .saq-ref-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)} .saq-ref-chip{ display:inline-flex;align-items:center;gap:4px; padding:3px 8px;border-radius:var(--radius-pill); font-size:var(--font-size-xs);font-weight:500;line-height:1.4; background:var(--surface-2,var(--surface));color:var(--text-muted); border:1px solid var(--border);text-decoration:none;white-space:nowrap; transition:color var(--duration-sm),border-color var(--duration-sm); } .saq-ref-chip:hover,.saq-ref-chip:focus-visible{color:var(--accent);border-color:var(--accent)} .saq-ref-chip--btn{cursor:pointer;background:var(--surface-2,var(--surface))} .saq-ref-chip--static{cursor:default;opacity:.7} /* patch-032 — drug-card chip recolours hover state to peri so it reads as an in-app cross-link rather than an external resource. */ .saq-ref-chip--drug:hover,.saq-ref-chip--drug:focus-visible{color:var(--peri);border-color:var(--peri)} /* patch-032 — inline chip row at bottom of the model-body. Tighter top margin than the Notes-panel version (which separates from a prose block); the model-body version separates from the answer's last list or paragraph so the visual gap can be smaller. */ .saq-ref-chips--inline{margin-top:14px;padding-top:10px;border-top:1px dashed var(--border)} /* patch-032 — landing pulse when a drug card is opened from a SAQ chip */ @keyframes pharma-cross-link-pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--peri) 60%,transparent)} 60%{box-shadow:0 0 0 8px color-mix(in srgb,var(--peri) 0%,transparent)} 100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--peri) 0%,transparent)} } .pharma-drug-card--cross-linked{ animation:pharma-cross-link-pulse 1.6s ease-out; border-color:var(--peri) !important; } /* patch-030 — learning history pill in SAQ meta row */ .saq-history-pill{font-size:var(--font-size-xs);font-weight:600;letter-spacing:0.01em} /* AUDIT-2026-05-06 #21 — SAQ history pill palette. Foreground from --saq-* tokens (theme-aware); bg + border derived via color-mix at use sites. */ .saq-history-pill--mastered2{background:color-mix(in srgb,var(--saq-pass) 15%,transparent);color:var(--saq-pass);border:1px solid color-mix(in srgb,var(--saq-pass) 30%,transparent)} .saq-history-pill--mastered1{background:color-mix(in srgb,var(--saq-borderline) 12%,transparent);color:var(--saq-borderline);border:1px solid color-mix(in srgb,var(--saq-borderline) 25%,transparent)} .saq-history-pill--missed{background:color-mix(in srgb,var(--saq-fail) 12%,transparent);color:var(--saq-fail);border:1px solid color-mix(in srgb,var(--saq-fail) 25%,transparent)} /* Today-fix v2 — SAQ paginated view shows up to 2 cards per page. Single-card pages get full width; two-card pages split 50/50. Below 2 cards it just shows what's there full-width. Pagination steps in pairs: page 1 = SAQs 1+2, page 2 = SAQs 3+4, etc. Both .active cards on a page render together via grid auto-fit. */ /* patch-032 round 5 — col-stack mosaic primitive. One layout for every surface that arranges cards into independent flex columns (Today recall/SAQ/pharma/facts, SAQ library, Pharma library, skeleton grid). Round-robin distribution preserves L→R reading order; expanding a card in column A never pushes column B down (mosaic behaviour). Variants: .col-stack--cols-2 — 2 cols ≥880px, 1 col below .col-stack--cols-3 — 3 cols ≥880px, 2 cols + row at 880, 1 col ≤600 The container also overrides .lib-list (which is a CSS Grid at min-width ≥1100), so .lib-list.col-stack works for the SAQ + Pharma libraries. */ .col-stack, .lib-list.col-stack{ display:flex; flex-direction:row; flex-wrap:wrap; grid-template-columns:none; gap:var(--col-stack-gap, 11px); align-items:flex-start; } .col-stack > .col-stack__col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:var(--col-stack-gap, 11px); } .col-stack--cols-2 > .col-stack__col{flex-basis:calc(50% - var(--col-stack-gap, 11px) / 2)} .col-stack--cols-3 > .col-stack__col{flex-basis:calc(33.333% - var(--col-stack-gap, 11px) * 2/3)} /* Sparse-section centering (opt-in via makeColStack centerSparse) — when a section has fewer cards than columns, the wrapper builds only that many columns; centering them keeps a lone card in the middle of the row rather than jammed into the leftmost column. Columns keep their normal width (flex-basis from the --cols-N class) but don't grow to fill the row. */ .col-stack--centered{justify-content:center} .col-stack--centered > .col-stack__col{flex-grow:0} @media(max-width:880px){ .col-stack--cols-2 > .col-stack__col{flex:0 0 100%} .col-stack--cols-3 > .col-stack__col:nth-child(1), .col-stack--cols-3 > .col-stack__col:nth-child(2){flex-basis:calc(50% - var(--col-stack-gap, 11px) / 2)} /* 3rd col flows to a full-width row of 2-up — preserves the legacy .recall-group-cards mosaic ergonomic at the tablet breakpoint. */ .col-stack--cols-3 > .col-stack__col:nth-child(3){ flex:0 0 100%; flex-direction:row; flex-wrap:wrap; gap:var(--col-stack-gap, 11px); } .col-stack--cols-3 > .col-stack__col:nth-child(3) > *{ flex:0 0 calc(50% - var(--col-stack-gap, 11px) / 2); min-width:0; } } @media(max-width:768px){ /* Phone + small tablet: collapse to single column. nth-child selectors match the specificity of the max-width:880 rule above (0,2,1) so the general `> .col-stack__col` selector cannot lose the cascade. */ .col-stack--cols-3 > .col-stack__col, .col-stack--cols-3 > .col-stack__col:nth-child(1), .col-stack--cols-3 > .col-stack__col:nth-child(2), .col-stack--cols-3 > .col-stack__col:nth-child(3), .col-stack--cols-2 > .col-stack__col, .col-stack--cols-2 > .col-stack__col:nth-child(1), .col-stack--cols-2 > .col-stack__col:nth-child(2){flex:0 0 100%;flex-basis:100%;flex-direction:column} .col-stack--cols-3 > .col-stack__col:nth-child(3) > *{flex:1 1 auto} } .review-bar{margin-top:9px;display:flex;justify-content:flex-end;gap:6px} .review-bar button{padding:5px 12px;border:1.5px solid var(--border);background:var(--surface);border-radius:var(--btn-radius);cursor:pointer;font-size:var(--font-size-sm);font-weight:600;color:var(--text-muted)} .review-bar button.review{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)} .review-bar button.editing{background:var(--accent);color:white;border-color:var(--accent)} .review-bar .saved-note{font-size:var(--font-size-xs);color:var(--green);font-style:italic;align-self:center;margin-right:auto} .model-body{outline:none} .model-body[contenteditable="true"]{border:1.5px solid var(--accent);background:var(--accent-soft);border-radius:var(--btn-radius);padding:8px} /* --- Axioms (patch-034) --- Replaces Key Facts. sky blue palette retained. col-stack(3) same as legacy facts. Old .key-facts / .fact classes removed; all selectors updated to .key-axioms / .axiom. */ .key-axioms{margin:11px 0} /* Axiom card identity: lime left-border + lime tinted bg (WS11: --sky→--lime). WS4: stripe unified to var(--card-stripe-width) (4px). Hover added (was absent — now consistent with recall/saq/pharma). position:relative anchors the absolutely-positioned .card-flag-btn (R-030). */ .axiom{ position:relative; background:color-mix(in srgb,var(--saltbush) var(--card-tint-light),var(--surface-alt2)); border:1px solid var(--border); /* Card-redesign IMPROVE: deeper stripe — --lime mid-tone (#8A9E1A) blends into warm paper; --lime-deep (#546400) gives a clear olive identity. */ border-left:var(--card-stripe-width) solid var(--saltbush-deep); border-radius:var(--radius); padding:14px; transition:background var(--duration-sm) var(--ease-out),border-color var(--duration-sm) var(--ease-out),box-shadow var(--duration-sm) var(--ease-out),transform var(--duration-sm) var(--ease-out); } .axiom:hover{box-shadow:var(--card-shadow-hover)} .axiom-header{font-weight:600;font-size:15px;margin-bottom:8px;line-height:1.3;display:flex;align-items:center;gap:6px;padding-right:32px} .axiom-header .axiom-icon{opacity:0.75;font-size:var(--font-size-lg)} /* Tier rendered as a pill tag (replaces raw emoji/text from Notion data). Awaiting full Axiom card redesign — pill is the interim preferred style. */ .axiom-tier{display:none} /* legacy — hidden; replaced by axiom-tier-pill */ .axiom-tier-pill{ display:inline-flex;align-items:center; padding:1px 7px;border-radius:var(--radius-pill); font-size:var(--font-size-2xs);font-weight:700;letter-spacing:0.04em; border:1.5px solid currentColor;line-height:1.5;flex-shrink:0; } .axiom-tier-pill[data-tier="high"] {color:var(--coral);background:color-mix(in srgb,var(--coral) 10%,var(--surface))} .axiom-tier-pill[data-tier="medium"]{color:var(--honey);background:color-mix(in srgb,var(--honey) 10%,var(--surface))} .axiom-tier-pill[data-tier="low"] {color:var(--sage); background:color-mix(in srgb,var(--sage) 10%,var(--surface))} /* Reveal button — WS4 (Q10): migrated to .btn taxonomy (.btn--ghost .btn--md [data-fullwidth][data-axiom-reveal]). Sky tint applied via [data-axiom-reveal] scoped rule. Original .axiom-reveal-btn rule preserved as fallback for any non-JS path; display:none hides it post-reveal. */ .btn[data-axiom-reveal]{ width:100%; background:color-mix(in srgb,var(--sky) 12%,var(--surface)); border:1px solid color-mix(in srgb,var(--sky) 40%,var(--border)); border-radius:var(--radius-sm); font-size:var(--font-size-md);font-weight:500;color:var(--text); cursor:pointer;margin:8px 0; transition:background var(--duration-sm) var(--ease-out),opacity var(--duration-sm) var(--ease-out); display:flex;align-items:center;justify-content:center; padding:8px 12px; } .btn[data-axiom-reveal]:hover{background:color-mix(in srgb,var(--saltbush) 20%,var(--surface))} .axiom.revealed .btn[data-axiom-reveal]{display:none} /* Formula reveal section */ .axiom-reveal{display:none;flex-direction:column;gap:8px;margin:8px 0 4px;width:100%;animation:saq-reveal-in .18s ease both} .axiom.revealed .axiom-reveal{display:flex} /* Grades hidden until reveal — reuses the existing .post-reveal component; only the visibility gate is new. */ .axiom:not(.revealed) .post-reveal{display:none} /* Formula display */ .axiom-formula{ font-size:15px;line-height:1.7; background:color-mix(in srgb,var(--saltbush) 8%,var(--surface)); border-radius:var(--radius-sm); padding:10px 12px; overflow-x:auto; } .axiom-formula-label{font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:4px} /* Stage 2 audit (2026-05-04, Run 2) — dark-mode card body chroma lift. 8% type tint produces only ~0.013 Y delta on `--bg #0F1E1A` vs ~0.04 on light cream paper, leaving cards near-monochrome with the bg in dark mode (root cause of "dark mode is ugly"). 12% restores the type identity signal in dark without spilling into light mode (which already reads correctly at 8% on warm paper). One scoped block, five selectors. */ /* Stage 2 audit (2026-05-04, Run 2) — dark-mode card body chroma lift. WS4: tint percentage tokenised to var(--card-tint-dark) = 12%. */ /* WS11: DM token corrections. recall border override (LM base now uses --sky which = lime-gold in DM). */ html.dark .recall-card {background:color-mix(in srgb,var(--sage) var(--card-tint-dark),var(--surface-alt2));border-left-color:var(--sage)} html.dark .recall-card.keyboard-focused{background:color-mix(in srgb,var(--sage) 10%,var(--surface-alt2));box-shadow:0 4px 14px -4px color-mix(in srgb,var(--sage) 40%,transparent)} html.dark .pharma-card {background:color-mix(in srgb,var(--violet) var(--card-tint-dark),var(--surface-alt2))} html.dark .saq-card-face {background:color-mix(in srgb,var(--rose) var(--card-tint-dark),var(--surface-alt2))} /* WS11: --honey→--rose */ html.dark .axiom {background:color-mix(in srgb,var(--saltbush) var(--card-tint-dark),var(--surface-alt2))} /* WS11: --sky→--lime (semantic; same DM value) */ html.dark .axiom-formula {background:color-mix(in srgb,var(--saltbush) 18%,var(--surface))} /* WS11: --sky→--lime. Card-redesign 2026-05-05: decoupled from --card-tint-dark (now 6%) to preserve formula vs card-bg distinction. */ /* Variable panel */ .axiom-variables{display:flex;flex-direction:column;gap:3px;margin-top:2px} .axiom-variable-row{display:flex;gap:8px;font-size:var(--font-size-md);line-height:1.4} .axiom-var-sym{font-family:var(--font-mono);font-weight:600;color:var(--saltbush-deep);min-width:40px;flex-shrink:0} /* v10: --lime-deep→--saltbush-deep */ .axiom-var-def{color:var(--text-muted)} /* Clinical context line */ .axiom-context{ font-size:var(--font-size-md);color:var(--text-muted); border-left:2px solid var(--saltbush); /* WS11: --sky→--lime */ padding:4px 8px;margin-top:4px; line-height:1.5;font-style:italic; } /* Chips row — named-after + related equations */ .axiom-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px} .axiom-chip{ font-size:var(--font-size-xs);padding:2px 8px; background:color-mix(in srgb,var(--sky) 14%,var(--surface)); border:1px solid color-mix(in srgb,var(--sky) 30%,var(--border)); border-radius:var(--radius-pill);color:var(--text-muted);white-space:nowrap; } .axiom-chip.named-after{color:var(--text);font-weight:500} /* --- Routine list --- Today-fix v2 — bordered-card list with the entire row as a clickable label. Each
  • is the visible card frame; the inner