/* hive.study (Math Arena, Physics Arena and the subject hub) in the hive.study design system.
 *
 * Colors, type, spacing, radii and motion come from hive-tokens.css (the
 * brand kit's token file, loaded first and kept unmodified). This file only
 * maps them onto the app's components. Light is the default; data-theme="dark"
 * on <html> switches every token, and index.html sets it before first paint.
 */

/* App roles expressed in brand tokens. Status tints are the only additions:
   the brand's success/error colors on a pale wash of themselves, each pair
   kept at 4.5:1 or better. */
:root {
  --pass: var(--color-success);
  --pass-bg: #E7F4EC;
  --fail: var(--color-error);
  --fail-bg: #FBEAE8;
  --warn: var(--color-warning);
  --warn-bg: #FBF1E0;
  --blank: var(--color-text-secondary);
}
[data-theme="dark"] {
  --pass-bg: #15301F;
  --fail-bg: #3A1F22;
  --warn-bg: #3A2D12;
}

/* ----------------------------------------------------------------- base */
html { scroll-padding-top: 5.5rem; }      /* focus never hides under the sticky header */
body { min-height: 100vh; }
h1, h2, h3 {
  margin: 0 0 var(--space-3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl)); letter-spacing: -0.02em; }
h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
a { color: var(--color-link); text-underline-offset: 0.18em; }
button { cursor: pointer; }
input, textarea, select { color: inherit; }
[hidden] { display: none !important; }
/* One page serves every site; the server sets data-site on <html>, and parts
   marked data-only="math physics" show only on those sites. */
html[data-site="hub"] [data-only]:not([data-only~="hub"]),
html[data-site="math"] [data-only]:not([data-only~="math"]),
html[data-site="physics"] [data-only]:not([data-only~="physics"]) { display: none !important; }
mjx-container svg { max-width: 100%; }
/* MathJax's hidden screen-reader copy of a formula can be wider and taller than
   the drawn one. Left at its natural size it stretches the problem's scroll
   area, so a few pixels of the last line (the answer choices) hide behind a
   scrollbar; one pixel is all it needs, since it is clipped from view anyway. */
mjx-container mjx-assistive-mml { max-width: 100%; overflow: hidden; width: 1px !important; height: 1px !important; }

/* ---------------------------------------------------------------- header */
.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--layout-gutter);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}
.brand { display: inline-flex; align-items: center; flex: none; border-radius: var(--radius-button); }
.brand img { display: block; height: auto; }
.brand .logo-full { width: 180px; }                 /* brand minimum for the horizontal logo */
.brand .logo-icon { width: 40px; display: none; }   /* simple icon below that width */
.brand .logo-dark { display: none; }
[data-theme="dark"] .brand .logo-light { display: none; }
[data-theme="dark"] .brand .logo-dark { display: block; }
/* With all the Math contests in the switch, the full logo only fits on wide
   screens. The hub and Physics have short headers and keep it longer. */
@media (max-width: 1365px) {
  html[data-site="math"] .brand .logo-full { display: none !important; }
  html[data-site="math"] .brand .logo-icon { display: block; }
}
@media (max-width: 1023px) {
  .brand .logo-full { display: none !important; }
  .brand .logo-icon { display: block; }
}
/* During a test the timer needs the room: below 1400px the header uses the
   simple icon rather than squeezing the full logo under its 180px minimum. */
@media (max-width: 1399px) {
  .topbar:has(#examTimer:not([hidden])) .logo-full { display: none !important; }
  .topbar:has(#examTimer:not([hidden])) .logo-icon { display: block; }
}

nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
nav button {
  min-height: var(--control-min-size);
  padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-button);
  background: none; color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium); white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}
nav button:hover { background: var(--color-surface-subtle); color: var(--color-text); }
/* Current page: text weight, a fill and an amber underline, not color alone. */
nav button.active {
  background: var(--color-surface-subtle); color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  box-shadow: inset 0 -3px 0 var(--color-accent);
}
.spacer { flex: 1; }

/* The subject this site is for, which is also the way back to the hub. */
.subject-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-min-size);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-button);
  color: var(--color-text); font-weight: var(--font-weight-semibold); text-decoration: none;
  white-space: nowrap;
}
.subject-link:hover { background: var(--color-surface-subtle); }
.subject-link svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* The Math header is already full of contests: there the link is just its
   icon unless the screen is very wide (screen readers still hear the name). */
@media (max-width: 1799px) {
  html[data-site="math"] .subject-link { width: var(--control-min-size); padding: 0; justify-content: center; }
  html[data-site="math"] #userChip .account-btn > span { display: none; }   /* the avatar's tooltip has it */
  html[data-site="math"] #subjectName {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

#examTimer {
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-bold); font-size: var(--font-size-lg);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-subtle);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-button);
}
#examTimer.low { color: var(--color-error); border-color: var(--color-error); animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { #examTimer.low { animation: none; } }

#userChip { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
#userChip .avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--brand-navy); color: var(--brand-warm-white);
  font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs);
}
[data-theme="dark"] #userChip .avatar { background: var(--color-surface-subtle); color: var(--color-text); }
#userChip button, .theme-toggle {
  min-height: var(--control-min-size);
  padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-button);
  background: none; color: var(--color-link);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  text-decoration: underline; text-underline-offset: 0.18em;
}
#userChip button:hover, .theme-toggle:hover { background: var(--color-surface-subtle); }
/* Your initials and name: they open your account. */
#userChip .account-btn { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) 0 0;
  border-radius: 999px; color: var(--color-text-secondary); text-decoration: none; cursor: pointer; }
#userChip .account-btn:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 2px; }
.theme-toggle {
  width: var(--control-min-size); padding: 0;
  color: var(--color-text); text-decoration: none; font-size: var(--font-size-lg);
  border: var(--border-width) solid var(--color-border-subtle);
}
/* The display name only fits beside the full nav on wide screens; the
   avatar keeps it as a tooltip. */
@media (max-width: 1399px) { #userChip .account-btn > span { display: none; } }

/* ------------------------------------------------ contests (10 / 12 / Math Day) */
/* Each contest keeps its own hue on tags, the banner and the exam screen, so
   the contest a student is working on is never in doubt. Always paired with
   its name in text. */
:root {
  --lvl10: #0F766E; --lvl10-soft: #E3F4F1;
  --lvl12: #2458A6; --lvl12-soft: #E6EEF9;
  --lvlmd: #854D0E; --lvlmd-soft: #FBF1E0;
  --lvlbmt: #6D28D9; --lvlbmt-soft: #F1EAFE;
  --lvlscmc: #9F1239; --lvlscmc-soft: #FDECF0;
  --lvlhmmt: #4D7C0F; --lvlhmmt-soft: #EEF6E0;
  --lvlaime: #047857; --lvlaime-soft: #E1F5EC;
  --lvlcmm: #C2410C; --lvlcmm-soft: #FDEBDD;
  --lvlpumac: #0E7490; --lvlpumac-soft: #E0F4F8;
  --lvlfma: #4338CA; --lvlfma-soft: #ECEBFD;
  --lvlusapho: #A21CAF; --lvlusapho-soft: #FAE8FB;
  --lvlpbowl: #0369A1; --lvlpbowl-soft: #E0F2FE;
  --lvlusaaao: #6D28D9; --lvlusaaao-soft: #F1EBFE;
}
[data-theme="dark"] {
  --lvl10: #5EEAD4; --lvl10-soft: #133A37;
  --lvl12: #A9C7FF; --lvl12-soft: #1D3150;
  --lvlmd: #FCD34D; --lvlmd-soft: #3A2D12;
  --lvlbmt: #C4B5FD; --lvlbmt-soft: #2E2350;
  --lvlscmc: #FDA4AF; --lvlscmc-soft: #3B1620;
  --lvlhmmt: #BEF264; --lvlhmmt-soft: #26330F;
  --lvlaime: #6EE7B7; --lvlaime-soft: #11372B;
  --lvlcmm: #FDBA74; --lvlcmm-soft: #3A2010;
  --lvlpumac: #67E8F9; --lvlpumac-soft: #0E2F36;
  --lvlfma: #A5B4FC; --lvlfma-soft: #23214A;
  --lvlusapho: #F0ABFC; --lvlusapho-soft: #3A1640;
  --lvlpbowl: #7DD3FC; --lvlpbowl-soft: #0C2D44;
  --lvlusaaao: #C4B5FD; --lvlusaaao-soft: #2A1F4A;
}
.lvl10 { --lvl: var(--lvl10); --lvl-soft: var(--lvl10-soft); }
.lvl12 { --lvl: var(--lvl12); --lvl-soft: var(--lvl12-soft); }
.lvlmd { --lvl: var(--lvlmd); --lvl-soft: var(--lvlmd-soft); }
.lvlbmt { --lvl: var(--lvlbmt); --lvl-soft: var(--lvlbmt-soft); }
.lvlscmc { --lvl: var(--lvlscmc); --lvl-soft: var(--lvlscmc-soft); }
.lvlhmmt { --lvl: var(--lvlhmmt); --lvl-soft: var(--lvlhmmt-soft); }
.lvlaime { --lvl: var(--lvlaime); --lvl-soft: var(--lvlaime-soft); }
.lvlcmm { --lvl: var(--lvlcmm); --lvl-soft: var(--lvlcmm-soft); }
.lvlpumac { --lvl: var(--lvlpumac); --lvl-soft: var(--lvlpumac-soft); }
.lvlfma { --lvl: var(--lvlfma); --lvl-soft: var(--lvlfma-soft); }
.lvlusapho { --lvl: var(--lvlusapho); --lvl-soft: var(--lvlusapho-soft); }
.lvlpbowl { --lvl: var(--lvlpbowl); --lvl-soft: var(--lvlpbowl-soft); }
.lvlusaaao { --lvl: var(--lvlusaaao); --lvl-soft: var(--lvlusaaao-soft); }

/* The contest switch is a selection control: amber marks the chosen one. */
.level-switch {
  display: flex; gap: var(--space-1); padding: var(--space-1);
  background: var(--color-surface-subtle);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-input);
}
.level-switch button {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid transparent; border-radius: var(--radius-button);
  background: none; color: var(--color-text-secondary);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap;
}
.level-switch button:hover { color: var(--color-text); background: var(--color-surface); }
.level-switch button.active {
  background: var(--color-accent); color: var(--color-on-accent);
  border-color: var(--color-border-control);
}

