/* ===================================================================
   SparkQuiz — design tokens
   Light: warm violet-on-white, soft lilac surfaces.
   Dark:  deep indigo-black, glowing violet accent.
   =================================================================== */

:root {
  --bg: #EEEAFA;
  --bg-wash-1: rgba(108, 92, 231, 0.14);
  --bg-wash-2: rgba(253, 203, 110, 0.16);
  --surface: #FFFFFF;
  --surface-2: #F1EEFA;
  --text: #17172B;
  --text-soft: #62617A;
  --border: #DFDAF3;

  --primary: #6C5CE7;
  --primary-dark: #5647c9;
  --primary-tint: #EDE9FE;
  --accent: #FDCB6E;
  --accent-dark: #E8A93C;
  --correct: #00B894;
  --correct-tint: #DAF7EE;
  --wrong: #FF5252;
  --wrong-tint: #FFE3E3;
  /* Darker, text-safe variants of correct/wrong. --correct/--wrong are tuned
     to look good as borders and accents, but are too light to read as text
     on white/tinted surfaces (their base form is ~2.5:1 contrast — well
     under the 4.5:1 needed for body text). These pass 4.5:1+ wherever
     used as text or as a solid fill behind white text. */
  --correct-text: #0B7A54;
  --wrong-text: #C6362E;
  --correct-strong: #0B7A54;
  --wrong-strong: #C6362E;

  --shadow: 0 14px 34px -14px rgba(108, 92, 231, 0.35);
  --shadow-sm: 0 6px 16px -8px rgba(27, 27, 47, 0.14);
  --shadow-lg: 0 24px 55px -20px rgba(27, 27, 47, 0.28);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  /* Subject accent palette — 12 curated colors (not free-form hex).
     Each is tuned separately for light/dark down in the theme block below,
     so every subject color reads clearly against both surfaces. */
  --palette-violet:  #6C5CE7;
  --palette-indigo:  #4C6FFF;
  --palette-sky:     #0EA5E9;
  --palette-teal:    #00B894;
  --palette-emerald: #10B981;
  --palette-lime:    #84A80D;
  --palette-amber:   #DB8B00;
  --palette-orange:  #E4772A;
  --palette-coral:   #FF6B6B;
  --palette-rose:    #F43F5E;
  --palette-fuchsia: #C026D3;
  --palette-slate:   #64748B;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0C0B16;
  --bg-wash-1: rgba(140, 124, 240, 0.20);
  --bg-wash-2: rgba(253, 203, 110, 0.10);
  --surface: #1B1A2C;
  --surface-2: #262439;
  --text: #F1F0FA;
  --text-soft: #A4A2C2;
  --border: #363454;

  --primary: #8C7CF0;
  --primary-dark: #A79BFF;
  --primary-tint: #2A2650;
  --accent: #FDCB6E;
  --accent-dark: #FFD98A;
  --correct: #35D399;
  --correct-tint: #123527;
  --wrong: #FF6B6B;
  --wrong-tint: #3A1A1F;
  /* In dark mode the base correct/wrong colors are already light enough to
     read as text against the dark surfaces, so text usage just reuses them.
     The "strong" fills stay the same darker shades as light mode — they're
     for a small solid circle behind a white letter, and need to stay dark
     regardless of theme for that letter to stay legible. */
  --correct-text: #35D399;
  --wrong-text: #FF6B6B;

  --palette-violet:  #8C7CF0;
  --palette-indigo:  #7C93FF;
  --palette-sky:     #38BDF8;
  --palette-teal:    #35D399;
  --palette-emerald: #34D399;
  --palette-lime:    #A3E635;
  --palette-amber:   #FBBF24;
  --palette-orange:  #FFA65C;
  --palette-coral:   #FF8787;
  --palette-rose:    #FB7185;
  --palette-fuchsia: #E879F9;
  --palette-slate:   #94A3B8;

  --shadow: 0 14px 38px -12px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 26px 65px -20px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  scroll-padding-bottom: 96px;
}

/* The top bar collapses away during a quiz attempt, so there's no longer
   anything up there to clear space for. */
