/* Atkinson Hyperlegible: drawn so 0/O, 1/l/I and rn/m can't be confused —
   which matters when a question turns on an IP, a hash or a port number. */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@400;600&family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette — ink for structure, petrol for action, cool paper underneath. */
  --ink:        #13233f;
  --paper:      #f2f4f6;
  --white:      #ffffff;

  --gray-50:    #f7f8fa;
  --gray-100:   #eef1f4;
  --gray-200:   #d8dde4;
  --gray-300:   #c3cad4;
  --gray-400:   #8f99a8;
  --gray-500:   #5e6878;
  --gray-600:   #4a5464;
  --gray-700:   #36404f;
  --gray-900:   #13233f;

  /* The accent ramp. Named blue-* for history — every page refers to these —
     but the hue is petrol. */
  --blue-50:    #e9f4f4;
  --blue-100:   #cfe7e8;
  --blue-200:   #a2d0d2;
  --blue-400:   #2b8f96;
  --blue-500:   #0f7a82;
  --blue-600:   #0a6c74;
  --blue-700:   #08545a;

  --green-100:  #e5f3ea;
  --green-500:  #2e7d4f;
  --amber-100:  #fbf0dc;
  --amber-500:  #a8650a;
  --red-100:    #fbebe8;
  --red-500:    #b93a2f;

  /* Difficulty 1–5: one sequential ramp, pale petrol to ink. Harder is not
     worse, so no traffic-light colours. */
  --lvl-1:      #cfe7e8;
  --lvl-2:      #8cc5c8;
  --lvl-3:      #2c7c83;
  --lvl-4:      #1d5f73;
  --lvl-5:      #13233f;

  /* Typography */
  --font-body:  'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'Atkinson Hyperlegible Mono', 'Consolas', ui-monospace, monospace;

  /* Shadows — only for things that float above the page (menus, dialogs). */
  --shadow-sm: 0 1px 2px rgba(19,35,63,.06);
  --shadow-md: 0 4px 14px rgba(19,35,63,.10);
  --shadow-lg: 0 10px 30px rgba(19,35,63,.16);

  --radius:     8px;
  --radius-sm:  6px;
  --transition: .18s ease;
}

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  /* Always reserve the scrollbar gutter. Without it a short page (the
     assessment form) is laid out in a viewport ~15px wider than a long one
     (coverage), which shifts every centred block — the header title included —
     sideways as you navigate. */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--gray-900);
  min-height: 100vh;
  line-height: 1.6;
}

/* One focus ring for every control, keyboard only. */
:where(a, button, select, input, textarea, summary):focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.mono   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.small  { font-size: .85rem; }
.req    { color: var(--blue-500); margin-left: 2px; }

/* ── Header ────────────────────────────────────────────────────────────────── */
/* Single source of truth for the navbar (templates/_navbar.html). Pages must
   not override these rules — the header is meant to be pixel-identical
   everywhere. */
.site-header {
  background: var(--ink);
  color: var(--white);
  padding: 0 2rem;
  height: 56px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.logo {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--white);
  text-decoration: none;   /* it's the home link; the browser would underline it */
}
.header-sub {
  font-size: .85rem;
  color: #a9b6c9;
  font-weight: 400;
}
.header-spacer { flex: 1; }
.header-btn {
  font-size: .8rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  padding: .3rem .85rem;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
.header-btn:hover { background: rgba(255,255,255,.15); border-color: var(--white); }

/* Sign-in control. Filled rather than outlined so it reads as the one live
   action in a header whose other buttons are greyed out. */
.header-btn--login {
  background: var(--white);
  color: var(--blue-600);
  border-color: var(--white);
}
.header-btn--login:hover {
  background: var(--blue-50);
  border-color: var(--blue-50);
}

.header-user {
  font-size: .8rem;
  text-decoration: none;
  transition: background var(--transition);
  font-weight: 600;
  color: var(--white);
  padding: .3rem .7rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.14);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-user:hover { background: rgba(255,255,255,.26); }

.header-user-menu {
  position: relative;
}

.header-user-menu .header-user {
  border: none;
  font-family: var(--font-body);
  cursor: pointer;
}

.header-user-chevron {
  margin-left: .3rem;
  font-size: .6rem;
}

.header-user-dropdown {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 1000;

  min-width: 210px;
  padding: .35rem;

  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.header-user-dropdown[hidden] {
  display: none;
}

.header-user-dropdown__item {
  display: block;
  padding: .6rem .75rem;

  color: var(--gray-700);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;

  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.header-user-dropdown__item:hover {
  background: var(--gray-100);
}

/* "Features" menu — the authoring pages grouped behind one button. Opens on
   hover, or via .header-menu--open, which the navbar script sets on click /
   tap and Enter, so it works without a mouse too. */
.header-menu { position: relative; }

.header-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  font-family: var(--font-body);
  cursor: pointer;
}
.header-menu__btn--current { background: rgba(255,255,255,.15); border-color: var(--white); }
.header-menu__chevron {
  font-size: .7rem;
  line-height: 1;
  transition: transform var(--transition);
}

.header-menu__list {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 1000;
  min-width: 270px;
  padding: .35rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);

  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
/* Bridges the gap under the button, so moving the pointer down to the menu
   doesn't count as leaving it. */
.header-menu__list::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -.6rem;
  height: .6rem;
}

.header-menu:hover .header-menu__list,
.header-menu--open .header-menu__list {
  visibility: visible;
  opacity: 1;
  transform: none;
}
.header-menu:hover .header-menu__btn,
.header-menu--open .header-menu__btn { background: rgba(255,255,255,.15); border-color: var(--white); }
.header-menu:hover .header-menu__chevron,
.header-menu--open .header-menu__chevron { transform: rotate(180deg); }

.header-menu__item {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition);
}
.header-menu__item:hover,
.header-menu__item:focus-visible { background: var(--blue-50); outline: none; }
.header-menu__label {
  color: var(--gray-900);
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.35;
}
.header-menu__desc {
  color: var(--gray-500);
  font-size: .75rem;
  line-height: 1.35;
}
.header-menu__item:hover .header-menu__label { color: var(--blue-600); }

