:root {
  /* One family everywhere. Change this line to restyle every page. */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  --paper: #ffffff;
  --paper-deeper: #f4f2ee;
  --ink: #1a1814;
  --ink-soft: #3d362b;
  --ink-mute: #6b6358;
  --rule: #b8ad95;
  --rule-soft: #d4c9b0;
  --accent: #b22222;       /* firebrick, a standard CSS colour name */
  --accent-deep: #8b1a1a;  /* darker firebrick, for hover and pressed */
  --correct: #3f6b3a;      /* muted forest */
  --correct-bg: #d9e3cf;
  --correct-rule: #6e8c61;
  --incorrect: #8a3a1f;    /* same family as accent */
  --incorrect-bg: #e5d2c4;
  --incorrect-rule: #a85839;
  --shadow: 0 1px 0 rgba(26, 24, 20, 0.06), 0 12px 32px -20px rgba(26, 24, 20, 0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  min-height: 100vh;
}

/* paper grain overlay removed for a clean white page */

.app {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 28px 80px;
  position: relative;
  z-index: 1;
}

/* ---------- masthead ---------- */
.masthead {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 28px 0 22px;
  margin-bottom: 36px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.masthead h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.masthead-meta {
  text-align: right;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  line-height: 1.6;
}
.masthead-meta .vol {
  color: var(--ink);
  font-weight: 500;
}

/* The way back out of a topic. Sized as a real button rather than the
   fine print around it, so it stays an easy target on a phone. */
.back-link {
  display: inline-block;
  margin-top: 8px;
  padding: 9px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  line-height: 1.2;
  transition: background 0.12s, border-color 0.12s;
}
.back-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---------- progress strip ---------- */
.progress-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.progress-strip .counter strong {
  font-weight: 600;
  color: var(--ink);
}
.progress-strip .section-badge {
  border: 1px solid var(--ink-soft);
  padding: 4px 10px;
  color: var(--ink);
  background: var(--paper-deeper);
}

.progress-bar {
  height: 2px;
  background: var(--rule-soft);
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}
.progress-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  width: 0%;
  transition: width 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- question card ---------- */
.question-card {
  background: transparent;
  animation: fadeIn 480ms ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.question-number {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.question-text {
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.45;
  font-weight: 500;
  margin-bottom: 32px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* ---------- choices ---------- */
.choices {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choice {
  border: 1px solid var(--rule);
  background: #ffffff;
  padding: 14px 16px 14px 52px;
  cursor: pointer;
  position: relative;
  transition: background 200ms ease, border-color 200ms ease, transform 100ms ease;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.choice:hover:not(.locked) {
  background: #f7f6f3;
  border-color: var(--ink-soft);
}
.choice:active:not(.locked) {
  transform: translateY(1px);
}
.choice-letter {
  position: absolute;
  left: 16px;
  top: 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  transition: all 200ms ease;
}
.choice:hover:not(.locked) .choice-letter {
  border-color: var(--ink-soft);
  color: var(--ink);
}

.choice.correct {
  background: var(--correct-bg);
  border-color: var(--correct-rule);
  color: var(--ink);
}
.choice.correct .choice-letter {
  background: var(--correct);
  color: var(--paper);
  border-color: var(--correct);
}
.choice.incorrect {
  background: var(--incorrect-bg);
  border-color: var(--incorrect-rule);
  color: var(--ink);
}
.choice.incorrect .choice-letter {
  background: var(--incorrect);
  color: var(--paper);
  border-color: var(--incorrect);
}
.choice.locked {
  cursor: default;
}
.choice.dimmed {
  opacity: 0.5;
}

/* ---------- feedback ---------- */
.feedback {
  margin-top: 24px;
  border-left: 3px solid var(--ink);
  padding: 16px 20px;
  background: var(--paper-deeper);
  display: none;
  animation: slideIn 420ms ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}
.feedback.show { display: block; }
.feedback.correct { border-left-color: var(--correct-rule); }
.feedback.incorrect { border-left-color: var(--incorrect-rule); }

.feedback-label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 8px;
}
.feedback.correct .feedback-label { color: var(--correct); }
.feedback.incorrect .feedback-label { color: var(--incorrect); }

.feedback-text {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- nav ---------- */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  gap: 12px;
}
button {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: all 200ms ease;
}
button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}
button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
button.primary {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
button.primary:hover:not(:disabled) {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--paper);
}

/* ---------- intro screen ---------- */
.intro {
  text-align: left;
  padding: 32px 0 8px;
}
.intro-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 14px;
}
.intro h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.025em;
}
.intro p {
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 16.5px;
}
.intro p em {
  color: var(--accent);
  font-style: italic;
}
.intro-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 28px 0 32px;
  padding: 22px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.stat-item {
  font-family: var(--sans);
}
.stat-num {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  display: block;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.intro-start {
  display: flex;
  justify-content: flex-start;
}

/* ---------- results screen ---------- */
.results {
  text-align: left;
  animation: fadeIn 600ms ease-out;
}
.results-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 16px;
}
.results h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 36px);
  margin-bottom: 28px;
  letter-spacing: -0.025em;
}
.score-display {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 28px 0;
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  margin-bottom: 28px;
}
.score-percent {
  font-family: var(--sans);
  font-size: clamp(72px, 14vw, 110px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.score-fraction {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  line-height: 1.6;
}
.score-fraction strong { color: var(--ink); font-weight: 600; }

.section-breakdown {
  margin-top: 28px;
}
.section-breakdown h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.section-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 15px;
}
.section-row:last-child { border-bottom: none; }
.section-name {
  color: var(--ink);
  font-weight: 500;
}
.section-bar-wrap {
  width: 180px;
  height: 4px;
  background: var(--rule-soft);
  position: relative;
}
.section-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  height: 100%;
}
.section-stats {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  min-width: 64px;
  text-align: right;
}

.results-actions {
  margin-top: 36px;
  display: flex;
  gap: 12px;
}

/* ---------- responsive ---------- */
@media (max-width: 600px) {
  .app { padding: 32px 18px 60px; }
  .masthead { padding: 22px 0 18px; margin-bottom: 28px; }
  .masthead-meta { text-align: left; }
  .question-text { font-size: 18px; }
  .choice { font-size: 15.5px; padding: 12px 14px 12px 48px; }
  .nav { flex-direction: column-reverse; align-items: stretch; }
  .nav button { width: 100%; }
  .section-row { grid-template-columns: 1fr auto; }
  .section-bar-wrap { display: none; }
}

/* small marginalia */
.fineprint {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-align: center;
}

/* =========================================================================
   Additions for the multi-bank library, manage page, and shared chrome.
   The rules above came from the original single-file Endocrine quiz.
   ========================================================================= */

a { color: var(--accent); }

.masthead h1 a { color: inherit; text-decoration: none; }
.masthead-meta a {
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.masthead-meta a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.masthead-meta .sep { opacity: 0.4; padding: 0 6px; }

.app.wide { max-width: 940px; }

/* ---------- generic section heading ---------- */
.rule-head {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-weight: 600;
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.rule-head:first-child { margin-top: 0; }

/* ---------- bank library ---------- */
.bank {
  border-bottom: 1px solid var(--rule-soft);
  padding: 22px 0;
}
.bank:last-child { border-bottom: none; }
.bank-title {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.bank-sub {
  color: var(--ink-soft);
  font-size: 15.5px;
  margin-bottom: 12px;
}
.bank-meta {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.passes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pass-link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  transition: all 200ms ease;
}
.pass-link:hover { background: var(--ink); color: var(--paper); }
.pass-link.original { border-color: var(--accent); color: var(--accent); }
.pass-link.original:hover { background: var(--accent); color: var(--paper); }

/* ---------- forms / manage page ---------- */
.field { margin-bottom: 18px; }
label.field-label {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-bottom: 7px;
}
/* `search` belongs in this list. Left out, it fell back to the browser
   default: nineteen pixels tall beside a forty-three pixel select, with
   no padding at all. */
input[type="file"], input[type="text"], input[type="search"],
select, textarea {
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--rule);
  padding: 11px 13px;
  width: 100%;
  max-width: 420px;
}
input[type="file"] { font-family: var(--sans); font-size: 12px; padding: 9px; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.hint {
  font-size: 14px;
  color: var(--ink-mute);
  margin-top: 7px;
  max-width: 560px;
  line-height: 1.5;
}

/* ---------- notices ---------- */
.notice {
  border-left: 3px solid var(--ink);
  background: var(--paper-deeper);
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 15px;
  color: var(--ink-soft);
}
.notice.ok { border-left-color: var(--correct-rule); }
.notice.err { border-left-color: var(--incorrect-rule); }
.notice.hidden { display: none; }

/* ---------- reword progress ---------- */
.progress-shell { margin: 22px 0; }
.progress-track {
  height: 4px;
  background: var(--rule-soft);
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}
.progress-done {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  width: 0%;
  transition: width 300ms ease;
}
.progress-note {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* ---------- diff review ---------- */
.diff {
  border-top: 1px solid var(--rule);
  padding: 20px 0;
}
.diff-num {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.diff-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.diff-side .diff-side-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.diff-side.new .diff-side-label { color: var(--correct); }
.diff-stem { font-size: 15.5px; line-height: 1.5; margin-bottom: 10px; }
.diff-choices {
  list-style: none;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.diff-choices li { margin-bottom: 5px; padding-left: 22px; text-indent: -22px; }
.diff-choices li.key { color: var(--correct); font-weight: 500; }
.diff-choices .k {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  padding-right: 8px;
}
.diff.unchanged .diff-side.new { opacity: 0.5; }

.sticky-actions {
  position: sticky;
  bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--ink);
  padding: 16px 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  z-index: 5;
}

@media (max-width: 700px) {
  .diff-pair { grid-template-columns: 1fr; gap: 14px; }
}

/* =========================================================================
   Topics homepage and topic (lecture list) page.
   ========================================================================= */

.topic-actions { margin-bottom: 26px; }

.inline-form {
  border-left: 3px solid var(--accent);
  background: var(--paper-deeper);
  padding: 20px 22px 18px;
  margin-bottom: 26px;
}
.inline-form .field:last-of-type { margin-bottom: 14px; }

/* ---------- topic cards ---------- */
.topic-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--rule-soft);
  padding: 22px 0;
  position: relative;
  transition: padding-left 180ms ease;
}
.topic-card:last-child { border-bottom: none; }
.topic-card:hover { padding-left: 10px; }
.topic-name {
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.topic-card:hover .topic-name { color: var(--accent); }
.topic-meta {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.topic-go {
  position: absolute;
  right: 0;
  top: 24px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rule);
  transition: color 180ms ease;
}
.topic-card:hover .topic-go { color: var(--accent); }

/* ---------- lecture rows ---------- */
.lecture {
  border-bottom: 1px solid var(--rule-soft);
  padding: 22px 0;
}
.lecture:last-child { border-bottom: none; }
.lecture-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lecture-title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.lecture-meta {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.lecture-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.reword-info {
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}
button.reword.ready .reword-info { color: rgba(255, 255, 255, 0.72); }

/* The reword button: muted until you have finished the set once, then it
   takes the accent colour to invite a fresh pass. */
button.reword {
  border-color: var(--rule);
  color: var(--ink-mute);
}
button.reword:hover:not(:disabled) {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  color: var(--paper);
}
button.reword.ready {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
button.reword.ready:hover:not(:disabled) {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
button.danger { border-color: var(--rule); color: var(--ink-mute); }
button.danger:hover:not(:disabled) {
  background: var(--incorrect);
  border-color: var(--incorrect);
  color: var(--paper);
}

.topic-danger-zone { text-align: center; }
.topic-danger-zone .hint { margin-left: auto; margin-right: auto; }

/* a pass you have already completed */
.pass-link.done { border-color: var(--correct-rule); color: var(--correct); }
.pass-link.done:hover { background: var(--correct); color: var(--paper); }
.pass-score {
  font-size: 10px;
  opacity: 0.75;
  padding-left: 7px;
}

button.inline-stop {
  padding: 6px 12px;
  font-size: 10px;
  margin-left: 12px;
  vertical-align: middle;
}

.review-head {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin: 20px 0 4px;
}

/* ---------- quiz nav / skipped questions ---------- */
.nav-status {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  text-align: center;
}
.skip-note {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  padding-left: 8px;
}

@media (max-width: 600px) {
  .lecture-head { flex-direction: column; }
  .topic-go { display: none; }
}

/* ---------- dialogs ---------- */
/* Used by the topic page's "Study all lectures" popup and, on the quiz page,
   inside the exam driver's own modal frame. */

.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 20, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 60;
}
.modal-card {
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 18px 48px -12px rgba(0,0,0,0.35);
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
  font-weight: 600;
}
.modal-head .modal-close {
  border: 0;
  background: none;
  font-size: 15px;
  padding: 2px 6px;
  color: var(--ink-mute);
}
.modal-head .modal-close:hover { background: none; color: var(--ink); }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-body .field-label { margin-top: 4px; }
.modal-foot {
  padding: 14px 18px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* A selectable card: block choices inside a dialog. */
.pick {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--rule);
  background: #fff;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
}
.pick:hover:not(:disabled) { background: #fbfaf8; border-color: var(--ink-soft); color: var(--ink); }
.pick.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.pick:disabled { opacity: 0.45; cursor: not-allowed; }
.pick-name { font-weight: 600; margin-bottom: 3px; }
.pick-note { font-size: 13px; line-height: 1.5; color: var(--ink-mute); font-weight: 400; }

/* Quick presets, e.g. the question counts. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 7px 13px;
  cursor: pointer;
}
.chip:hover:not(:disabled) { background: #fbfaf8; border-color: var(--ink-soft); color: var(--ink); }
.chip.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* The study-all-lectures action at the head of a topic. */
.topic-study {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.topic-study .study-note { font-size: 13px; color: var(--ink-mute); }

/* =========================================================================
   Paragraph spacing
   ========================================================================= */

/* The reset at the top of this file zeroes every margin, which is what a
   reset is for, and nothing ever put paragraph spacing back. Two paragraphs
   in a row therefore ran together as one block of text with no gap, which is
   hard to read and hides where one thought ends and the next begins.

   Scoped to the site's own pages. The exam interface is the classic snapshot
   and sets its own spacing; a global `p` rule here would change the look of
   the quiz, which is the one thing that is meant to stay as it was. */
.app p,
.site-main p,
.modal-body p {
  margin-bottom: 0.9em;
  line-height: 1.6;
}

/* No trailing gap under the last paragraph in a box: the box already has its
   own padding, and the two together read as a mistake. */
.app p:last-child,
.site-main p:last-child,
.modal-body p:last-child {
  margin-bottom: 0;
}

/* A paragraph directly under a heading sits closer to it than to the
   paragraph before it, so the heading reads as belonging to what follows. */
.app h1 + p,
.app h2 + p,
.app h3 + p,
.app .rule-head + p,
.site-main .rule-head + p {
  margin-top: 0.2em;
}

/* ---------- signing in, and waiting to be let in ----------

   These two pages load only app.css and nav.css, not sets.css, so nothing
   here can lean on the layout the rest of the site gets. They were unstyled
   because of it: text hard against the left edge with no width limit.

   Centred, and held to a readable width. `.page` is the waiting page, which
   is the same shape with more words in it. */

.login-card,
.site-main > .page {
  max-width: 26rem;
  margin: 4rem auto;
  padding: 0 1.5rem;
  text-align: center;
}

.site-main > .page { max-width: 32rem; }

.login-card h1,
.site-main > .page h1 {
  font-size: 1.9rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.login-card p,
.site-main > .page p {
  color: var(--ink-mute);
  line-height: 1.6;
  margin-bottom: 1.4rem;
}

/* The one thing to press. It is an anchor rather than a button, so it needs
   the button's look given to it rather than inherited. */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 13px 26px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--paper);
  text-decoration: none;
  transition: all 200ms ease;
}

.btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--paper);
}

.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* The waiting page's Sign out is a way back, not the main action. */
.site-main > .page .btn {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}
.site-main > .page .btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Sign-in failures land here, so they have to be legible on a page that
   carries nothing else. */
.login-card .form-error,
.site-main > .page .form-error {
  margin-top: 1.4rem;
  padding: 12px 14px;
  border: 1px solid var(--incorrect-rule);
  border-radius: 6px;
  background: var(--incorrect-bg);
  color: var(--incorrect);
  font-size: 14px;
  line-height: 1.5;
}