, so it needs the anchor
defaults stripped or it inherits link colour and an underline. */
a.corner-btn { text-decoration: none; }
a.corner-btn:hover { text-decoration: none; }
.corner-btn:hover { transform: scale(1.1) rotate(-8deg); }
.corner-btn:active { transform: scale(0.92); }
:root[data-theme="dark"] .corner-btn {
background: #191c22;
color: #e5e7eb;
border: 1px solid #2a2e37;
}
/* index.html's edge-decor zigzag strips are 70px wide and only render at
min-width:1000px (see index.html's own @media rule for .edge-decor).
Push the corner buttons in past that band at the same breakpoint --
quiz/study/practicum pages have no edge-decor at any width (their header
cards sit close to the viewport edge, especially on mobile, so shifting
them there would overlap page content instead of clearing anything), and
below 1000px on the homepage the decor itself is hidden, so 14px is
correct there too. */
@media (min-width: 1000px) {
body.homepage #corner-actions { right: 84px; }
body.homepage #install-app-btn { left: 84px; }
body.homepage .calc-overlay { right: 84px; }
}
/* index.html's own token system. Scoped to body.homepage (not a blanket
:root override) because ~150 quiz/study/practicum pages each define their
own :root custom properties reusing the SAME names (--ink, --muted, --bg,
--shadow) with different values -- a blanket override here would win by
specificity over every one of those pages' own declarations and corrupt
their light-mode color logic before the invert filter below even runs. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] body.homepage {
--bg: #121116;
--card: #1c1b21;
--border: #302d36;
--ink: #e5e7eb;
--muted: #9aa1ac;
--accent: var(--a-blue);
--accent-soft: var(--a-blue-soft);
--accent2: var(--a-green);
--accent2-soft: var(--a-green-soft);
--accent3: var(--a-violet);
--accent3-soft: var(--a-violet-soft);
--shadow: var(--e-2);
--shadow-lift: var(--e-3);
--tab-border: rgba(96, 165, 250, 0.3);
}
:root[data-theme="light"] body.homepage {
/* Warm off-white rather than the old cold #f3f4f6. The blue accent already
supplies all the cool on this page; a cool ground underneath it is the
main thing that separated the homepage's feel from guides.html's cream. */
--bg: #f8f6f2;
--card: #ffffff;
--border: #e8e4dd;
--ink: #1f2937;
--muted: #6b7280;
--accent: var(--a-blue);
--accent-soft: var(--a-blue-soft);
--accent2: var(--a-green);
--accent2-soft: var(--a-green-soft);
--accent3: var(--a-violet);
--accent3-soft: var(--a-violet-soft);
--shadow: var(--e-2);
--shadow-lift: var(--e-3);
--tab-border: rgba(37, 99, 235, 0.25);
}
/* Ambient background gradient drift (added 2026-07-17) -- a slow, barely-
perceptible shift so the homepage feels "alive" even at rest, independent
of the seasonal particle effects. The gradient stops are close analogous
tints of the plain --bg color above, so the overall mood reads the same
as before, just no longer perfectly flat. Wins over index.html's own
`body { background: var(--bg); }` by specificity (class+element beats a
bare element selector) regardless of load order. Each seasonal block
below sets its own drift using that season's palette instead of this
default one -- see [[pa-quizzes-seasonal-themes]] (confirmed 2026-07-17:
seasonal windows should drift too, not just override to a flat color). */
:root[data-theme="dark"] body.homepage {
background: linear-gradient(120deg, #121116, #131a28, #191216, #121116);
background-color: #121116; /* see note below: the shorthand above resets this to transparent */
background-size: 300% 300%;
animation: bg-drift 16s ease-in-out infinite;
}
:root[data-theme="light"] body.homepage {
background: linear-gradient(120deg, #f8f6f2, #eef1f6, #faf3ec, #f8f6f2);
background-color: #f8f6f2; /* see note below: the shorthand above resets this to transparent */
background-size: 300% 300%;
animation: bg-drift 16s ease-in-out infinite;
}
@keyframes bg-drift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Valentine's window (Jan 31 - Feb 14, see theme.js) -- homepage-only
light-mode pink tint. Scoped to .vday-theme (a class theme.js adds only
inside that date window) so it never bleeds outside the season. */
:root[data-theme="light"] body.homepage.vday-theme {
--bg: #fbe7ee;
--card: #fffcfd;
--border: #f0cddb;
background: linear-gradient(120deg, #fbe7ee, #fef0f7, #f5d3e0, #fbe7ee);
background-color: #fbe7ee; /* see note below: the shorthand above resets this to transparent */
background-size: 300% 300%;
animation: bg-drift 16s ease-in-out infinite;
}
/* Fall/Halloween window (Oct 17-31, see theme.js) -- homepage-only
light-mode warm tint, same .theme-class-scoped pattern as vday-theme. */
:root[data-theme="light"] body.homepage.fall-theme {
--bg: #fdf1e4;
--card: #fffdf8;
--border: #f0dcc0;
background: linear-gradient(120deg, #fdf1e4, #fef8ef, #f8dfc0, #fdf1e4);
background-color: #fdf1e4; /* see note below: the shorthand above resets this to transparent */
background-size: 300% 300%;
animation: bg-drift 16s ease-in-out infinite;
}
/* St. Patrick's window (Mar 3-17, see theme.js) -- homepage-only
light-mode green tint, same .theme-class-scoped pattern as vday-theme. */
:root[data-theme="light"] body.homepage.stpatricks-theme {
--bg: #d7f0dd;
--card: #f9fefb;
--border: #a9dab8;
background: linear-gradient(120deg, #d7f0dd, #e9f9ec, #bfe8ca, #d7f0dd);
background-color: #d7f0dd; /* see note below: the shorthand above resets this to transparent */
background-size: 300% 300%;
animation: bg-drift 16s ease-in-out infinite;
}
/* December window (see theme.js) -- homepage-only light-mode cream tint,
same .theme-class-scoped pattern as the other seasonal tints. */
:root[data-theme="light"] body.homepage.xmas-theme {
--bg: #faf3e3;
--card: #fffdf7;
--border: #ece0c4;
background: linear-gradient(120deg, #faf3e3, #fffcf3, #f3e4c4, #faf3e3);
background-color: #faf3e3; /* see note below: the shorthand above resets this to transparent */
background-size: 300% 300%;
animation: bg-drift 16s ease-in-out infinite;
}
:root[data-theme="light"] body.homepage.paweek-theme {
--bg: #e7f6f4; --card: #fbfffe; --border: #c7e7e1;
background: linear-gradient(120deg, #e7f6f4, #f2fbf9, #d4edf2, #e7f6f4);
background-color: #e7f6f4;
background-size: 300% 300%;
animation: bg-drift 16s ease-in-out infinite;
}
:root[data-theme="light"] body.homepage.halloween-theme {
--bg: #f1e9f6; --card: #fefcff; --border: #dccbea;
background: linear-gradient(120deg, #f1e9f6, #f8f1fb, #f6dcc6, #f1e9f6);
background-color: #f1e9f6;
background-size: 300% 300%;
animation: bg-drift 16s ease-in-out infinite;
}
:root[data-theme="light"] body.homepage.fireworks-theme {
--bg: #eef3fb; --card: #fbfdff; --border: #cdd9ee;
background: linear-gradient(120deg, #eef3fb, #fbf1f1, #e0eaf9, #eef3fb);
background-color: #eef3fb;
background-size: 300% 300%;
animation: bg-drift 16s ease-in-out infinite;
}
:root[data-theme="light"] body.homepage.newyear-theme {
--bg: #eef0f6; --card: #fefeff; --border: #d3d8e8;
background: linear-gradient(120deg, #eef0f6, #f8f4e8, #e2e6f2, #eef0f6);
background-color: #eef0f6;
background-size: 300% 300%;
animation: bg-drift 16s ease-in-out infinite;
}
:root[data-theme="light"] body.homepage.thanksgiving-theme {
--bg: #fdf6e8; --card: #fffefa; --border: #efe0bc;
background: linear-gradient(120deg, #fdf6e8, #fffaf0, #f8ebc9, #fdf6e8);
background-color: #fdf6e8;
background-size: 300% 300%;
animation: bg-drift 16s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
/* !important needed here: the :root[data-theme=...]-scoped drift rules
above are more specific than a plain class selector can match without
it, so a lower-specificity guard would silently lose the cascade and
leave the animation running. */
body.homepage,
body.homepage.vday-theme,
body.homepage.fall-theme,
body.homepage.stpatricks-theme,
body.homepage.xmas-theme,
body.homepage.paweek-theme,
body.homepage.halloween-theme, body.homepage.thanksgiving-theme, body.homepage.newyear-theme, body.homepage.fireworks-theme {
animation: none !important;
background-position: 0% 50% !important;
}
}
:root[data-theme="dark"] body.homepage .edge-decor {
background-size: 60px 420px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 420'%3E%3Cpath d='M30,0 L30,50 L12,60 L48,80 L30,90 L30,104 Q40,112 30,120 L30,175 L12,185 L48,205 L30,215 L30,229 Q40,237 30,245 L30,320 L12,330 L48,350 L30,360 L30,374 Q40,382 30,390 L30,420' fill='none' stroke='%234981ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body.homepage .bottom-decor {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60'%3E%3Cpath d='M0,30 L120,30 L135,8 L150,52 L165,30 L300,30' fill='none' stroke='%2360a5fa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Generic quiz/study/practicum templates: invert the content wrapper only
(never `html`/`body`), so position:fixed siblings like the footer logo,
pull-to-refresh indicator, and JS-appended toast/update-banner elements
(all direct children of , outside .wrap) keep the viewport as their
containing block instead of inheriting a filtered one. */
:root[data-theme="dark"] body:not([data-dark="tokens"]) > .wrap {
filter: invert(1) hue-rotate(180deg);
}
:root[data-theme="dark"] body:not([data-dark="tokens"]) > .wrap .diagram-wrap,
:root[data-theme="dark"] body:not([data-dark="tokens"]) > .wrap img,
:root[data-theme="dark"] body:not([data-dark="tokens"]) > .wrap video {
filter: invert(1) hue-rotate(180deg);
}
:root[data-theme="dark"] body {
background: #0b0d12;
}
/* Larger-text setting: every page's font sizes are hardcoded px, not
rem, so a root font-size bump would do nothing -- CSS `zoom` scales
the whole rendered subtree (a real reflow, not a visual transform),
which works regardless of what units a given page happens to use.
Applied to the same top-level containers as the dark-mode invert
above (body > .wrap for quiz/study/practicum pages, .page for the
homepage) so position:fixed siblings (corner buttons, modals, the
pull-to-refresh indicator) are never affected. */
:root[data-text-size="large"] body > .wrap {
zoom: 1.15;
}
:root[data-text-size="large"] body.homepage .page {
zoom: 1.15;
}
/* High-contrast setting: same top-level-container trick again, but
`filter` (unlike `zoom`) isn't additive across separate rules -- two
rules that both set `filter` on the same element don't combine, the
later/more-specific one just wins outright. Dark mode already uses
`filter` for its invert trick on quiz/study/practicum pages, so a
plain `[data-contrast="high"] .wrap { filter: contrast(...) }` rule
would silently replace (not add to) the dark-mode invert when both
are on. The compound `[data-theme="dark"][data-contrast="high"]`
selector below has higher specificity than either alone and spells
out the combined filter value explicitly, so both settings apply
together correctly regardless of source order. The homepage doesn't
need this composing -- its dark mode is real CSS-variable colors,
not a filter, so contrast there is always independent. */
:root[data-contrast="high"] body > .wrap {
filter: contrast(1.35);
}
:root[data-theme="dark"][data-contrast="high"] body:not([data-dark="tokens"]) > .wrap {
filter: invert(1) hue-rotate(180deg) contrast(1.35);
}
:root[data-contrast="high"] body.homepage .page {
filter: contrast(1.3);
}
/* Keyboard-shortcuts help overlay, injected by theme.js only on pages that
have a #timerpill element (i.e. non-practicum quiz pages, which are the
only ones with the 1-4/Enter/Arrow keydown handler this documents). */
.shortcuts-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 2000;
align-items: center;
justify-content: center;
padding: 20px;
}
.shortcuts-overlay.open { display: flex; }
.shortcuts-panel {
background: #ffffff;
color: #1f2937;
border: 1px solid #e5e7eb;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
max-width: 360px;
width: 100%;
padding: 22px 22px 20px;
position: relative;
}
:root[data-theme="dark"] .shortcuts-panel {
background: #191c22;
color: #e5e7eb;
border-color: #2a2e37;
}
.shortcuts-panel h3 {
margin: 0 0 14px;
font-size: 15px;
font-weight: 700;
}
.shortcuts-close {
position: absolute;
top: 12px;
right: 12px;
border: none;
background: #e5e7eb;
color: #1f2937;
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
line-height: 1;
font-size: 15px;
}
:root[data-theme="dark"] .shortcuts-close {
background: #2a2e37;
color: #e5e7eb;
}
.shortcuts-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 7px 0;
font-size: 13.5px;
border-bottom: 1px solid #f3f4f6;
}
:root[data-theme="dark"] .shortcuts-row { border-bottom-color: #22262e; }
.shortcuts-row:last-child { border-bottom: none; }
.shortcuts-keys kbd {
display: inline-block;
min-width: 20px;
text-align: center;
padding: 2px 6px;
border-radius: 5px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
font: 700 11.5px/1.4 ui-monospace, monospace;
color: #374151;
margin-left: 3px;
}
:root[data-theme="dark"] .shortcuts-keys kbd {
background: #22262e;
border-color: #2a2e37;
color: #d1d5db;
}
.shortcuts-guide-link {
display: block;
width: 100%;
text-align: center;
font: inherit;
font-size: 12.5px;
color: #6b7280;
background: none;
border: none;
border-top: 1px solid #f3f4f6;
text-decoration: underline;
cursor: pointer;
margin-top: 12px;
padding: 12px 4px 0;
}
:root[data-theme="dark"] .shortcuts-guide-link {
color: #9aa1ac;
border-top-color: #22262e;
}
/* Settings panel, same overlay/panel treatment as the shortcuts help above. */
.settings-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 2000;
align-items: center;
justify-content: center;
padding: 20px;
}
.settings-overlay.open { display: flex; }
.settings-panel {
background: #ffffff;
color: #1f2937;
border: 1px solid #e5e7eb;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
max-width: 340px;
width: 100%;
padding: 22px 22px 20px;
position: relative;
}
:root[data-theme="dark"] .settings-panel {
background: #191c22;
color: #e5e7eb;
border-color: #2a2e37;
}
.settings-panel h3 {
margin: 0 0 14px;
font-size: 15px;
font-weight: 700;
}
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
font-size: 13.5px;
border-bottom: 1px solid #f3f4f6;
}
:root[data-theme="dark"] .settings-row { border-bottom-color: #22262e; }
.settings-row:last-child { border-bottom: none; }
.settings-action-btn {
appearance: none;
border: 1px solid #e5e7eb;
background: none;
color: #2563eb;
font: inherit;
font-size: 12.5px;
font-weight: 700;
padding: 5px 12px;
border-radius: 8px;
cursor: pointer;
white-space: nowrap;
}
:root[data-theme="dark"] .settings-action-btn { border-color: #2a2e37; color: #60a5fa; }
.settings-action-btn:hover { border-color: currentColor; }
.settings-switch {
position: relative;
width: 38px;
height: 22px;
flex: 0 0 auto;
display: inline-block;
}
.settings-switch input {
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
position: relative;
z-index: 1;
}
.settings-switch .track {
position: absolute;
inset: 0;
background: #e5e7eb;
border-radius: 999px;
transition: background .15s var(--ease);
pointer-events: none;
}
.settings-switch .thumb {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
transition: transform .15s var(--ease);
pointer-events: none;
}
:root[data-theme="dark"] .settings-switch .track { background: #2a2e37; }
.settings-switch input:checked ~ .track { background: #2563eb; }
:root[data-theme="dark"] .settings-switch input:checked ~ .track { background: #60a5fa; }
.settings-switch input:checked ~ .thumb { transform: translateX(16px); }
/* Calculator: a small floating panel near the corner button, not a
full-screen overlay like Settings/Shortcuts above -- it needs to stay
usable side-by-side with the question rather than blocking it, so no
inset:0 backdrop and no click-catching outside the panel itself (theme.js
closes it via a plain document click/Escape listener instead). Same
hardcoded-colors-plus-dark-override pattern as the rest of this file's
body-direct-child injected elements, for the same reason (the dark-mode
invert filter only targets body > .wrap, not these). */
.calc-overlay {
display: none;
position: fixed;
top: 60px;
right: 14px;
z-index: 2000;
}
.calc-overlay.open { display: block; }
.calc-panel {
background: #ffffff;
color: #1f2937;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
width: 220px;
padding: 12px;
}
:root[data-theme="dark"] .calc-panel {
background: #191c22;
color: #e5e7eb;
border-color: #2a2e37;
}
.calc-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
font-weight: 700;
margin-bottom: 8px;
cursor: move;
touch-action: none;
user-select: none;
}
.calc-close {
background: none;
border: none;
font-size: 20px;
line-height: 1;
cursor: pointer;
color: inherit;
padding: 0 2px;
}
.calc-display {
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px 10px;
margin-bottom: 8px;
text-align: right;
font-size: 22px;
font-variant-numeric: tabular-nums;
overflow-x: auto;
white-space: nowrap;
}
:root[data-theme="dark"] .calc-display {
background: #0f1115;
border-color: #2a2e37;
}
.calc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.calc-btn {
border: 1px solid #e5e7eb;
background: #f9fafb;
color: #1f2937;
border-radius: 8px;
padding: 10px 0;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.calc-btn:active { transform: scale(0.96); }
:root[data-theme="dark"] .calc-btn {
background: #20242c;
color: #e5e7eb;
border-color: #2a2e37;
}
.calc-btn.calc-op {
background: #eff6ff;
color: #2563eb;
}
:root[data-theme="dark"] .calc-btn.calc-op {
background: #16213a;
color: #60a5fa;
}
.calc-btn.calc-eq {
background: #2563eb;
color: #fff;
border-color: #2563eb;
}
:root[data-theme="dark"] .calc-btn.calc-eq {
background: #3b82f6;
border-color: #3b82f6;
}
.calc-btn.calc-fn {
background: #fef2f2;
color: #dc2626;
}
:root[data-theme="dark"] .calc-btn.calc-fn {
background: #2a1414;
color: #f87171;
}
@media (max-width: 480px) {
.calc-overlay { left: 12px; right: 12px; }
.calc-panel { width: auto; }
}
/* Study session timer (Pomodoro-style, theme.js initPomodoro()). Same
overlay/panel/header/draggable shell as .calc-*, just a different body. */
.pomo-overlay {
display: none;
position: fixed;
top: 60px;
right: 62px;
z-index: 2000;
}
.pomo-overlay.open { display: block; }
.pomo-panel {
background: #ffffff;
color: #1f2937;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
width: 240px;
padding: 12px;
}
:root[data-theme="dark"] .pomo-panel {
background: #191c22;
color: #e5e7eb;
border-color: #2a2e37;
}
.pomo-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
font-weight: 700;
margin-bottom: 6px;
cursor: move;
touch-action: none;
user-select: none;
}
.pomo-close {
background: none;
border: none;
font-size: 20px;
line-height: 1;
cursor: pointer;
color: inherit;
padding: 0 2px;
}
.pomo-phase {
text-align: center;
font-size: 12.5px;
font-weight: 600;
color: var(--muted, #6b7280);
margin-bottom: 2px;
}
.pomo-display {
text-align: center;
font-size: 36px;
font-weight: 700;
font-variant-numeric: tabular-nums;
margin-bottom: 10px;
}
.pomo-controls {
display: flex;
gap: 6px;
margin-bottom: 10px;
}
.pomo-action-btn {
flex: 1;
border: 1px solid #e5e7eb;
background: #f9fafb;
color: #1f2937;
border-radius: 8px;
padding: 8px 0;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.pomo-action-btn:active { transform: scale(0.97); }
.pomo-action-btn.primary {
background: #2563eb;
color: #fff;
border-color: #2563eb;
}
:root[data-theme="dark"] .pomo-action-btn {
background: #20242c;
color: #e5e7eb;
border-color: #2a2e37;
}
:root[data-theme="dark"] .pomo-action-btn.primary {
background: #3b82f6;
border-color: #3b82f6;
}
.pomo-settings {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 12.5px;
color: var(--muted, #6b7280);
margin-bottom: 6px;
}
.pomo-field {
display: flex;
align-items: center;
gap: 6px;
}
.pomo-field input {
width: 44px;
font: inherit;
font-variant-numeric: tabular-nums;
padding: 4px 6px;
border-radius: 6px;
border: 1px solid #e5e7eb;
background: #f9fafb;
color: #1f2937;
}
:root[data-theme="dark"] .pomo-field input {
border-color: #2a2e37;
background: #0f1115;
color: #e5e7eb;
}
.pomo-sessions {
text-align: center;
font-size: 12px;
color: var(--muted, #6b7280);
}
/* Always-visible mini countdown, independent of whether the panel above is
open -- shown only while a session is actively running (see render() in
initPomodoro()). Sits just below #corner-actions, same top offset as
.calc-overlay/.pomo-overlay so it doesn't collide with either. */
.pomo-pill {
display: none;
position: fixed;
top: 60px;
right: 14px;
z-index: 590;
border: 1px solid #e5e7eb;
background: #ffffff;
color: #1f2937;
border-radius: 999px;
padding: 6px 12px;
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.pomo-pill.visible { display: block; }
/* The panel already shows the live countdown once open -- hiding the pill
in that state avoids the two overlapping (panel width can reach past the
pill's own position at right:14px). Relies on the pill being a later
DOM sibling of .pomo-overlay (theme.js appends it after), which the
general sibling combinator needs to match at all. */
.pomo-overlay.open ~ .pomo-pill { display: none !important; }
:root[data-theme="dark"] .pomo-pill {
background: #191c22;
color: #e5e7eb;
border-color: #2a2e37;
}
.pomo-pill.pomo-pill-break {
border-color: #86efac;
color: #166534;
}
:root[data-theme="dark"] .pomo-pill.pomo-pill-break {
border-color: #166534;
color: #86efac;
}
@media (max-width: 480px) {
.pomo-overlay { left: 12px; right: 12px; }
.pomo-panel { width: auto; }
}
/* First-visit guided tour, shared engine (window.SiteTour) used both by
theme.js itself (quiz-page steps) and index.html's own inline script
(homepage steps). Hardcoded colors + dark override, same reasoning as
the corner buttons and shortcuts overlay above. */
.tour-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 4500;
align-items: center;
justify-content: center;
padding: 20px;
}
.tour-overlay.open { display: flex; }
.tour-prompt {
background: #ffffff;
color: #1f2937;
border: 1px solid #e5e7eb;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
max-width: 320px;
width: 100%;
padding: 22px 22px 18px;
text-align: center;
}
:root[data-theme="dark"] .tour-prompt {
background: #191c22;
color: #e5e7eb;
border-color: #2a2e37;
}
.tour-prompt-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.tour-prompt-text { margin: 0 0 16px; font-size: 13px; color: #6b7280; }
:root[data-theme="dark"] .tour-prompt-text { color: #9aa1ac; }
.tour-prompt-actions { display: flex; gap: 10px; justify-content: center; }
.tour-spotlight {
display: none;
position: fixed;
border-radius: 10px;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
z-index: 4501;
pointer-events: none;
transition: top .2s var(--ease), left .2s var(--ease), width .2s var(--ease), height .2s var(--ease);
}
.tour-tooltip {
position: fixed;
z-index: 4502;
max-width: 300px;
width: calc(100% - 32px);
background: #ffffff;
color: #1f2937;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
padding: 16px 16px 14px;
transition: top .2s var(--ease), left .2s var(--ease);
}
:root[data-theme="dark"] .tour-tooltip {
background: #191c22;
color: #e5e7eb;
border-color: #2a2e37;
}
.tour-tooltip-step {
margin: 0 0 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: #2563eb;
}
:root[data-theme="dark"] .tour-tooltip-step { color: #60a5fa; }
.tour-tooltip-title { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; }
.tour-tooltip-text { margin: 0 0 14px; font-size: 13px; line-height: 1.4; color: #4b5563; }
:root[data-theme="dark"] .tour-tooltip-text { color: #b6bcc6; }
.tour-tooltip-actions { display: flex; align-items: center; gap: 8px; }
.tour-btn {
font: inherit;
font-size: 12.5px;
font-weight: 700;
padding: 7px 13px;
border-radius: 8px;
border: 1px solid #e5e7eb;
background: #f9fafb;
color: #1f2937;
cursor: pointer;
}
:root[data-theme="dark"] .tour-btn {
background: #22262e;
border-color: #2a2e37;
color: #e5e7eb;
}
.tour-btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
:root[data-theme="dark"] .tour-btn.primary { background: #60a5fa; border-color: #60a5fa; color: #0f1115; }
/* Cloud sync account button + panel (added 2026-07-10). Reuses the
.tour-prompt/.tour-btn shell (prompt) and .settings-overlay/.settings-panel
shell (account panel) for visual consistency instead of inventing new
modal chrome -- see feedback_cloud_sync memory. */
.corner-btn.signed-in { position: relative; }
.corner-btn.signed-in::after {
content: "";
position: absolute;
bottom: 2px;
right: 2px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #16a34a;
border: 2px solid #fff;
}
:root[data-theme="dark"] .corner-btn.signed-in::after { border-color: #191c22; }
.account-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: block;
margin: 0 auto 12px;
}
.account-email { font-size: 13px; color: #6b7280; text-align: center; margin: 0 0 16px; }
:root[data-theme="dark"] .account-email { color: #9aa1ac; }
.account-name { font-size: 15px; font-weight: 700; text-align: center; margin: 0 0 2px; }
.cloudauth-google-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 11px 16px;
border-radius: 10px;
border: 1px solid #e5e7eb;
background: #fff;
color: #1f2937;
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.cloudauth-google-btn:hover { background: #f9fafb; }
:root[data-theme="dark"] .cloudauth-google-btn {
background: #22262e;
border-color: #2a2e37;
color: #e5e7eb;
}
:root[data-theme="dark"] .cloudauth-google-btn:hover { background: #2a2e37; }
/* "Test yourself" popup quiz (window.openTestYourself in theme.js). Button
uses var(--acc, ...) so it auto-themes per-section on pages that define
that variable (the physiology field guide's per-system accent colors),
falling back to the site blue anywhere it isn't defined. */
.test-yourself-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: fit-content;
margin: 20px auto 4px;
padding: 11px 20px;
border-radius: 999px;
border: none;
background: var(--acc, #2563eb);
color: #fff;
font: 700 13.5px ui-sans-serif, system-ui, -apple-system, sans-serif;
cursor: pointer;
}
.test-yourself-btn:hover { filter: brightness(0.92); }
.tq-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .6);
z-index: 3000;
align-items: flex-start;
justify-content: center;
padding: 40px 16px;
overflow-y: auto;
}
.tq-overlay.open { display: flex; }
.tq-panel {
background: #ffffff;
color: #1f2937;
border-radius: 16px;
max-width: 560px;
width: 100%;
padding: 26px 24px 30px;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
:root[data-theme="dark"] .tq-panel {
background: #191c22;
color: #e5e7eb;
}
.tq-close {
position: absolute;
top: 14px;
right: 14px;
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: #e5e7eb;
color: #1f2937;
cursor: pointer;
font-size: 17px;
line-height: 1;
}
:root[data-theme="dark"] .tq-close {
background: #2a2e37;
color: #e5e7eb;
}
.tq-title { font-size: 16px; font-weight: 800; margin: 0 26px 4px 0; }
.tq-score { font-size: 13px; font-weight: 700; color: #6b7280; margin: 0 0 18px; }
:root[data-theme="dark"] .tq-score { color: #9aa1ac; }
.tq-q {
margin-bottom: 20px;
padding-bottom: 18px;
border-bottom: 1px solid #e5e7eb;
}
:root[data-theme="dark"] .tq-q { border-bottom-color: #2a2e37; }
.tq-q:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.tq-qtext { font-size: 14.5px; font-weight: 700; margin: 0 0 10px; }
.tq-opts { display: flex; flex-direction: column; gap: 6px; }
.tq-opt {
text-align: left;
font: inherit;
font-size: 13.5px;
padding: 9px 12px;
border-radius: 9px;
border: 1px solid #e5e7eb;
background: #f9fafb;
color: #1f2937;
cursor: pointer;
}
:root[data-theme="dark"] .tq-opt {
background: #22262e;
border-color: #2a2e37;
color: #e5e7eb;
}
.tq-opt:hover:not(:disabled) { border-color: #2563eb; }
.tq-opt:disabled { cursor: default; opacity: .8; }
.tq-opt.tq-correct { background: #dcfce7; border-color: #16a34a; color: #14532d; opacity: 1; }
:root[data-theme="dark"] .tq-opt.tq-correct { background: #12251a; border-color: #4ade80; color: #4ade80; }
.tq-opt.tq-wrong { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; opacity: 1; }
:root[data-theme="dark"] .tq-opt.tq-wrong { background: #2a1414; border-color: #f87171; color: #f87171; }
.tq-explain { font-size: 12.5px; color: #6b7280; margin: 10px 0 0; font-style: italic; }
:root[data-theme="dark"] .tq-explain { color: #9aa1ac; }
.tq-explain.hidden { display: none; }
/* Exam Mode's question-jump grid (window.openQuestionNav in theme.js).
Reuses the .tq-overlay/.tq-panel/.tq-close/.tq-title recipe above. */
.qnav-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .6);
z-index: 3000;
align-items: flex-start;
justify-content: center;
padding: 40px 16px;
overflow-y: auto;
}
.qnav-overlay.open { display: flex; }
.qnav-panel {
background: #ffffff;
color: #1f2937;
border-radius: 16px;
max-width: 420px;
width: 100%;
padding: 26px 24px 24px;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
:root[data-theme="dark"] .qnav-panel {
background: #191c22;
color: #e5e7eb;
}
.qnav-summary { font-size: 13px; font-weight: 700; color: #6b7280; margin: 0 0 14px; }
:root[data-theme="dark"] .qnav-summary { color: #9aa1ac; }
.qnav-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.qnav-legend-item { font-size: 11.5px; font-weight: 600; color: #6b7280; }
:root[data-theme="dark"] .qnav-legend-item { color: #9aa1ac; }
.qnav-legend-item.flagged { color: #b45309; }
:root[data-theme="dark"] .qnav-legend-item.flagged { color: #fbbf24; }
.qnav-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
gap: 8px;
margin: 0 0 20px;
}
.qnav-item {
height: 40px;
border-radius: 8px;
border: 1.5px solid #e5e7eb;
background: #f9fafb;
color: #1f2937;
font: 700 13px ui-sans-serif, system-ui;
cursor: pointer;
position: relative;
}
:root[data-theme="dark"] .qnav-item {
background: #22262e;
border-color: #2a2e37;
color: #e5e7eb;
}
.qnav-item.answered { background: #dcfce7; border-color: #16a34a; color: #14532d; }
:root[data-theme="dark"] .qnav-item.answered { background: #12251a; border-color: #4ade80; color: #4ade80; }
.qnav-item.flagged { box-shadow: inset 0 0 0 2px #f59e0b; }
.qnav-item.current { outline: 2.5px solid #2563eb; outline-offset: 1px; }
:root[data-theme="dark"] .qnav-item.current { outline-color: #60a5fa; }
.qnav-submit { width: 100%; text-align: center; justify-content: center; }
/* In-quiz Exam Mode controls (flag button, question-nav opener) -- pill
style matching .scorepill/.qcount already used in each quiz's topbar. */
.examctl-btn {
font-size: 12.5px;
font-weight: 800;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #f9fafb;
color: #374151;
cursor: pointer;
}
:root[data-theme="dark"] .examctl-btn { background: #22262e; border-color: #2a2e37; color: #e5e7eb; }
.examctl-btn.flagged { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
:root[data-theme="dark"] .examctl-btn.flagged { background: #3a2c0a; border-color: #f59e0b; color: #fbbf24; }
.examctl-timer.danger { background: #fee2e2 !important; border-color: #dc2626 !important; color: #7f1d1d !important; }
:root[data-theme="dark"] .examctl-timer.danger { background: #2a1414 !important; border-color: #f87171 !important; color: #f87171 !important; }
/* Pause/Resume (added 2026-07-10): the in-topbar Pause button reuses the
.examctl-btn pill recipe (same visual family as Flag/Questions); the
full-screen "paused" state reuses the .settings-overlay/.tq-overlay
inset:0-backdrop-plus-centered-card recipe, since it needs to genuinely
block the question (not a small floating panel like the calculator). */
.pause-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 3000;
align-items: center;
justify-content: center;
padding: 20px;
}
.pause-overlay.open { display: flex; }
.pause-card {
background: #ffffff;
color: #1f2937;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
max-width: 360px;
width: 100%;
padding: 28px 26px;
text-align: center;
}
:root[data-theme="dark"] .pause-card {
background: #191c22;
color: #e5e7eb;
}
.pause-title {
font-size: 20px;
font-weight: 800;
margin: 0 0 10px;
}
.pause-text {
font-size: 14px;
color: #6b7280;
margin: 0 0 20px;
line-height: 1.5;
}
:root[data-theme="dark"] .pause-text { color: #9aa1ac; }
.pause-resume-btn {
background: #2563eb;
color: #fff;
font-weight: 700;
font-size: 15px;
padding: 12px 26px;
border-radius: 10px;
border: none;
cursor: pointer;
}
:root[data-theme="dark"] .pause-resume-btn { background: #3b82f6; }
/* Exam Mode toolbar (added 2026-07-10): a single row -- Flag, Questions, Submit --
that appears directly under the progress bar in the exact same spot on every
quiz/exam page, replacing the old inline pill buttons that lived in each
family's own topbar (and so drifted to a different position per family).
Bigger/bolder than .examctl-btn on its own so it reads as an obvious control
bar, not something you have to hunt for. Each page aliases --exam-toolbar-accent
to its own existing brand variable (see per-file :root override); the values
below are a sane default for any page that doesn't. */
.examtoolbar {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin: 14px 0 18px;
padding: 12px 14px;
border-radius: 14px;
background: #eef0fe;
background: color-mix(in srgb, var(--exam-toolbar-accent, #4f46e5) 12%, transparent);
border: 1.5px solid #c7cbf5;
border-color: color-mix(in srgb, var(--exam-toolbar-accent, #4f46e5) 35%, transparent);
}
:root[data-theme="dark"] .examtoolbar {
background: color-mix(in srgb, var(--exam-toolbar-accent, #4f46e5) 22%, transparent);
border-color: color-mix(in srgb, var(--exam-toolbar-accent, #4f46e5) 50%, transparent);
}
.examtoolbar .examctl-btn-primary {
font-size: 13.5px;
font-weight: 800;
padding: 9px 16px;
border-radius: 999px;
border: 1.5px solid var(--exam-toolbar-accent, #4f46e5);
background: #fff;
color: var(--exam-toolbar-accent, #4f46e5);
cursor: pointer;
}
:root[data-theme="dark"] .examtoolbar .examctl-btn-primary { background: #1a1c22; }
.examtoolbar .examctl-btn-primary.flagged { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
:root[data-theme="dark"] .examtoolbar .examctl-btn-primary.flagged { background: #3a2c0a; border-color: #f59e0b; color: #fbbf24; }
.examtoolbar .examctl-btn-submit {
font-size: 13.5px;
font-weight: 800;
padding: 9px 18px;
border-radius: 999px;
border: none;
background: var(--exam-toolbar-accent, #4f46e5);
color: #fff;
cursor: pointer;
}
.examtoolbar .examctl-btn-submit:hover { filter: brightness(1.08); }
@media (max-width: 480px) { .examtoolbar { justify-content: stretch; } .examtoolbar > button { flex: 1; } }
/* Dark mode on quiz pages is the invert filter on body > .wrap, so the dark
overrides above were being inverted a second time: Flag/Questions came out
as a light-grey pill with mid-blue text (2.2:1) and Pause as a glaring light
pill on a black card. Inside the inverted wrapper, author these controls in
their LIGHT colours and let the filter turn them dark (same rule
calendar.html documents). The rules above still serve any page that shows
these controls outside an inverted .wrap. */
:root[data-theme="dark"] body:not([data-dark="tokens"]) > .wrap .examctl-btn { background: #f9fafb; border-color: #e5e7eb; color: #374151; }
:root[data-theme="dark"] body:not([data-dark="tokens"]) > .wrap .examctl-btn.flagged { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
:root[data-theme="dark"] body:not([data-dark="tokens"]) > .wrap .examctl-timer.danger { background: #fee2e2 !important; border-color: #dc2626 !important; color: #7f1d1d !important; }
:root[data-theme="dark"] body:not([data-dark="tokens"]) > .wrap .examtoolbar {
background: color-mix(in srgb, var(--exam-toolbar-accent, #4f46e5) 12%, transparent);
border-color: color-mix(in srgb, var(--exam-toolbar-accent, #4f46e5) 35%, transparent);
}
:root[data-theme="dark"] body:not([data-dark="tokens"]) > .wrap .examtoolbar .examctl-btn-primary { background: #fff; }
:root[data-theme="dark"] body:not([data-dark="tokens"]) > .wrap .examtoolbar .examctl-btn-primary.flagged { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
/* Guide text highlighting (added 2026-07-10). mark.user-hl-* colors are
deliberately NOT given a :root[data-theme="dark"] override -- they live
inside body > .wrap, which already gets a blanket
filter:invert(1) hue-rotate(180deg) for dark mode (see that rule above).
Adding an explicit dark variant here would double up against that filter
and likely land on a muddier color than just letting the same invert
trick every other guide/quiz color already relies on handle it. The
floating .hl-toolbar itself is NOT inside .wrap (appended to body), so it
does need to look reasonable in both themes on its own -- kept as one
dark, low-contrast-neutral pill that reads fine over either page theme
rather than defining two variants. */
mark.user-hl {
background: transparent;
color: inherit;
padding: 0 1px;
border-radius: 3px;
cursor: pointer;
}
mark.user-hl-yellow { background: rgba(253, 224, 71, .55); }
mark.user-hl-green { background: rgba(134, 239, 172, .55); }
mark.user-hl-pink { background: rgba(249, 168, 212, .55); }
mark.user-hl-blue { background: rgba(147, 197, 253, .55); }
/* Other students' shared highlights (opt-in, theme.js's sharedHl module,
added 2026-07-14) -- deliberately a neutral dotted underline, not one of
the 4 personal highlight colors above or the orange search-hit color, so
"someone else marked this" always reads as visually distinct from "I
marked this" at a glance. Read-only (no click handler, no cursor:pointer,
no color swatches) -- unlike mark.user-hl, nothing happens on click.
Safe to nest inside (or contain) a user-hl/search-hit mark -- see the
containment-safety reasoning in the search-hit implementation above,
same TreeWalker-based text-node wrapping, no shared state between them. */
mark.shared-hl {
background: rgba(148, 163, 184, .16);
border-bottom: 2px dotted rgba(100, 116, 139, .65);
padding: 0 1px;
border-radius: 2px;
cursor: default;
}
.hl-toolbar {
position: absolute;
z-index: 3000;
display: flex;
gap: 6px;
background: #1f2937;
padding: 6px;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.hl-swatch {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .55);
cursor: pointer;
padding: 0;
}
.hl-swatch:hover { border-color: #fff; }
.hl-swatch-yellow { background: #fde047; }
.hl-swatch-green { background: #86efac; }
.hl-swatch-pink { background: #f9a8d4; }
.hl-swatch-blue { background: #93c5fd; }
/* Note indicator on an annotated highlight (added 2026-07-11) -- a
::after pseudo-element, deliberately not a real inserted DOM node (see
the JS comment on setMarkNote): a real node would become part of the
mark's textContent and permanently corrupt both the highlighted text
itself and every future textOffset() computation inside that unit. */
mark.user-hl.has-note::after {
content: "📝";
font-size: 10px;
vertical-align: super;
margin-left: 1px;
line-height: 0;
}
/* Note popover -- same "dark, theme-agnostic pill" treatment as
.hl-toolbar and for the same reason (appended to body, outside .wrap,
so it doesn't get the generic dark-mode invert every guide's own
content does and needs to look right on its own in both themes). */
.hl-note-popover {
position: absolute;
z-index: 3000;
width: 240px;
background: #1f2937;
padding: 10px;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.hl-note-textarea {
width: 100%;
min-height: 60px;
resize: vertical;
box-sizing: border-box;
font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
color: #e5e7eb;
background: #111827;
border: 1px solid #374151;
border-radius: 6px;
padding: 6px 8px;
}
.hl-note-textarea::placeholder { color: #6b7280; }
.hl-note-row {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
}
.hl-note-btn {
font: 600 12px ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
border: none;
border-radius: 6px;
padding: 6px 10px;
cursor: pointer;
}
.hl-note-remove { background: #374151; color: #fca5a5; }
.hl-note-remove:hover { background: #4b5563; }
.hl-note-save { background: #2563eb; color: #fff; }
.hl-note-save:hover { background: #1d4ed8; }
/* Recolor row inside the note popover (added 2026-07-13) -- same swatch
look as .hl-toolbar's, just smaller and with a ring marking whichever
color is currently applied so it reads as a selection, not a fresh
choice every time you reopen a highlight you already colored. */
.hl-note-colors { display: flex; gap: 6px; margin-bottom: 8px; }
.hl-note-colors .hl-swatch { width: 18px; height: 18px; }
.hl-swatch-current { box-shadow: 0 0 0 2px #1f2937, 0 0 0 4px #fff; }
/* "Your highlights" review panel (added 2026-07-13) -- same overlay+
centered-card treatment as .shortcuts-panel/.settings-panel, just
wider and scrollable since its content is a variable-length list
rather than a short fixed menu. */
.hl-panel-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 2000;
align-items: center;
justify-content: center;
padding: 20px;
}
.hl-panel-overlay.open { display: flex; }
.hl-panel {
background: #ffffff;
color: #1f2937;
border: 1px solid #e5e7eb;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
max-width: 460px;
width: 100%;
max-height: min(560px, 80vh);
padding: 22px 22px 20px;
position: relative;
display: flex;
flex-direction: column;
}
:root[data-theme="dark"] .hl-panel {
background: #191c22;
color: #e5e7eb;
border-color: #2a2e37;
}
.hl-panel h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; flex: none; }
.hl-panel-close {
position: absolute;
top: 12px;
right: 12px;
border: none;
background: #e5e7eb;
color: #1f2937;
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
line-height: 1;
font-size: 15px;
}
:root[data-theme="dark"] .hl-panel-close { background: #2a2e37; color: #e5e7eb; }
.hl-panel-empty {
margin: 0;
padding: 24px 4px;
text-align: center;
color: #6b7280;
font-size: 13.5px;
}
.hl-panel-list { overflow-y: auto; flex: 1; margin: 0 -6px; padding: 0 6px; }
.hl-panel-item {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 0;
border-bottom: 1px solid #f3f4f6;
}
:root[data-theme="dark"] .hl-panel-item { border-bottom-color: #22262e; }
.hl-panel-item:last-child { border-bottom: none; }
.hl-panel-swatch {
flex: none;
width: 12px;
height: 12px;
border-radius: 50%;
margin-top: 4px;
}
.hl-panel-text { flex: 1; min-width: 0; }
.hl-panel-excerpt {
margin: 0;
font-size: 13.5px;
line-height: 1.45;
font-style: italic;
color: inherit;
}
.hl-panel-note {
margin: 4px 0 0;
font-size: 12.5px;
color: #6b7280;
background: #f9fafb;
border-left: 2px solid #d1d5db;
padding: 4px 8px;
border-radius: 0 4px 4px 0;
}
:root[data-theme="dark"] .hl-panel-note { background: #1f2329; border-left-color: #374151; color: #9ca3af; }
.hl-panel-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hl-panel-jump {
font: 600 11.5px ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
border: none;
background: transparent;
color: #2563eb;
cursor: pointer;
padding: 2px 0;
}
.hl-panel-jump:hover { text-decoration: underline; }
.hl-panel-delete {
border: none;
background: transparent;
color: #9ca3af;
cursor: pointer;
font-size: 15px;
line-height: 1;
padding: 2px 4px;
}
.hl-panel-delete:hover { color: #dc2626; }
/* Brief pulse when "Jump to" scrolls a highlight into view, so it's
obvious which one on a page full of marks is the one you asked for --
layered on top of whatever color the mark already has, not replacing
it, and independent of the dark-mode invert since it uses an outline/
box-shadow rather than a background-color swap. */
mark.user-hl.hl-flash {
animation: hl-flash-pulse 1.6s ease-out;
}
@keyframes hl-flash-pulse {
0%, 40% { box-shadow: 0 0 0 3px #f59e0b; }
100% { box-shadow: 0 0 0 3px transparent; }
}
/* Answer-streak toast (added 2026-07-10) -- reuses the same visual recipe
index.html's own page-local showToast() already used, now shared via
theme.js so any quiz page can call window.showToast() too. */
#site-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: #111827;
color: #fff;
padding: 10px 18px;
border-radius: 999px;
font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
z-index: 5000;
box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
opacity: 0;
transition: opacity .2s var(--ease);
max-width: 80vw;
text-align: center;
pointer-events: none;
}
/* Freehand stylus/Apple Pencil drawing layer (guide-ink.js, added
2026-07-14). #guide-ink-svg spans the guide's full scroll height (set/
kept in sync by a ResizeObserver in JS) -- pointer-events stays "none"
until the toolbar is open, so the layer never blocks normal reading,
scrolling, link clicks, or text selection when the feature isn't in
active use. */
#guide-ink-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
/* touch-action has no way to say "pan-y for touch, none for pen" on the
same element -- it's a whole-element hint, not scoped per pointer
type, and WebKit routes Apple Pencil through the same gesture-
recognition pipeline as touch. pan-y here let a *vertical* pen stroke
get natively absorbed as a page scroll before guide-ink.js's own
preventDefault() ever got a say -- confirmed by an actual user
reporting exactly that ("when writing it thinks I'm scrolling if I
move vertically"). none guarantees a pen stroke is never hijacked;
guide-ink.js reimplements touch scrolling manually in JS (see
onPointerDown's touch branch) so finger-scroll while the toolbar is
open doesn't just regress as the tradeoff for that guarantee. */
touch-action: none;
}
.ink-overlay {
display: none;
position: fixed;
top: 60px;
right: 110px;
z-index: 2000;
}
.ink-overlay.open { display: block; }
.ink-toolbar {
background: #ffffff;
color: #1f2937;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
width: 200px;
padding: 12px;
}
:root[data-theme="dark"] .ink-toolbar {
background: #191c22;
color: #e5e7eb;
border-color: #2a2e37;
}
.ink-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
font-weight: 700;
margin-bottom: 10px;
cursor: move;
touch-action: none;
user-select: none;
}
.ink-close {
background: none;
border: none;
font-size: 20px;
line-height: 1;
cursor: pointer;
color: inherit;
padding: 0 2px;
}
.ink-tool-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-bottom: 10px;
}
.ink-tool-btn {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e5e7eb;
background: #f9fafb;
color: #1f2937;
border-radius: 8px;
padding: 9px 0;
cursor: pointer;
}
.ink-tool-btn.active {
background: #2563eb;
color: #fff;
border-color: #2563eb;
}
:root[data-theme="dark"] .ink-tool-btn {
background: #20242c;
color: #e5e7eb;
border-color: #2a2e37;
}
:root[data-theme="dark"] .ink-tool-btn.active {
background: #3b82f6;
border-color: #3b82f6;
}
.ink-color-row {
display: flex;
gap: 8px;
justify-content: center;
min-height: 26px;
margin-bottom: 10px;
}
.ink-swatch {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
padding: 0;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.ink-swatch.active {
border-color: #2563eb;
}
:root[data-theme="dark"] .ink-swatch.active {
border-color: #3b82f6;
}
.ink-actions-row {
display: flex;
gap: 6px;
}
.ink-action-btn {
flex: 1;
border: 1px solid #e5e7eb;
background: #f9fafb;
color: #1f2937;
border-radius: 8px;
padding: 8px 0;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.ink-action-btn.danger {
color: #dc2626;
}
:root[data-theme="dark"] .ink-action-btn {
background: #20242c;
color: #e5e7eb;
border-color: #2a2e37;
}
:root[data-theme="dark"] .ink-action-btn.danger {
color: #f87171;
}
@media (max-width: 480px) {
.ink-overlay { left: 12px; right: 12px; top: 60px; }
.ink-toolbar { width: auto; }
}
/* Quiz-completion celebration confetti (added 2026-07-17) -- same visual
design as arcade.css's .confetti-piece/@keyframes confetti-fall (used on
an Arcade win), ported here so quiz pages -- which load theme.css/theme.js
but not arcade.css/arcade.js -- get it too. See theme.js's celebrateScore()
for what triggers it. */
.confetti-piece {
position: fixed; top: -20px; width: 8px; height: 14px; z-index: 9999; pointer-events: none;
animation: confetti-fall linear forwards; border-radius: 2px;
}
@keyframes confetti-fall {
to { transform: translateY(110vh) rotate(540deg); opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
.confetti-piece { animation: none; display: none; }
}
/* ============================================================
Print / "Download as PDF" (theme.js's #pdf-btn on guides & aids).
Strips all page chrome so the exported PDF is just the content.
The button forces light theme before printing, so these rules only
need to handle layout + hiding, not dark-mode color inversion.
============================================================ */
@media print {
/* interactive chrome / overlays / decorative layers */
#corner-actions, #corner-actions-left, .guide-back-bar, #presence-pill,
#pull-refresh, #quiz-footer-logo, #guide-ink-svg, .ink-overlay, .tour-overlay,
.toc-fab, #install-app-btn, .guide-search-bar, canvas { display: none !important; }
/* the guide's Contents sidebar is navigation -- drop it, give the body the
full page width */
nav.toc { display: none !important; }
.layout { display: block !important; }
main { padding: 0 !important; max-width: none !important; }
html, body { background: #fff !important; }
/* don't clip wide tables (muscle O/I/A/N reference) at a scroll box edge */
.table-scroll { overflow: visible !important; }
/* keep related blocks together across page breaks where reasonable */
tr, figure, .callout, .pearl, .io-box { break-inside: avoid; }
h2, h3, h4 { break-after: avoid; }
a { text-decoration: none !important; color: inherit !important; }
}
/* Download-as-PDF button states while it warms lazy figures before printing
(see theme.js). Purely a status cue -- the button stays clickable. */
#pdf-btn.is-preparing { opacity: .62; cursor: progress; }
#pdf-btn.is-preparing svg { animation: pdf-warm 1.1s ease-in-out infinite; }
@keyframes pdf-warm { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
#pdf-btn.is-ready { box-shadow: 0 0 0 2px var(--accent, #2f6f6b); }
@media (prefers-reduced-motion: reduce) {
#pdf-btn.is-preparing svg { animation: none; }
}
/* ============================================================
POLISH PASS (2026-07-27)
------------------------------------------------------------
1. Footer mark: reveal only at the end of the page
------------------------------------------------------------
#quiz-footer-logo is inline-styled `position:fixed; bottom:14px;
z-index:500` on 83 pages. It reads as a footer flourish on short
pages, but on long ones (guides, cram sheets, study guides) it
floats permanently over real content -- verified drawing on top of
cells, .guide-card links and body paragraphs. It is
pointer-events:none so it never blocked clicks, only legibility.
Rather than edit 83 files, gate it on a class theme.js toggles when
the reader actually reaches the bottom (or the page is too short to
scroll). Opacity isn't set inline, so this needs no !important.
============================================================ */
#quiz-footer-logo {
opacity: 0;
transition: opacity .34s cubic-bezier(.2,.8,.2,1);
}
#quiz-footer-logo.mark-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
#quiz-footer-logo { transition: none; }
}
/* ============================================================
2. Surface accent system
------------------------------------------------------------
Each surface keeps its own hue -- that differentiation is the
point -- but every accent is now built to ONE recipe: the
lightness that lands it on 4.60:1 against its background, at
~90% of the maximum chroma sRGB can hold there.
Before, the accents ranged from 3.19:1 (amber, green) to 6.29:1
(indigo). Three failed AA outright, and the mismatch is what made
them read as five unrelated picks rather than a set.
Hue map -- home/quizzes blue, Arcade violet, Guides amber,
Group Study teal, Progress green. Arcade additionally uses all
four mode hues, because it contains all four modes.
============================================================ */
:root {
--a-blue: #2a6df2; --a-blue-hover: #185bdf; --a-blue-soft: #eff5ff;
--a-violet: #9c46f3; --a-violet-hover: #8b30e0; --a-violet-soft: #f7f2ff;
--a-amber: #ad631e; --a-amber-hover: #9b5301; --a-amber-soft: #fff2e8;
--a-teal: #228283; --a-teal-hover: #007172; --a-teal-soft: #defbfb;
--a-green: #218640; --a-green-hover: #007630; --a-green-soft: #e7fbea;
/* Review (added 2026-07-27). Sixth hue in the ring, derived with the same
recipe: the lightness that lands hue 20 on 4.60:1 against its background
at ~90% of the maximum chroma sRGB holds there. Verified 4.61:1. */
--a-crimson: #df2a44; --a-crimson-hover:#c2233a; --a-crimson-soft:#faf2f2;
}
:root[data-theme="dark"] {
--a-blue: #4981ee; --a-blue-hover: #6a99f2; --a-blue-soft: #14223d;
--a-violet: #a465ee; --a-violet-hover: #b783f2; --a-violet-soft: #281c39;
--a-amber: #c0722d; --a-amber-hover: #d08a4e; --a-amber-soft: #361b04;
--a-teal: #329293; --a-teal-hover: #4fa8a9; --a-teal-soft: #00292a;
--a-green: #31974d; --a-green-hover: #4fac68; --a-green-soft: #0c2a13;
--a-crimson: #f53c52; --a-crimson-hover:#f76f74; --a-crimson-soft:#3c1718;
}
/* ------------------------------------------------------------
3. Radius + elevation scale
------------------------------------------------------------
theme.css previously carried twelve ad-hoc radii (2,3,4,5,6,8,
9,10,14,16,50%,999px) and exactly two shadow tokens. Four radii
and a three-step ramp instead. The shadows are deliberately
wider and fainter than before, paired with a hairline border --
that reads as depth without a visible drop shadow.
------------------------------------------------------------ */
:root {
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-pill: 999px;
--e-1: 0 1px 2px rgba(16,20,28,.05), 0 1px 3px rgba(16,20,28,.04);
--e-2: 0 2px 4px rgba(16,20,28,.04), 0 8px 20px rgba(16,20,28,.06);
--e-3: 0 6px 12px rgba(16,20,28,.06), 0 20px 44px rgba(16,20,28,.09);
--ease: cubic-bezier(.2,.8,.2,1);
--dur-1: 160ms;
--dur-2: 240ms;
}
:root[data-theme="dark"] {
--e-1: 0 1px 2px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.34);
--e-2: 0 2px 4px rgba(0,0,0,.40), 0 8px 20px rgba(0,0,0,.46);
--e-3: 0 6px 12px rgba(0,0,0,.46), 0 20px 44px rgba(0,0,0,.56);
}
/* ------------------------------------------------------------
4. Type system
------------------------------------------------------------
A display serif for page titles only -- body copy, UI chrome and
quiz content stay on the existing sans. Serif is the register of
medical and academic publishing, and it gives real hierarchy
instead of leaving size to do all the work on its own.
System stack only: no webfont, no network cost, works offline in
the installed app. `ui-serif` first for the platform's own
optical serif, Charter/Georgia as the workhorse fallbacks.
------------------------------------------------------------ */
:root {
--font-display: ui-serif, "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--measure: 68ch;
}
/* Safety net: any page that never sets a body font would otherwise fall
back to the browser's default serif (Times). :where() keeps this at zero
specificity, so every page that DOES set its own font still wins. */
:where(body) { font-family: var(--font-sans); }
/* Page titles across the app shell. Scoped to the shells + guide/cram
banners so no quiz question text is ever touched. */
body.homepage .brand-title,
body:not(.homepage) > .wrap > h1,
.guide-hero h1,
header.top h1,
h1.page-title,
.deck-title,
h2.deck-title {
font-family: var(--font-display);
letter-spacing: -0.021em;
font-weight: 700;
}
/* No sideways panning on phones (design review item 6, 2026-09-25). A
sweep of every guide, cram sheet and chart at 390px found 21 pages wider
than the screen (CMS E2 guide 537px, Clin Path E1 554px, PD2 E1 682px),
almost all from one wide comparison table, a few from a fixed-width figure
or an unbreakable slash-joined word.
A wide table now scrolls inside its own box -- display:block turns the
table element into the scroll container while its rows still lay out as a
table -- and figures never exceed the column. Scoped to guide-type pages'
, so quiz tables and practicum overlays are untouched. */
@media (max-width: 640px) {
body > .wrap main table,
body > .layout main table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
/* !important only to beat inline max-width:560px on older guides' figures */
body > .wrap main img,
body > .layout main img { max-width: 100% !important; height: auto; }
/* long slash-joined runs ("deformities/asymmetry/polyps/...") break only
when they would otherwise overflow */
body > .wrap main,
body > .layout main { min-width: 0; overflow-wrap: break-word; }
}
/* Long-form reading measure. Study guides currently run ~110 characters
per line; 68 is the comfortable range. Applies to prose only -- tables,
figures and the palpation panels keep the full column width. */
main > p,
main > ul,
main > ol,
.io-box,
.callout,
.pearl,
.tech {
max-width: var(--measure);
}
/* Tabular figures for anything numeric that updates in place, so the
digits stop shuffling sideways as they change. */
#class-counter-value,
#semester-progress ~ *,
.streak-pill b,
.score,
#finalPct {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ------------------------------------------------------------
5. Quiz: collapse the title banner once the attempt starts
------------------------------------------------------------
The exam-navigator banner (a 210px navy gradient block carrying the
title, subtitle and question-count pill) is useful on the start
screen and pure overhead on every question after it -- it pushed the
actual question below the fold on a laptop.
theme.js adds .quiz-running to when #quiz becomes visible, so
the banner shrinks to a slim title bar for the duration and expands
again on the results screen. Lives here rather than in the template
because every generated quiz already loads theme.css -- no need to
regenerate 250+ files.
------------------------------------------------------------ */
/* Plain descendant selector, deliberately: an unsupported :has() inside a
comma-separated list invalidates the ENTIRE rule, so one older Safari
would have lost the whole collapse. .wrap > header is the real structure
in every generated quiz anyway. */
body.quiz-running .wrap > header {
padding: 13px 20px;
margin-bottom: 12px;
transition: padding var(--dur-2, 240ms) var(--ease, ease);
}
body.quiz-running header h1 {
font-size: 15.5px;
line-height: 1.3;
margin: 0;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
overflow: hidden;
}
body.quiz-running header .sub,
body.quiz-running header .pill { display: none; }
@media (prefers-reduced-motion: reduce) {
body.quiz-running .wrap > header { transition: none; }
}
/* Question first on phones (design review item 4, 2026-09-25). At 390px the
first screen used to be ~60% chrome: a 100px top gap, the back link, the
banner, a wrapping stats row, a tinted toolbar box whose "Submit exam"
wrapped to three lines, and a three-line objective chip -- only 2.5 of 4
choices were visible. While a question is on screen:
- the top gap goes (back link's inline 36px margin, wrap padding);
- the stats row and the Flag / Questions / Submit row become two slim
sticky rows (every button stays in the DOM -- swipe navigation reads
the on-screen buttons for permission, and the engine finds them by id);
- the objective chip is clamped to one line.
The keyboard-shortcuts corner button is hidden on touch-only phones while a
quiz runs (there is no keyboard to use it with) so the settings gear can sit
at the end of the sticky row instead of over the timer. */
@media (max-width: 640px) {
body.quiz-running > .wrap { padding-top: 6px; }
body.quiz-running > .wrap > a[href$="index.html"]:first-child { margin: 2px 0 8px !important; }
body.quiz-running #quiz-header-logo { margin-bottom: 4px !important; }
body.quiz-running .wrap > header { padding: 10px 14px; margin-bottom: 10px; border-radius: 12px; }
body.quiz-running header h1 { font-size: 14.5px; }
body.quiz-running #quiz .qbody { padding: 0 16px 18px; }
body.quiz-running #quiz { overflow: visible; }
body.quiz-running #quiz .topbar {
position: sticky; top: 0; z-index: 20;
box-sizing: border-box; min-height: 46px;
margin: 0 -16px; padding: 8px 60px 8px 16px;
gap: 8px; flex-wrap: nowrap; white-space: nowrap;
font-size: 12px;
background: var(--card, #fff);
border-radius: 14px 14px 0 0;
}
body.quiz-running #quiz .topbar .bar { flex: 1 1 0; min-width: 0; height: 6px; }
body.quiz-running #quiz .topbar .examctl-btn { padding: 4px 9px; font-size: 12px; }
body.quiz-running #quiz .examtoolbar {
position: sticky; top: 46px; z-index: 19;
margin: 0 -16px 10px; padding: 6px 16px 8px;
gap: 6px; flex-wrap: nowrap; justify-content: flex-start;
overflow-x: auto; scrollbar-width: none;
background: var(--card, #fff);
border: 0; border-bottom: 1px solid var(--line, #e5e7eb); border-radius: 0;
}
body.quiz-running #quiz .examtoolbar > button {
flex: 0 0 auto; white-space: nowrap;
font-size: 12px; padding: 6px 10px;
}
body.quiz-running #quiz .examtoolbar > .examctl-btn-submit { margin-left: auto; }
body.quiz-running #quiz .examtoolbar.hidden { display: none; }
body.quiz-running #quiz .qmeta { flex-wrap: nowrap; min-width: 0; margin-bottom: 8px; }
body.quiz-running #quiz .qmeta .tag {
min-width: 0; max-width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.quiz-running #quiz .qmeta .tag:empty { display: none; }
}
@media (max-width: 640px) and (hover: none) and (pointer: coarse) {
body.quiz-running #shortcuts-btn { display: none; }
}
/* Hide the live running score mid-quiz on phones (design review item 4,
shipped as its own commit so it can be reverted alone). UWorld never shows
it mid-block; the score still appears on the results screen, and the
element stays in the DOM for the engine to keep updating. */
@media (max-width: 640px) {
body.quiz-running #quiz .topbar #scoretxt { display: none; }
}
/* ============================================================
6. MOTION LAYER (2026-07-27)
------------------------------------------------------------
The site had 52 transitions on bare `ease` -- the browser default,
which is what makes motion read as unconsidered -- plus five
different ad-hoc cubic-beziers. One small set of curves instead,
each with a job.
============================================================ */
:root {
/* standard: decisive start, soft landing. Everything that moves
between two states uses this unless it has a reason not to. */
--ease: cubic-bezier(.2,.8,.2,1);
/* entrances that should feel alive -- a small overshoot */
--ease-spring: cubic-bezier(.34,1.4,.64,1);
/* looping ambient motion, symmetric so the loop point is invisible */
--ease-amb: cubic-bezier(.45,0,.55,1);
--dur-1: 160ms; /* hover / colour */
--dur-2: 240ms; /* panels, reveals */
--dur-3: 420ms; /* page-level entrances */
}
/* ------------------------------------------------------------
Focus. There was not one :focus-visible rule on the whole site,
so keyboard users got whatever the browser felt like drawing.
One ring, in the surface's own accent, that animates in.
------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--accent, var(--a-blue));
outline-offset: 2px;
border-radius: var(--r-sm, 8px);
animation: focus-in var(--dur-1) var(--ease) 1;
}
@keyframes focus-in {
from { outline-color: transparent; outline-offset: 6px; }
}
/* Mouse users never see it; only remove the default for pointer focus. */
:where(a, button, summary):focus:not(:focus-visible) { outline: none; }
/* ------------------------------------------------------------
Press feedback. A control that doesn't acknowledge the press
feels dead on touch, where there's no hover to fall back on.
------------------------------------------------------------ */
:where(button, .btn, .tab-btn, .quiz-link, .guide-card, .deck-card,
.test-yourself-btn, .relax-cta):active {
transform: scale(.985);
transition-duration: 80ms;
}
/* ------------------------------------------------------------
Staggered reveal. Used for lists that appear as a group -- guide
cards, quiz links inside an opened exam, arcade decks. The delay
is set inline by theme.js (--i) so it works for any list length.
------------------------------------------------------------ */
@keyframes rise-in {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: none; }
}
.stagger-in {
animation: rise-in var(--dur-3) var(--ease) both;
animation-delay: calc(var(--i, 0) * 38ms);
}
/* Exam accordions: the panel used to appear instantly. */
@keyframes panel-open {
from { opacity: 0; transform: translateY(-4px); }
}
.exam-section[open] .exam-content,
details[open] > *:not(summary) {
animation: panel-open var(--dur-2) var(--ease) both;
}
/* Tab panels: crossfade instead of a hard cut. */
.tab-panel.active { animation: rise-in var(--dur-2) var(--ease) both; }
/* ------------------------------------------------------------
One switch turns all of it off.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.stagger-in,
.tab-panel.active,
.exam-section[open] .exam-content,
details[open] > *:not(summary) { animation: none !important; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { animation: none; }
:where(button, .btn, .tab-btn, .quiz-link, .guide-card, .deck-card,
.test-yourself-btn, .relax-cta):active { transform: none; }
}
/* ============================================================
7. CONTENT-PAGE MOTION (2026-07-27)
------------------------------------------------------------
The 431 quiz/exam pages, 12 study guides and 12 cram sheets carried
three transitions and one keyframe between them -- all the motion
work so far had landed on the app-shell pages, which is not where
the time is actually spent.
Everything here hangs off classes the existing engines already set
(.opt.correct/.wrong, .expl.show, #results) or off a MutationObserver
in theme.js, so no generated page needs regenerating.
============================================================ */
/* --- question change ------------------------------------------------
renderQ() swapped the stem and options instantly. theme.js flags the
card when #qtext changes; stem and options come in on a short offset
so the eye lands on the question first. */
@keyframes q-enter {
from { opacity: 0; transform: translateY(6px); }
}
.q-enter #qtext { animation: q-enter var(--dur-2) var(--ease) both; }
.q-enter #opts { animation: q-enter var(--dur-2) var(--ease) 60ms both; }
/* --- answer feedback ------------------------------------------------
A right answer settles; a wrong one nudges. Both are small: this is
a study tool, not a slot machine. */
@keyframes opt-correct {
0% { transform: none; }
38% { transform: scale(1.014); }
100% { transform: none; }
}
@keyframes opt-wrong {
0%,100% { transform: none; }
15% { transform: translateX(-6px); }
35% { transform: translateX(6px); }
55% { transform: translateX(-4px); }
75% { transform: translateX(3px); }
90% { transform: translateX(-1px); }
}
/* a soft ring that breathes outward from the right answer, once */
@keyframes opt-ring {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok, #218640) 42%, transparent); }
100% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--ok, #218640) 0%, transparent); }
}
.opt.correct { animation: opt-correct 380ms var(--ease) 1, opt-ring 720ms ease-out 1; }
.opt.wrong { animation: opt-wrong 440ms var(--ease) 1; }
/* The letter badge becomes a check (right) or a cross (wrong) that DRAWS itself; theme.js injects
the svg when an option gains .correct/.wrong, and the letter is kept in the DOM for screen readers. */
.opt .ltr.fx-has-mark { font-size: 0; animation: fx-pop .34s cubic-bezier(.3,1.6,.5,1) 1; }
.opt .ltr .fx-mark { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.opt .ltr .fx-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fx-draw .36s ease .1s forwards; }
.opt .ltr .fx-mark path + path { animation-delay: .24s; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-pop { 0% { transform: scale(.6); } 100% { transform: none; } }
/* the eliminated options recede rather than just dimming */
.opt.dim { transition: opacity var(--dur-2) var(--ease), filter var(--dur-2) var(--ease); }
/* --- explanation ---------------------------------------------------- */
.expl.show { animation: q-enter var(--dur-2) var(--ease) both; }
/* --- results --------------------------------------------------------- */
@keyframes results-in {
from { opacity: 0; transform: translateY(10px) scale(.995); }
}
#results { animation: results-in var(--dur-3) var(--ease-spring) both; }
/* Results reveal (theme.js "Results reveal"): rolling percentage digits + rows that slide in one by one.
The digits are drawn with ::before so the real number is never doubled in the page text. */
.rs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rs-od { display: inline-flex; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; font-variant-numeric: tabular-nums; }
.rs-d { display: block; height: 1em; overflow: hidden; }
.rs-r { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1em)); transition: transform 1s cubic-bezier(.33, 1, .68, 1); }
.rs-c { display: block; height: 1em; line-height: 1; }
.rs-c::before { content: attr(data-d); }
.rs-p::before { content: "%"; }
#results.rs-go .brow, #results.rs-go .mitem.rs-it { animation: rs-slide .38s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--rs-d, 0ms); }
@keyframes rs-slide { from { opacity: 0; transform: translateX(-16px); } }
@media (prefers-reduced-motion: reduce) { #results.rs-go .brow, #results.rs-go .mitem.rs-it { animation: none !important; } .rs-r { transition: none; } }
/* --- progress bar ---------------------------------------------------- */
#barfill { transition: width var(--dur-2) var(--ease) !important; }
/* --- guides & cram sheets -------------------------------------------- */
/* figures settle in as they're scrolled to; theme.js adds .fig-in */
figure.fig { transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
figure.fig.fig-pending { opacity: 0; transform: translateY(10px); }
figure.fig.fig-in { opacity: 1; transform: none; }
/* cram rows respond to the pointer, so a dense table is easier to track */
.cram-table tbody tr, table tbody tr {
transition: background-color var(--dur-1) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
.q-enter #qtext, .q-enter #opts, .expl.show, #results,
.opt.correct, .opt.wrong, .opt .ltr.fx-has-mark { animation: none !important; }
.opt .ltr .fx-mark path { animation: none !important; stroke-dashoffset: 0; }
figure.fig, figure.fig.fig-pending { opacity: 1 !important; transform: none !important; }
}
/* ============================================================
8. FORM CONTROLS + CHROME (2026-07-27)
------------------------------------------------------------
The quiz start screen shipped four raw browser checkboxes -- the
OS default grey square, on the last screen you see before every
one of the 431 quizzes. `appearance` was used exactly once in the
whole stylesheet and `accent-color` never.
Styled here rather than in the template so no generated page needs
regenerating. The width/height need !important purely because the
template sets them inline.
============================================================ */
:root { accent-color: var(--accent, var(--a-blue)); }
input[type="checkbox"]:not([data-native]) {
-webkit-appearance: none;
appearance: none;
width: 18px !important;
height: 18px !important;
flex: none;
margin: 0;
border: 1.5px solid var(--border, var(--line, #d3d7de));
border-radius: 5px;
background-color: var(--card, #fff);
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
cursor: pointer;
transition: background-color var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease),
transform var(--dur-1) var(--ease);
}
input[type="checkbox"]:not([data-native]):hover {
border-color: var(--accent, var(--a-blue));
}
input[type="checkbox"]:not([data-native]):checked {
background-color: var(--accent, var(--a-blue));
border-color: var(--accent, var(--a-blue));
/* drawn tick, so it matches the site's 1.75px icon stroke rather than
whatever the platform draws */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
input[type="checkbox"]:not([data-native]):active { transform: scale(.92); }
input[type="checkbox"]:not([data-native]):disabled { opacity: .5; cursor: default; }
/* Text inputs and selects: consistent focus + hover, one radius. */
input[type="text"], input[type="search"], input[type="email"], textarea, select {
transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
input[type="text"]:hover, input[type="search"]:hover, textarea:hover, select:hover {
border-color: color-mix(in oklab, var(--accent, var(--a-blue)) 40%, var(--border, var(--line, #d3d7de)));
}
/* ------------------------------------------------------------
Selection + scrollbars -- there were no rules for either.
------------------------------------------------------------ */
::selection {
background-color: color-mix(in oklab, var(--accent, var(--a-blue)) 24%, transparent);
}
:root {
scrollbar-width: thin;
scrollbar-color: color-mix(in oklab, var(--accent, var(--a-blue)) 34%, transparent) transparent;
}
nav.toc, .table-scroll, .search-results, pre, .cram-table-wrap {
scrollbar-width: thin;
scrollbar-color: color-mix(in oklab, var(--accent, var(--a-blue)) 40%, transparent) transparent;
}
nav.toc::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.search-results::-webkit-scrollbar { width: 9px; height: 9px; }
nav.toc::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track { background: transparent; }
nav.toc::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb {
background: color-mix(in oklab, var(--accent, var(--a-blue)) 34%, transparent);
border-radius: 999px;
border: 2px solid transparent;
background-clip: content-box;
}
nav.toc::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover,
.search-results::-webkit-scrollbar-thumb:hover {
background: color-mix(in oklab, var(--accent, var(--a-blue)) 58%, transparent);
background-clip: content-box;
}
/* Quiz start-screen keyboard hint (see theme.js) */
.kbd-hint {
margin: 14px 0 0;
font-size: 12.5px;
color: var(--muted, #6b7280);
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.kbd-hint kbd {
font: 600 11px/1 var(--font-sans, ui-sans-serif);
padding: 3px 6px;
border: 1px solid var(--border, var(--line, #d3d7de));
border-bottom-width: 2px;
border-radius: 5px;
background: var(--card, #fff);
color: var(--ink, #1f2937);
}
/* Offline bar (see theme.js). Bottom-anchored so it never covers a
question stem or a sticky header. */
#net-bar {
position: fixed;
left: 50%;
bottom: 18px;
transform: translate(-50%, 140%);
z-index: 3500;
display: flex; align-items: center; gap: 8px;
max-width: calc(100vw - 32px);
padding: 9px 15px;
border-radius: var(--r-pill, 999px);
background: #1f2430;
color: #f3f4f6;
font: 600 13px/1.3 var(--font-sans, ui-sans-serif);
box-shadow: var(--e-3);
opacity: 0;
pointer-events: none;
transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
#net-bar.show { transform: translate(-50%, 0); opacity: 1; }
#net-bar svg { flex: none; opacity: .85; }
@media (prefers-reduced-motion: reduce) {
#net-bar { transition: none; }
}
/* Visually hidden but available to screen readers. Used by the quiz
accessibility layer in theme.js for the "Question 4 of 50" live region.
Not `display:none` / `visibility:hidden` -- both remove the node from the
accessibility tree, which would defeat the point. */
.sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* ============================================================
SURFACE TEXTURE + RESPONSIVE ELEVATION (2026-07-28, take 2)
------------------------------------------------------------
Take 1 put the grain on body::after at z-index 9998 -- i.e. a noise layer
OVER every glyph on the page, which softened text and is why the fonts
looked wrong. It belongs behind content, texturing the ground only. This
version uses ::before at z-index -1, so it can never touch type.
============================================================ */
body.homepage::before,
body.guides-page::before {
content: "";
position: fixed;
inset: 0;
z-index: -1; /* behind all content, above the page background */
pointer-events: none;
opacity: .05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body.homepage::before,
:root[data-theme="dark"] body.guides-page::before { opacity: .07; }
@media print { body.homepage::before, body.guides-page::before { display: none; } }
/* Flat at rest, tactile on hover. --e-2 (the resting default) sits at 4-6%
alpha, i.e. effectively no shadow; this is ~3x that and tighter. Scoped to
things that are actually clickable -- a card that lifts when it is not
interactive is a lie. Invisible until the pointer is on it, so it cannot
make the page look busier at rest. */
:root { --e-hover: 0 2px 6px rgba(16,20,28,.10), 0 10px 24px rgba(16,20,28,.15); }
:root[data-theme="dark"] { --e-hover: 0 2px 6px rgba(0,0,0,.42), 0 12px 28px rgba(0,0,0,.5); }
.guide-card,
body.homepage .relax-cta,
body.homepage .guides-btn,
body.homepage .continue-item {
transition: transform var(--dur-1, 160ms) var(--ease, ease),
box-shadow var(--dur-1, 160ms) var(--ease, ease),
border-color var(--dur-1, 160ms) var(--ease, ease);
}
.guide-card:hover,
body.homepage .relax-cta:hover,
body.homepage .guides-btn:hover,
body.homepage .continue-item:hover {
box-shadow: var(--e-hover);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.guide-card, body.homepage .relax-cta, body.homepage .guides-btn,
body.homepage .continue-item { transition: none; }
.guide-card:hover, body.homepage .relax-cta:hover,
body.homepage .guides-btn:hover, body.homepage .continue-item:hover { transform: none; }
}
/* ============================================================
WHY THE PAGE BOTTOM WENT WHITE (fixed 2026-07-28)
------------------------------------------------------------
`background: linear-gradient(...)` is a SHORTHAND, so every one of those
declarations silently reset background-color to transparent. The gradient
image covers the document box, but anything outside it -- most visibly the
overscroll/rubber-band region when you scroll past the end, and the canvas
during load -- had no colour to fall back on, so the browser painted its
default white. In dark mode that reads as a white strip at the bottom.
Two fixes, deliberately both:
1. background-color beside each gradient, so the canvas always has a solid
colour underneath the image.
2. `color-scheme` on :root, which is the actual root cause fix: it tells
the browser the document is dark, so every UA-painted surface -- canvas,
overscroll, scrollbars, form controls -- matches instead of defaulting
to light. This was never declared anywhere on the site.
NOTE: do NOT write `html { background-color: var(--bg) }` here. --bg is
declared on body., and custom properties inherit DOWNWARD only,
so at :root it resolves to the fallback -- pinning every page, in both
themes, to one hardcoded colour. color-scheme is what makes the UA canvas
correct generically; the per-gradient background-color handles the
document box. Between them nothing needs a value on html at all.
============================================================ */
/* Semester picker. The card heading is the control: it reads as the heading it
replaced until you hover it, then shows it is clickable. Only rendered when
there is more than one semester to pick -- otherwise the heading stays plain
text, so nothing invites a click that does nothing. */
.semester-picker{ position: relative; display: inline-block; }
.semester-picker-btn{
font: inherit; color: inherit; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
border: 1px solid transparent; background: transparent;
padding: 4px 10px 4px 12px; border-radius: 10px;
transition: background var(--dur-1, 160ms) var(--ease, ease),
border-color var(--dur-1, 160ms) var(--ease, ease);
}
.semester-picker-btn:hover{ background: var(--accent-soft); border-color: var(--border); }
.semester-picker-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.sem-chevron{ flex: none; color: var(--muted); transition: transform var(--dur-1, 160ms) var(--ease, ease); }
.semester-picker.open .sem-chevron{ transform: rotate(180deg); }
.semester-picker.open .semester-picker-btn{ background: var(--accent-soft); border-color: var(--border); }
.semester-menu{
display: none; position: absolute; z-index: 40;
top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
min-width: max(100%, 240px); padding: 6px;
background: var(--card); border: 1px solid var(--border);
border-radius: 12px; box-shadow: var(--shadow);
text-align: left;
}
.semester-picker.open .semester-menu{ display: block; }
.sem-option{
display: block; width: 100%; text-align: left; cursor: pointer;
font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.35;
color: var(--ink); background: transparent; border: 0;
padding: 9px 12px; border-radius: 8px;
}
.sem-option:hover{ background: var(--accent-soft); }
.sem-option.active{ background: var(--accent); color: #fff; }
.sem-option-name{ display: block; }
/* the estimated-dates note rides along under the name so the heading itself
can stay short */
.sem-option-note{
display: block; font-size: 11.5px; font-weight: 600; margin-top: 2px;
color: var(--muted); font-style: italic;
}
.sem-option.active .sem-option-note{ color: rgba(255,255,255,.82); }
@media (max-width: 560px){
.semester-menu{ min-width: max(100%, 200px); }
.sem-option{ font-size: 14px; }
}
/* ==========================================================================
Image lightbox
--------------------------------------------------------------------------
Injected by theme.js on every page that loads it, so guides, charts and
cram sheets all get click-to-enlarge without any per-page markup. Jaxon,
2026-08-27: "click on the images ... blow it up so we can really see it in
good detail and then press escape or a X to go back."
The overlay is appended to , deliberately NOT inside .wrap. Dark mode
on these pages is a `filter: invert(1) hue-rotate(180deg)` on body > .wrap
with a counter-invert on the images inside it; anything appended into .wrap
would inherit that stack and the enlarged photo would come out inverted.
Sitting outside .wrap it renders in true colour in both themes, which is the
whole point for clinical photographs.
========================================================================== */
.lb-able { cursor: zoom-in; }
.lb-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(8, 10, 14, .94);
flex-direction: column;
}
.lb-overlay.open { display: flex; }
.lb-bar {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
color: #e8edf2;
font: 600 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.lb-count { opacity: .72; font-variant-numeric: tabular-nums; }
.lb-spacer { flex: 1 1 auto; }
.lb-btn {
appearance: none;
background: rgba(255, 255, 255, .1);
color: #e8edf2;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 8px;
padding: 6px 11px;
font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
cursor: pointer;
}
.lb-btn:hover { background: rgba(255, 255, 255, .2); }
.lb-btn:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }
.lb-btn[disabled] { opacity: .35; cursor: default; }
.lb-x { font-size: 16px; line-height: 1; padding: 6px 10px; }
/* The scroll container: in "fit" mode nothing overflows, in "zoom" mode the
image is wider than the stage and this is what pans. */
.lb-stage {
flex: 1 1 auto;
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
padding: 0 12px;
-webkit-overflow-scrolling: touch;
}
.lb-stage img {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
background: #fff;
border-radius: 6px;
cursor: zoom-in;
/* no transition on width -- it fights the scroll re-centring below */
}
.lb-overlay.zoomed .lb-stage { align-items: flex-start; justify-content: flex-start; }
.lb-overlay.zoomed .lb-stage img {
max-width: none;
max-height: none;
margin: 0;
cursor: grab;
}
.lb-overlay.zoomed .lb-stage img.dragging { cursor: grabbing; }
.lb-cap {
flex: 0 0 auto;
color: #cbd5e1;
font: 400 13px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
text-align: center;
padding: 10px 18px 16px;
max-width: 980px;
margin: 0 auto;
}
.lb-cap:empty { display: none; }
@media (max-width: 620px) {
.lb-bar { padding: 8px 10px; gap: 7px; }
.lb-btn { padding: 6px 9px; font-size: 12px; }
.lb-cap { font-size: 12px; padding: 8px 12px 12px; }
}
/* Swipe-to-navigate on the quiz pages (theme.js). The card follows the finger
at a third of the distance -- enough to show the gesture is understood
without it feeling like the card is being thrown. .swipe-settle is added
only for the release, so the drag itself stays 1:1 with the finger. */
#quiz.swipe-settle { transition: transform 180ms cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { #quiz.swipe-settle { transition: none; } }
/* Reading-position bar on the study guides (theme.js). Amber is the Guides
hue in the map above. Sits at 4400: over the guides' own layers (their
highest is 4000) but under theme.css's modals and overlays. */
#read-bar {
position: fixed; top: 0; left: 0; right: 0; height: 3px;
z-index: 4400; pointer-events: none;
background: transparent;
opacity: 0; transition: opacity 200ms ease;
}
#read-bar.on { opacity: 1; }
#read-bar span {
display: block; height: 100%; width: 0;
background: var(--a-amber, #ad631e);
border-radius: 0 2px 2px 0;
transition: width 90ms linear;
}
@media (prefers-reduced-motion: reduce) {
#read-bar, #read-bar span { transition: none; }
}
/* Item 17: docked along the bottom edge of the sticky 38px back bar. */
#read-bar.in-back-bar { position: absolute; top: auto; bottom: -1px; height: 2px; z-index: 1; }
#read-bar.in-back-bar span { background: var(--accent, var(--a-amber, #ad631e)); border-radius: 0; }
/* pages still on the invert filter carry a LIGHT --accent, too dark to read on
the dark bar; they keep the Guides amber, which has a real dark value */
:root[data-theme="dark"] body:not([data-dark="tokens"]) #read-bar.in-back-bar span { background: var(--a-amber); }
/* ==========================================================================
DESIGNED DARK MODE for quiz / guide / cram pages (design review item 7,
2026-09-25). Opt-in per page: tools/dark_tokens.py adds
body[data-dark="tokens"] and writes that page's own dark palette (derived
from its light one with the site's 4.60:1 recipe) into a