/* ==========================================================================
   PrepMora — application shell and study surfaces
   ========================================================================== */

/* --- Shell -------------------------------------------------------------- */

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s5) var(--s4);
  background: var(--bg-deep);
  border-right: 1px solid var(--line);
}

[data-theme="light"] .sidebar {
  background: var(--surface);
}

.sidebar-brand {
  padding: var(--s2) var(--s3) var(--s3);
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  scrollbar-width: thin;
}

.nav-group-label {
  padding: 0 var(--s3) var(--s2);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 11px var(--s3);
  border-radius: var(--r2);
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.nav-link + .nav-link {
  margin-top: 2px;
}

.nav-link svg {
  flex: none;
  opacity: 0.75;
}

.nav-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-link[aria-current="page"] {
  background: var(--accent-wash);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight: 600;
}

.nav-link[aria-current="page"] svg {
  opacity: 1;
}

.nav-count {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--rp);
  background: var(--bad-wash);
  color: var(--bad);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
}

.nav-tag {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--rp);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.theme-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border-radius: var(--rp);
  border: 1px solid var(--line);
  background: var(--surface);
}

.theme-toggle button {
  display: grid;
  place-items: center;
  padding: 9px;
  border-radius: var(--rp);
  color: var(--text-3);
  transition: background-color 0.16s ease, color 0.16s ease;
}

.theme-toggle button:hover {
  color: var(--text);
}

.theme-toggle button[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--accent);
}

.user-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 11px var(--s3);
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.15s ease;
}

.user-card:hover {
  border-color: var(--text-3);
}

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Main column -------------------------------------------------------- */

.app-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s6);
  padding: var(--s6) var(--s8) var(--s5);
  background: color-mix(in oklab, var(--bg) 95%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rp);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.icon-btn:hover {
  color: var(--accent);
  border-color: var(--accent-line);
}

.menu-btn {
  display: none;
}

.page {
  flex: 1;
  width: 100%;
  max-width: calc(var(--page-max) + var(--s8) * 2);
  margin: 0 auto;
  padding: var(--s7) var(--s8) var(--s11);
}

/* --- Dashboard ---------------------------------------------------------- */

.score-panel {
  position: relative;
  padding: var(--s7);
  border-radius: var(--r4);
  border: 1px solid var(--line);
  background: radial-gradient(
      120% 140% at 88% 8%,
      var(--accent-wash),
      transparent 58%
    ),
    var(--surface);
  overflow: hidden;
}

.score-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: var(--s8);
  align-items: center;
}

.score-figure {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}

.score-figure-value {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 6vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

.score-split {
  display: grid;
  gap: var(--s3);
}

.score-split-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s3);
  align-items: center;
  padding: 11px var(--s4);
  border-radius: var(--r2);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}

.stat-tile {
  padding: var(--s5);
  border-radius: var(--r3);
  border: 1px solid var(--line);
  background: var(--surface);
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin-top: var(--s3);
}

.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.task {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4);
  border-radius: var(--r2);
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.task:hover {
  border-color: var(--accent-line);
  transform: translateX(2px);
}

.task-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--rp);
  border: 1.5px solid var(--line);
  color: transparent;
}

.task-check[role="checkbox"] {
  cursor: pointer;
}

.task.is-done .task-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.task.is-done .task-name {
  color: var(--text-3);
  text-decoration: line-through;
}

/* --- Assignments (mentor-set, each with its own deadline) --------------- */

.assign-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.assign-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  font-size: 0.75rem;
}

.assign-topic {
  color: var(--text-3);
}

.assign-due {
  font-weight: 600;
}

.assign-due-bad {
  color: var(--bad);
}

.assign-due-warn {
  color: var(--warn, var(--accent));
}

.assign-due-calm {
  color: var(--text-3);
}

.assign-progress {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
  width: 170px;
}

.assign-progress .bar {
  flex: 1;
}

.assign-progress [data-metric-count] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.assign-go {
  flex: none;
}

/* A target the student actually reached turns green, so a finished assignment
   reads as finished at a glance rather than as another full turquoise bar. */
.task.is-done .assign-progress .bar-fill {
  background: var(--good, var(--accent));
}

@media (max-width: 620px) {
  .task.assign {
    flex-wrap: wrap;
  }

  .assign-body {
    flex: 1 1 60%;
  }

  .assign-progress {
    width: 100%;
    order: 3;
  }
}

/* --- Question bank ------------------------------------------------------ */