/* The page you're on: kept in the list so the group always reads the same,
   marked rather than clickable-looking. */
.header-menu__item--current { box-shadow: inset 3px 0 0 var(--blue-500); background: var(--gray-50); }
.header-menu__item--current .header-menu__label { color: var(--blue-600); }

/* Log out is a POST, so it needs a form. Strip the block-level defaults so it
   sits inline with the links either side of it. */
.header-logout-form { display: inline-flex; margin: 0; }
.header-logout-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  cursor: pointer;
}

/* ── Main wrap ─────────────────────────────────────────────────────────────── */
.main-wrap {
  max-width: 860px;
  margin: 2.5rem auto 4rem;
  padding: 0 1.5rem;
}

/* ── Progress bar ──────────────────────────────────────────────────────────── */
.progress-bar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2rem;
  padding: 0 1rem;
}
.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.step-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 700;
  transition: background var(--transition), color var(--transition);
  border: 2px solid transparent;
}
.step-label {
  font-size: .78rem;
  color: var(--gray-400);
  white-space: nowrap;
  transition: color var(--transition);
}
.progress-step.active .step-dot {
  background: var(--blue-500);
  color: var(--white);
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px var(--blue-100);
}
.progress-step.active .step-label { color: var(--blue-600); font-weight: 600; }
.progress-step.done .step-dot {
  background: var(--green-500);
  color: var(--white);
  border-color: var(--green-500);
}
.progress-step.done .step-label { color: var(--green-500); }
.progress-connector {
  flex: 1;
  height: 2px;
  background: var(--gray-200);
  min-width: 40px;
  max-width: 80px;
  margin-top: -18px; /* align with dot center */
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
/* Flat: the border separates the card from the paper; shadows are kept for
   things that genuinely float (menus, dialogs). */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.card-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
  margin-bottom: .4rem;
}
.card-hint {
  font-size: .875rem;
  color: var(--gray-500);
  margin-bottom: 1.6rem;
  line-height: 1.5;
}

/* ── Field elements ────────────────────────────────────────────────────────── */
.field-label {
  display: block;
  font-size: .87rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: .35rem;
}
.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}
/* Label with its help icon sitting right beside it, not pushed to the far edge. */
.field-label-row--tight { justify-content: flex-start; gap: .4rem; }

/* ── Level help panel ──────────────────────────────────────────────────────── */
/* Click-toggled rather than hover: the content is long and each level expands,
   so a hover bubble would vanish on the way to clicking one. */
.tip {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.tip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: .7rem;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.tip__icon:hover,
.tip__icon[aria-expanded="true"] { background: var(--blue-500); color: var(--white); }
.tip__icon:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }

.tip__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  width: max-content;
  max-width: min(480px, 80vw);
  max-height: 340px;
  overflow-y: auto;
  padding: .4rem;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.tip__lvl { border-bottom: 1px solid var(--gray-100); }
