/* ──────────────────────────────────────────────────────────────────────────
   Light theme — academic palette.
   Tailwind handles layout; this file covers what Tailwind can't express
   cleanly: the SVG sprite defaults, answer-state colours, form controls,
   and the print stylesheet.
   ────────────────────────────────────────────────────────────────────────── */

/* ── SVG sprite defaults ──────────────────────────────────────────────── */
/* <use> can't inherit stroke presentation attrs from the symbol, so set them
   on the host <svg> here rather than repeating them on every icon. */
.icon,
.icon-sm,
.icon-lg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon    { width: 1rem;    height: 1rem; }
.icon-sm { width: .875rem; height: .875rem; }
.icon-lg { width: 1.25rem; height: 1.25rem; }

/* ── Toggle switch ────────────────────────────────────────────────────── */
.toggle-switch { position: relative; display: inline-block; cursor: pointer; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  display: block;
  width: 44px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background .2s;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.toggle-switch input:checked + .toggle-track { background: #4f46e5; }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(20px); }
.toggle-switch input:focus-visible + .toggle-track { outline: 2px solid #4f46e5; outline-offset: 2px; }
.toggle-switch input:disabled + .toggle-track { opacity: .5; cursor: not-allowed; }

/* ── Range slider ─────────────────────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4f46e5;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  transition: box-shadow .15s;
}
input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(79, 70, 229, .15); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: #e2e8f0; }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #4f46e5; border: 2px solid #fff;
}

/* ── Keyboard hint ────────────────────────────────────────────────────── */
.kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #fff;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  line-height: 1.4;
  color: #475569;
}

/* ── Answer states ────────────────────────────────────────────────────────
   Driven by JS adding a class after /api/answer responds. `!important` is
   deliberate: it overrides the Tailwind utilities on the same element. */
.option-btn { transition: border-color .15s, background-color .15s, transform .1s; }

.option-btn.is-selected {
  border-color: #4f46e5 !important;
  background: #eef2ff !important;
}
.option-btn.is-selected .option-badge { background: #4f46e5 !important; color: #fff !important; }

.option-btn.is-correct {
  border-color: #059669 !important;
  background: #ecfdf5 !important;
}
.option-btn.is-correct .option-badge { background: #059669 !important; color: #fff !important; }

.option-btn.is-wrong {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
}
.option-btn.is-wrong .option-badge { background: #dc2626 !important; color: #fff !important; }

.option-btn:disabled { cursor: default; }
.option-btn:not(:disabled):hover { border-color: #94a3b8; background: #f8fafc; }
.option-btn:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

/* ── Timer urgency (exam mode) ────────────────────────────────────────── */
.timer-warn   { color: #d97706; }
.timer-danger { color: #dc2626; animation: pulse-danger 1s ease-in-out infinite; }
@keyframes pulse-danger {
  50% { opacity: .55; }
}

/* ── Details / accordion ──────────────────────────────────────────────── */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
details[open] > summary ~ * { animation: fadeIn .2s ease-out both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Scrollbar ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; border: 2px solid #f1f5f9; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Motion & accessibility ───────────────────────────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Print (results as PDF) ───────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }

  body { background: #fff !important; }

  /* Force backgrounds/colours through in print. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Expand every review accordion so the printout is complete. */
  details { open: true; }
  details > div { display: block !important; }

  .print-card {
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  a[href]::after { content: ""; }
  @page { margin: 1.5cm; }
}