.domain {
  border-radius: var(--r3);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.domain + .domain {
  margin-top: var(--s4);
}

.domain-head {
  display: flex;
  align-items: center;
  gap: var(--s5);
  width: 100%;
  padding: var(--s5) var(--s6);
  text-align: left;
  position: relative;
  transition: background-color 0.15s ease;
}

.domain-head::before {
  content: "";
  position: absolute;
  inset: 16px auto 16px 0;
  width: 3px;
  border-radius: var(--rp);
  background: var(--spine, var(--accent));
}

.domain-head:hover {
  background: var(--surface-2);
}

.domain-title {
  flex: 1;
  min-width: 0;
}

.domain-meta {
  text-align: right;
  flex: none;
}

.domain-caret {
  flex: none;
  color: var(--text-3);
  transition: transform 0.22s ease;
}

.domain.is-open .domain-caret {
  transform: rotate(90deg);
  color: var(--accent);
}

.domain-body {
  display: none;
  padding: 0 var(--s6) var(--s6);
  border-top: 1px solid var(--line-soft);
}

.domain.is-open .domain-body {
  display: block;
  animation: domain-in 0.24s ease both;
}

@keyframes domain-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.skill-name {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-weight: 500;
}

.skill-ring {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: var(--rp);
  border: 2px solid var(--spine, var(--accent));
}

.weight-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.weight-track {
  width: 54px;
  height: 4px;
  border-radius: var(--rp);
  background: var(--surface-3);
  overflow: hidden;
}

.weight-fill {
  height: 100%;
  border-radius: var(--rp);
  background: var(--spine, var(--accent));
}

.build-card {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s6);
  border-radius: var(--r3);
  border: 1px solid var(--accent-line);
  background: radial-gradient(
      110% 180% at 6% 50%,
      var(--accent-wash),
      transparent 60%
    ),
    var(--surface);
}

.build-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r2);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}

/* --- Question player ---------------------------------------------------- */

.player {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border-radius: var(--r3);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

/* Math questions have no passage, so the player collapses to one column. */
.player.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.player.is-single .passage-pane {
  display: none;
}

.player.is-single .answer-pane {
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
}

.player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s4) var(--s6);
  border-radius: var(--r3);
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: var(--s4);
}

.timer {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 7px 14px;
  border-radius: var(--rp);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.passage-pane,
.answer-pane {
  padding: var(--s7);
}

.passage-pane {
  border-right: 1px solid var(--line);
  background: var(--surface-2);
}

/* Question typography — locked to 16px per spec */
.passage,
.stem,
.choice-text {
  font-size: var(--q-size);
  line-height: var(--q-leading);
}

.passage {
  max-width: var(--q-measure);
  color: var(--text);
}

.passage p + p {
  margin-top: var(--s4);
}

.stem {
  font-weight: 600;
  max-width: var(--q-measure);
}

.choices {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s6);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  width: 100%;
  padding: var(--s4) var(--s5);
  text-align: left;
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choice:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
}

.choice-letter {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  margin-top: 1px;
  border-radius: var(--rp);
  border: 1.5px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.choice[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.choice[aria-checked="true"] .choice-letter {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.choice.is-correct {
  border-color: var(--good);
  background: var(--good-wash);
}

.choice.is-correct .choice-letter {
  background: var(--good);
  border-color: var(--good);
  color: var(--bg-deep);
}

.choice.is-wrong {
  border-color: var(--bad);
  background: var(--bad-wash);
}

.choice.is-wrong .choice-letter {
  background: var(--bad);
  border-color: var(--bad);
  color: var(--bg-deep);
}

.choice.is-struck {
  opacity: 0.42;
}

.choice.is-struck .choice-text {
  text-decoration: line-through;
}

/* Question-number strip, mirroring the review panel in the real test app */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.strip-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r1);
  border: 1.5px solid var(--dot, var(--line));
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 0.14s ease, background-color 0.14s ease;
}

.strip-dot:hover {
  color: var(--text);
}

.strip-dot[aria-current="true"] {
  background: var(--dot, var(--accent));
  border-color: var(--dot, var(--accent));
  color: var(--bg-deep);
  font-weight: 600;
}

.strip-flag {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: var(--rp);
  background: var(--warn);
  border: 1.5px solid var(--surface);
}

/* Toggle-style tool buttons in the player bar */
.tool-btn.is-on {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}

.explain {
  display: none;
  margin-top: var(--s6);
  padding: var(--s5);
  border-radius: var(--r2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  font-size: var(--q-size);
  line-height: var(--q-leading);
}

.explain.is-shown {
  display: block;
}

/* --- Analytics ---------------------------------------------------------- */

.chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-axis {
  fill: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  font-size: 0.8125rem;
  color: var(--text-2);
}

.legend-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

.acc-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 52px;
  gap: var(--s4);
  align-items: center;
}

.heat {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.heat-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--surface-3);
}

