/* EpiDrill — graphite on paper, ballpoint blue, one highlighter.
   Tailwind (CDN) handles layout; this file holds the shared pieces. */

:root {
  --paper: #F7F8F5;
  --sheet: #FFFFFF;
  --graphite: #26282C;
  --graphite-soft: #5B5F66;
  --rule: #DCDFD8;
  --ink: #1E3FA0;
  --ink-dark: #16307D;
  --highlight: #F7E15A;
  --correct: #1C7A4A;
  --wrong: #B3261E;
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--graphite);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "tnum" 0;
}
.tabular { font-variant-numeric: tabular-nums; }

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--ink-dark); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Form controls ---------- */
:where(.input, .textarea, .select) { width: 100%; }
.input, .textarea, .select {
  display: block;
  background: var(--sheet);
  border: 1.5px solid #C9CDC5;
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-size: 16px; /* stops iOS zooming into fields */
  color: var(--graphite);
  transition: border-color .15s ease;
}
.textarea { min-height: 6rem; resize: vertical; }
.input:hover, .textarea:hover, .select:hover { border-color: #A9AEA5; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(30, 63, 160, .14);
}
.input-error, .input-error:hover { border-color: var(--wrong); }

.check {
  width: 1.15rem; height: 1.15rem;
  accent-color: var(--ink);
  flex: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 8px;
  padding: 0.65rem 1.1rem;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-dark); color: #fff; }