.level-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-subtle);
  border-inline-start: 4px solid var(--lvl);
  border-radius: var(--radius-card);
  background: var(--lvl-soft); color: var(--color-text);
  font-size: var(--font-size-sm);
}
.level-banner strong { color: var(--lvl); font-size: var(--font-size-md); }
.level-banner .btn { margin-left: auto; }

.series-tag {
  display: inline-block; margin-right: var(--space-2); padding: 0.125rem var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--lvl-soft); color: var(--lvl);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em; vertical-align: 0.15em;
}
.exam-level {
  display: inline-block; margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--lvl-soft); color: var(--lvl);
  border: var(--border-width) solid var(--lvl);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------------------ page */
main {
  max-width: 56rem;                       /* one comfortable reading column */
  margin: 0 auto;
  padding: var(--space-8) var(--layout-gutter) var(--space-24);
}
.lede { color: var(--color-text-secondary); max-width: var(--layout-readable-max); margin: var(--space-1) 0 var(--space-6); }
.note { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.err { color: var(--color-error); font-weight: var(--font-weight-semibold); }
.card {
  min-width: 0;
  margin-bottom: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
@media (max-width: 767px) { .card { padding: var(--space-4); } }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }

/* --------------------------------------------------------------- buttons */
/* Primary: amber with a navy label in both themes. Secondary (.ghost):
   surface with a control border. Destructive: error text, visible border. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: var(--control-min-size); min-height: var(--control-min-size); max-width: 100%;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-button);
  background: var(--color-accent); color: var(--color-on-accent);
  font-size: var(--font-size-md); font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body); text-align: center; text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.btn:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn:active:not(:disabled) { background: var(--color-accent-pressed); }
.btn.ghost { background: var(--color-surface); color: var(--color-text); }
.btn.ghost:hover:not(:disabled), .btn.ghost:active:not(:disabled) { background: var(--color-surface-subtle); }
.btn.ghost.danger { color: var(--color-error); border-color: var(--color-error); }
.btn.ghost.danger:hover:not(:disabled) { background: var(--fail-bg); }
.btn.danger-solid { background: var(--color-error); color: var(--color-surface); border-color: var(--color-error); }
.btn.danger-solid:hover:not(:disabled) { filter: brightness(0.94); }
/* Disabled stays readable: no faded amber, a muted fill and label instead. */
.btn:disabled {
  background: var(--color-surface-subtle); color: var(--color-text-secondary);
  border-color: var(--color-border-subtle); cursor: not-allowed;
}
/* Compact secondary actions inside rows and verdicts. */
.btn.sm {
  min-height: 2.25rem; padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

/* ------------------------------------------------------- forms and inputs */
.auth-card { max-width: 28rem; margin: var(--space-10) auto; }
.auth-shared { margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
#authForm { display: flex; flex-direction: column; gap: var(--space-4); }
#authForm label, .gen-grid label {
  display: grid; gap: var(--space-2);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text);
}
#authForm input, .gen-grid select, .gen-grid input, .fr-input, #adminJson,
.dare-dialog input, .dare-dialog select, .dare-dialog textarea, .account-form input[type="email"], .account-form input[type="password"], .account-form input[type="text"] {
  display: block; width: 100%; min-width: 0;
  min-height: var(--control-min-size);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-input);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--font-size-md); font-weight: var(--font-weight-regular);
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
#authForm input::placeholder, .fr-input::placeholder, .dare-dialog input::placeholder { color: var(--color-text-secondary); opacity: 1; }
/* Password box with a show/hide eye button inside its right edge. */
.pw-field { position: relative; display: block; }
#authForm .pw-field input { padding-right: calc(var(--control-min-size) + var(--space-1)); }
.pw-toggle {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: var(--control-min-size);
  display: grid; place-items: center;
  border: 0; border-radius: 0 var(--radius-input) var(--radius-input) 0;
  background: none; color: var(--color-text-secondary);
}
.pw-toggle:hover { color: var(--color-text); }
.pw-toggle svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor;
                 stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw-toggle .eye-shut, .pw-toggle[aria-pressed="true"] .eye-open { display: none; }
.pw-toggle[aria-pressed="true"] .eye-shut { display: block; }
#adminJson {
  min-height: 8rem; margin-top: var(--space-2); resize: vertical;
  font: var(--font-size-xs)/1.5 var(--font-family-mono);
}

/* Sign-in / create-account switch. */
.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-5); padding: var(--space-1);
        background: var(--color-surface-subtle); border-radius: var(--radius-input); }
.tabs button {
  flex: 1; min-height: 2.5rem;
  border: var(--border-width) solid transparent; border-radius: var(--radius-button);
  background: none; color: var(--color-text-secondary); font-weight: var(--font-weight-semibold);
}
.tabs button.active { background: var(--color-surface); color: var(--color-text);
                      border-color: var(--color-border-control); }

/* ---------------------------------------------------------- test library */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.filters button {
  min-height: 2.5rem; padding: var(--space-1) var(--space-4);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
}
.filters button:hover { background: var(--color-surface-subtle); }
.filters button.active {
  background: var(--color-accent); color: var(--color-on-accent);
  font-weight: var(--font-weight-semibold);
}
.filters button.active::before { content: "✓ "; }

.test-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
/* The actions drop below the title when there are many of them (admins). */
.test-card .meta { flex: 1 1 18rem; min-width: min(100%, 18rem); }
.test-card h3 { margin: 0 0 var(--space-1); }
.test-card .sub { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.best { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* In progress / taken: an edge stripe plus a text tag, never color alone. */
.test-card.in-progress { border-inline-start: 4px solid var(--color-link); }
.test-card.taken { border-inline-start: 4px solid var(--color-border-control); }
.test-card.taken.passed { border-inline-start-color: var(--pass); }
.test-card.taken.not-passed { border-inline-start-color: var(--fail); }
.done-tag {
  display: inline-block; margin-right: var(--space-2); padding: 0.0625rem var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03em; text-transform: uppercase;
}
.test-card.in-progress .done-tag { background: var(--lvl12-soft); color: var(--color-link); }
.test-card.passed .done-tag { background: var(--pass-bg); color: var(--pass); }
.test-card.not-passed .done-tag { background: var(--fail-bg); color: var(--fail); }
#saveState { margin-top: var(--space-1); min-height: 1.5em; }

.pill {
  display: inline-block; margin-left: var(--space-2); padding: 0.0625rem var(--space-2);
  border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-pill);
  background: var(--color-surface-subtle); color: var(--color-text-secondary);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  vertical-align: 0.15em;
}
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* -------------------------------------------------------- generate panel */
.gen-grid {
  display: grid; gap: var(--space-4); margin-bottom: var(--space-1);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
#genUnavailable { color: var(--color-error); font-weight: var(--font-weight-semibold); }
details.card > summary {
  cursor: pointer; font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg);
  min-height: var(--control-min-size); display: flex; align-items: center; gap: var(--space-2);
}
details.card > summary::marker { color: var(--color-text-secondary); }

.check {
  margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4);
  border-inline-start: var(--focus-width) solid currentColor;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
}
.check b { display: block; margin-bottom: var(--space-1); }
.check ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.check li { margin-bottom: var(--space-1); }
.check.ok { background: var(--pass-bg); color: var(--pass); }
.check.bad { background: var(--fail-bg); color: var(--fail); }
.check.warn { background: var(--warn-bg); color: var(--warn); }

.draft-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}
.draft-row:last-child { border-bottom: 0; }
.draft-q { padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--color-border-subtle); }
.draft-q:last-child { border-bottom: 0; }
.draft-q.is-error { border-inline-start: 3px solid var(--fail); padding-inline-start: var(--space-3); }
.draft-q.is-warn { border-inline-start: 3px solid var(--warn); padding-inline-start: var(--space-3); }
.draft-q-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.draft-q-head .qnum { margin-bottom: 0; }
.title-edit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.draft-flags { margin: var(--space-2) 0; padding-left: var(--space-5); font-size: var(--font-size-sm); }
.draft-flags li.error { color: var(--fail); }
.draft-flags li.warning { color: var(--warn); }
.replace-status:empty { display: none; }
.replace-status { margin: var(--space-2) 0; }
.draft-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.draft-choice {
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-button);
  font-size: var(--font-size-sm);
}
.draft-choice.is-answer { border-color: var(--pass); background: var(--pass-bg); color: var(--pass); font-weight: var(--font-weight-semibold); }
.draft-choice.is-answer::after { content: " ✓"; }
.draft-choice.is-picked { border-color: var(--fail); background: var(--fail-bg); color: var(--fail); }
.draft-choice.is-picked::after { content: " ✗"; }

/* ------------------------------------------------------------------ exam */
.question { margin-bottom: var(--space-4); }
.qnum .qlabel { text-transform: none; }
.qnum {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text);
}
.qtopic { color: var(--color-text-secondary); font-weight: var(--font-weight-regular); text-transform: none; letter-spacing: 0; }
.statement { overflow-x: auto; font-size: var(--font-size-md); line-height: var(--line-height-comfortable); }

/* Diagrams are black line art on a transparent background: a white plate
   keeps them legible in dark mode. */
.figure {
  display: block; max-width: 100%; height: auto;
  margin: var(--space-4) auto;
  padding: var(--space-3);
  background: #FFFFFF;
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-button);
}