.tip__lvl:last-child { border-bottom: none; }
.tip__lvl-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .6rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-900);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.tip__lvl-head::-webkit-details-marker { display: none; }
.tip__lvl-head::before {
  content: '';
  flex-shrink: 0;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: var(--gray-400);
  transition: transform var(--transition);
}
.tip__lvl[open] > .tip__lvl-head::before { transform: rotate(90deg) translateX(-2px); }
.tip__lvl-head:hover { background: var(--gray-100); }
.tip__lvl[open] > .tip__lvl-head { color: var(--blue-600); }

.tip__lvl-body {
  padding: 0 .6rem .55rem 1.35rem;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--gray-700);
}
.tip__lvl-body + .tip__lvl-body { padding-top: .35rem; }

@media (max-width: 640px) {
  /* Anchor to the left edge on narrow screens so the panel can't run off. */
  .tip__panel { left: 0; transform: none; max-width: 88vw; }
}
.coverage-link {
  font-size: .75rem;
  font-weight: 600;
  color: var(--blue-500);
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: .4rem;
  transition: color var(--transition);
}
.coverage-link:hover { color: var(--blue-600); text-decoration: underline; }

/* Follow-up link on the saved panel — reads as body text, not a field label. */
.saved-followup { margin: -.4rem 0 1.2rem; }
.saved-followup .coverage-link { font-size: .85rem; white-space: normal; }

.field-textarea,
.field-input,
.field-select {
  width: 100%;
  padding: .62rem .85rem;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--gray-900);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.field-textarea:focus,
.field-input:focus,
.field-select:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.field-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.55;
}
/* Draws the eye to a field the author has been sent back to edit. */
.field-blink { animation: fieldBlink .5s ease-in-out 1; }
@keyframes fieldBlink {
  0%, 100% { border-color: var(--blue-400); box-shadow: 0 0 0 3px var(--blue-100); }
  50%      { border-color: var(--amber-500); box-shadow: 0 0 0 4px var(--amber-100); background: var(--amber-100); }
}
.field-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7485' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}
.field-select:disabled {
  background-color: var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
}
.field-select--sm { width: auto; min-width: 160px; flex: 1; }

/* ── Difficulty stepper (discrete slider, step 2) ──────────────────────────── */
/* Geometry: the thumb centre travels from THUMB/2 to width - THUMB/2, so the
   rail and every stop are inset by that same half-thumb. Dots at 0–100% of the
   inset box then line up exactly under the thumb. */
.diff-stepper {
  --thumb: 20px;
  --inset: calc(var(--thumb) / 2);
  --fill: 0;           /* unitless 0–1 fraction of the travel */
  --accent: var(--blue-500);
  margin-top: .5rem;
  padding: 0 1.6rem;   /* room for the first/last stop labels to overhang */
}
/* Accent follows the difficulty ramp (--lvl-N), as .lvl-badge--N does. The two
   palest stops are deepened so the thumb still reads against white. */
.diff-stepper.lvl-1 { --accent: #6aaeb2; }
.diff-stepper.lvl-2 { --accent: #3f949a; }
.diff-stepper.lvl-3 { --accent: var(--lvl-3); }
.diff-stepper.lvl-4 { --accent: var(--lvl-4); }
.diff-stepper.lvl-5 { --accent: var(--lvl-5); }

.diff-track {
  position: relative;
  height: var(--thumb);
}
.diff-rail,
.diff-fill {
  position: absolute;
  top: 50%;
  height: 6px;
  border-radius: 3px;
  transform: translateY(-50%);
  pointer-events: none;
}
.diff-rail {
  left: var(--inset);
  right: var(--inset);
  background: var(--gray-200);
}
.diff-fill {
  left: var(--inset);
  width: calc((100% - var(--thumb)) * var(--fill));
  background: var(--accent);
  transition: width var(--transition), background var(--transition);
}
.diff-stepper.is-unset .diff-fill { width: 0; }

.diff-dots {
  position: absolute;
  left: var(--inset);
  right: var(--inset);
  top: 0;
  bottom: 0;
  pointer-events: none;
}
.diff-dot {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gray-300);
  transition: border-color var(--transition), background var(--transition);
}

/* The real control: transparent track, visible thumb, sits on top of the art. */
.diff-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: none;
  cursor: pointer;
}
.diff-range:focus-visible { outline: none; }
.diff-range::-webkit-slider-runnable-track { background: none; border: none; height: 100%; }
.diff-range::-moz-range-track             { background: none; border: none; height: 100%; }
.diff-range::-webkit-slider-thumb {
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: transform var(--transition), box-shadow var(--transition);
}
.diff-range::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: transform var(--transition), box-shadow var(--transition);
}
.diff-range:hover::-webkit-slider-thumb  { transform: scale(1.1); }
.diff-range:hover::-moz-range-thumb      { transform: scale(1.1); }
.diff-range:active::-webkit-slider-thumb { cursor: grabbing; }
.diff-range:active::-moz-range-thumb     { cursor: grabbing; }
.diff-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--blue-100); }
.diff-range:focus-visible::-moz-range-thumb     { box-shadow: 0 0 0 4px var(--blue-100); }