/* --- Vocab -------------------------------------------------------------- */

.flashcard {
  perspective: 1600px;
  height: 340px;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}

.flashcard.is-flipped .flashcard-inner {
  transform: rotateY(180deg);
}

.flashcard-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s4);
  padding: var(--s8);
  border-radius: var(--r4);
  border: 1px solid var(--line);
  background: var(--surface);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-align: center;
}

.flashcard-back {
  transform: rotateY(180deg);
  background: radial-gradient(
      120% 130% at 50% 0%,
      var(--accent-wash),
      transparent 62%
    ),
    var(--surface);
}

.word {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.deck-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4);
  border-radius: var(--r2);
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
}

/* --- Vocab MCQ drill ----------------------------------------------------- */

.vocab-shell {
  max-width: 640px;
  margin: 0 auto;
}

.vocab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
}

@media (max-width: 560px) {
  .vocab-grid {
    grid-template-columns: 1fr;
  }
}

.vocab-tile {
  text-align: left;
  padding: var(--s6);
  border-radius: var(--r3);
  border: 1px solid var(--line);
  background: radial-gradient(
      120% 130% at 0% 0%,
      var(--accent-wash),
      transparent 62%
    ),
    var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.vocab-tile:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
}

.vocab-tile-quiet {
  background: var(--surface);
}

.vocab-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5);
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface);
}

.vocab-list-row + .vocab-list-row {
  margin-top: var(--s3);
}

.vocab-list-word {
  font-family: var(--font-display);
  font-weight: 600;
}

.tier-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface-2);
  gap: 4px;
}

.tier-toggle-btn {
  padding: 8px 18px;
  border-radius: calc(var(--r2) - 4px);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  transition: background-color 0.14s ease, color 0.14s ease;
}

.tier-toggle-btn.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

.vocab-def-card {
  padding: var(--s8) var(--s6);
  border-radius: var(--r4);
  border: 1px solid var(--line);
  background: radial-gradient(
      120% 130% at 50% 0%,
      var(--accent-wash),
      transparent 62%
    ),
    var(--surface);
  text-align: center;
  margin-bottom: var(--s6);
}

.vocab-def {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 600;
  line-height: 1.35;
  margin: var(--s3) 0 var(--s3);
}

.vocab-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}

@media (max-width: 560px) {
  .vocab-choices {
    grid-template-columns: 1fr;
  }
}

.vocab-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s5);
  border-radius: var(--r3);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
  transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.1s ease;
}

.vocab-choice:hover:not(.is-disabled) {
  border-color: var(--accent-line);
  background: var(--accent-wash);
}

.vocab-choice:active:not(.is-disabled) {
  transform: scale(0.99);
}

.vocab-choice-word {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}

/* Word → definition prompts: the choices are sentences rather than single
   words, so they get one full-width column and body-text weight. */
.vocab-choices.is-reversed {
  grid-template-columns: 1fr;
}

.vocab-choice-def {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.5;
}

.vocab-choice-bookmark {
  display: inline-flex;
  color: var(--text-3);
  transition: color 0.14s ease;
  cursor: pointer;
}

.vocab-choice-bookmark:hover {
  color: var(--accent);
}

.vocab-choice.is-disabled {
  cursor: default;
}

.vocab-choice.is-correct {
  border-color: var(--good);
  background: var(--good-wash);
}

.vocab-choice.is-correct .vocab-choice-word {
  color: var(--good);
}

.vocab-choice.is-wrong {
  border-color: var(--bad);
  background: var(--bad-wash);
}

.vocab-choice.is-wrong .vocab-choice-word {
  color: var(--bad);
}

/* --- Mistake log -------------------------------------------------------- */

.mistake {
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.mistake + .mistake {
  margin-top: var(--s3);
}

.mistake-head {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto 18px;
  gap: var(--s4);
  align-items: center;
  width: 100%;
  padding: var(--s4) var(--s5);
  text-align: left;
  transition: background-color 0.14s ease;
}

.mistake-head:hover {
  background: var(--surface-2);
}

.mistake-body {
  display: none;
  padding: var(--s5);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: var(--q-size);
  line-height: var(--q-leading);
}

.mistake.is-open .mistake-body {
  display: block;
}

.mistake.is-open .domain-caret {
  transform: rotate(90deg);
}

.err-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--rp);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bad-wash);
  color: var(--bad);
}