.choices { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
/* A choice that is itself a graph or picture (some F=ma questions). */
.figure.choice-figure { display: inline-block; vertical-align: middle; margin: var(--space-1) 0; padding: var(--space-2); }
.choices.letters { flex-direction: row; flex-wrap: wrap; }
.choices label {
  display: flex; align-items: baseline; gap: var(--space-3);
  min-height: var(--control-min-size);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.choices.letters label { min-width: 4rem; justify-content: center; font-weight: var(--font-weight-semibold); }
.choices label:hover { background: var(--color-surface-subtle); border-color: var(--color-border-control); }
/* The chosen answer: amber edge and fill tint, plus the checked radio dot. */
.choices label:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  box-shadow: inset 3px 0 0 var(--color-accent);
}
.choices input[type="radio"] { accent-color: var(--brand-navy); width: 1.1rem; height: 1.1rem; flex: none; align-self: center; }
[data-theme="dark"] .choices input[type="radio"] { accent-color: var(--color-accent); }

.clear-answer {
  margin-top: var(--space-3); min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-button);
  background: var(--color-surface); color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.clear-answer:hover { background: var(--color-surface-subtle); color: var(--color-text); }

.question.correct { border-inline-start: 4px solid var(--pass); }
.question.wrong { border-inline-start: 4px solid var(--fail); }
.question.blankq { border-inline-start: 4px solid var(--color-border-control); }
.verdict { margin-top: var(--space-3); font-weight: var(--font-weight-semibold); }
.question.correct .verdict { color: var(--pass); }
.question.wrong .verdict { color: var(--fail); }
.question.blankq .verdict { color: var(--color-text-secondary); }
/* A USAPhO part after the first keeps its problem's setup folded above it. */
.prob-setup { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-card); }
.prob-setup summary { cursor: pointer; font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary); }
.prob-setup[open] summary { margin-bottom: var(--space-2); }
/* USAPhO parts wait for the student's own mark: neutral until marked right. */
.question.unmarked { border-inline-start: 4px solid var(--color-border-control); }
.question.unmarked .verdict { color: var(--color-text); }
.verdict .btn { margin-left: var(--space-2); vertical-align: middle; }
.solution {
  margin-top: var(--space-3); padding: var(--space-4);
  border-radius: var(--radius-input);
  background: var(--color-surface-subtle);
  border: var(--border-width) solid var(--color-border-subtle);
  font-size: var(--font-size-md); line-height: var(--line-height-comfortable);
  overflow-wrap: anywhere;
}
.solution b {
  display: block; margin-bottom: var(--space-1);
  color: var(--color-text-secondary); font-size: var(--font-size-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.solnote {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border-subtle);
  color: var(--color-text-secondary); font-size: var(--font-size-sm);
}
.solnote-label { font-weight: var(--font-weight-semibold); color: var(--color-text); }

#resultBanner { text-align: center; border-width: 2px; }
#resultBanner.pass { background: var(--pass-bg); border-color: var(--pass); color: var(--pass); }
#resultBanner.fail { background: var(--fail-bg); border-color: var(--fail); color: var(--fail); }
#resultBanner.selfcheck { border-color: var(--color-border-control); }
#resultBanner .big { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
#resultBanner .detail { margin-top: var(--space-1); color: var(--color-text); font-size: var(--font-size-sm); }

/* Admin trial of a draft: each answer is checked as it is chosen. */
.trial-banner { border-inline-start: 4px solid var(--color-accent); }
.trial-choices { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.trial-choice {
  display: block; width: 100%; min-height: var(--control-min-size);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-button);
  background: var(--color-surface); color: inherit; text-align: left;
}
.trial-choice:hover:not(:disabled) { background: var(--color-surface-subtle); }
.trial-choice:disabled { cursor: default; }
.trial-choice.is-answer { border-color: var(--pass); background: var(--pass-bg); color: var(--pass); font-weight: var(--font-weight-semibold); }
.trial-choice.is-answer::after { content: " ✓"; }
.trial-choice.is-picked { border-color: var(--fail); background: var(--fail-bg); color: var(--fail); }
.trial-choice.is-picked::after { content: " ✗"; }

/* Free-response answers (CSULB Math Day). */
.choices.fr { display: block; }
.fr-input { max-width: 20rem; }
.fr-input.fr-work { max-width: 40rem; width: 100%; resize: vertical; font: inherit; }
.fr-hint { margin-top: var(--space-2); font-size: var(--font-size-sm); }
.fr-mine { font-family: var(--font-family-mono); font-weight: var(--font-weight-semibold); }
#examQuestions.only-missed .question.correct { display: none; }

/* -------------------------------------------------------------- progress */
.bar-row {
  display: grid; grid-template-columns: 11rem 1fr 3.5rem; align-items: center;
  gap: var(--space-3); margin-bottom: var(--space-2); font-size: var(--font-size-sm);
}
.bar-track {
  height: 0.75rem; overflow: hidden; border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  border: var(--border-width) solid var(--color-border-subtle);
}
.bar-fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-link); }
.bar-fill.weak { background: var(--fail); }
.bar-fill.strong { background: var(--pass); }
.pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.guidance { margin: 0; padding-left: var(--space-5); }
.guidance li { margin-bottom: var(--space-2); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
th {
  padding: var(--space-2) var(--space-3); text-align: left; white-space: nowrap;
  border-bottom: var(--border-width) solid var(--color-border-control);
  color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em; text-transform: uppercase;
}
td { padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border-subtle); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.tag {
  display: inline-block; padding: 0.0625rem var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
}
.tag.pass { background: var(--pass-bg); color: var(--pass); }
.tag.fail { background: var(--fail-bg); color: var(--fail); }
.medal { font-weight: var(--font-weight-bold); color: var(--color-warning); }
.who { display: flex; align-items: center; gap: var(--space-2); }
.who .note { display: block; font-size: var(--font-size-xs); }
.who .avatar {
  width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-surface-subtle); color: var(--color-text);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
}

/* ---------------------------------------------------------------- narrow */
@media (max-width: 767px) {
  .bar-row { grid-template-columns: 7rem 1fr 3rem; }
  .topbar { gap: var(--space-2) var(--space-3); }
  /* One row of destinations that scrolls sideways if it must, rather than
     stacking into several header rows. */
  nav { order: 10; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  /* Six contests do not fit across a phone; wrap them so every one stays in
     view instead of pushing the page sideways. */
  .level-switch { flex-wrap: wrap; max-width: 100%; }
}

/* ---------------------------------------------------------------- tables */
/* Admin tables use the full content width rather than the reading column. */
main:has(#view-admin:not([hidden])) { max-width: var(--layout-content-max); }
main:has(#view-whiteboard:not([hidden])) { max-width: 90rem; }   /* a big board needs room */
table.compact th, table.compact td { padding: var(--space-2); vertical-align: middle; }
table.compact th:first-child, table.compact td:first-child { padding-left: 0; }
table.compact th:last-child, table.compact td:last-child { padding-right: 0; }
table.compact .num { text-align: right; }
table.compact .nowrap { white-space: nowrap; }
table.compact tbody tr:hover { background: var(--color-surface-subtle); }
/* Admin: section tabs (Accounts, Subject settings, Analytics) underlined like
   the main nav; subject tabs below them; headline numbers as tiles. */
.admin-tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin-bottom: var(--space-5); border-bottom: var(--border-width) solid var(--color-border-subtle);
}
.admin-tabs button {
  border: 0; background: none; cursor: pointer;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-button) var(--radius-button) 0 0;
  color: var(--color-text-secondary); font: inherit; font-weight: var(--font-weight-semibold);
}
.admin-tabs button:hover { background: var(--color-surface-subtle); color: var(--color-text); }
.admin-tabs button.active { color: var(--color-text); box-shadow: inset 0 -3px 0 var(--color-accent); }
.stat-tiles {
  display: grid; gap: var(--space-4); margin-bottom: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.stat-tile {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5);
  border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-card);
  background: var(--color-surface); box-shadow: var(--shadow-card);
}
.stat-value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; line-height: 1.1; }
.stat-label { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
/* Admin: the subject tabs pick whose scores show; a student's detail heading. */
.subject-tabs button { padding-inline: var(--space-4); font-weight: var(--font-weight-semibold); }
.student-head { margin-top: var(--space-6); }
.students-table .who { gap: var(--space-3); }
.students-table .who > span:last-child { line-height: 1.3; }
.students-table .who .pill { margin-left: var(--space-1); }
.students-table .more { color: var(--color-text-secondary); text-decoration: underline dotted; cursor: help; white-space: nowrap; }
.students-table td.actions { white-space: nowrap; text-align: right; width: 1%; }
.students-table td.actions .btn.sm { min-height: 2.25rem; }

/* Row "⋯" menu (native <details>, so it works by keyboard). */
.row-menu { display: inline-block; position: relative; margin-left: var(--space-1); vertical-align: middle; }
.row-menu > summary { list-style: none; min-width: 2.25rem; padding-inline: var(--space-2); font-size: var(--font-size-lg); line-height: 1; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu[open] > summary { background: var(--color-surface-subtle); }
.row-menu .menu {
  position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 30;
  display: grid; min-width: 11rem; padding: var(--space-1);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-popover);
}
.row-menu .menu button {
  min-height: 2.5rem; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-button);
  background: none; color: var(--color-text); text-align: left; font-size: var(--font-size-sm);
}
.row-menu .menu button:hover:not(:disabled) { background: var(--color-surface-subtle); }
.row-menu .menu button.danger { color: var(--color-error); }
.row-menu .menu button:disabled { color: var(--color-text-secondary); cursor: not-allowed; }
/* The table scroll wrapper would clip the open menu. */
.card:has(.students-table) .table-wrap { overflow: visible; }
/* On narrow screens the table scrolls sideways inside its card; one line per
   row keeps it even. The extra bottom room lets an open menu show. */
@media (max-width: 899px) {
  .card:has(.students-table) .table-wrap { overflow-x: auto; padding-bottom: 9rem; margin-bottom: -9rem; }
  .students-table td { white-space: nowrap; }
}

/* Test usage: students who have taken it, and who has it open now. */
.usage { margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.usage:empty { display: none; }
.usage .takers { font-weight: var(--font-weight-semibold); color: var(--color-text); }
/* The star twinkles slowly in brand amber; the number beside it carries the
   meaning. Off for anyone who asks the system for reduced motion. */
.usage .star {
  display: inline-block; color: var(--color-accent); font-size: 1.1em;
  animation: twinkle 1.6s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.85); } }
