:root {
  --ink: #262220;
  --ink-soft: #58504b;
  --paper: #faf7f2;
  --paper-raised: #ffffff;
  --rule: #ddd4c8;
  --oxblood: #7a2e2a;
  --oxblood-soft: #a8453f;
  --correct: #3f6b4a;
  --correct-bg: #e9f1e9;
  --partial: #96631e;
  --partial-bg: #faf1e0;
  --incorrect: #8c3b34;
  --incorrect-bg: #f7e9e7;
  --focus: #2f6f8f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 19px;
  line-height: 1.5;
}

body {
  padding-bottom: 5rem;
}

.masthead {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.eyebrow {
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 0.4rem;
}

h1 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--ink);
}

h1 .subtitle {
  font-family: "Crimson Pro", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink-soft);
}

.masthead-note {
  margin: 0.75rem 0 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.quiz {
  /* 720px suits running prose, but it's too narrow for the grids this app
     is actually built around - a five-word sentence grid needs ~730px on
     its own. Capped at 1100px instead: wide enough for the common layouts,
     still narrow enough that a line of text doesn't run so far the eye
     loses its place coming back. */
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Prose stays narrow even on a wide page, since long lines are genuinely
   harder to read. Only the grids use the full width. */
.quiz .test-directions,
.quiz .section-directions {
  max-width: 720px;
}

.loading {
  color: var(--ink-soft);
  font-style: italic;
}

.section-heading {
  font-family: "Cinzel", serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.section-heading:first-child {
  margin-top: 0;
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.1rem;
}

.prompt {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 0.3rem;
}

.directions {
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 0.9rem;
}

.blank-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-end;
}

.blank-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.blank-field label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

input[type="text"], select {
  font-family: "Crimson Pro", serif;
  font-size: 1.05rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #c9beb0;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  min-width: 160px;
}

input[type="text"]:focus, select:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.check-btn {
  font-family: "Crimson Pro", serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  background: var(--oxblood);
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.check-btn:hover { background: var(--oxblood-soft); }
.check-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.verdict-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-weight: 600;
}

.badge.correct { background: var(--correct-bg); color: var(--correct); }
.badge.partial { background: var(--partial-bg); color: var(--partial); }
.badge.incorrect { background: var(--incorrect-bg); color: var(--incorrect); }

.scorebar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: 0.75rem 1.5rem;
  font-family: "Cinzel", serif;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 6px 6px 0 0;
}

.clock {
  position: fixed;
  top: 1rem; right: 1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: "Cinzel", serif;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  z-index: 50;
}
.clock.clock-warning {
  background: var(--oxblood);
  animation: clock-pulse 1s infinite;
}
@keyframes clock-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.score-breakdown {
  max-width: 420px;
  margin: 1.5rem auto 0;
}
.score-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
}
.score-total {
  font-weight: 600;
  border-top: 2px solid var(--ink);
  margin-top: 0.4rem;
}
.score-pending {
  color: var(--partial);
  font-style: italic;
}
.score-bonus {
  color: var(--correct);
  font-style: italic;
}
.score-grand-total {
  font-weight: 700;
  font-size: 1.15rem;
  border-bottom: none;
  color: var(--oxblood);
}
.vocab-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-raised);
}

.vocab-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.vocab-table th, .vocab-table td {
  padding: 0.55rem 0.6rem;
  box-sizing: border-box;
}

.vocab-table thead th {
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}

.vocab-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--rule);
}

.vocab-table .vocab-prompt-cell {
  font-size: 1rem;
  font-weight: 500;
  width: 32%;
}

/* Single-answer questions (multiple choice, one-word vocab): a narrow
   answer box on the left, question text taking the rest of the row. */
.vocab-table-answer-first { table-layout: auto; }
.vocab-table-answer-first .vocab-answer-cell {
  width: 1%;
  white-space: nowrap;
}
.vocab-table-answer-first .vocab-answer-cell input[type="text"] {
  width: 5rem;
  text-align: center;
}
.vocab-table-answer-first .vocab-answer-cell select { width: auto; min-width: 5rem; }
.vocab-table-answer-first .vocab-prompt-cell {
  width: auto;
  font-weight: 400;
}
.vocab-table-answer-first thead th { text-align: left; }

.vocab-table td input[type="text"], .vocab-table td select {
  width: 100%;
  min-width: 0;
  font-family: "Crimson Pro", serif;
  font-size: 1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #c9beb0;
  border-radius: 3px;
  background: var(--paper);
  box-sizing: border-box;
}