/* --- Practice tests ----------------------------------------------------- */

.test-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s6);
  align-items: center;
  padding: var(--s6);
  border-radius: var(--r3);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.15s ease;
}

.test-card:hover {
  border-color: var(--accent-line);
}

.module-strip {
  display: flex;
  gap: 6px;
  margin-top: var(--s4);
}

.module-pill {
  flex: 1;
  padding: 9px var(--s3);
  border-radius: var(--r1);
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: 0.75rem;
  color: var(--text-3);
  text-align: center;
  white-space: nowrap;
}

.module-pill.is-done {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent);
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
  .score-panel-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }
  .player {
    grid-template-columns: minmax(0, 1fr);
  }
  .passage-pane {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 960px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: var(--shadow-3);
  }
  body.nav-open .sidebar {
    transform: none;
  }
  .app-main {
    margin-left: 0;
  }
  .menu-btn {
    display: grid;
  }
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.nav-open .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }
  .topbar,
  .page {
    padding-left: var(--s5);
    padding-right: var(--s5);
  }
  .acc-row {
    grid-template-columns: 130px minmax(0, 1fr) 44px;
  }
}

@media (max-width: 620px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s4);
  }
  .passage-pane,
  .answer-pane {
    padding: var(--s5);
  }
  .score-panel {
    padding: var(--s5);
  }
  .test-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .mistake-head {
    grid-template-columns: 26px minmax(0, 1fr) 18px;
  }
  .mistake-head .mistake-hide-sm {
    display: none;
  }
}

/* --- Practice-test library ---------------------------------------------- */

.test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s5);
}

.test-tile {
  display: flex;
  flex-direction: column;
  padding: var(--s6);
  border-radius: var(--r3);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.test-tile:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
}

.tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
}

/* Tear-off calendar block, echoing the date badge on the real test cards */
.date-chip {
  display: grid;
  place-items: center;
  width: 74px;
  padding: 9px 0 7px;
  border-radius: var(--r2);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  line-height: 1.15;
}

.date-chip span {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.date-chip strong {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: auto;
  padding-top: var(--s6);
}

/* --- Completed-test score card ------------------------------------------ */

.score-card {
  padding: 0;
  overflow: hidden;
}

.score-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--surface-3);
  border-bottom: 1px solid var(--accent-line);
  color: var(--text);
}

.score-card-name {
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.score-card-retake {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
}

.score-card-retake:hover {
  border-color: var(--accent-line);
  color: var(--accent);
}

.score-card-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px var(--s5);
  background: var(--surface-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent-2) 80%, var(--text-2));
}

.score-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s5) var(--s5) var(--s6);
}

.score-total {
  text-align: center;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line-soft);
}

.score-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.score-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  margin-top: 6px;
}

.score-range {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 4px;
}

.score-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.score-delta.is-up {
  background: var(--good-wash);
  color: var(--good);
}

.score-delta.is-down {
  background: var(--bad-wash);
  color: var(--bad);
}

.score-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.score-row-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-2);
}

.score-row-label svg {
  flex: none;
  color: var(--text-3);
}

.score-row strong {
  font-size: 1.15rem;
  font-weight: 700;
}

/* --- Mistake reason picker ---------------------------------------------- */

/* Sits inside an expanded mistake row. The chips are the only place on the
   site where the student tells us something the logged data can't infer, so
   they read as an invitation rather than as metadata. */
.reason-picker {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-soft);
}

.reason-ask {
  margin-bottom: var(--s3);
}

.reason-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.reason-chip {
  padding: 6px 12px;
  border-radius: var(--rp);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background-color 0.14s ease;
}