@media (prefers-reduced-motion: reduce) { .usage .star { animation: none; } }
.usage .live { color: var(--color-success); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.live-dot {
  display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: var(--space-1);
  border-radius: 50%; background: currentColor; vertical-align: 0.1em;
}

/* Beach icon in "Math Day at [beach]": palm, sun and a wave, drawn inline so
   it follows the text size and the theme. */
:root { --beach-sun: #F5A623; --beach-trunk: #8A5A2B; --beach-palm: #0F766E; --beach-wave: #2458A6; }
[data-theme="dark"] { --beach-trunk: #C8935A; --beach-palm: #5EEAD4; --beach-wave: #A9C7FF; }
.beach-icon { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.3em; margin-left: 0.1em; flex: none; }
.beach-icon .b-sun { fill: var(--beach-sun); }
.beach-icon .b-trunk { stroke: var(--beach-trunk); }
.beach-icon .b-palm { stroke: var(--beach-palm); }
.beach-icon .b-wave { stroke: var(--beach-wave); }
/* On the amber "selected" fill the sun would vanish: give it a navy edge. */
.level-switch button.active .b-sun { stroke: var(--brand-navy); stroke-width: 1.2; }

/* Copyright notice for past papers: on the list, and a line under each test. */
.copyright-note {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-subtle);
  border-inline-start: 3px solid var(--color-border-control);
  border-radius: var(--radius-input);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body);
}
.copyright-note strong { color: var(--color-text); }
.copyright-line {
  margin: var(--space-6) auto 0; max-width: var(--layout-readable-max);
  text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-xs);
}

/* -------------------------------------------------------- study together */
/* A study room needs the width for problem + chat side by side. */
main:has(#view-room:not([hidden])) { max-width: var(--layout-content-max); }
.room-title { color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
.usage .studying { color: var(--color-link); }
.banner-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.banner-actions:empty { display: none; }

/* People: initials on a color of their own (white text, 4.5:1 or better on
   each color), the same for a student everywhere in a session. */
.pc0 { --pc: #2458A6; } .pc1 { --pc: #0F766E; } .pc2 { --pc: #B42318; } .pc3 { --pc: #6D28D9; }
.pc4 { --pc: #9A3412; } .pc5 { --pc: #BE185D; } .pc6 { --pc: #15803D; } .pc7 { --pc: #475569; }
.badge, .msg .avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--pc, var(--color-surface-subtle)); color: #FFFFFF;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.02em;
}
button.badge { border: 2px solid var(--color-surface); padding: 0; }
button.badge:hover { filter: brightness(1.1); }
/* You: a ring in the brand amber. */
.badge.me { box-shadow: 0 0 0 2px var(--color-accent); }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }

/* Problem and whiteboard on the left; the chat stays in view on the right. */
.room-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-4); align-items: start; }
.room-main { min-width: 0; }
.room-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.room-pick {
  flex: 1 1 6rem; max-width: 14rem; min-width: 0; min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-button);
  background: var(--color-surface); color: var(--color-text); font-size: var(--font-size-sm);
}
.room-problem .row { margin-top: var(--space-3); }
.room-solution { margin-top: var(--space-4); }
.room-solution summary {
  cursor: pointer; min-height: var(--control-min-size); display: flex; align-items: center;
  color: var(--color-link); font-weight: var(--font-weight-semibold);
}

.board-card { padding: var(--space-4); }
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.board-head h3 { margin-bottom: var(--space-2); }
.board-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.tool {
  display: inline-grid; place-items: center;
  min-width: 2.5rem; min-height: 2.5rem; padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-button);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
}
.tool:hover:not(:disabled) { background: var(--color-surface-subtle); }
.tool[aria-pressed="true"] {
  border-color: var(--color-accent); background: var(--color-surface-subtle);
  box-shadow: inset 0 0 0 2px var(--color-accent); font-weight: var(--font-weight-semibold);
}
.tool { white-space: nowrap; }
.tool:has(.state) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.tool .state {
  padding: 0 var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-surface-subtle); color: var(--color-text-secondary);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tool[aria-pressed="true"] .state { background: var(--color-accent); color: var(--color-on-accent); }
.tool.danger { color: var(--color-error); border-color: var(--color-error); }
.tool:disabled { color: var(--color-text-secondary); border-color: var(--color-border-subtle); cursor: not-allowed; }
.tool-sep { width: var(--border-width); align-self: stretch; background: var(--color-border-subtle); }
.tool .swatch { width: 1.1rem; height: 1.1rem; border-radius: 50%; }
.tool .dot { width: var(--d); height: var(--d); border-radius: 50%; background: var(--color-text); }
/* Each person's pen: their color, lightened on the dark board so it stays readable. */
:root {
  --pen-pc0: #2458A6; --pen-pc1: #0F766E; --pen-pc2: #B42318; --pen-pc3: #6D28D9;
  --pen-pc4: #9A3412; --pen-pc5: #BE185D; --pen-pc6: #15803D; --pen-pc7: #475569;
}
[data-theme="dark"] {
  --pen-pc0: #8DB4F0; --pen-pc1: #5EEAD4; --pen-pc2: #F4A29B; --pen-pc3: #C4B5FD;
  --pen-pc4: #FDBA74; --pen-pc5: #F9A8D4; --pen-pc6: #86EFAC; --pen-pc7: #CBD5E1;
}
.my-color {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2.5rem; padding: 0 var(--space-3) 0 var(--space-2);
  border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-pill);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
}
.my-color .swatch { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--pc); }
.board-wrap {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-input);
  background: var(--color-surface);
}
/* Drawing must not scroll the page on a touch screen. */
#roomBoard, #wbBoard { display: block; width: 100%; aspect-ratio: 16 / 10; touch-action: none; cursor: crosshair; }
.board-wrap.erasing #roomBoard, .board-wrap.erasing #wbBoard { cursor: cell; }
/* The whiteboard's graph sits behind the drawing layer, which is transparent. */
#wbWrap { position: relative; touch-action: none; }
#wbWrap.has-graph #wbBoard { pointer-events: none; }          /* the graph below reads the mouse for its values */
#wbWrap.has-graph:not(.moving) .wb-graph, #wbWrap.has-graph:not(.moving) .wb-graph * { cursor: crosshair !important; }
.wb-graph { position: absolute; inset: 0; z-index: 0; }
#wbBoard { position: relative; z-index: 1; }
#wbWrap.moving #wbBoard { pointer-events: none; }
#wbWrap.moving .wb-graph { cursor: grab; }
.wb-graphbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
}
.wb-graphbar .note { margin: 0; }
.wb-seg { display: inline-flex; gap: var(--space-1); }
.tool.shape { padding: 0 var(--space-2); display: inline-flex; align-items: center; justify-content: center; }
.tool.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.tool.primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.board-wrap.readonly #roomBoard { cursor: default; touch-action: auto; }
.graph-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
}
.graph-form[hidden] { display: none; }
.graph-form input[type="text"] { flex: 1 1 12rem; min-width: 0; }
.graph-keys { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.graph-keys .key {
  min-width: 2.25rem; min-height: 2.25rem; padding: 0 var(--space-2); cursor: pointer;
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-input);
  background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--font-size-sm);
}
.graph-keys .key:hover:not(:disabled) { background: var(--color-surface-subtle); }
.graph-keys .key:disabled { color: var(--color-text-secondary); cursor: not-allowed; }
.graph-hint { flex: 1 1 100%; margin: 0 !important; }
.graph-reach { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); }
.graph-reach input { width: 4.5rem; }
.graph-panel {
  margin-top: var(--space-3); border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-input); background: var(--color-surface); padding: var(--space-2);
}
.graph-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.graph-head .note { margin: 0; }
.graph-plot { width: 100%; min-height: 380px; }
.board-card .note { margin: var(--space-2) 0 0; }
.board-card .note.err, .composer-hint.err { color: var(--color-error); font-weight: var(--font-weight-semibold); }

/* Session bar: who started it, the host's End session, and the way out. */
.session-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm);
}
.session-bar strong { color: var(--color-text); }
.room-lede { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); }
.ended-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--warn-bg); border-inline-start: 4px solid var(--warn);
}
.ended-banner p { margin: var(--space-1) 0 0; }
.ended-banner .row { margin-top: 0; }

/* "This study session has ended": a modal whose only button leads back to the tests. */
.end-dialog, .study-dialog {
  width: min(28rem, calc(100vw - 2 * var(--layout-gutter)));
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-card);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-popover);
}
.end-dialog::backdrop, .study-dialog::backdrop { background: rgb(16 27 43 / 0.55); }
.end-dialog h2, .study-dialog h2 { margin-bottom: var(--space-2); }
.end-dialog p, .study-dialog p { margin: 0 0 var(--space-2); }
.end-dialog .row, .study-dialog .row { justify-content: flex-end; margin-top: var(--space-4); }

/* Pick your color: eight swatches; taken ones show who has them. */
.color-grid { display: grid; grid-template-columns: repeat(4, 3rem); gap: var(--space-3); margin-top: var(--space-4); }
.color-swatch {
  width: 3rem; height: 3rem; border-radius: 50%; padding: 0;
  border: 3px solid var(--color-surface); background: var(--pc);
  box-shadow: 0 0 0 1px var(--color-border-subtle);
  color: #FFFFFF; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
}
.color-swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--color-accent); }
.color-swatch[aria-checked="true"]::after { content: "✓"; font-size: var(--font-size-lg); }
.color-swatch:disabled { opacity: 0.45; cursor: not-allowed; }

/* "Alex wants to join": at the top of the chat, for anyone in the session to answer. */
.join-requests:empty { display: none; }
.join-requests { border-bottom: var(--border-width) solid var(--color-border-subtle); background: var(--warn-bg); }
.join-req {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.join-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.join-req + .join-req { border-top: var(--border-width) solid var(--color-border-subtle); }
.join-who { flex: 1; min-width: 8rem; font-size: var(--font-size-sm); }

/* Study together on a test card: Live while a session has room, Full when none does. */
.study-btn { gap: var(--space-2); }
.study-tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.0625rem var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap;
}
.study-tag.live { background: var(--pass-bg); color: var(--pass); }
.study-tag.full { background: var(--color-surface-subtle); color: var(--color-text-secondary);
                  border: var(--border-width) solid var(--color-border-subtle); }
.study-tag .live-dot { margin-right: 0; }

/* Lobby: start fresh, or pick up an earlier discussion. */
.lobby-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.lobby-start h3 { margin-bottom: var(--space-1); }
.lobby-start p { margin: 0; max-width: 34rem; }
.lobby-h { margin-top: var(--space-6); }
.lobby-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); }
.lobby-last {
  margin: var(--space-3) 0 var(--space-2); padding-left: var(--space-3);
  border-left: 3px solid var(--color-border-subtle); overflow-wrap: anywhere;
}
.lobby-item p.note { margin: var(--space-1) 0 0; }
.lobby-live { border-inline-start: 4px solid var(--color-success); }
.lobby-live .row { margin-top: var(--space-3); }

