:root {
  --maroon: #6b1e2b;
  --maroon-dark: #4d1520;
  --gold: #b8863b;
  --cream: #faf6ee;
  --cream-dark: #f0e8d8;
  --ink: #2b2420;
  --ink-soft: #6b6055;
  --line: #e2d8c4;
  --good: #2e7d4f;
  --bad: #a53f3f;
  --max-width: 760px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Georgia", "Iowan Old Style", serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
}

header {
  background: var(--maroon);
  color: #fff;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

header .student-badge {
  font-family: -apple-system, sans-serif;
  font-size: 0.85rem;
  color: #e8d5b0;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 24px 80px;
  transition: max-width 0.2s ease, margin 0.2s ease;
}
/* A student flagged the grammar chart drawer (.modal-box, right-anchored,
   up to 360px wide) covering part of the sentence/answer card underneath
   it -- true whenever the centered content's own right margin is
   narrower than the drawer, which on a laptop-width screen is most of the
   time (a 760px card only gets 360px+ of clear margin on each side past
   ~1530px wide). While the chart is open, shift the card out of the
   drawer's way instead: hug it against the drawer's left edge (so any
   slack goes to the LEFT margin, not split evenly) and shrink it just
   enough that it always fits beside the drawer rather than under it. The
   280px floor keeps the translation input from collapsing to nothing on a
   phone-width screen, where the drawer is nearly full-width anyway and
   some overlap is unavoidable. */
body.grammar-open main {
  margin-left: auto;
  margin-right: min(360px, 92vw);
  max-width: max(280px, min(var(--max-width), calc(100vw - min(360px, 92vw) - 48px)));
}

.screen { display: none; }
.screen.active { display: block; }

h2 {
  color: var(--maroon-dark);
  font-weight: 400;
  font-size: 1.6rem;
  margin-top: 0;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 32px;
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-family: -apple-system, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: -apple-system, sans-serif;
  font-size: 1rem;
  background: var(--cream);
}

.field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  border: none;
  font-family: -apple-system, sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary { background: var(--maroon); color: #fff; }
.btn-primary:hover { background: var(--maroon-dark); }
.btn-primary:disabled { background: #c9b8b8; cursor: not-allowed; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--maroon);
  color: var(--maroon);
}
.btn-outline:hover { background: var(--cream-dark); }

.topic-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 20px 0 28px;
}

.topic-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--cream);
  font-family: -apple-system, sans-serif;
  font-size: 0.9rem;
}

.topic-item input { accent-color: var(--maroon); width: 16px; height: 16px; }

.topic-actions {
  font-family: -apple-system, sans-serif;
  font-size: 0.82rem;
  margin-bottom: 4px;
}
.topic-actions a { color: var(--maroon); cursor: pointer; text-decoration: underline; }

.progress {
  font-family: -apple-system, sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.progress-bar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 24px;
}
.progress-bar-fill { height: 100%; background: var(--gold); transition: width 0.2s; }

.latin-sentence {
  font-size: 1.6rem;
  text-align: center;
  margin: 10px 0 30px;
  color: var(--ink);
}

.topic-tag {
  display: inline-block;
  font-family: -apple-system, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 6px;
}

.feedback-box {
  padding: 16px 18px;
  border-radius: 4px;
  margin-top: 20px;
  border: 1px solid var(--line);
  font-family: -apple-system, sans-serif;
}

.feedback-box-correct { background: #eaf5ee; border-color: #bfe0cb; }
.feedback-box-incorrect { background: #fbeeee; border-color: #e6c2c2; }

.feedback-header {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
}
.feedback-box-correct .feedback-header { color: var(--good); }
.feedback-box-incorrect .feedback-header { color: var(--bad); }

.diff-readout {
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 10px 0;
}
.diff-wrong { color: var(--bad); text-decoration: line-through; text-decoration-thickness: 2px; }
.diff-missing { color: var(--bad); font-weight: 700; letter-spacing: 0.05em; }
.diff-legend { margin-top: 8px; }
.diff-legend .diff-wrong, .diff-legend .diff-missing { text-decoration: none; font-weight: 600; }

.btn-link {
  background: none;
  border: none;
  padding: 4px 0;
  margin-top: 8px;
  font-family: -apple-system, sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: var(--ink); }

.quiz-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

.btn-report {
  font-size: 0.82rem;
  padding: 8px 14px;
  border-color: var(--line);
  color: var(--ink-soft);
}
.btn-report:hover { background: var(--cream-dark); }
.btn-report:disabled { opacity: 0.6; cursor: default; }

.score-summary {
  text-align: center;
  padding: 20px 0;
}
.score-summary .big {
  font-size: 3rem;
  color: var(--maroon);
}
.score-summary .sub {
  font-family: -apple-system, sans-serif;
  color: var(--ink-soft);
  margin-bottom: 24px;
}

.topic-breakdown {
  font-family: -apple-system, sans-serif;
  font-size: 0.88rem;
  margin: 24px 0;
}
.topic-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.actions-row { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }

.muted { color: var(--ink-soft); font-family: -apple-system, sans-serif; font-size: 0.88rem; }

.class-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.class-option {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  font-family: -apple-system, sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}

.class-option.selected {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff;
}

.vocab-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-family: -apple-system, sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  margin-bottom: 6px;
}

.vocab-toggle input { accent-color: var(--maroon); width: 15px; height: 15px; }

.vocab-panel {
  background: var(--cream-dark);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 16px;
  margin: 0 0 20px;
  font-family: -apple-system, sans-serif;
  font-size: 0.88rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.vocab-panel .vocab-word { white-space: nowrap; }
.vocab-panel .vocab-word b { color: var(--maroon-dark); font-weight: 600; }

.chart-btn {
  display: block;
  margin: 0 auto 20px;
  font-size: 0.82rem;
  padding: 8px 16px;
}

/* ---- Assignment-complete pop-up ----
   Unlike the grammar chart's non-blocking drawer, this one deliberately IS
   a blocking, dimmed, centered modal with no close button -- once a student
   has finished a teacher-assigned session there's nothing left to do but
   read it and close the tab, so it isn't dismissible back into a results
   screen that (for assignments) never gets populated in the first place. */
.completion-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 36, 32, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 24px;
}
.completion-overlay[hidden] { display: none; }

.completion-box {
  background: #fff;
  border-radius: 8px;
  padding: 40px 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(43, 36, 32, 0.3);
}
.completion-box h2 {
  color: var(--maroon-dark);
  margin-top: 0;
  font-size: 1.7rem;
  font-weight: 400;
}
.completion-box p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 12px 0 0;
}