/* Nothing chosen yet — hide the thumb so the control reads as empty, but keep
   it clickable/focusable so the first click or keypress commits a level. */
.diff-stepper.is-unset .diff-range::-webkit-slider-thumb { opacity: 0; }
.diff-stepper.is-unset .diff-range::-moz-range-thumb     { opacity: 0; }
.diff-stepper.is-unset:focus-within .diff-rail { box-shadow: 0 0 0 4px var(--blue-100); }

/* Stop labels */
.diff-stops {
  position: relative;
  height: 2.7rem;
  margin: .35rem var(--inset) 0;
}
.diff-stop {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .05rem;
  padding: .2rem .3rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  color: var(--gray-400);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.diff-stop:hover { background: var(--blue-50); color: var(--blue-500); }
.diff-stop-num  { font-size: .8rem; font-weight: 600; line-height: 1.2; }
.diff-stop-name { font-size: .7rem; white-space: nowrap; line-height: 1.2; }

/* Selected / passed states, driven by JS toggling .is-active / .is-filled */
.diff-dot.is-filled  { border-color: var(--accent); background: var(--accent); }
.diff-dot.is-active  { border-color: var(--accent); background: var(--white); }
.diff-stop.is-active { color: var(--gray-900); font-weight: 600; }
.diff-stop.is-active .diff-stop-num { color: var(--accent); }

.diff-readout {
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--gray-500);
  min-height: 1.4rem;
}
.diff-readout .diff-readout-b {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--gray-400);
}
.diff-stepper.is-unset .diff-readout { color: var(--gray-400); font-style: italic; }
.field-hint {
  display: block;
  font-size: .75rem;
  color: var(--gray-400);
  margin-top: .3rem;
}

/* ── Custom topic dropdown ────────────────────────────────────────────────── */
.topic-cselect { position: relative; }

.topic-cselect__trigger {
  width: 100%;
  padding: .62rem .85rem;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--gray-900);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .55rem;
  text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.topic-cselect__trigger:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.topic-cselect__chevron { margin-left: auto; flex-shrink: 0; }

.topic-cselect--disabled .topic-cselect__trigger {
  background-color: var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
}

.topic-cselect__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  z-index: 200;
  list-style: none;
  margin: 0;
  padding: 0 0 .3rem;
  max-height: 260px;
  overflow-y: auto;
}
.topic-cselect__list.hidden { display: none; }

.topic-cselect__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem;
  cursor: pointer;
  font-size: .95rem;
  color: var(--gray-900);
  transition: background var(--transition);
}
.topic-cselect__item:hover,
.topic-cselect__item--active { background: var(--gray-100); }

/* Knowledge area trailing the topic name — present but visibly secondary. */
.topic-cselect__ka {
  margin-left: -.25rem;
  font-size: .85rem;
  color: var(--gray-500);
}

.topic-cselect__divider {
  padding: .35rem .85rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-500);
  border-top: 1px solid var(--gray-200);
  margin-top: .25rem;
  cursor: default;
}

/* ── Checkbox multi-select (Skill / Knowledge) ─────────────────────────────── */
.mselect { position: relative; }

.mselect__trigger {
  width: 100%;
  padding: .62rem .85rem;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--gray-900);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .55rem;
  text-align: left;
}
.mselect__trigger:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px var(--blue-100);
}

.mselect__label {
  flex: 1;
  min-width: 0;               /* allow the flex item to shrink so ellipsis kicks in */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mselect__count {
  flex-shrink: 0;
  min-width: 1.5rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--blue-100);
  color: var(--blue-600);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
}

.mselect__chevron { flex-shrink: 0; }

.mselect--disabled .mselect__trigger {
  background-color: var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
}

.mselect__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  z-index: 200;
  list-style: none;
  margin: 0;
  padding: 0 0 .3rem;
  max-height: 260px;
  overflow-y: auto;
}
.mselect__list.hidden { display: none; }