body:has(#view-quiz:not([hidden])) {
  scroll-padding-top: 20px;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(900px circle at 8% -10%, var(--bg-wash-1), transparent 55%),
    radial-gradient(800px circle at 100% 0%, var(--bg-wash-2), transparent 50%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

button { font-family: inherit; }

/* Gentle fade whenever a view becomes visible — replaces the old hard cut */
.view:not([hidden]) {
  animation: viewFade 0.28s ease;
}
@keyframes viewFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------ Top bar ------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(20px, 4vw, 64px);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  max-height: 88px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.32s ease, opacity 0.22s ease, padding 0.32s ease, border-color 0.32s ease;
}

/* While a quiz is being attempted, tuck the brand bar away entirely so the
   question gets the full screen — the in-quiz header still has its own
   "← Exit" control, so nothing is lost. */
body:has(#view-quiz:not([hidden])) .topbar {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  border-bottom-color: transparent;
  pointer-events: none;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}

.topbar__mark {
  font-size: 22px;
  filter: drop-shadow(0 2px 6px rgba(253, 203, 110, 0.5));
}

/* Used if the emoji mark above is swapped for a real logo image */
.topbar__logo {
  height: 26px;
  width: auto;
  display: block;
}

.topbar__name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.topbar__actions {
  display: flex;
  gap: 8px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--primary); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0); }

/* ------------------------------ Layout ------------------------------ */

main#app {
  max-width: 1520px;
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 64px) 60px;
}

.view[hidden] { display: none; }

.hero { margin-bottom: 32px; max-width: 60ch; }
.hero--compact { margin-bottom: 24px; }

.crumb-row { margin-bottom: 10px; }
.crumb-row .text-btn { padding-left: 0; }

.hero h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  background: linear-gradient(100deg, var(--text) 40%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p {
  color: var(--text-soft);
  margin: 0;
  font-size: 1rem;
}

/* ------------------------------ Subject cards ------------------------------ */

.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.subject-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 22px 22px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.subject-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--card-color, var(--primary)) 45%, var(--border));
}

/* Top accent bar in the card's own color */
.subject-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--card-color, var(--primary)), color-mix(in srgb, var(--card-color, var(--primary)) 55%, var(--accent)));
}

/* Soft colorwash blob in the top-right corner */
.subject-card::after {
  content: "";
  position: absolute;
  top: -45%;
  right: -20%;
  width: 70%;
  padding-bottom: 70%;
  border-radius: 50%;
  background: var(--card-color, var(--primary));
  opacity: 0.08;
  pointer-events: none;
}

.subject-card__name {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 12px;
  position: relative;
}

/* Only quiz rows use this now (subjects/topics dropped their descriptions),
   so it stays but is no longer part of the subject card markup. */
.subject-card__desc {
  font-size: 0.88rem;
  color: var(--text-soft);
  margin: 0 0 14px;
  position: relative;
  min-height: 2.6em;
}

.subject-card__count {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  color: var(--card-color, var(--primary));
  background: color-mix(in srgb, var(--card-color, var(--primary)) 14%, var(--surface));
  position: relative;
}

/* The "Saved questions" card in a subject's Topics view — same shape as a
   regular topic card, but its top accent bar and glow always use the
   fixed accent color instead of the subject's own palette, so it reads
   as "a bookmark shelf", not just another topic. */
.subject-card--saved::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}
.subject-card--saved::after { background: var(--accent); }
.subject-card--saved:hover {
  border-color: color-mix(in srgb, var(--accent-dark) 45%, var(--border));
}
.subject-card--saved .subject-card__count {
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent-dark) 14%, var(--surface));
}

/* ------------------------------ Quiz list ------------------------------
   Subjects and topics use the big subject-card grid above; quizzes inside
   a topic use this horizontal row layout instead — one row per quiz,
   scannable top-to-bottom, with room for its description alongside the
   name and question count. */

.quiz-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--card-color, var(--primary));
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.quiz-row:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--card-color, var(--primary)) 45%, var(--border));
  border-left-color: var(--card-color, var(--primary));
}

.quiz-row__body {
  flex: 1;
  min-width: 0;
}

.quiz-row__name {
  font-weight: 700;
  font-size: 0.98rem;
  margin: 0 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiz-row__desc {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiz-row__count {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 99px;
  color: var(--card-color, var(--primary));
  background: color-mix(in srgb, var(--card-color, var(--primary)) 14%, var(--surface));
  flex: none;
  white-space: nowrap;
}

.quiz-row__chevron {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-soft);
  transition: transform 0.15s ease, color 0.15s ease;
}

.quiz-row:hover .quiz-row__chevron {
  transform: translateX(3px);
  color: var(--card-color, var(--primary));
}

@media (max-width: 560px) {
  .quiz-row__desc { display: none; }
  .quiz-row__count { display: none; }
}

.skeleton-card {
  height: 168px;
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}

.skeleton-row {
  height: 78px;
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

/* =====================================================================
   Quiz view — two-column shell: question column + palette sidebar
   ===================================================================== */

.quiz-shell {
  max-width: 100%;
}

.quiz-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 36px;
}

.quiz-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ------------------------------ Quiz header ------------------------------ */

.quiz-header {
  margin-bottom: 16px;
}

.quiz-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.quiz-header__top h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  text-align: center;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.text-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.text-btn:hover { background: var(--primary-tint); }

/* On desktop the palette is always visible as a sidebar, so the header toggle
   button is redundant there — it only earns its place back on small screens. */
.palette-toggle { display: none; }

.progress-track {
  height: 8px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 10%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 99px;
  transition: width 0.35s ease;
}

.quiz-header__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ Question card ------------------------------ */

.question-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--primary-tint);
  color: var(--primary);
  margin-bottom: 12px;
}