/* Admin settings: students per study session, the Problem of the Day AI. */
.settings-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.settings-row label { font-weight: var(--font-weight-medium); }
.settings-row input, .settings-row select {
  width: 5.5rem; min-height: 2.25rem; padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-input);
  background: var(--color-surface); color: var(--color-text); font: inherit;
}
.settings-row select { width: auto; }
.settings-row .note.err { color: var(--color-error); font-weight: var(--font-weight-semibold); }

/* Chat: a panel the height of the screen, with bubbles grouped by person. */
.room-chat {
  position: sticky; top: 5.5rem;
  display: flex; flex-direction: column;
  height: calc(100vh - 7rem); min-height: 26rem;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}
.chat-head h3 { margin: 0; font-size: var(--font-size-md); }
.chat-people { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }
.chat-people .badge { width: 1.85rem; height: 1.85rem; }
.chat-body { position: relative; flex: 1; min-height: 0; display: flex; }
.chat-log {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: var(--space-2) var(--space-3) var(--space-4);
}
.chat-day {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-1);
  color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
}
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: var(--border-width); background: var(--color-border-subtle); }
.msg-event {
  align-self: center; max-width: 90%; margin: var(--space-2) 0;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-surface-subtle); color: var(--color-text-secondary);
  font-size: var(--font-size-xs); text-align: center;
}
.msg { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); }
.msg.cont { margin-top: 0.1875rem; }
.msg.cont .avatar { visibility: hidden; height: 0; }
.msg-main { min-width: 0; max-width: 85%; display: flex; flex-direction: column; align-items: flex-start; }
.msg-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  margin: 0 var(--space-1) 0.1875rem; color: var(--color-text-secondary); font-size: var(--font-size-xs);
}
.msg.cont .msg-head { display: none; }
.bubble {
  max-width: 100%; overflow-x: auto; overflow-wrap: anywhere;
  padding: var(--space-2) var(--space-3);
  border-radius: 1.125rem 1.125rem 1.125rem 0.375rem;
  background: var(--color-surface-subtle); color: var(--color-text);
  line-height: var(--line-height-body);
}
.msg.cont .bubble { border-top-left-radius: 0.375rem; }
.msg.mine { flex-direction: row-reverse; }
.msg.mine .msg-main { align-items: flex-end; }
/* Your own bubbles: a warm amber tint, or in dark mode a calm blue (amber
   mixed into navy turns muddy). */
:root { --bubble-mine: color-mix(in srgb, var(--color-accent) 24%, var(--color-surface)); }
[data-theme="dark"] { --bubble-mine: #29466F; }
.msg.mine .bubble {
  background: var(--bubble-mine);
  border-radius: 1.125rem 1.125rem 0.375rem 1.125rem;
}
.msg.mine.cont .bubble { border-top-right-radius: 0.375rem; }
.msg.removed .bubble { background: none; border: var(--border-width) dashed var(--color-error); color: var(--color-text-secondary); }
.msg-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0.1875rem var(--space-1) 0; font-size: var(--font-size-xs); }
.msg-mod {
  padding: 0; border: 0; background: none; font: inherit; font-size: var(--font-size-xs);
  color: var(--color-error); text-decoration: underline; text-underline-offset: 0.18em;
}
.chat-empty {
  margin: auto; max-width: 17rem; padding: var(--space-6) 0;
  display: grid; gap: var(--space-1); text-align: center;
  color: var(--color-text-secondary); font-size: var(--font-size-sm);
}
.chat-empty strong { color: var(--color-text); font-size: var(--font-size-md); }
.new-msgs {
  position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-popover);
}
.chat-foot { padding: var(--space-3) var(--space-3) var(--space-2); border-top: var(--border-width) solid var(--color-border-subtle); }
/* The composer is one rounded field with the send button inside it. */
.composer {
  display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  border: var(--border-width) solid var(--color-border-control); border-radius: 1.5rem;
  background: var(--color-surface);
}
.composer:focus-within { border-color: var(--color-focus); box-shadow: 0 0 0 1px var(--color-focus); }
.composer textarea {
  flex: 1; min-width: 0; max-height: 10rem; resize: none;
  padding: 0.6rem 0; border: 0; outline: none; background: none;
  color: var(--color-text); font: inherit; line-height: 1.4;
}
.composer textarea::placeholder { color: var(--color-text-secondary); opacity: 1; }
.send-btn {
  flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent);
}
.send-btn:hover:not(:disabled) { background: var(--color-accent-hover); }
.send-btn:disabled { background: var(--color-surface-subtle); color: var(--color-text-secondary); cursor: not-allowed; }
.send-btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-preview { margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3);
                border: var(--border-width) dashed var(--color-border-subtle); border-radius: var(--radius-input);
                max-height: 8rem; overflow: auto; overflow-wrap: anywhere; line-height: 1.4; }
.chat-preview .note { display: block; margin: 0 0 var(--space-1); font-size: var(--font-size-xs); }
.composer-hint { margin: var(--space-2) var(--space-2) 0; color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.room-chat-table .chat-cell { min-width: 14rem; overflow-wrap: anywhere; }
.room-chat-table tr.is-removed td { color: var(--color-text-secondary); }

/* Narrower screens: one column, the chat under the whiteboard. */
@media (max-width: 1023px) {
  .room-grid { grid-template-columns: minmax(0, 1fr); }
  .room-chat { position: static; height: min(70vh, 36rem); }
}

/* ------------------------------------------------- hub: subject picker */
/* The hive.study home page, in the logo's language: amber honeycomb cells
   with navy line drawings, on a navy welcome band and warm-white cards. */
main:has(#view-subjects:not([hidden])) { max-width: var(--layout-content-max); }

.hub-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--space-6);
  margin-bottom: var(--space-8);
  padding: var(--space-10) var(--space-10);
  border-radius: var(--radius-card);
  background: var(--brand-navy); color: var(--brand-warm-white);
}
[data-theme="dark"] .hub-hero {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
}
.hub-hero-text { position: relative; z-index: 1; max-width: var(--layout-readable-max); }
.hub-hero h1 { color: inherit; margin-bottom: var(--space-3); }
.hub-hero p { margin: 0; color: #D4DCE7; font-size: var(--font-size-lg); line-height: var(--line-height-comfortable); }
.hub-hero .hub-eyebrow {
  margin-bottom: var(--space-2);
  color: var(--brand-amber); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hub-comb { flex: none; width: 15rem; height: auto; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-2)) calc(-1 * var(--space-6)) auto; }
.hub-comb .cell-fill { fill: var(--brand-amber); }
.hub-comb .cell-line { fill: none; stroke: var(--brand-amber); stroke-width: 3; opacity: 0.45; }
@media (max-width: 767px) {
  .hub-hero { padding: var(--space-6); }
  .hub-hero p { font-size: var(--font-size-md); }
  /* On a phone the comb sits behind the text as a quiet corner motif. */
  .hub-comb { position: absolute; right: -2.5rem; top: -1.5rem; width: 9rem; margin: 0; opacity: 0.35; }
}

.subject-grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  align-items: stretch;
}
.subject-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--motion-duration-standard) var(--motion-easing-standard),
              border-color var(--motion-duration-standard) var(--motion-easing-standard);
}
.subject-card:hover { box-shadow: var(--shadow-popover); border-color: var(--color-border-control); }
.subject-main { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); }
@media (max-width: 767px) { .subject-main { padding: var(--space-5); } }

.subject-head { display: flex; align-items: center; gap: var(--space-4); }
.subject-hex { width: 4.75rem; height: 4.75rem; flex: none; }
.subject-hex .hex-cell, .step-hex .hex-cell { fill: var(--brand-amber); }
.subject-hex .icon-fill { fill: var(--brand-navy); }
.subject-hex .icon-line { fill: none; stroke: var(--brand-navy); stroke-width: 4.2; }
.subject-head h2 { margin: 0; font-size: var(--font-size-2xl); letter-spacing: -0.02em; }
.subject-title {
  margin: 0 0 var(--space-1);
  color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.subject-blurb { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-lg); line-height: var(--line-height-comfortable); }

/* "614 tests · 8 contests", separated by small amber cells. */
.subject-facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none;
  font-weight: var(--font-weight-semibold); }
.subject-facts li { display: inline-flex; align-items: center; gap: var(--space-2); }
.subject-facts li::before {
  content: ""; width: 0.6rem; height: 0.68rem; background: var(--brand-amber);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.series-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.series-chips .hive-badge { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text); }

.subject-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); }
.subject-open { text-decoration: none; gap: var(--space-2); padding-inline: var(--space-5); }
.subject-open span { transition: transform var(--motion-duration-standard) var(--motion-easing-standard); }
.subject-open:hover span { transform: translateX(3px); }
.subject-cta .activity { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* How it works: one guide for every subject, steps on numbered honeycomb cells. */
.hub-guide {
  margin-top: var(--space-8);
  padding: var(--space-8);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
}
@media (max-width: 767px) { .hub-guide { margin-top: var(--space-6); padding: var(--space-5); } }
.hub-guide h2 { margin: 0 0 var(--space-6); font-size: var(--font-size-xl); letter-spacing: -0.01em; }
.guide-cols {
  display: grid; gap: var(--space-6) var(--space-10);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.guide-col h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary);
}
.guide-steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.guide-steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.step-hex { width: 2.25rem; height: 2.25rem; flex: none; margin-top: -0.1rem; }
.step-hex .step-num {
  fill: var(--brand-navy); font: var(--font-weight-bold) 44px var(--font-family-sans);
  text-anchor: middle; dominant-baseline: central;
}
.guide-steps li strong { display: block; margin-bottom: 2px; }
.guide-steps li span { display: block; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); }

/* ===================================================== problem of the day */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* The tab wears the hive amber all the time, so it stands out in the menu;
   the current page adds the usual underline, in navy to show on amber. */
nav button.nav-potd { background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--font-weight-semibold); }
nav button.nav-potd:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
nav button.nav-potd.active { background: var(--color-accent-pressed); color: var(--color-on-accent);
                              box-shadow: inset 0 -3px 0 var(--brand-navy); }