.vocab-given {
  font-style: italic;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .vocab-table th, .vocab-table td { padding: 0.4rem 0.35rem; font-size: 0.9rem; }
}

.subsection-directions {
  background: var(--surface-btn, #efe9df);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.7rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
  white-space: pre-line;
  color: var(--ink);
}

.name-gate {
  position: fixed;
  inset: 0;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.name-gate[hidden] {
  display: none;
}
.name-gate-box {
  max-width: 420px;
  width: 90%;
  text-align: center;
}
.name-gate-box h1 {
  font-size: 1.6rem;
  margin: 0.4rem 0 1.5rem;
}
.name-gate-box label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.name-gate-box input {
  width: 100%;
  font-family: "Crimson Pro", serif;
  font-size: 1.1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #c9beb0;
  border-radius: 3px;
  margin-bottom: 1.25rem;
  background: var(--paper-raised);
  color: var(--ink);
}

.section-masthead {
  margin-top: 2.5rem;
}
.section-masthead:first-child {
  margin-top: 0;
}

.blank-grid {
  display: grid;
  gap: 0.9rem;
  align-items: end;
}

.layout-groups { display: flex; flex-direction: column; gap: 1.25rem; }
.layout-group-label {
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  .check-btn { transition: none; }
}

/* ---- Matching blocks: numbered prompts left, lettered legend right ---- */
/* Breaks out of the 720px reading column, since two parallel columns of
   real Latin entries and English definitions need the room. Latin entries
   never wrap (they're the identifier being tested, and a broken one is
   hard to read); English definitions may wrap when genuinely too long,
   but only at spaces/commas, never mid-word. */
.matching-card {
  width: min(96vw, 1180px);
  margin-left: 50%;
  transform: translateX(-50%);
}

.matching-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.matching-item-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  white-space: nowrap;
}

.matching-num {
  font-size: 0.85rem;
  color: var(--ink-soft);
  min-width: 1.7rem;
  text-align: right;
  flex-shrink: 0;
}

.matching-code-input {
  width: 2.9rem;
  min-width: 0;
  flex-shrink: 0;
  text-align: center;
  text-transform: uppercase;
  font-family: "Crimson Pro", serif;
  font-size: 0.95rem;
  padding: 0.25rem 0.2rem;
  border: 1px solid #c9beb0;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}

.matching-prompt {
  font-size: 0.92rem;
  white-space: nowrap;
}

/* Latin entries stay on one line; if one is extraordinarily long, this
   column scrolls rather than wrapping or breaking the word. */
.matching-items { overflow-x: auto; }

.matching-legend {
  border-left: 1px solid var(--rule);
  padding-left: 1.1rem;
}

.matching-legend-row {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  align-items: baseline;
}

.matching-legend-code {
  font-weight: 600;
  min-width: 1.9rem;
  flex-shrink: 0;
  color: var(--oxblood);
}

/* Definitions may wrap onto a second line, but never mid-word:
   overflow-wrap/word-break stay at their defaults so breaks happen only
   at spaces. The hanging indent keeps continuation lines aligned under
   the first word rather than under the code letter. */
.matching-legend-def {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

@media (max-width: 900px) {
  .matching-card { width: 96vw; }
  .matching-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .matching-legend { border-left: none; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 1rem; }
}

/* ---- Macron typing helper (shared by student test and teacher builder) ---- */
.macron-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 0.4rem 1.5rem;
}

.macron-palette {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.macron-palette-key {
  font-family: "Crimson Pro", serif;
  font-size: 1.05rem;
  width: 2.1rem;
  height: 1.9rem;
  border: 1px solid #c9beb0;
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
}
.macron-palette-key:hover { background: #f2ece2; }

.macron-hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-left: 0.5rem;
}

@media (max-width: 640px) {
  .macron-hint { display: none; }
}

/* ---- Directions at every level ---- */
/* Weight descends with scope: the whole-test directions read most
   prominently, a per-cell hint most quietly. */
.test-directions {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--oxblood);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  font-size: 1rem;
  white-space: pre-line;
}

.section-directions {
  padding: 0.5rem 0 0;
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-soft);
  white-space: pre-line;
}

.vocab-hint-cell {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
  padding-top: 0 !important;
  padding-bottom: 0.5rem !important;
}

.cell-hint {
  display: block;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

/* ---- Safety net for the [hidden] attribute ----
   Any element with an explicit `display` value silently overrides the
   browser's built-in `[hidden] { display: none }`, so setting .hidden in
   JS appears to do nothing. That bug has bitten this app twice (the name
   screen, then the submit bar). This blanket rule makes `hidden` win
   everywhere, so it can't happen again. */
[hidden] {
  display: none !important;
}

/* ---- Sentence-parsing grids ----
   Words run across as columns; the questions about each word run down as
   rows, matching the paper exam. Breaks out of the reading column since a
   five-word sentence needs five columns. */
.sentence-card {
  width: min(96vw, 1180px);
  margin-left: 50%;
  transform: translateX(-50%);
}

.sentence-table-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.sentence-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sentence-table th {
  font-family: "Crimson Pro", serif;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--rule);
  background: #f2ece2;
  white-space: nowrap;
}

.sentence-table td {
  border: 1px solid var(--rule);
  padding: 0.4rem 0.6rem;
  vertical-align: top;
}

.grid-cell-label {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.2rem;
}

.grid-sublabel {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0.25rem 0 0.1rem;
}

.grid-given {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.15rem 0;
}

/* Inputs fill their cell exactly, so nothing can spill outside the box. */
.sentence-table .grid-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: "Crimson Pro", serif;
  font-size: 0.92rem;
  padding: 0.3rem 0.35rem;
  border: 1px solid #c9beb0;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.sentence-translation {
  display: block;
  margin-top: 0.5rem;
}
.sentence-translation label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.sentence-translation textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: "Crimson Pro", serif;
  font-size: 1.05rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #c9beb0;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 900px) {
  .sentence-card { width: 96vw; }
  .sentence-table { table-layout: auto; }
  .sentence-table th, .sentence-table td { min-width: 8.5rem; }
}