/* Type-ahead row — sticks to the top of the popup while the options scroll. */
.mselect__search,
.topic-cselect__search {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .4rem .5rem;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
.mselect__search-input,
.topic-cselect__search-input {
  width: 100%;
  padding: .4rem .6rem;
  font-family: inherit;
  font-size: .88rem;
  color: var(--gray-900);
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.mselect__search-input::placeholder,
.topic-cselect__search-input::placeholder { color: var(--gray-400); }
.mselect__search-input:focus,
.topic-cselect__search-input:focus {
  background: var(--white);
  border-color: var(--blue-400);
}

.mselect__empty,
.topic-cselect__empty {
  padding: .7rem .85rem;
  font-size: .85rem;
  color: var(--gray-400);
  font-style: italic;
  cursor: default;
}

.mselect__item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem .85rem;
  cursor: pointer;
  font-size: .95rem;
  color: var(--gray-900);
  transition: background var(--transition);
}
.mselect__item:hover { background: var(--gray-100); }
.mselect__item--selected { background: var(--blue-50); }
.mselect__item--selected:hover { background: var(--blue-100); }

.mselect__checkbox {
  pointer-events: none;        /* clicks are handled by the row */
  width: 16px;
  height: 16px;
  margin-top: .22rem;
  flex-shrink: 0;
  accent-color: var(--blue-500);
}

/* ── Overlap panel (skills/knowledge mapped to other roles) ────────────────── */
.overlap-panel {
  margin: 0 0 1.4rem;
  padding: .6rem .75rem;
  background: var(--amber-100);
  border: 1px solid #e6cf9c;
  border-radius: var(--radius-sm);
  font-size: .82rem;
  line-height: 1.45;
}
.overlap-panel__title {
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: .35rem;
}
.overlap-panel__row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .2rem 0;
  color: var(--gray-700);
}
.overlap-panel__text   { flex: 1; min-width: 0; }
.overlap-panel__skills { color: var(--gray-500); }

.overlap-panel__add {
  flex-shrink: 0;
  padding: .25rem .7rem;
  border: 1px solid var(--blue-400);
  background: var(--white);
  color: var(--blue-500);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.overlap-panel__add:hover { background: var(--blue-50); }
.overlap-panel__add--added {
  border-color: var(--gray-300);
  color: var(--gray-500);
}
.overlap-panel__add--added:hover { background: var(--gray-100); }

/* ── Extra role block (role added from the overlap panel) ──────────────────── */
.extra-role-block {
  position: relative;
  border: 1.5px dashed var(--blue-200);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem .5rem;
  margin-bottom: 1.4rem;
}
.extra-role-block .field-grid { margin-bottom: .3rem; }

.extra-role-block__remove {
  position: absolute;
  top: .4rem;
  right: .55rem;
  border: none;
  background: none;
  color: var(--gray-400);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: .15rem;
}
.extra-role-block__remove:hover { color: var(--red-500); }

.score-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.score-dot--green      { background: #22c55e; }
.score-dot--lightgreen { background: #86efac; }
.score-dot--yellow     { background: #eab308; }
.score-dot--orange     { background: #f97316; }

.field-grid {
  display: grid;
  /* minmax(0,…) so long dropdown labels can't stretch the columns */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem 1.5rem;
  margin-bottom: 1.8rem;
}
.field-col { display: flex; flex-direction: column; min-width: 0; }

/* Role on its own full-width row, then Skill | Knowledge below */
.field-grid--roles { margin-bottom: 1.1rem; }
.field-grid--roles .field-col:first-child { grid-column: 1 / -1; }
.role-context {
  padding: .62rem .85rem;
  border: 1.5px solid var(--blue-100);
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  color: var(--blue-600);
  font-size: .95rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Answers section ───────────────────────────────────────────────────────── */
.answers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1.3rem 0 .6rem;
}
.answer-row {
  display: flex;
  align-items: center;  /* a multi-line answer keeps its checkbox and × centred */
  gap: .65rem;
  margin-bottom: .65rem;
  padding: .65rem .85rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  transition: border-color var(--transition);
}
.answer-row.is-correct {
  border-color: var(--blue-400);
  background: var(--blue-50);
}
.answer-radio {
  width: 17px;
  height: 17px;
  accent-color: var(--blue-500);
  flex-shrink: 0;
  cursor: pointer;
}
.answer-label-badge {
  font-size: .8rem;
  font-weight: 700;
  color: var(--gray-500);
  min-width: 20px;
}
/* A one-row textarea that grows with its text (fitted in main.js). */
.answer-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--gray-900);
  outline: none;
  padding: 0;
  resize: none;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.answer-input:focus { color: var(--blue-700); }
.answer-remove {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 .2rem;
  transition: color var(--transition);
}
.answer-remove:hover { color: var(--red-500); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.4rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn-primary {
  background: var(--blue-500);
  color: var(--white);
  border-color: var(--blue-500);
}
.btn-primary:hover  { background: var(--blue-600); border-color: var(--blue-600); box-shadow: var(--shadow-sm); }
.btn-primary:active { background: var(--blue-700); }
.btn-secondary {
  background: var(--white);
  color: var(--blue-600);
  border-color: var(--blue-400);
}
.btn-secondary:hover { background: var(--blue-50); }
/* An override the author has to mean: styled apart from the safe secondary. */
.btn-secondary--warn {
  color: var(--amber-500);
  border-color: var(--amber-500);
}
.btn-secondary--warn:hover { background: var(--amber-100); }
.btn-ghost {
  background: none;
  color: var(--blue-500);
  border-color: transparent;
  font-size: .85rem;
  padding: .4rem .7rem;
}
.btn-ghost:hover:not(:disabled) { background: var(--blue-50); border-color: var(--blue-200); }
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled { opacity: .5; cursor: not-allowed; }

.step-actions {
  display: flex;
  gap: .8rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--gray-200);
}

/* ── Spinner / loader ──────────────────────────────────────────────────────── */
.loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 2.5rem 1rem;
}
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--blue-100);
  border-top-color: var(--blue-500);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text {
  font-size: .9rem;
  color: var(--gray-500);
  text-align: center;
}
.spinner--sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
  flex-shrink: 0;
}
.topic-loading {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .45rem;
  font-size: .82rem;
  color: var(--gray-500);
}
.topic-loading.hidden { display: none; }

/* ── Result badges ─────────────────────────────────────────────────────────── */
.result-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.1rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 1.5rem;
}
.result-badge--ok   { background: var(--green-100); color: var(--green-500); }
.result-badge--warn { background: var(--amber-100); color: var(--amber-500); }