.reason-chip:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.reason-chip.is-picked {
  background: var(--accent-wash);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* The one thing to do about the reason just picked. A tag without a next
   action is bookkeeping, so this line is the point of the whole control. */
.reason-fix {
  margin-top: var(--s4);
  padding-left: var(--s4);
  border-left: 2px solid var(--accent-line);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 68ch;
}

/* --- Reason mix --------------------------------------------------------- */

.reason-mix {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.reason-row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 2.5rem;
  gap: var(--s4);
  align-items: center;
}

.reason-row-label {
  color: var(--text-2);
  font-weight: 600;
}

.reason-row .num {
  text-align: right;
}

/* Colour carries the diagnosis, not the individual reason: five labels
   collapse into the four kinds a student can actually act on, plus pacing. */
.reason-mix .bar-fill[data-kind="language"] {
  background: var(--d-3);
}
.reason-mix .bar-fill[data-kind="concept"] {
  background: var(--d-1);
}
.reason-mix .bar-fill[data-kind="method"] {
  background: var(--d-2);
}
.reason-mix .bar-fill[data-kind="process"] {
  background: var(--d-4);
}
.reason-mix .bar-fill[data-kind="time"] {
  background: var(--text-3);
}

@media (max-width: 720px) {
  .reason-row {
    grid-template-columns: minmax(0, 1fr) 2.5rem;
  }
  .reason-row .bar {
    grid-column: 1 / -1;
  }
}

/* --- Tablet: 11" iPad in portrait ---------------------------------------- */

/* An 11" iPad portrait is 820-834px wide, which lands inside the 960px rule
   above and gets the phone treatment: navigation hidden behind a hamburger.
   That's the wrong trade on a device with 1180px of height to spare — the SAT
   audience studies on iPads, not phones, and hiding the nav costs a tap on
   every move between the bank, the log and analytics.

   So this range gets an icon rail instead of a drawer. Labels stay visible
   under each icon rather than relying on hover, which doesn't exist on touch.
   Must come after the 960px block to win — same specificity, later wins.

   Below 768px (iPad mini portrait and phones) the drawer is still right, and
   at 1024px and up the full sidebar returns on its own. */
@media (min-width: 768px) and (max-width: 960px) {
  :root {
    --sidebar-w: 92px;
  }

  .sidebar {
    transform: none;
    box-shadow: none;
    padding: var(--s5) var(--s2);
    gap: var(--s4);
  }

  .app-main {
    margin-left: var(--sidebar-w);
  }

  /* No drawer in this range, so neither of its controls should exist. */
  .menu-btn,
  .nav-scrim {
    display: none;
  }

  .sidebar-brand {
    justify-content: center;
    padding: var(--s2) 0 var(--s3);
  }

  .brand-name {
    display: none;
  }

  /* Group headings ("Study", "Account") are the first thing to go: the icons
     and their labels already carry the grouping visually. */
  .nav-group-label {
    display: none;
  }

  .nav-link {
    position: relative;
    flex-direction: column;
    gap: 5px;
    padding: 9px 2px;
    min-height: 58px;
    justify-content: center;
    text-align: center;
    font-size: 0.625rem;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .nav-link + .nav-link {
    margin-top: 4px;
  }

  /* margin-left:auto puts these at the end of a row; in a column that would
     stack them under the label, so they become corner badges instead. */
  .nav-count,
  .nav-tag {
    position: absolute;
    top: 4px;
    right: 6px;
    margin-left: 0;
    padding: 1px 5px;
    font-size: 0.5625rem;
    letter-spacing: 0.04em;
  }

  .theme-toggle {
    gap: 2px;
    padding: 2px;
  }

  .user-card {
    justify-content: center;
    padding: 9px 4px;
  }

  .user-card .grow,
  .user-card > svg {
    display: none;
  }

  .topbar,
  .page {
    padding-left: var(--s6);
    padding-right: var(--s6);
  }
}

/* --- Touch targets ------------------------------------------------------- */

/* Anything driven by a finger rather than a cursor. Scoped to coarse pointers
   so the desktop density is untouched. The reason chips are the main reason
   this exists: they're the one control a student taps repeatedly, and at
   desktop size they sit well under the 44px Apple and WCAG both ask for. */
@media (pointer: coarse) {
  .reason-chip {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.8125rem;
  }

  .reason-chips {
    gap: var(--s3);
  }

  .mistake-head {
    padding: var(--s5);
  }

  .select,
  .btn-sm {
    min-height: 40px;
  }
}

/* Question HTML shown in the question-bank ID preview. base.css strips list
   bullets and stretches every table to full width; the practice screen gets
   these back from exam.css, which this page doesn't load. Same rules as the
   answers page (test-answers.html) uses for the same classes. */
#bank-id-preview .note-list {
  list-style: disc;
  margin: 10px 0 0;
  padding-left: 22px;
}

#bank-id-preview .note-list li {
  margin-bottom: 8px;
  line-height: 1.5;
}

#bank-id-preview .q-table {
  width: auto;
  margin: 16px auto;
  border-collapse: collapse;
  font-size: 0.98rem;
}

#bank-id-preview .q-table th,
#bank-id-preview .q-table td {
  border: 1px solid var(--line);
  padding: 7px 16px;
  text-align: center;
}

#bank-id-preview .q-table th {
  font-weight: 600;
  background: var(--surface-2);
}

#bank-id-preview .q-table caption {
  font-weight: 600;
  padding-bottom: 6px;
}