/* ---- Grammar chart side panel ----
   A right-anchored drawer, not a centered full-screen modal -- it has no
   dimming backdrop and doesn't block interaction with the rest of the
   page, so a student can keep the sentence/answer box in view (or even
   keep typing) while it's open. The outer .modal-overlay is just a
   non-interactive positioning host (pointer-events:none) so clicks pass
   through to the page everywhere except the panel itself. */
.modal-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}
.modal-overlay[hidden] { display: none; }

.modal-box {
  pointer-events: auto;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(360px, 92vw);
  max-height: none;
  margin: 0;
  border-radius: 0;
  box-shadow: -8px 0 24px rgba(43, 36, 32, 0.22);
  padding: 24px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
}

.modal-box h2 { margin-bottom: 20px; font-size: 1.3rem; }

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 4px 8px;
}
.modal-close:hover { color: var(--ink); }

/* Narrow panel means the chart's sub-tables stack instead of sitting
   side by side (there isn't room for three across at 360px). */
.chart-top, .chart-bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
}
.chart-top .chart-table, .chart-bottom .chart-table { width: 100%; }
.chart-table td, .chart-table th { white-space: normal; }

.chart-table {
  border-collapse: collapse;
  font-family: -apple-system, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
}

.chart-table td, .chart-table th {
  padding: 6px 6px;
  border: 2px solid #fff;
  text-align: left;
  white-space: nowrap;
}

/* The declension table has 4-5 columns -- fixed layout with explicit
   percentage widths keeps every column narrow enough to fit the panel
   instead of sizing to its widest cell's content ("By/With/From"). */
.chart-decl {
  table-layout: fixed;
  width: 100%;
}
.chart-decl .chart-group { width: 17%; }
.chart-decl .chart-label { width: 33%; }
.chart-decl td { width: 16.6%; }

.chart-group, .chart-label { background: #0a6e6b; color: #fff; }
.chart-c1 { background: #17aba3; color: #fff; }
.chart-c2 { background: #2bc2da; color: #fff; }
.chart-c3 { background: #3f6fe6; color: #fff; }

.chart-p-label { background: #e8912a; color: #fff; }
.chart-p-value { background: #f6bf74; color: #3a2a10; }

.chart-t-label { background: #7a3fb0; color: #fff; }
.chart-t-value { background: #b98adf; color: #2c1740; }

.chart-green-label { background: #2e9e4f; color: #fff; }
.chart-green-value { background: #7ecb92; color: #12331c; }
.chart-red-label { background: #d64545; color: #fff; }
.chart-red-value { background: #eb9797; color: #4a1414; }
.chart-gray-label { background: #6b6b6b; color: #fff; }
.chart-gray-value { background: #b3b3b3; color: #1f1f1f; }

.site-note {
  max-width: 640px;
  margin: 28px auto 32px;
  padding: 0 16px;
  text-align: center;
  color: var(--ink-soft);
  font-family: -apple-system, sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
}

header .home-link { color: #fff; opacity: 0.8; font-family: -apple-system, sans-serif; font-size: 0.8rem; text-decoration: none; margin-left: auto; margin-right: 14px; align-self: center; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; padding: 4px 10px; }
header .home-link:hover { opacity: 1; background: rgba(255,255,255,0.12); }
header .course-name { font-size: 0.6em; font-weight: 400; opacity: 0.8; margin-left: 10px; font-family: -apple-system, sans-serif; }

/* "Buy me a coffee" beside every practice question: left margin on wide screens (the right is kept free
   for the grammar chart), a small centred card under the question on narrow ones. */
.coffee-side { margin: 0 0 16px; text-align: center; font-family: -apple-system, sans-serif; }
.coffee-side a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--maroon); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; line-height: 1.3; box-shadow: 0 1px 6px rgba(80, 40, 20, 0.06); }
.coffee-side a:hover { border-color: var(--gold); box-shadow: 0 3px 12px rgba(80, 40, 20, 0.12); }
.coffee-side .coffee-cup { font-size: 1.6rem; }
.coffee-side .coffee-text { text-align: left; color: var(--ink-soft); }
.coffee-side .coffee-text strong { color: var(--maroon); }
.coffee-side p { margin: 6px 0 0; font-size: 0.72rem; color: var(--ink-soft); opacity: 0.8; }
@media (min-width: 1180px) {
  .coffee-side { position: fixed; left: 24px; top: 300px; width: 168px; margin: 0; }
  .coffee-side a { flex-direction: column; gap: 6px; padding: 14px 12px; width: 100%; }
  .coffee-side .coffee-text { text-align: center; }
}

body.assigned-mode .coffee-side { display: none !important; }