main:has(#view-potd:not([hidden])) { max-width: var(--layout-content-max); }
.potd-layout { display: grid; grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 899px) { .potd-layout { grid-template-columns: minmax(0, 1fr); } }
.potd-cal { position: sticky; top: var(--space-4); padding: var(--space-4); }
@media (max-width: 899px) { .potd-cal { position: static; } }

/* --- the calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.cal-title { margin: 0; font-size: var(--font-size-lg); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
.cal-wd { text-align: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
          color: var(--color-text-secondary); padding-bottom: var(--space-1); }
.cal-cell {
  display: flex; flex-direction: column; gap: 0.2rem;
  min-height: 4rem; padding: 0.3rem 0.35rem;
  border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-input);
  background: var(--color-surface); color: var(--color-text); text-align: left; font: inherit;
}
.cal-cell.empty { border: 0; background: none; }
.cal-cell:not(:disabled):hover { background: var(--color-surface-subtle); }
.cal-cell:disabled { color: var(--color-text-secondary); opacity: 0.55; cursor: default; }
.cal-num { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1; }
/* Today is filled with the hive amber; the day being shown has a heavy outline. */
.cal-cell.today { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.cal-cell.today:not(:disabled):hover { background: var(--color-accent-hover); }
.cal-cell.selected { outline: 2px solid var(--color-text); outline-offset: 1px; }
/* The marks: problems posted, then students who tried, each an icon and a number. */
.cal-stats { display: grid; gap: 0.2rem; margin-top: auto; }
.cal-stat { display: inline-flex; align-items: center; gap: 0.25rem; line-height: 1;
            font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.cal-stat svg { flex: none; width: 0.85rem; height: 0.85rem; color: var(--color-text-secondary); }
.cal-stat:first-child svg { color: var(--color-accent); }
.cal-cell.today .cal-stat svg { color: currentColor; }
.cal-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0;
              color: var(--color-text-secondary); }
.cal-legend .cal-stat { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); gap: var(--space-1); }
.cal-legend .cal-stat svg { width: 1rem; height: 1rem; }
.cal-today-btn { margin-top: var(--space-3); }
@media (max-width: 899px) { .cal-cell { min-height: 3.6rem; } }

/* --- the day */
.potd-day-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.potd-day-head h2 { margin: 0; }
.potd-day-head .note { margin: var(--space-1) 0 0; }
.potd-day-head .pill { vertical-align: 0.3em; }
.potd-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; border: 0; }
.potd-when legend { float: left; margin-right: var(--space-2); padding: 0; font-weight: var(--font-weight-medium); }
.potd-when .check-row { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-regular); }
.potd-when .check-row input { width: 1.1rem; height: 1.1rem; margin: 0; }
.potd-when-at { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.potd-form .potd-when-at input {
  display: inline-block; width: auto;
  min-height: var(--control-min-size); padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-input);
  background: var(--color-surface); color: var(--color-text); font: inherit;
}
.potd-scheduled { margin-bottom: var(--space-5); }
.potd-scheduled h3 { margin: 0; }
.potd-scheduled > .note { margin: var(--space-1) 0 var(--space-3); }
.potd-sched-pill { font-weight: var(--font-weight-semibold); }
.potd-empty p { margin: 0; color: var(--color-text-secondary); }
.potd-form { display: flex; flex-direction: column; gap: var(--space-4); }
.potd-form h3 { margin: 0; }
.potd-form label, .potd-form .rich-field { display: grid; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.potd-form label .note, .potd-form .rich-field .note { font-weight: var(--font-weight-regular); }
.potd-form textarea, .potd-form input {
  display: block; width: 100%; min-width: 0; min-height: var(--control-min-size);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-input);
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-size: var(--font-size-md); resize: vertical;
}
/* A box of words and math (the problem, the solution): text with small
   math boxes inline, each showing its math as it's typed. */
.potd-rich {
  min-height: calc(var(--rows, 3) * 1.6em + 2 * var(--space-2)); padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-input);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
}
.potd-rich:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: 1px; }
.potd-rich.blank::before { content: attr(data-placeholder); color: var(--color-text-secondary); pointer-events: none; }
.potd-mf-inline {
  display: inline-block; vertical-align: middle; min-width: 1.5em; margin: 1px 0.15em; padding: 0 0.3em;
  border: var(--border-width) solid var(--color-border-subtle); border-radius: 0.3em;
  background: var(--color-surface-subtle); color: var(--color-text); font-size: 1.05em;
  --caret-color: var(--color-text);
  --selection-background-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  --selection-color: var(--color-text);
  --contains-highlight-background-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.potd-mf-inline:focus-within { border-color: var(--color-accent); outline: none; }
.potd-mf-inline::part(menu-toggle), .potd-mf-inline::part(virtual-keyboard-toggle) { display: none; }
.potd-mf-inline::part(content) { padding: 0; }
.potd-preview { padding: var(--space-3); border: var(--border-width) dashed var(--color-border-subtle); border-radius: var(--radius-input); }
.potd-preview > div { margin-top: var(--space-1); line-height: var(--line-height-body); }
.potd-preview-sol { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.potd-edit-note { margin: calc(-1 * var(--space-2)) 0 0; }
/* The box the math keys type into. */
.potd-form .typing > textarea, .potd-form .typing > input,
.potd-form .typing > math-field, .potd-form .typing > .potd-rich { border-color: var(--color-accent); }
.potd-form .row { margin-top: 0; }

/* A button that reads as a small text link: Remove, Use this answer, ... */
.potd-link {
  padding: 0; border: 0; background: none; font: inherit; font-size: var(--font-size-sm);
  color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer;
}
.potd-link:hover { text-decoration-thickness: 2px; }
.potd-link.danger { color: var(--color-error); }

/* --- asking an AI */
.potd-ai { display: grid; gap: var(--space-2); padding-top: var(--space-4);
           border-top: var(--border-width) solid var(--color-border-subtle); }
.potd-ai .note { margin: 0; }
.ai-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ai-label { margin-right: var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.ai-btn[aria-busy="true"] { cursor: progress; }
#potdRuns:not(:empty) { display: grid; gap: var(--space-2); margin-top: var(--space-1); }
.ai-run { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-border-control);
          border-radius: var(--radius-input); background: var(--color-surface-subtle); }
.ai-run.ok { border-left-color: var(--pass); }
.ai-run.bad { border-left-color: var(--fail); }
.ai-run.unsure { border-left-color: var(--color-warning); }
.ai-run.stale { opacity: 0.6; }
.ai-run-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-weight: var(--font-weight-medium); }
.ai-run-head .potd-link { margin-left: auto; }
.ai-run.ok .ai-mark { color: var(--pass); }
.ai-run.bad .ai-mark { color: var(--fail); }
.ai-run .note { margin: var(--space-1) 0 0; }
.ai-run details { margin-top: var(--space-1); }
.ai-run summary, .potd-sols summary { cursor: pointer; font-size: var(--font-size-sm); color: var(--color-link); }
.ai-expl { margin-top: var(--space-2); font-size: var(--font-size-sm); line-height: var(--line-height-body); }

/* --- a posted problem */
.potd-card { display: grid; gap: var(--space-3); }
.potd-card > * { margin: 0; }
.potd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
             font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.potd-by { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.potd-actions { display: inline-flex; align-items: center; gap: var(--space-3); margin-left: auto; }
/* Save, copy and share the problem as a picture: three round icon buttons,
   set apart from Edit and Remove by a thin line. */
.potd-share { display: inline-flex; gap: 2px; padding-right: var(--space-3);
              border-right: var(--border-width) solid var(--color-border-subtle); }
.potd-share:last-child { padding-right: 0; border-right: 0; }
.icon-btn {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--color-text-secondary); cursor: pointer;
}
.icon-btn svg { width: 1.2rem; height: 1.2rem; }
.icon-btn:hover { background: var(--color-surface-subtle); color: var(--color-text); }
.icon-btn:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 1px; }
.icon-btn.done { color: var(--pass); }
.potd-shot-note:empty { display: none; }
.potd-shot-note { margin-top: calc(-1 * var(--space-1)); }
/* The problem laid out off screen at the picture's size, to be drawn from. */
.potd-shot-src { position: fixed; left: -20000px; top: 0; font: 400 30px/1.55 Inter, system-ui, sans-serif;
                 color: #17243A; overflow-wrap: anywhere; }
.ai-pills { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.ai-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 var(--space-2);
           border-radius: var(--radius-pill); background: var(--color-surface-subtle);
           font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.5rem; }
.ai-pill.ok { background: var(--pass-bg); color: var(--pass); }
.ai-pill.bad { background: var(--fail-bg); color: var(--fail); }
.ai-pill.unsure { color: var(--color-warning); }
.potd-statement { font-size: var(--font-size-lg); line-height: var(--line-height-body); overflow-wrap: anywhere; }
.potd-try { display: grid; gap: var(--space-2); max-width: 36rem; }
.potd-try-row { display: flex; gap: var(--space-2); }
.potd-try .fr-input, .potd-try .potd-mf { flex: 1; min-width: 0; }
/* An answer box that shows math as it's typed (MathLive). Its own menu and
   keyboard buttons are hidden: the math keys below do that job. */
.potd-mf {
  display: block; width: 100%; min-height: var(--control-min-size); padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-input);
  background: var(--color-surface); color: var(--color-text); font-size: var(--font-size-lg);
  --caret-color: var(--color-text); --placeholder-color: var(--color-text-secondary);
  --selection-background-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  --selection-color: var(--color-text);
  /* The part the cursor is in (a fraction, a root) gets a faint tint. */
  --contains-highlight-background-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.potd-mf:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: 1px; }
.potd-mf::part(menu-toggle), .potd-mf::part(virtual-keyboard-toggle) { display: none; }
.mk-toggle { font-family: "Times New Roman", serif; font-style: italic; }
.potd-try-preview { padding: var(--space-2) var(--space-3); border: var(--border-width) dashed var(--color-border-subtle);
                    border-radius: var(--radius-input); }
.potd-try + .note { margin-top: calc(-1 * var(--space-2)); }
/* Your result and the answer share one strip. */
.potd-answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4);
               padding: var(--space-2) var(--space-3); border-radius: var(--radius-input);
               background: var(--color-surface-subtle); }