/* ---- Sign-in screens ---- */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-box {
  width: 100%;
  max-width: 380px;
}

.login-box h1 {
  font-size: 1.7rem;
  margin: 0.3rem 0 1.5rem;
}

.login-box label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.login-box input, .name-gate-box select {
  width: 100%;
  box-sizing: border-box;
  font-family: "Crimson Pro", serif;
  font-size: 1.05rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #c9beb0;
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
  margin-bottom: 1rem;
}

.login-error {
  background: var(--incorrect-bg);
  color: var(--incorrect);
  border: 1px solid var(--incorrect);
  border-radius: 3px;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  margin: 0 0 0.9rem;
}

.login-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 1.2rem;
}
.login-note a { color: var(--oxblood); }

/* ---- Autosave indicator and student notices ---- */
.save-state {
  font-family: "Crimson Pro", serif;
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}
.save-state-bad {
  color: #ffb4ab;
  opacity: 1;
  font-weight: 600;
}

/* In-page questions and messages: the test page's own look, not the browser's. */
.page-dialog {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(30, 20, 15, 0.45);
}
.page-dialog-card {
  width: min(26rem, 100%);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--oxblood);
  border-radius: 6px;
  padding: 1.3rem 1.4rem 1.1rem;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
  font-family: "Crimson Pro", serif;
}
.page-dialog-card p { margin: 0 0 1.1rem; font-size: 1.1rem; line-height: 1.45; }
.page-dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.page-dialog-btn {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.45rem 1.1rem;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-soft);
}
.page-dialog-btn:hover { background: rgba(0, 0, 0, 0.05); }
.page-dialog-btn-primary { background: var(--oxblood); color: #fff; border-color: var(--oxblood); font-weight: 600; }
.page-dialog-btn-primary:hover { background: var(--oxblood); filter: brightness(1.1); }
.page-dialog-btn:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 2px; }

/* A banner above the score bar while something is wrong with the connection. */
.net-banner {
  position: fixed;
  left: 50%;
  bottom: 4.2rem;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 1.5rem));
  z-index: 60;
  background: #fff4d6;
  color: var(--ink);
  border: 1px solid #d9a441;
  border-left-width: 5px;
  border-radius: 6px;
  padding: 0.7rem 1rem;
  font-family: "Crimson Pro", serif;
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
}
.net-banner-btn, .scorebar-link {
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
}
.net-banner-btn {
  margin-left: 0.4rem;
  padding: 0.15rem 0.6rem;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-weight: 600;
}
.scorebar-link {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.scorebar-link:hover { background: rgba(255, 255, 255, 0.12); }
.scorebar { gap: 0.6rem; flex-wrap: wrap; }

.student-toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--correct-bg);
  color: var(--correct);
  border: 1px solid var(--correct);
  border-radius: 4px;
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
  z-index: 200;
  max-width: min(560px, calc(100% - 2rem));
  text-align: center;
}