/* A choice can be a graph. Its SVG carries only a viewBox, so inside the
   flex row an unsized <img> collapsed to 0 px (6e6a3241's four graphs were
   empty boxes), while a PNG choice stretched across the whole card, 911 px
   each (36f068e2), 4 Oct 2026. Same 240 px as the exam screens. */
#bank-id-preview .bank-ctext {
  min-width: 0;
}

#bank-id-preview .bank-ctext .q-figure {
  margin: 4px 0;
}

#bank-id-preview .bank-ctext img {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
}

/* --- Practice tests: number chip + accommodations ----------------------- */

/* The date block's shape, carrying the test number instead of a date. */
.num-chip strong {
  font-size: 1.9rem;
}

.acc-strip {
  flex-wrap: wrap;
}

.acc-strip .module-pill {
  flex: 1 1 auto;
}

.module-pill.is-break {
  border-style: dashed;
}

.acc-saved {
  margin-top: calc(var(--s4) * -0.5);
  color: var(--accent);
}

/* Native <dialog>: showModal() gives the backdrop, Esc and the focus trap.
   Only the open state sets display, so a closed dialog keeps the UA's
   display:none. */
.acc-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
  overflow: auto;
}

.acc-dialog::backdrop {
  background: rgba(3, 9, 8, 0.66);
  backdrop-filter: blur(3px);
}

.acc-form {
  padding: var(--s6);
}

.acc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
}

.acc-group {
  margin: var(--s6) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.acc-legend {
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.acc-hint {
  margin: 4px 0 var(--s3);
}

.acc-group > .acc-legend + .acc-opt {
  margin-top: var(--s3);
}

.acc-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.acc-opt + .acc-opt {
  margin-top: var(--s2);
}

.acc-opt:hover {
  border-color: var(--accent-line);
}

.acc-opt:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-wash);
}

.acc-opt:has(input:disabled) {
  cursor: default;
}

.acc-opt input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: inherit;
}

.acc-opt-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.acc-opt-title {
  font-weight: 600;
}

.acc-opt-sub {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-2);
}

.acc-tag {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--rp);
  background: var(--surface-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-2);
}

.acc-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s3);
  margin-top: var(--s6);
}

@media (max-width: 520px) {
  .acc-form {
    padding: var(--s5) var(--s4);
  }
  .acc-foot .btn {
    flex: 1;
  }
}

/* --- White-label (brand.js) --------------------------------------------- */

.brand-logo {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  object-fit: contain;
}

.brand-name-co {
  font-size: 1.05rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 170px;
}

.powered-by {
  padding: 0 var(--s3);
  margin-top: calc(var(--s2) * -1);
  font-size: 0.625rem;
  letter-spacing: 0.02em;
}

/* --- Lesson impact (lessons.js impactHtml) ------------------------------ */

.imp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s6);
}

.imp-cells {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s2);
}

.imp-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 92px;
  padding: 7px 11px;
  border-radius: var(--r1);
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: 0.6875rem;
  color: var(--text-3);
}

.imp-cell b {
  font-size: 1.05rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.imp-k {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.imp-none {
  font-size: 0.75rem;
  color: var(--text-3);
  padding: 3px 0;
}

.imp-arrow {
  align-self: center;
  color: var(--text-3);
}

.imp-effects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: 0.75rem;
  color: var(--text-2);
}

.imp-eff {
  font-variant-numeric: tabular-nums;
}

.imp-eff.up {
  color: var(--good);
}

.imp-eff.down {
  color: var(--bad);
}

/* Smaller than chance alone moves that many questions (lessons.js noise()). */
.imp-eff.is-noise {
  color: var(--text-3);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

/* --- Calendar ------------------------------------------------------------ */

.cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: var(--s5);
  align-items: start;
}

.cal-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.cal-head .h2 {
  flex: 1;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: var(--s4);
}

.cal-dow {
  padding: 0 4px 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-height: 84px;
  padding: 6px;
  border-radius: var(--r1);
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  text-align: left;
  min-width: 0;
}

.cal-day:hover {
  border-color: var(--accent-line);
}

.cal-day.is-out {
  opacity: 0.4;
}

.cal-day.is-today .cal-num {
  background: var(--accent);
  color: var(--accent-ink);
}

.cal-day[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.cal-num {
  align-self: flex-start;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: var(--rp);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cal-ev {
  display: block;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--accent-wash);
  color: var(--accent);
}

.cal-ev.is-due {
  background: var(--warn-wash);
  color: var(--warn);
}

.cal-evs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cal-more {
  font-size: 0.625rem;
  color: var(--text-3);
  padding-left: 6px;
}

.agenda-item {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line-soft);
}

.agenda-item:first-child {
  border-top: none;
}

.agenda-bar {
  width: 4px;
  flex: none;
  border-radius: 4px;
  background: var(--accent);
}

.agenda-item.is-due .agenda-bar {
  background: var(--warn);
}

.agenda-body {
  flex: 1;
  min-width: 0;
}

.agenda-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s2);
}