/* Row holding the type badge and the save/bookmark toggle side by side */
.question-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.question-card__header .badge { margin-bottom: 0; }

.save-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  margin-bottom: 12px;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.save-btn:hover:not(:disabled) {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
  transform: translateY(-1px);
}
.save-btn:active:not(:disabled) { transform: scale(0.95); }
.save-btn:disabled { opacity: 0.6; cursor: default; }

/* Saved state — filled bookmark in the accent color, so it reads at a
   glance without needing to check aria-pressed or hover for a tooltip. */
.save-btn.is-saved {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #241a00;
}
.save-btn.is-saved svg { fill: currentColor; }
.save-btn.is-saved:hover:not(:disabled) {
  background: var(--accent-dark);
  color: #241a00;
}

.question-text {
  font-size: 1.15rem;
  line-height: 1.6;
  font-weight: 500;
  margin: 0 0 18px;
  white-space: pre-line;
  max-width: 80ch;
}

.table-wrap {
  overflow-x: auto;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}

.table-wrap th, .table-wrap td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table-wrap th {
  background: var(--surface-2);
  font-weight: 700;
}

.table-wrap tr:last-child td { border-bottom: none; }

.options-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Two columns once there's enough room, so four short options take half
   the vertical space instead of stacking the whole way down the screen. */
@media (min-width: 760px) {
  .options-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.option-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.55;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.option-btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-tint);
  box-shadow: var(--shadow-sm);
}

.option-btn:active:not(:disabled) { transform: scale(0.99); }

.option-btn__marker {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-soft);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.option-btn:disabled { cursor: default; }

.option-btn.is-correct {
  border-color: var(--correct);
  background: var(--correct-tint);
}
.option-btn.is-correct .option-btn__marker {
  border-color: var(--correct-strong);
  background: var(--correct-strong);
  color: #fff;
}

.option-btn.is-wrong {
  border-color: var(--wrong);
  background: var(--wrong-tint);
}
.option-btn.is-wrong .option-btn__marker {
  border-color: var(--wrong-strong);
  background: var(--wrong-strong);
  color: #fff;
}

.option-btn.is-dimmed { opacity: 0.55; }

.solution-box {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border-left: 4px solid var(--primary);
  animation: reveal 0.25s ease;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.solution-box__label {
  font-weight: 800;
  font-size: 0.85rem;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.solution-box__label.is-correct { color: var(--correct-text); }
.solution-box__label.is-wrong { color: var(--wrong-text); }

.solution-box p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ------------------------------ Nav bar ------------------------------ */

.quiz-nav {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 12px;
  padding: 16px 0;
  margin-top: 4px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 20px -12px rgba(0, 0, 0, 0.12);
}

.btn {
  flex: 1;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
.btn--primary:hover:not(:disabled) { box-shadow: var(--shadow-sm); filter: brightness(1.06); }

.btn--accent { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #241a00; }
.btn--accent:hover:not(:disabled) { box-shadow: var(--shadow-sm); filter: brightness(1.05); }

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); }

/* ------------------------------ Result view ------------------------------ */

.result-card {
  max-width: 420px;
  margin: 30px auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.result-ring {
  width: 132px;
  height: 132px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--primary) var(--pct, 70%), var(--surface-2) 0);
}

.result-ring span {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--surface);
  font-size: 1.3rem;
  font-weight: 800;
}

.result-card h2 {
  margin: 0 0 20px;
  font-size: 1.3rem;
}

.result-stats {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 26px;
}

.stat { display: flex; flex-direction: column; align-items: center; }
.stat span { font-size: 1.3rem; font-weight: 800; }
.stat small { color: var(--text-soft); font-size: 0.78rem; }
.stat--correct span { color: var(--correct-text); }
.stat--wrong span { color: var(--wrong-text); }
.stat--skip span { color: var(--text-soft); }