/* ---- Spreadsheet pages on the student test ---- */
.student-sheet { margin-bottom: 2rem; }
/* A wide grid scrolls sideways rather than crushing its columns - an
   8-word sentence grid genuinely needs more room than a laptop gives it. */
.student-sheet-scroll { overflow-x: auto; }
.student-sheet-table {
  border-collapse: collapse;
  width: 100%;
  /* Fixed layout is what makes a column keep the width it was given.
     With the default (auto), the browser sizes each column to its widest
     content - so a dropdown listing "D. The second s" forced its column
     wide enough to hold that text, pushing everything else sideways.
     A previous min-width:max-content made this actively worse by telling
     the table to grow to its content. */
  table-layout: fixed;
}
/* No cell borders. The grid is scaffolding for BUILDING a test - a student
   should see a page, not a spreadsheet. Alignment still comes from the
   table, so a declension chart's columns line up without being boxed. */
.student-sheet-table td {
  border: none;
  padding: 0.45rem 0.6rem;
  vertical-align: top;
  /* Contents stay within their column even without a visible edge. */
  overflow: hidden;
}
.sheet-cell-text { font-size: 1rem; }
.sheet-cell-empty { background: transparent; }
/* An answer cell is marked by its input box, not by shading the cell -
   shading every blank made the page look like a form to fill in rather
   than a test to read. */
.sheet-cell-answer { background: transparent; }
.sheet-input {
  width: 100%;
  max-width: 100%;
  /* A text input defaults to roughly twenty characters wide and will NOT
     shrink below that unless told to - so in a narrow or split cell it
     overflowed and had its right border clipped away. This is what makes
     width:100% actually win. */
  min-width: 0;
  box-sizing: border-box;
  font-family: "Crimson Pro", serif;
  font-size: 1rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid #c9beb0;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}
.sheet-break {
  border: none;
  border-top: 2px solid var(--rule);
  margin: 2.5rem 0;
}
.sheet-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.sheet-pager-position {
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}


/* A dropdown sizes itself to its widest option unless told otherwise, which
   is how a four-option multiple choice ended up overflowing a narrow
   column. Constrained to the cell, with the full text still readable once
   it's opened. */
select.sheet-input {
  box-sizing: border-box;
  min-width: 0;
  text-overflow: ellipsis;
}

/* Ruled lines, when a page asks for them. A declension chart reads better
   with them; a page of questions reads worse. */
.student-sheet-table.ruled td { border: 1px solid var(--rule); }


/* Same reasoning for a cell that holds two inputs side by side: without
   min-width:0 on the container, a flex or table cell refuses to shrink
   below its content's intrinsic width. */
.student-sheet-table td > * { min-width: 0; }

/* A page's typing restrictions, stated once above it rather than repeated
   under every blank - which in a matching section pushed the answers off
   the screen. */
.sheet-typing-note {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}

/* Crossing out. A student striking through a matching option as they use
   it, the way they would on paper. Presentation only - crossings are
   stored apart from answers and never reach grading.

   There was a companion "flag this to come back to" star on every blank.
   It was removed: a button in every answer cell expanded the rows and
   cluttered a page far more than the feature was worth. */
.sheet-cell-text.markable { cursor: pointer; }
.sheet-cell-text.markable:hover { background: rgba(0, 0, 0, 0.03); }
.sheet-cell-text.struck {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--ink-soft);
  opacity: 0.65;
}



.marks-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 0.5rem;
}

/* Compact rows, for a long matching list where the usual spacing means a
   student scrolls past the answers to find the options. */
.student-sheet-table.compact td { padding: 0.12rem 0.4rem; }
.student-sheet-table.compact .sheet-input { padding: 0.15rem 0.35rem; }
.student-sheet-table.compact .cell-hint { margin-top: 0; }

/* An asterisk marking something to come back to. Drawn in the cell's own
   space rather than added to it, so marking a question doesn't shift the
   page - a button in every cell was what made the earlier version
   cluttered. */
.student-sheet-table td { position: relative; }
.student-sheet-table td.starred::before {
  content: "*";
  position: absolute;
  left: 0.1rem;
  top: 0.15rem;
  color: var(--incorrect);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  pointer-events: none;
}
/* A little room for it, so it never sits over the text. */
.student-sheet-table td.starred { padding-left: 0.95rem; }