/* ── Result grid ───────────────────────────────────────────────────────────── */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.result-cell {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
}
.result-cell-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: .3rem;
}
.result-cell-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.result-cell-value.small { font-size: .9rem; line-height: 1.4; }

/* ── Explanation box ───────────────────────────────────────────────────────── */
.explanation-box {
  background: var(--blue-50);
  border-left: 3px solid var(--blue-400);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .85rem 1.1rem;
  margin-bottom: 1.4rem;
}
.explanation-label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--blue-600);
  margin-bottom: .3rem;
}
.explanation-box p {
  font-size: .9rem;
  color: var(--gray-700);
  line-height: 1.55;
}

/* ── Runs block ────────────────────────────────────────────────────────────── */
.runs-block {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: .85rem 1.1rem;
  margin-bottom: 1.4rem;
}
.runs-label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--gray-500);
  margin-bottom: .6rem;
}
.runs-list { margin-bottom: .3rem; }
.run-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .28rem 0;
  font-size: .875rem;
  border-top: 1px solid var(--gray-200);
}
.runs-list .run-row:first-child { border-top: none; }
.run-row--final {
  border-top: 2px solid var(--gray-300) !important;
  margin-top: .25rem;
  padding-top: .5rem;
  font-weight: 700;
}
.run-num {
  min-width: 48px;
  font-size: .8rem;
  color: var(--gray-500);
}
.run-row--final .run-num { color: var(--gray-700); }
.run-b { color: var(--gray-700); }
.run-sep { color: var(--gray-400); font-size: .8rem; }
.run-note { margin-left: auto; font-size: .76rem; color: var(--gray-400); font-weight: 400; }
.run-note--used      { color: var(--green-500); font-weight: 600; }
.run-note--discarded { color: var(--amber-500); font-weight: 500; }
.run-row--discarded  { opacity: .55; }

/* LLM accuracy message inside runs block */
.runs-accuracy {
  font-size: .82rem;
  color: var(--gray-700);
  background: var(--green-100);
  border-left: 3px solid var(--green-500);
  padding: .45rem .8rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: .7rem;
}
.runs-accuracy strong { color: var(--green-500); }

/* Level badges (1–5) */
.lvl-badge {
  display: inline-block;
  padding: .15rem .65rem;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.lvl-badge--1 { background: var(--lvl-1); color: var(--ink); }
.lvl-badge--2 { background: var(--lvl-2); color: var(--ink); }
.lvl-badge--3 { background: var(--lvl-3); color: var(--white); }
.lvl-badge--4 { background: var(--lvl-4); color: var(--white); }
.lvl-badge--5 { background: var(--lvl-5); color: var(--white); }

/* Any element with data-level="1".."5" gets --lvl, its ramp colour. */
[data-level="1"] { --lvl: var(--lvl-1); }
[data-level="2"] { --lvl: var(--lvl-2); }
[data-level="3"] { --lvl: var(--lvl-3); }
[data-level="4"] { --lvl: var(--lvl-4); }
[data-level="5"] { --lvl: var(--lvl-5); }

/* Page heading, shared by the full-width tool pages. */
.page-head { margin-bottom: 1.8rem; }
.page-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: .45rem;
}
.page-sub {
  max-width: 68ch;
  font-size: .95rem;
  color: var(--gray-500);
  line-height: 1.55;
}