.potd-answer.ok { background: var(--pass-bg); }
.potd-answer.bad { background: var(--fail-bg); }
.potd-mine { font-weight: var(--font-weight-semibold); }
.potd-answer.ok .potd-mine { color: var(--pass); }
.potd-answer.bad .potd-mine { color: var(--fail); }
.potd-answer .potd-link { margin-left: auto; }
/* Wrong answers so far, while tries are left. */
.potd-tried { margin: 0; color: var(--fail); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.potd-try ~ .note .potd-link { margin-left: var(--space-2); }
.potd-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.potd-results summary { cursor: pointer; font-size: var(--font-size-sm); color: var(--color-link); }
.potd-results summary .note { margin-left: var(--space-1); }
.potd-results ul { margin: var(--space-2) 0 0; padding-left: var(--space-4); font-size: var(--font-size-sm);
                   line-height: var(--line-height-body); }
.potd-results .ok { color: var(--pass); }
.potd-results .bad { color: var(--fail); }
.potd-sols summary .note { margin-left: var(--space-1); }
.potd-sols section { margin-top: var(--space-3); padding-left: var(--space-3);
                     border-left: 2px solid var(--color-border-subtle); }
.potd-sols h4 { margin: 0 0 var(--space-1); font-size: var(--font-size-sm); }
.potd-sols h4 .note { font-weight: var(--font-weight-regular); }
.potd-sols section > div { font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.potd-card .err:empty, .potd-card .err[hidden] { display: none; }

/* --- math keys */
.math-keys { display: grid; gap: var(--space-2); padding: var(--space-2);
             border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-input);
             background: var(--color-surface-subtle); }
.mk-groups { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.mk-group { padding: 0.2rem 0.65rem; border: 0; border-radius: var(--radius-pill); background: none;
            color: var(--color-text-secondary); font: inherit; font-size: var(--font-size-sm); cursor: pointer; }
.mk-group:hover { color: var(--color-text); }
.mk-group[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text);
                                 font-weight: var(--font-weight-semibold);
                                 box-shadow: inset 0 0 0 var(--border-width) var(--color-border-control); }
.mk-keys { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.mk-key { min-width: 2.4rem; height: 2.4rem; padding: 0 0.45rem;
          border: var(--border-width) solid var(--color-border-control); border-radius: var(--radius-input);
          background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--font-size-md); cursor: pointer; }
.mk-key:hover { background: var(--color-surface-subtle); }

/* ------------------------------------------------------------------ dares */
/* Dares have their own accent, a hot coral, so a challenge stands out from
   the amber of everyday buttons. --dare-fill keeps white text at 4.5:1 or
   better across its gradient; --dare-text is the coral for text and lines. */
:root { --dare: #E0452B; --dare-fill: linear-gradient(135deg, #C2381F, #D04A1C);
        --dare-text: #B8321C; --dare-bg: #FDECE7; }
[data-theme="dark"] { --dare: #F2603F; --dare-text: #FF8A6B; --dare-bg: #3A1D16; }
.dare-bolt { width: 1.1rem; height: 1.1rem; flex: none; fill: currentColor; }

/* The badge at the top: a bolt alone when nothing waits; a coral pill with
   the number of dares to take when some do, blinking while one is new. */
.dare-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-width: var(--control-min-size); min-height: var(--control-min-size); padding: 0;
  border: var(--border-width) solid var(--color-border-subtle); border-radius: 999px;
  background: none; color: var(--dare-text); cursor: pointer;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.dare-badge .dare-bolt { width: 1.25rem; height: 1.25rem; }
.dare-badge .dare-word { display: none; }
.dare-badge:hover { background: var(--dare-bg); }
.dare-badge.has {
  padding: 0 var(--space-2) 0 var(--space-3); border-color: transparent;
  background: var(--dare-fill); color: #FFFFFF;
  box-shadow: 0 2px 8px rgb(224 69 43 / 0.35);
}
.dare-badge.has .dare-word { display: inline; }
.dare-badge.has:hover { filter: brightness(1.06); }
.dare-count {
  display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.3rem;
  border-radius: 999px; background: #FFFFFF; color: #B8321C;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0;
}
.dare-badge.blink { animation: dare-pulse 1.1s ease-in-out infinite; }
.dare-badge.blink .dare-bolt { animation: dare-flash 1.1s steps(1, end) infinite; }
@keyframes dare-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(224 69 43 / 0.6); filter: none; }
  50% { box-shadow: 0 0 0 8px rgb(224 69 43 / 0); filter: brightness(1.2) saturate(1.15); }
}
@keyframes dare-flash { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
  .dare-badge.blink, .dare-badge.blink .dare-bolt { animation: none; }
  .dare-badge.blink { outline: 3px solid var(--dare); outline-offset: 2px; }
}

/* Dare buttons: coral outline on tests and in lists, coral fill where the
   dare is the thing to do (send it, take it, after a result). */
.btn.dare-btn { color: var(--dare-text); border-color: var(--dare-text); }
.btn.dare-btn:hover:not(:disabled) { background: var(--dare-bg); }
.btn.dare-go {
  border-color: transparent; color: #FFFFFF;
  background: var(--dare-fill);
}
.btn.dare-go:hover:not(:disabled), .btn.dare-go:active:not(:disabled) {
  background: var(--dare-fill); filter: brightness(1.07);
}
.btn.dare-go:disabled { background: var(--color-surface-subtle); filter: none; }
.btn .dare-bolt, .dare-send-row .btn svg { width: 1.05rem; height: 1.05rem; }
/* On a Problem of the Day card: a small labeled chip before the picture icons. */
.dare-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.25rem; padding: 0 var(--space-3);
  border: var(--border-width) solid var(--dare-text); border-radius: 999px;
  background: none; color: var(--dare-text); cursor: pointer;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
}
.dare-chip:hover { background: var(--dare-bg); }
/* Locked until you've finished the test or the problem yourself. */
[data-dare-locked] { opacity: 0.5; cursor: not-allowed; }
.btn.dare-btn[data-dare-locked]:hover, .dare-chip[data-dare-locked]:hover { background: none; }
.dare-hint { align-self: center; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
/* How many friends you've dared to it, inside its Dare button. */
.dare-sent {
  margin-left: 0.15rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  background: var(--dare-bg); color: var(--dare-text);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); white-space: nowrap;
}
.dare-btn:hover .dare-sent, .dare-chip:hover .dare-sent { background: var(--color-surface); }
.dare-chip:focus-visible, .dare-badge:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 2px; }
.potd-card.dare-focus { box-shadow: 0 0 0 3px var(--dare); }

/* The composer and Your dares, in the study dialog's frame. */
.study-dialog.dare-dialog { width: min(36rem, calc(100vw - 2 * var(--layout-gutter))); max-height: calc(100dvh - 2rem); overflow: auto; }
.dare-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.dare-head h2 { margin: 0; }
.dare-head .dare-bolt { width: 2rem; height: 2rem; padding: 0.35rem; border-radius: 50%;
  background: var(--dare-fill); fill: #FFFFFF; }
#dareForm { display: grid; gap: var(--space-4); }
.dare-field { display: grid; gap: var(--space-2); }
.dare-field label, .dare-dialog label { display: grid; gap: var(--space-1); font-weight: var(--font-weight-medium); }
.dare-label { font-weight: var(--font-weight-semibold); }
.dare-dialog textarea { resize: vertical; font-family: inherit; line-height: var(--line-height-body); }
.dare-dialog input:focus, .dare-dialog select:focus, .dare-dialog textarea:focus { border-color: var(--dare-text); }
.dare-link-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0; font-size: var(--font-size-sm); }
.dare-dialog .err { margin: 0; }
.dare-what { padding: var(--space-3); border-radius: var(--radius-input); background: var(--color-surface-subtle); }
.dare-what-tag { display: block; margin-bottom: var(--space-1); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dare-text); }
.dare-what-text { max-height: 7.5rem; overflow: auto; font-size: var(--font-size-sm); }
.dare-note-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }

/* Two-way switches: student or email; received or sent. */
.dare-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 3px;
  border-radius: var(--radius-button); background: var(--color-surface-subtle); }
.dare-seg button {
  min-height: 2.5rem; padding: var(--space-1) var(--space-2); border: 0; border-radius: calc(var(--radius-button) - 2px);
  background: none; color: var(--color-text-secondary); font: inherit; font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium); cursor: pointer;
}
.dare-seg button[aria-pressed="true"], .dare-seg button[aria-selected="true"] {
  background: var(--color-surface); color: var(--color-text); font-weight: var(--font-weight-semibold);
  box-shadow: 0 1px 3px rgb(16 27 43 / 0.15);
}
.dare-seg .dare-count { background: #C2381F; color: #FFFFFF; margin-left: 0.2rem; }
[data-pane] { display: grid; gap: var(--space-2); }
[data-pane][hidden] { display: none; }

/* Picking a student. */
.dare-people { display: grid; gap: 2px; max-height: 14rem; overflow: auto; }
.dare-people .note { margin: var(--space-1) 0; }
.dare-people-head { font-size: var(--font-size-xs); }
.dare-person {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 2.75rem;
  padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--radius-input);
  background: none; color: var(--color-text); font: inherit; text-align: start; cursor: pointer;
}
.dare-person:hover, .dare-person:focus-visible { background: var(--color-surface-subtle); }
.dare-person-name { font-weight: var(--font-weight-medium); }
.dare-av {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%;
  background: var(--dare-bg); color: var(--dare-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
}
.dare-av.to { background: var(--color-surface-subtle); color: var(--color-text); }
.dare-picked { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2);
  border: var(--border-width) solid var(--dare-text); border-radius: var(--radius-input); }
.dare-picked .potd-link { margin-left: auto; }

/* Sent! */
.dare-done { text-align: center; }
.dare-done .row { justify-content: center; }
.dare-burst { display: inline-grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: var(--space-3);
  border-radius: 50%; background: var(--dare-fill); }