.next-lesson {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5) var(--s7);
  border-color: var(--accent-line);
  background: linear-gradient(120deg, var(--accent-wash), transparent 70%), var(--surface);
}

.next-lesson .grow {
  flex: 1 1 320px;
  min-width: 0;
}

.next-when {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.past-lesson {
  padding: var(--s5) 0;
  border-top: 1px solid var(--line-soft);
}

.past-lesson:first-child {
  border-top: none;
  padding-top: 0;
}

.rules-list {
  margin-top: var(--s3);
  padding-left: 1.2em;
  list-style: decimal;
}

.rules-list li + li {
  margin-top: 4px;
}

/* The sidebar takes 264px, so below ~1200px the month grid and the agenda
   no longer both fit; the agenda drops under the grid. */
@media (max-width: 1200px) {
  .cal-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A phone has no room for event titles in a seven-column grid; a dot per day
   says "something is on" and the agenda beside it says what. */
@media (max-width: 620px) {
  .cal-day {
    min-height: 46px;
    padding: 4px;
  }
  .cal-evs {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cal-ev {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    background: var(--accent);
  }
  .cal-ev.is-due {
    background: var(--warn);
  }
  .cal-more {
    display: none;
  }
}

/* Same message box mentor.html defines inline, shared by the student
   pages. */
.notice {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r2);
  font-size: 0.85rem;
  font-weight: 600;
}

.notice.bad {
  background: var(--bad-wash);
  color: var(--bad);
}

.notice.good {
  background: var(--good-wash);
  color: var(--good);
}

/* A mentor viewing a student's account (shell.js). */
.notice.view-only-note {
  background: var(--accent-wash);
  color: var(--text);
  font-weight: 500;
}

.quickdate {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --- Drills hub (drills.html) -------------------------------------------- */

.drill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: var(--s5);
}

.drill-card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6);
  border-radius: var(--r3);
  border: 1px solid var(--line);
  background: radial-gradient(120% 130% at 0% 0%, var(--accent-wash), transparent 62%),
    var(--surface);
}

.drill-card-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.drill-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r2);
  border: 1px solid var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent);
}

.drill-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.drill-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  font-size: 0.875rem;
  color: var(--text-2);
}

.drill-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.drill-meta .m-level svg {
  color: var(--warn);
}

.drill-meta .m-streak svg {
  color: var(--d-3);
}

.drill-meta .m-attempts svg {
  color: var(--good);
}

.drill-meta .m-level.is-mastered {
  color: var(--accent);
  font-weight: 600;
}

.drill-meta .m-level.is-mastered svg {
  color: var(--accent);
}

.drill-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: auto;
}

.drill-card .drill-actions .btn-primary {
  flex: 1;
}

.drill-actions-end {
  justify-content: flex-end;
  margin-top: var(--s5);
}

.drill-stage {
  max-width: 780px;
  margin: 0 auto;
}

.drill-preview-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  max-width: 780px;
  margin: 0 auto var(--s5);
  font-size: 0.875rem;
  color: var(--text-2);
}

.drill-panel {
  padding: var(--s6);
  border-radius: var(--r3);
  border: 1px solid var(--line);
  background: var(--surface);
}

.drill-panel + .drill-panel,
.drill-result-grid + .drill-panel,
.drill-panel + .drill-result-grid {
  margin-top: var(--s5);
}

.drill-panel .drill-actions {
  margin-top: var(--s5);
}

.drill-steps {
  margin: var(--s4) 0;
  padding-left: 1.25em;
  color: var(--text-2);
}

.drill-steps li + li {
  margin-top: 4px;
}

/* Level ladder: Lv1-5 plus the Mastered goal */
.drill-ladder {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s2);
  margin: var(--s5) 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 640px) {
  .drill-ladder {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.drill-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--s3) var(--s2);
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}

.drill-step-n {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-3);
}

.drill-step-name {
  font-size: 0.875rem;
  font-weight: 600;
}

.drill-step-time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-3);
}

.drill-step.is-done {
  border-color: var(--accent-line);
}

.drill-step.is-done .drill-step-n {
  color: var(--accent);
}

.drill-step.is-current {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 1px var(--accent-line);
}