/* Difficulty gauge: five segments, filled up to the item's level in the
   level's ramp colour. Set data-level on the element. */
.diff-gauge {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  vertical-align: middle;
}
.diff-gauge__seg {
  width: 4px;
  border-radius: 1px;
  background: var(--gray-200);
}
.diff-gauge__seg:nth-child(1) { height: 40%; }
.diff-gauge__seg:nth-child(2) { height: 55%; }
.diff-gauge__seg:nth-child(3) { height: 70%; }
.diff-gauge__seg:nth-child(4) { height: 85%; }
.diff-gauge__seg:nth-child(5) { height: 100%; }
.diff-gauge[data-level="1"] { --lvl: var(--lvl-2); } /* lvl-1 is too pale on white */
.diff-gauge[data-level="1"] .diff-gauge__seg:nth-child(-n+1),
.diff-gauge[data-level="2"] .diff-gauge__seg:nth-child(-n+2),
.diff-gauge[data-level="3"] .diff-gauge__seg:nth-child(-n+3),
.diff-gauge[data-level="4"] .diff-gauge__seg:nth-child(-n+4),
.diff-gauge[data-level="5"] .diff-gauge__seg:nth-child(-n+5) { background: var(--lvl); }

/* ── Mismatch panel ────────────────────────────────────────────────────────── */
.mismatch-desc {
  font-size: .95rem;
  color: var(--gray-700);
  margin-bottom: 1.2rem;
  line-height: 1.55;
}
.mismatch-actions {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1rem;
}
.mismatch-option {
  flex: 1;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
}
.mismatch-option h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: .5rem;
}
.mismatch-option-desc {
  font-size: .855rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.mismatch-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--gray-400);
  min-width: 36px;
}

/* ── Saved state ───────────────────────────────────────────────────────────── */
.saved-desc {
  font-size: .95rem;
  color: var(--gray-700);
  margin-bottom: 1.5rem;
}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  background: var(--gray-900);
  color: var(--white);
  padding: .75rem 1.3rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  max-width: 340px;
  animation: slideUp .22s ease;
}
.toast.toast--error { background: var(--red-500); }
.toast.toast--ok    { background: var(--green-500); }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── Error dialog ──────────────────────────────────────────────────────────── */
/* Unlike the toast this does not time out — it holds until dismissed, for
   failures the user needs to actually read (e.g. LLM calibration giving up). */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(26, 30, 46, .55);
  animation: fadeIn .16s ease;
}
.modal {
  width: 100%;
  max-width: 480px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modalPop .18s ease;
}
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.modal__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.1rem 1.3rem .8rem;
  border-bottom: 1px solid var(--gray-200);
}
.modal__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red-100);
  color: var(--red-500);
  font-weight: 700;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__title {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
}
.modal__close {
  flex-shrink: 0;
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0 .2rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.modal__close:hover { color: var(--gray-900); background: var(--gray-100); }

.modal__body {
  padding: 1.1rem 1.3rem;
  font-size: .9rem;
  color: var(--gray-700);
  line-height: 1.6;
  max-height: 50vh;
  overflow-y: auto;
  overflow-wrap: break-word;
}
.modal__hint {
  margin-top: .7rem;
  font-size: .82rem;
  color: var(--gray-500);
  background: var(--gray-50);
  border-left: 3px solid var(--gray-300);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .55rem .8rem;
}

.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding: .85rem 1.3rem 1.1rem;
  border-top: 1px solid var(--gray-200);
}

/* Structured detail inside the error dialog (calibration tally). */
.errdetail { margin-top: 1rem; }
.errdetail__label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--gray-500);
  margin: 1rem 0 .35rem;
}
.errdetail__label:first-child { margin-top: 0; }
.errdetail__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.errdetail__table th {
  text-align: left;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-500);
  padding: .3rem .5rem;
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
.errdetail__table td {
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: top;
}
.errdetail__table tr.is-key td { background: var(--green-100); color: var(--green-500); }
.errdetail__lbl {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
  width: 1%;
}
.errdetail__kind { white-space: nowrap; color: var(--gray-500); }
.errdetail__count {
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  width: 1%;
}
.errdetail__note {
  margin-top: .7rem;
  font-size: .78rem;
  color: var(--gray-500);
  line-height: 1.5;
}