.dare-burst .dare-bolt { width: 2.2rem; height: 2.2rem; fill: #FFFFFF; animation: dare-pop 0.5s var(--motion-easing-standard); }
@keyframes dare-pop { from { transform: scale(0.4) rotate(-15deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dare-burst .dare-bolt { animation: none; } }
.dare-send-row { justify-content: flex-start !important; }
.dare-status:empty { display: none; }
.dare-status { margin: 0; color: var(--pass); }

/* Your dares. */
.dare-tabs { margin-bottom: var(--space-3); }
.dare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.dare-item { display: flex; gap: var(--space-3); padding: var(--space-3);
  border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-input); }
.dare-item.open { border-inline-start: 4px solid var(--dare); }
.dare-item.fresh { background: var(--dare-bg); }
.dare-item.won { border-inline-start: 4px solid var(--pass); }
.dare-item.declined { opacity: 0.7; }
.dare-item.focus { box-shadow: 0 0 0 3px var(--dare); }
.dare-body { display: grid; gap: var(--space-1); min-width: 0; }
.dare-body p { margin: 0; }
.dare-quote { font-style: italic; color: var(--color-text); overflow-wrap: anywhere; }
.dare-result { font-weight: var(--font-weight-medium); }
.dare-new { display: inline-block; margin-left: var(--space-1); padding: 0 0.4rem; border-radius: 999px;
  background: #C2381F; color: #FFFFFF; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.dare-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.dare-acts:empty { display: none; }
.dare-empty { margin: var(--space-2) 0; }
.dare-empty .dare-bolt { width: 0.95rem; height: 0.95rem; color: var(--dare-text); vertical-align: -0.12em; }

/* Signing up from a friend's dare link. */
.dare-invite { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4);
  border-radius: var(--radius-card); background: var(--dare-bg); }
.dare-invite[hidden] { display: none; }
.dare-invite p { margin: 0 0 var(--space-1); }
.dare-invite-title { font-size: var(--font-size-lg); }
.dare-invite-mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: 50%; background: var(--dare-fill); }
.dare-invite-mark .dare-bolt { width: 1.5rem; height: 1.5rem; fill: #FFFFFF; }

/* Before a dare starts: the test, the time, the score to beat, the medal. */
.dare-ready-what { margin: 0 0 var(--space-2); font-size: var(--font-size-lg); }
.dare-ready .dare-quote { margin: 0 0 var(--space-3); }
.dare-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--space-2);
  margin: 0 0 var(--space-3); }
.dare-facts div { padding: var(--space-2) var(--space-3); border-radius: var(--radius-input);
  background: var(--color-surface-subtle); }
.dare-facts dt { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); }
.dare-facts dd { margin: 0; font-weight: var(--font-weight-semibold); }
.dare-ready-medal { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); background: var(--dare-bg); }
.dare-ready-medal .medal { width: 2.6rem; flex: none; }
.dare-ready-medal p { margin: 0; font-size: var(--font-size-sm); }
.dare-ready-leave { color: var(--dare-text); }
.dare-ready .row { justify-content: flex-end; }

/* ----------------------------------------------------------------- medals */
.medal { display: block; height: auto; overflow: visible; }
.medal.pop { animation: medal-pop 0.7s var(--motion-easing-standard) both; }
@keyframes medal-pop {
  0% { transform: translateY(-24px) scale(0.4) rotate(-18deg); opacity: 0; }
  60% { transform: translateY(0) scale(1.08) rotate(5deg); opacity: 1; }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .medal.pop { animation: none; } }

/* A medal just earned, on a test's results or a Problem of the Day card. */
.medal-award {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid #E9C46A; border-radius: var(--radius-card);
  background: #FFF6DC; color: var(--color-text); text-align: start;
}
[data-theme="dark"] .medal-award { background: #33290F; border-color: #7A5D1A; }
.medal-award > .medal { width: 5.25rem; flex: none; filter: drop-shadow(0 4px 6px rgb(16 27 43 / 0.2)); }
.medal-award-body { min-width: 0; }
.medal-award-body p { margin: 0 0 var(--space-1); }
.medal-award-head { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.medal-award-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.medal-share { display: inline-flex; gap: 2px; }
.medal-note:empty { display: none; }
.medal-note { margin: var(--space-1) 0 0 !important; }
.potd-card .medal-award { margin: var(--space-3) 0 0; }

/* Your medals, on My Progress. */
.medal-tally { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3);
  color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.medal-tally strong { color: var(--color-text); font-size: var(--font-size-lg); }
.medal-empty, .medal-nudge { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.medal-empty .medal { width: 3rem; flex: none; }
/* No new medal on these results: a nudge toward the next, by a faded medal. */
.medal-nudge { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-input);
  border: var(--border-width) dashed var(--color-border-control); color: var(--color-text); font-size: var(--font-size-sm); text-align: start; }
.medal-nudge .medal { width: 2.4rem; flex: none; }
.medal.dim { filter: grayscale(1); opacity: 0.45; }
.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--space-2);
  margin-bottom: var(--space-3); }
.medal-tile {
  display: grid; justify-items: center; align-content: start; gap: 2px; padding: var(--space-3) var(--space-2);
  border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-input);
  background: none; color: var(--color-text); font: inherit; text-align: center;
}
button.medal-tile { cursor: pointer; }
button.medal-tile:hover { background: var(--color-surface-subtle); }
button.medal-tile:hover .medal { transform: translateY(-2px) rotate(-3deg); }
.medal-tile .medal { width: 3.5rem; margin-bottom: var(--space-1); transition: transform 0.2s; }
.medal-tile-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.medal-tile-what { font-size: var(--font-size-xs); color: var(--color-text-secondary); overflow-wrap: anywhere; }

/* One medal, large. */
.study-dialog.medal-dialog { width: min(28rem, calc(100vw - 2 * var(--layout-gutter))); text-align: center; }
.medal-dialog .medal { width: 9rem; margin: 0 auto var(--space-3); filter: drop-shadow(0 8px 12px rgb(16 27 43 / 0.25)); }
.medal-dialog h2 { margin: 0; }
.medal-dialog-what { margin: var(--space-1) 0; font-weight: var(--font-weight-semibold); }
.medal-dialog-share { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0 0; }
.medal-dialog-share .btn svg { width: 1.05rem; height: 1.05rem; }
.medal-dialog .row { justify-content: center; }

/* A finished dare's medal in Your dares. */
.medal-mini { padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-input); }
.medal-mini .medal { width: 1.9rem; }
.medal-mini:hover .medal { transform: rotate(-6deg); }
.medal-mini:focus-visible, .medal-tile:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 480px) {
  .medal-award { gap: var(--space-3); padding: var(--space-3); }
  .medal-award > .medal { width: 4rem; }
}

/* -------------------------------------------- the hub's medal scoreboard */
.hub-board {
  margin-top: var(--space-8); padding: var(--space-6) var(--space-8);
  border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-card);
  background: var(--color-surface);
}
.hub-board[hidden] { display: none; }
@media (max-width: 767px) { .hub-board { margin-top: var(--space-6); padding: var(--space-5); } }
.board-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); }
.board-head h2 { margin: 0; font-size: var(--font-size-xl); letter-spacing: -0.01em; }
.board-head .note { margin: var(--space-1) 0 0; }
.board-tabs { min-width: min(100%, 16rem); }
.board-table th, .board-table td { vertical-align: middle; }
.board-table thead th { border-bottom-width: 2px; }
.board-table .board-n { width: 4.25rem; text-align: center; padding-inline: var(--space-1); }
.board-table thead .board-n { font-size: var(--font-size-xs); }
.board-medal { display: block; width: 1.5rem; }
.board-rank { width: 3.25rem; padding-right: 0; }
.board-name { text-align: start; font-weight: var(--font-weight-medium); }
.board-who { display: flex; align-items: center; gap: var(--space-2); min-width: 8rem; overflow-wrap: anywhere; }
.board-table td.board-n { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.board-table td.zero { color: var(--color-text-secondary); font-weight: var(--font-weight-regular); opacity: 0.6; }
.board-total { color: var(--color-text); }
.rank-badge {
  display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 0.3rem;
  border-radius: 999px; background: var(--color-surface-subtle); font-weight: var(--font-weight-bold);
}
.rank-badge.r1 { background: linear-gradient(135deg, #FFE49A, #F5B83A); color: #4D3104; }
.rank-badge.r2 { background: linear-gradient(135deg, #F4F6F9, #C9D0DA); color: #2E343D; }
.rank-badge.r3 { background: linear-gradient(135deg, #F7D3B3, #D08A4E); color: #3E220C; }
.board-table tr.you { background: #FFF6E0; }
[data-theme="dark"] .board-table tr.you { background: #2E2614; }
.board-you { display: inline-block; margin-left: var(--space-1); padding: 0 0.45rem; border-radius: 999px;
  background: var(--brand-navy); color: #FFFFFF; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
[data-theme="dark"] .board-you { background: #F5A623; color: #17243A; }
.board-gap td { padding: 0; text-align: center; color: var(--color-text-secondary); border-bottom: 0; }
.board-foot { margin: var(--space-3) 0 0; }
.board-empty { margin: 0; padding: var(--space-6) 0; text-align: center; color: var(--color-text-secondary); }
@media (max-width: 480px) {
  .board-table .board-n { width: 3.2rem; }
  .board-table th, .board-table td, .board-table tbody th { padding-inline: 2px; }
  .board-table .board-rank { width: 2.2rem; }
  .board-who { min-width: 0; }
  .board-who .dare-av { display: none; }
  .rank-badge { min-width: 1.6rem; height: 1.6rem; font-size: var(--font-size-xs); }
}
.board-table tbody th { padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border-subtle);
  color: var(--color-text); font-size: var(--font-size-sm); letter-spacing: 0; text-transform: none; white-space: normal; }
.board-table tr:last-child th { border-bottom: 0; }
.board-table thead .board-n { white-space: normal; line-height: 1.2; }
.board-table td.board-total { font-size: var(--font-size-lg); }
.board-total .board-medal { display: inline-block; width: 1.1rem; margin: 0 0.3rem 0 0; vertical-align: -0.3em; }

/* ------------------------------------------------- your account and email */
.study-dialog.email-dialog { width: min(26rem, calc(100vw - 2 * var(--layout-gutter))); }
.account-form { display: grid; gap: var(--space-3); }
.account-form h2, .account-form p { margin: 0; }
.account-form .dare-head { margin-bottom: 0; }
.account-form label { display: grid; gap: var(--space-1); font-weight: var(--font-weight-medium); }
.account-form .check-row { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-regular); }
.account-form .check-row input { width: 1.1rem; height: 1.1rem; }
.account-form .row { justify-content: flex-end; align-items: center; margin-top: var(--space-1); }
.account-form .row .note { margin: 0 auto 0 0; color: var(--pass); }
.account-form .row .potd-link { margin-right: auto; }
.auth-forgot { margin: calc(-1 * var(--space-2)) 0 0; text-align: center; }
#emailWrap .note { font-weight: var(--font-weight-regular); }