: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: "EB Garamond", 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: "EB Garamond", 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: "EB Garamond", 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: "EB Garamond", 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: "EB Garamond", 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: "EB Garamond", 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: "EB Garamond", 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: "EB Garamond", 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: "EB Garamond", 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: "EB Garamond", 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: "EB Garamond", 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: "EB Garamond", 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: "EB Garamond", 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;
}

.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;
}

/* ---- 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 { min-width: max-content; }
.student-sheet-table {
  border-collapse: collapse;
  width: 100%;
}
.student-sheet-table td {
  border: 1px solid var(--rule);
  padding: 0.45rem 0.6rem;
  vertical-align: top;
}
.sheet-cell-text { font-size: 1rem; }
.sheet-cell-empty { background: transparent; border-color: transparent; }
.sheet-cell-answer { background: var(--paper-raised); }
.sheet-input {
  width: 100%;
  box-sizing: border-box;
  font-family: "EB Garamond", 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);
}