/* ── Question preview (step 2 read-only) ──────────────────────────────────── */
.question-preview {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--blue-400);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .9rem 1.1rem;
  margin-bottom: 1.8rem;
}
.question-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .55rem;
}
.question-preview-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--blue-600);
}
.question-preview-hint {
  font-size: .75rem;
  color: var(--gray-400);
  font-style: italic;
}
.preview-role-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--blue-600);
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  padding: .15rem .65rem;
  border-radius: 100px;
  margin-bottom: .55rem;
}
.question-preview-text {
  font-size: .95rem;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.55;
  margin-bottom: .7rem;
}
.preview-answer {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .855rem;
  color: var(--gray-600);
  padding: .18rem 0;
}
.preview-answer--correct {
  color: var(--green-500);
  font-weight: 600;
}
.preview-answer-bullet {
  font-size: .75rem;
  font-weight: 700;
  min-width: 18px;
  color: var(--gray-400);
}
.preview-answer--correct .preview-answer-bullet { color: var(--green-500); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .main-wrap { margin-top: 1.5rem; padding: 0 1rem; }
  .card { padding: 1.4rem 1.2rem; }
  .field-grid,
  .field-grid--roles { grid-template-columns: 1fr; }
  .mismatch-actions { flex-direction: column; }
  .mismatch-divider { transform: rotate(90deg); align-self: center; }
  .progress-connector { min-width: 20px; }
}
/* ── Sign-in page (templates/login.html) ───────────────────────────────────── */
.auth-wrap {
  min-height: calc(100vh - 56px);   /* viewport minus .site-header height */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1.5rem;
  background: var(--paper);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 2rem 2rem 1.6rem;
}

.auth-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: .5rem;
}

.auth-hint {
  font-size: .85rem;
  color: var(--gray-500);
  line-height: 1.55;
  margin-bottom: 1.4rem;
}

.auth-error {
  background: var(--red-100);
  border: 1px solid #ecc4be;
  color: var(--red-500);
  font-size: .85rem;
  padding: .6rem .85rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.1rem;
}

.auth-success {
  background: var(--green-100);
  border: 1px solid #b9dcc6;
  color: var(--green-500);
  font-size: .85rem;
  line-height: 1.55;
  padding: .7rem .85rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.1rem;
}

/* Sits under the input it qualifies, so it takes a tighter top margin than the
   .field-label spacing rule below would otherwise leave. */
.field-note {
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--gray-500);
  line-height: 1.45;
}

/* The label above the first field already carries the gap from .auth-hint /
   .auth-error; only the later ones need spacing pushed in. */
.auth-card .field-label { margin-top: 1rem; }
.auth-card form > .field-label:first-of-type { margin-top: 0; }

.btn-auth-submit {
  width: 100%;
  margin-top: 1.6rem;
  padding: .7rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--blue-500);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-auth-submit--link {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-top: .4rem;
}
.btn-auth-submit:hover  { background: var(--blue-600); }
.btn-auth-submit:active { background: var(--blue-700); }

.auth-footnote {
  margin-top: 1.2rem;
  font-size: .78rem;
  color: var(--gray-400);
  text-align: center;
  line-height: 1.5;
}

/* ── Searchable combobox (coverage + manage-items filters) ─────────────────── */
.combo { position: relative; }
.combo__input { padding-right: 2.2rem; }
.combo__input:disabled {
  background: var(--gray-50);
  color: var(--gray-400);
  cursor: not-allowed;
}

.combo__clear {
  position: absolute;
  top: 50%;
  right: .55rem;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.combo__clear:hover { background: var(--gray-200); color: var(--gray-900); }

.combo__list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 280px;
  max-height: 340px;
  overflow-y: auto;
  list-style: none;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: .3rem 0;
}

.combo__group {
  padding: .55rem .9rem .3rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--gray-100);
}
.combo__group--muted { color: var(--gray-400); }
.combo__group-count {
  float: right;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gray-400);
}

.combo__opt {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .45rem .9rem;
  font-size: .88rem;
  color: var(--gray-900);
  cursor: pointer;
}
.combo--grouped .combo__opt { padding-left: 1.4rem; }
.combo__opt:hover,
.combo__opt--active { background: var(--blue-50); }
.combo__opt--selected { font-weight: 600; }
.combo__opt--muted .combo__opt-name { color: var(--gray-400); }
.combo__opt-name { flex: 1; }
/* A direct flex child, so it needs its size held against the row's shrink. */
.combo__opt .dot { flex: none; align-self: center; }
.combo__opt-meta {
  font-size: .74rem;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}
.combo__opt-count {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  color: var(--blue-500);
  white-space: nowrap;
}
.combo__opt-count--zero { color: var(--gray-300); }
.combo__opt mark {
  background: var(--blue-100);
  color: inherit;
  border-radius: 2px;
}
.combo__empty {
  padding: .8rem .9rem;
  font-size: .85rem;
  color: var(--gray-500);
  text-align: center;
}