.btn-quiet { background: var(--sheet); color: var(--graphite); border-color: var(--rule); }
.btn-quiet:hover { border-color: #A9AEA5; color: var(--graphite); }
.btn-danger { background: var(--sheet); color: var(--wrong); border-color: #EBC7C3; }
.btn-danger:hover { background: #FBEAE8; color: var(--wrong); }
.btn-small { padding: .4rem .7rem; font-size: 14px; border-radius: 7px; }
.btn-icon { padding: .35rem; border-radius: 7px; color: var(--graphite-soft); background: transparent; border: 1.5px solid transparent; }
.btn-icon:hover:not(:disabled) { border-color: var(--rule); background: var(--sheet); color: var(--graphite); }
.btn-icon:disabled { opacity: .3; cursor: default; }

/* ---------- Answer-sheet bubbles ---------- */
.bubble {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--graphite);
  font-size: 13px; font-weight: 700;
  color: var(--graphite);
  flex: none;
  overflow: hidden;
  isolation: isolate;
}
/* The pencil fill: grows from the centre like a shaded bubble. */
.bubble::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: var(--graphite);
  transform: scale(0);
  transition: transform .28s cubic-bezier(.3, .7, .2, 1);
  z-index: -1;
}
.option[aria-pressed="true"] .bubble { color: #fff; }
.option[aria-pressed="true"] .bubble::before { transform: scale(1); }
.option.is-correct .bubble { border-color: var(--correct); }
.option.is-correct .bubble::before { background: var(--correct); transform: scale(1); }
.option.is-correct .bubble { color: #fff; }
.option.is-wrong .bubble { border-color: var(--wrong); }
.option.is-wrong .bubble::before { background: var(--wrong); }

.option {
  display: flex; align-items: center; gap: .85rem;
  width: 100%;
  text-align: left;
  padding: .55rem .6rem;
  margin: 0 -.6rem;
  border-radius: 8px;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.option:hover:not(:disabled) { background: rgba(38, 40, 44, .045); }
.option:disabled { cursor: default; }

/* Ruled exam paper behind the sample question. */
.exam-sheet {
  background-color: var(--sheet);
  background-image: linear-gradient(to right, transparent 2.6rem, rgba(179, 38, 30, .28) 2.6rem, rgba(179, 38, 30, .28) calc(2.6rem + 1px), transparent calc(2.6rem + 1px));
  border: 1px solid var(--rule);
  border-radius: 12px;
}

/* ---------- Highlighter ---------- */
.marked {
  background: linear-gradient(transparent 12%, var(--highlight) 12%, var(--highlight) 88%, transparent 88%);
  padding: 0 .2em;
  margin: 0 -.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Disclosure (course map) ---------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.chevron { transition: transform .2s ease; }
details[open] > summary .chevron { transform: rotate(90deg); }

/* ---------- Tables ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table th {
  text-align: left; font-weight: 600; font-size: 14px; color: var(--graphite-soft);
  padding: .6rem .75rem; border-bottom: 1.5px solid var(--rule);
}
.data-table td { padding: .7rem .75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.data-table tr:last-child td { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Question review form ---------- */
[data-question-form][data-type="sba"] [data-for-type="tf"],
[data-question-form][data-type="tf"] [data-for-type="sba"],
[data-question-form][data-type="sba"] [data-type-hint="tf"],
[data-question-form][data-type="tf"] [data-type-hint="sba"] { display: none; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.textarea.auto-grow { resize: none; field-sizing: content; min-height: 0; }
.textarea.compact { min-height: 0; }

/* ---------- Installer checklist: answer-sheet bubbles as status ---------- */
.status-bubble {
  display: inline-block;
  width: 1.05rem; height: 1.05rem;
  border-radius: 999px;
  border: 1.5px solid var(--graphite);
  flex: none;
  margin-top: .2rem;
}
.status-bubble.is-ok { background: var(--correct); border-color: var(--correct); }
.status-bubble.is-bad { background: var(--wrong); border-color: var(--wrong); }
.status-bubble.is-optional { border-color: #A9AEA5; }
.status-bubble.is-now { background: var(--highlight); }

/* ---------- Answer sheet (practice sessions) ---------- */
.choice {
  position: relative;
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .55rem .6rem;
  margin: 0 -.6rem;
  border-radius: 8px;
  cursor: pointer;
}
.choice:hover { background: rgba(38, 40, 44, .045); }
.choice.cursor-default:hover { background: transparent; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice input:checked + .bubble { color: #fff; }
.choice input:checked + .bubble::before { transform: scale(1); }
.choice input:focus-visible + .bubble { outline: 2px solid var(--ink); outline-offset: 3px; }
.choice input:disabled + .bubble { cursor: default; }

.bubble-sm { width: 2.15rem; height: 2.15rem; font-size: 14px; }
.bubble-blank { border-style: dashed; border-color: #A9AEA5; color: var(--graphite-soft); }
.choice input:checked + .bubble-blank { color: var(--graphite); }
.choice input:checked + .bubble-blank::before { background: #E3E6DF; }

/* After the answer is revealed */
.bubble.is-key { border-color: var(--correct); color: #fff; }
.bubble.is-key::before { background: var(--correct); transform: scale(1); }
.bubble.is-missed { border-color: var(--correct); border-width: 2.5px; color: var(--correct); }
.bubble.is-missed::before { transform: scale(0); }
.bubble.is-wrong-pick { border-color: var(--wrong); color: #fff; }
.bubble.is-wrong-pick::before { background: var(--wrong); transform: scale(1); }
.choice input:checked + .bubble.is-missed { color: var(--correct); }

/* Question grid: an answer sheet of numbered bubbles */
.pal {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 2.1rem; padding: 0 .3rem;
  border-radius: 999px;
  border: 1.5px solid #A9AEA5;
  background: var(--sheet);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--graphite-soft);
}
button.pal { cursor: pointer; }
button.pal:hover { border-color: var(--graphite); color: var(--graphite); }
.pal.is-done { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.pal.is-current { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); color: var(--graphite); border-color: var(--graphite); }
.pal.is-current.is-done { color: #fff; }

/* Timer when time is nearly up */
[data-timer].is-low { background: var(--highlight); }

/* Score meters on the results page */
.meter { height: 8px; border-radius: 4px; background: #E6E8E3; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 4px; background: var(--ink); }