.drill-step.is-current .drill-step-n,
.drill-step.is-current .drill-step-time {
  color: var(--accent);
}

.drill-step.is-locked {
  opacity: 0.55;
}

.drill-step.is-soon .drill-step-time {
  color: var(--warn);
}

.drill-step-goal .drill-step-n {
  color: var(--warn);
}

/* Timed reading */
.drill-runbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s3);
}

.drill-timer {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.drill-timer.is-low {
  color: var(--warn);
}

.drill-bar {
  height: 4px;
  margin-bottom: var(--s5);
  border-radius: var(--rp);
  background: var(--surface-3);
  overflow: hidden;
}

.drill-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--accent);
}

/* The passage sits on white paper in both themes, like the exam screen:
   studying should feel academic, not themed. */
.drill-paper {
  padding: var(--s7);
  border-radius: var(--r3);
  border: 1px solid #d9dee0;
  background: #ffffff;
  color: #1b1b1b;
  font-family: "Noto Serif", "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-user-select: none;
  user-select: none;
}

.drill-paper-flat {
  margin-top: var(--s3);
  padding: var(--s5) var(--s6);
  -webkit-user-select: text;
  user-select: text;
}

@media (max-width: 560px) {
  .drill-paper {
    padding: var(--s5);
  }
}

/* Recall and result */
.drill-recall {
  min-height: 260px;
  resize: vertical;
  font-size: 1rem;
  line-height: 1.65;
}

.drill-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
}

.drill-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
}

.drill-result-grid .drill-panel + .drill-panel {
  margin-top: 0;
}

@media (max-width: 760px) {
  .drill-result-grid {
    grid-template-columns: 1fr;
  }
}

.drill-text {
  margin-top: var(--s3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.drill-points {
  margin: 6px 0 0;
  padding-left: 1.2em;
  color: var(--text-2);
  font-size: 0.9rem;
}

.drill-points li + li {
  margin-top: 5px;
}

/* Rubric points that cost the most when missed. */
.drill-key {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warn-wash);
  color: var(--warn);
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: 1px;
}

/* AI marks next to each rubric point (drill-score). */
.drill-mark {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: 1px;
}

.drill-mark-captured {
  background: var(--good-wash);
  color: var(--good);
}

.drill-mark-partial {
  background: var(--warn-wash);
  color: var(--warn);
}

.drill-mark-missed {
  background: var(--bad-wash);
  color: var(--bad);
}

.drill-wrong {
  margin-top: var(--s3);
  color: var(--bad);
}

/* History */
.drill-hist-row {
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface);
}

.drill-hist-row + .drill-hist-row {
  margin-top: var(--s3);
}

.drill-hist-row summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  cursor: pointer;
  list-style: none;
}

.drill-hist-row summary::-webkit-details-marker {
  display: none;
}

.drill-hist-row[open] summary {
  border-bottom: 1px solid var(--line-soft);
}

.drill-hist-date {
  flex: none;
}

.drill-hist-snip {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
  font-size: 0.9rem;
}

.drill-hist-body {
  padding: var(--s4) var(--s5) var(--s5);
}

@media (max-width: 560px) {
  .drill-hist-date {
    display: none;
  }
}

/* Drills: optional voice input on the recall step */
.drill-recall-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
}

.drill-mic.is-on {
  border-color: var(--bad);
  background: var(--bad-wash);
  color: var(--bad);
}

.drill-mic-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--bad);
}

.drill-mic-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: drill-mic-pulse 1.2s ease-in-out infinite;
}

@keyframes drill-mic-pulse {
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drill-mic-dot {
    animation: none;
  }
}

.drill-recall[readonly] {
  cursor: default;
  border-color: var(--bad);
}

.drill-mic-note {
  margin-top: var(--s3);
  color: var(--warn);
}

.drill-mic-fine {
  margin-top: var(--s3);
}

/* --- Share card (test-result.html, assets/js/share-card.js) -------------- */
.share-dialog {
  width: min(860px, calc(100vw - 32px));
  overflow-x: hidden;
}

.share-body {
  padding: var(--s6);
}

.share-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s6);
  margin-top: var(--s5);
  align-items: start;
}

.share-preview canvas {
  display: block;
  height: min(62vh, 560px);
  width: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--r3);
  border: 1px solid var(--line);
  background: #0a0b0c;
}

.share-side {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
}

.share-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.share-check {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.9rem;
  cursor: pointer;
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

@media (max-width: 640px) {
  .share-layout {
    grid-template-columns: 1fr;
  }
  .share-preview canvas {
    height: auto;
    width: 100%;
  }
}