.result-actions { display: flex; gap: 12px; }

/* ------------------------------ History ------------------------------ */

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.history-item:hover { border-color: var(--primary); }

.history-item__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--card-color, var(--primary));
  flex: none;
}

.history-item__body { flex: 1; min-width: 0; }
.history-item__title { font-weight: 700; margin: 0 0 3px; }
.history-item__meta { font-size: 0.82rem; color: var(--text-soft); margin: 0; }

.history-item__score {
  font-weight: 800;
  font-size: 1.05rem;
  flex: none;
}

/* ------------------------------ Palette panel ------------------------------
   Desktop: a persistent, always-visible sidebar card next to the question.
   Mobile:  reverts to a full-screen dimmed overlay with a slide-up drawer,
            toggled by the "Palette" button in the quiz header.
   ---------------------------------------------------------------------- */

.palette-panel {
  position: sticky;
  top: 24px;
}

/* Ignore the `hidden` attribute on desktop — the sidebar always shows */
.palette-panel[hidden] {
  display: block;
}

.palette-drawer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  max-height: calc(100vh - 56px);
  overflow-y: auto;
}

.palette-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.palette-drawer__header h3 { margin: 0; font-size: 1.02rem; }

/* The close button only makes sense inside the mobile drawer */
#closePaletteBtn { display: none; }

.palette-legend {
  display: flex;
  gap: 14px;
  font-size: 0.78rem;
  color: var(--text-soft);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.palette-legend span { display: flex; align-items: center; gap: 6px; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot--answered { background: var(--correct); }
.dot--wrong { background: var(--wrong); }
.dot--current { background: var(--primary); }
.dot--unanswered { background: var(--border); }
.dot--current-ring { background: var(--surface); border: 2px solid var(--primary); }

.palette-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.palette-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.palette-cell:hover { border-color: var(--primary); transform: translateY(-1px); }

.palette-cell.is-correct { background: var(--correct-tint); border-color: var(--correct); color: var(--correct-text); }
.palette-cell.is-wrong { background: var(--wrong-tint); border-color: var(--wrong); color: var(--wrong-text); }

/* "Current" is an overlay ring, not a fill — so it stays visible on top of
   whichever color (correct/wrong/unanswered) the cell already has, instead
   of masking it. This is what keeps the palette in sync with Prev/Next:
   the ring always tracks quiz.currentIndex, and the fill always tracks the
   answer, independently of each other. */
.palette-cell.is-current {
  outline: 2.5px solid var(--primary);
  outline-offset: 2px;
}

/* ------------------------------ Subject choice modal ------------------------------ */

.choice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 30, 0.45);
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.choice-overlay[hidden] { display: none; }

.choice-modal {
  width: min(400px, 100%);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  animation: popIn 0.18s ease;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.choice-modal h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
}

.choice-modal__sub {
  margin: 0 0 18px;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.choice-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.choice-option:hover { border-color: var(--primary); background: var(--primary-tint); }
.choice-option:active { transform: scale(0.99); }

.choice-option__icon {
  font-size: 22px;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
}

.choice-option__text { display: flex; flex-direction: column; color: var(--text); }
.choice-option__text strong { font-size: 0.96rem; font-weight: 700; }
.choice-option__text small { color: var(--text-soft); font-size: 0.8rem; margin-top: 2px; }

#closeChoiceBtn { display: block; margin: 4px auto 0; }

/* Small "revision" tag on history items */
.history-item__tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--accent);
  color: #241a00;
  flex: none;
}

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

/* Below this width there isn't room for a 296px sidebar alongside a
   comfortable reading column, so the palette becomes a full-screen
   drawer instead, opened via the header's "Palette" button. */
@media (max-width: 900px) {
  .quiz-layout {
    display: block;
  }

  .palette-toggle { display: inline-flex; }

  .palette-panel {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(10, 8, 30, 0.45);
  }
  .palette-panel[hidden] { display: none; }

  .palette-drawer {
    width: 100%;
    max-width: 480px;
    max-height: 78vh;
    border-radius: 20px 20px 0 0;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.22s ease;
  }
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  #closePaletteBtn { display: grid; }
}

@media (max-width: 640px) {
  main#app { padding: 24px 16px 88px; }
  .topbar { padding: 14px 18px; }
  .question-card { padding: 20px; }
  .question-text { font-size: 1.1rem; }
  .result-stats { gap: 14px; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Visible keyboard focus */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}