/* The SAT@KANS house style: brand brown #723500 and teal #035b52.
   Taken from app.kanslearning.com so the two systems feel like one. */
:root {
  --ground: #f4f5f4; --surface: #ffffff; --raise: #f3f5f4;
  --ink: #1f2322; --muted: #5f6866; --line: #dfe3e1; --line-soft: #eceeed;
  --brown: #723500; --brown-soft: #f5ebe2;
  --teal: #035b52; --teal-ink: #ffffff; --teal-soft: #e2f0ee; --teal-deep: #024139;
  --st-green: #2f9e5e; --st-amber: #e3a21a; --st-grey: #c7cdd0;
  --st-red: #d5463e; --st-blue: #2c86d9;
  --ok: #23804b; --ok-soft: #e4f4ea;
  --display: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* What this app's own rules already ask for, pointed at the brand. */
  --bg: var(--ground); --card: var(--surface); --tint: var(--raise);
  --brand: var(--teal-deep); --brand-2: var(--teal); --accent: var(--teal);
  --ok-bg: var(--ok-soft);
  --warn: var(--brown); --warn-bg: var(--brown-soft);
  --bad: var(--st-red); --bad-bg: #fde8e6; --flag: var(--st-amber);
  --radius: 14px;
  --font: var(--body);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #111615; --surface: #19201f; --raise: #1f2826;
    --ink: #e7ecea; --muted: #9ba7a4; --line: #2b3533; --line-soft: #232c2a;
    --brown: #e39a5e; --brown-soft: #3a2615;
    --teal: #4cc3b3; --teal-ink: #06201d; --teal-soft: #16322e; --teal-deep: #8fe0d4;
    --st-green: #4cc07e; --st-amber: #f0b73e; --st-grey: #4a5553;
    --st-red: #f06a60; --st-blue: #52a6f0;
    --ok: #5fcf95; --ok-soft: #17362a;
    --bad-bg: #3a1d1b;
  }
}
:root[data-theme="dark"] {
  --ground: #111615; --surface: #19201f; --raise: #1f2826;
  --ink: #e7ecea; --muted: #9ba7a4; --line: #2b3533; --line-soft: #232c2a;
  --brown: #e39a5e; --brown-soft: #3a2615;
  --teal: #4cc3b3; --teal-ink: #06201d; --teal-soft: #16322e; --teal-deep: #8fe0d4;
  --st-green: #4cc07e; --st-amber: #f0b73e; --st-grey: #4a5553;
  --st-red: #f06a60; --st-blue: #52a6f0;
  --ok: #5fcf95; --ok-soft: #17362a;
  --bad-bg: #3a1d1b;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 16px/1.5 var(--font); color: var(--ink); background: var(--bg); }
a { color: var(--brand-2); }
h1 { font-size: 1.6rem; margin: .2rem 0 .8rem; }
h2 { font-size: 1.2rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
code, .mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- chrome */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 1.25rem; background: var(--brand); color: #fff; }
.topbar a, .topbar .link { color: #fff; }
.brand { font-weight: 700; text-decoration: none; letter-spacing: .02em; }
.brand span { font-weight: 400; opacity: .8; margin-left: .3rem; }
.topbar nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.topbar nav a { text-decoration: none; }
.topbar .who { opacity: .75; }
.topbar form { margin: 0; }
.page { max-width: 1150px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.flash { background: var(--warn-bg); border: 1px solid #f2d59b; padding: .6rem .9rem;
  border-radius: var(--radius); margin-bottom: 1rem; white-space: pre-line; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.card.narrow { max-width: 420px; margin: 2rem auto; }
.card.wide { max-width: 860px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.row-end { display: flex; justify-content: flex-end; gap: .5rem; }
.subject { text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.subject a { color: inherit; }
.exam-card h2 { margin: .2rem 0; }

label { display: block; margin: .5rem 0; font-weight: 500; }
label input, label select { display: block; margin-top: .25rem; }
input, select, textarea { font: inherit; padding: .45rem .6rem; border: 1px solid #b9c2cf;
  border-radius: 6px; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 3px solid #9cc3ff; outline-offset: 1px; }
textarea { width: 100%; }
input.code { text-transform: uppercase; letter-spacing: .2em; font-weight: 600; width: 10rem; }
input.short { width: 5rem; }
.table input { padding: .25rem .4rem; }

button, .button { font: inherit; display: inline-block; padding: .45rem .95rem; border-radius: 6px;
  border: 1px solid #b9c2cf; background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; }
button:hover, .button:hover { background: #eef2f7; }
button:disabled { opacity: .45; cursor: default; }
button.primary, .button.primary { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
button.primary:hover, .button.primary:hover { background: var(--brand); }
button.danger { color: var(--bad); border-color: #e6aaa4; }
button.big { padding: .7rem 1.6rem; font-size: 1.05rem; }
button.small, .button.small { padding: .2rem .6rem; font-size: .85rem; }
button.link { background: none; border: 0; padding: 0; color: var(--brand-2); text-decoration: underline; }
form.inline { display: inline; }

.pill { display: inline-block; padding: .1rem .6rem; border-radius: 999px; background: #e9edf3; font-size: .85rem; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.alert { color: var(--bad); cursor: pointer; }
strong.code.big { font-size: 1.5rem; letter-spacing: .15em; }

.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.table th, .table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: #f8fafc; }
.table .num { text-align: right; }
.facts { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1rem 0; }
.facts dt { font-size: .8rem; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
.checklist { columns: 3 220px; margin: .5rem 0 1rem; }
.checklist label { font-weight: 400; margin: .2rem 0; break-inside: avoid; }
.checklist input { display: inline; margin: 0 .4rem 0 0; }
.boundaries { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.boundaries label { margin: 0; }
.boundaries input { width: 4.8rem; }

/* ---------------------------------------------------------------- exam screen */
body.exam { overflow: hidden; background: #e8ecf1; }
.exam-app { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.exam-app > .flash { margin: .5rem; }
.exam-bar { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem; background: var(--brand); color: #fff; }
.exam-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.exam-title span { font-size: .85rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tools { display: flex; gap: .4rem; margin-left: 1rem; }
.tool { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); padding: .3rem .8rem; }
.tool:hover { background: rgba(255,255,255,.12); }
.tool.on { background: #ffe066; color: #222; border-color: #ffe066; }
.exam-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.candidate { opacity: .85; }
.save-status { font-size: .8rem; opacity: .8; }
.save-status.bad { color: #ffb4ab; opacity: 1; font-weight: 600; }
.clock-box { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.1);
  border-radius: 6px; padding: .15rem .8rem; min-width: 6.5rem; }
.clock-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.clock { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.clock.warn { color: #ffd166; }
.clock.danger { color: #ff8a80; animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .55; } }

.exam-body { display: flex; min-height: 0; gap: 0; }
.stimulus { flex: 1 1 45%; overflow: auto; padding: 1.5rem 1.75rem; background: #fbfaf6; border-right: 1px solid var(--line); }
.stimulus img, .prompt img { max-width: 100%; height: auto; }
.stimulus figure { margin: 1rem 0; }
.stimulus video, .stimulus iframe, .prompt video { max-width: 100%; }
figure.video { margin: 1rem 0; }
figure.video video { display: block; border-radius: 6px; background: #000; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
figure.video figcaption, .transcript { font-size: .85rem; color: var(--muted); margin-top: .4rem; }
.transcript summary { cursor: pointer; color: var(--brand-2); font-weight: 600; }
.transcript ol { padding-left: 1.4rem; }
.poem p { margin: 0 0 1rem; line-height: 1.75; }
.poem { font-size: 1.02rem; }
.question-pane { flex: 1 1 55%; overflow: auto; padding: 1.5rem 2rem 3rem; background: #fff; outline: none; }
.question-pane > * { max-width: 820px; }
.q-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.qnum { font-weight: 700; font-size: 1.1rem; color: var(--brand); }
.marks { margin-left: auto; font-weight: 600; color: var(--brand-2); }
.prompt { font-size: 1.05rem; margin-bottom: 1.1rem; }
.prompt p:first-child { margin-top: 0; }
.hint { color: var(--muted); font-size: .88rem; margin: .5rem 0; }
body.highlighting .stimulus, body.highlighting .highlightable { cursor: text; }
mark.hl { background: #ffe066; padding: 0 .05em; }
body.highlighting mark.hl { cursor: pointer; }

.exam-nav { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center;
  gap: .3rem .8rem; padding: .5rem 1rem; background: #fff; border-top: 1px solid var(--line); }
.nav-items { display: flex; gap: 1rem; overflow-x: auto; padding: .2rem 0; }
.nav-group { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.nav-section { font-size: .72rem; color: var(--muted); margin-right: .25rem; max-width: 9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-q { position: relative; width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 5px; font-weight: 600; font-size: .9rem; }
.nav-q.done { background: #dbe8fb; border-color: #9dbbe6; }
.nav-q.current { outline: 3px solid var(--accent); outline-offset: 1px; }
.nav-q.flagged::after { content: ""; position: absolute; top: -1px; right: -1px; border-style: solid;
  border-width: 0 10px 10px 0; border-color: transparent var(--flag) transparent transparent; border-top-right-radius: 5px; }
.nav-right { display: flex; gap: .4rem; }
.navbtn.flag.on { background: #fff4e0; border-color: var(--flag); color: var(--flag); }
.navbtn.finish { background: var(--brand-2); color: #fff; border-color: var(--brand-2); }
.progress { grid-column: 1 / -1; font-size: .78rem; color: var(--muted); }

.review { border: 0; border-radius: var(--radius); padding: 1.4rem; width: min(560px, 94vw); }
.review::backdrop { background: rgba(10,20,35,.55); }
.review-list { max-height: 45vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.review-row { display: flex; justify-content: space-between; width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.review-row.missing { color: var(--bad); font-weight: 600; }
.gate { position: fixed; inset: 0; background: rgba(10,20,35,.8); display: flex; align-items: center; justify-content: center; z-index: 50; }
.toast { position: fixed; top: 4.2rem; right: 1rem; background: #222; color: #fff; padding: .7rem 1rem;
  border-radius: 6px; z-index: 60; box-shadow: 0 4px 14px rgba(0,0,0,.25); }

/* ---------------------------------------------------------------- question widgets */
.options { display: flex; flex-direction: column; gap: .5rem; }
.option { display: flex; align-items: flex-start; gap: .7rem; padding: .65rem .9rem; margin: 0; font-weight: 400;
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.option:hover { background: #f5f8fc; }
.option.chosen { border-color: var(--accent); background: #eef4ff; }
.option input { margin: .3rem 0 0; display: inline; }
.option .letter { font-weight: 700; color: var(--brand-2); min-width: 1.1rem; }
.option.correct { box-shadow: inset 4px 0 0 var(--ok); }
.inline-answer { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.answer-input { font-size: 1.05rem; width: 12rem; }
.answer-input.wide { width: min(100%, 32rem); }
.long-input { min-height: 18rem; font-size: 1rem; line-height: 1.6; resize: vertical; }
.wordcount { font-size: .85rem; color: var(--muted); text-align: right; margin-top: .25rem; }
.wordcount.over { color: var(--bad); font-weight: 600; }
.long-answer { white-space: pre-wrap; background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; padding: .8rem 1rem; }
math-field.math-input { display: block; font-size: 1.3rem; border: 1px solid #b9c2cf; border-radius: 6px; padding: .4rem .6rem; min-height: 3rem; }

.chip-bank { display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem; background: #f3f6fa; border: 1px dashed #b9c2cf;
  border-radius: 6px; margin-bottom: 1rem; min-height: 3rem; }
.chip { background: #fff; border: 1px solid #9dbbe6; border-radius: 5px; padding: .35rem .8rem; cursor: grab; }
.chip.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.slot { min-width: 9rem; min-height: 2.4rem; border: 2px dashed #b9c2cf; border-radius: 6px; background: #fff; color: var(--muted); }
.slot.filled { border-style: solid; border-color: #9dbbe6; background: #eef4ff; color: var(--ink); }
.slot.ready, .slot.over { border-color: var(--accent); background: #f0f6ff; }
.slot.right { border-color: var(--ok); background: var(--ok-bg); }
.slot.wrong { border-color: var(--bad); background: var(--bad-bg); }
.match-list { display: flex; flex-direction: column; gap: .5rem; }
.match-row { display: grid; grid-template-columns: 1fr minmax(10rem, 16rem); gap: 1rem; align-items: center;
  padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
.label-image { position: relative; display: inline-block; max-width: 100%; }
.label-image > svg, .label-image > img { display: block; max-width: 100%; height: auto; }
.slot.zone { position: absolute; transform: translate(-50%, -50%); min-width: 2.2rem; min-height: 2.2rem;
  padding: .15rem .5rem; font-size: .88rem; font-weight: 600; }
.slot.zone.filled { font-weight: 500; }
.order-list { padding-left: 1.6rem; display: flex; flex-direction: column; gap: .4rem; }
.order-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; cursor: grab; }
.order-item .grow { flex: 1; }
.order-item.right { border-color: var(--ok); }
.order-item.wrong { border-color: var(--bad); }
.order-btns { display: flex; gap: .2rem; }
.table-wrap { overflow-x: auto; }
.data-table { border-collapse: collapse; }
.data-table th, .data-table td { border: 1px solid #aeb8c6; padding: .4rem .7rem; text-align: center; }
.data-table th { background: #eef2f7; }
.data-table td.blank { background: #fffdf0; padding: .25rem; }
.cell-input { width: 6.5rem; text-align: center; }
.plot-wrap { max-width: 600px; }
svg.plot { width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; user-select: none; }
svg.plot.live { cursor: crosshair; }
svg.plot .grid line { stroke: #e3e8ef; stroke-width: 1; }
svg.plot .grid line.axis { stroke: #7b8796; stroke-width: 1.5; }
svg.plot .grid .frame { fill: none; stroke: #7b8796; }
svg.plot text { font: 12px var(--font); fill: #5f6b7a; }
svg.plot text.label { font-weight: 600; fill: var(--ink); }
svg.plot .cross { stroke: var(--brand-2); stroke-width: 2.5; stroke-linecap: round; }
svg.plot .expected { fill: none; stroke: var(--ok); stroke-width: 2; stroke-dasharray: 3 2; }
.point-list { font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.key-note { font-size: .88rem; color: var(--ok); margin-top: .35rem; }

/* ---------------------------------------------------------------- calculator */
.calc { position: fixed; top: 4.5rem; right: 1.5rem; width: 290px; background: #1f2937; color: #fff; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); z-index: 40; padding: 0 .6rem .6rem; }
.calc-head { display: flex; justify-content: space-between; align-items: center; padding: .45rem .1rem; cursor: move; font-size: .85rem; opacity: .85; }
.calc-close { background: none; border: 0; color: #fff; font-size: 1.2rem; padding: 0 .3rem; }
.calc-close:hover { background: none; opacity: .7; }
.calc-expr { width: 100%; background: #111827; color: #fff; border-color: #374151; font-family: Consolas, monospace; }
.calc-out { text-align: right; font-size: 1.5rem; font-variant-numeric: tabular-nums; padding: .2rem .2rem .5rem; overflow-x: auto; }
.calc-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.calc-keys button { background: #374151; color: #fff; border: 0; padding: .45rem 0; font-size: .9rem; }
.calc-keys button:hover { background: #4b5563; }
.calc-keys button.digit { background: #4b5563; }
.calc-keys button.eq { background: var(--accent); }

/* ---------------------------------------------------------------- marking & results */
.mark-layout { display: grid; grid-template-columns: 1fr 280px; gap: 1rem; align-items: start; }
.mark-side { position: sticky; top: 1rem; }
.total-line { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.total-line.big { font-size: 1.1rem; }
.section-title { margin-top: 1.5rem; }
.student-answer { background: #fbfcfe; border: 1px solid var(--line); border-radius: 6px; padding: .8rem 1rem; margin-bottom: .8rem; }
.student-answer > .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 .4rem; font-weight: 600; }
.markscheme { background: #f1f9f4; border: 1px solid #bfe3cc; border-radius: 6px; padding: .5rem .9rem; margin-bottom: .8rem; }
.markscheme summary { cursor: pointer; font-weight: 600; color: var(--ok); }
.mark-inputs { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: center; }
.mark-inputs label { margin: 0; }
.mark-inputs label input { display: inline; width: 4.5rem; }
.crit-marks { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.crit-marks label { font-weight: 600; margin: 0; }
.mark-inputs .comment-input, .mark-inputs > span:last-child { grid-column: 1 / -1; }
.mark-card .q-head .pill:last-child { margin-left: auto; }
.result-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.result-head > div { display: flex; flex-direction: column; }
.result-head span { font-size: .8rem; color: var(--muted); }
.result-head strong { font-size: 1.3rem; }
.result-head .grade strong { font-size: 2.4rem; color: var(--brand-2); line-height: 1; }
.result-q { border-top: 1px solid var(--line); padding: .8rem 0; }
.rq-head { display: flex; gap: .8rem; align-items: baseline; }
.rq-head strong { margin-left: auto; }
/* Everything in one of these boxes is text somebody typed - a teacher's
   comment, a student's doubt, a reported question, the reply to one. They
   press Enter and expect a new line; HTML collapses it. pre-line keeps the
   line breaks and still collapses runs of spaces, which is what typed prose
   wants. (Sanjeev, 29-10-2026: "Line break is not coming on the teacher's
   comments" - a numbered list of three arrived as one line.) */
.comment, .asked { white-space: pre-line; }
.comment { background: #f5f8fc; border-left: 3px solid var(--brand-2); padding: .5rem .8rem; }

/* Doubts ----------------------------------------------------------------
   A hand up on one question. Folded away by default on a result page, so
   it does not compete with the mark and the teacher's comment; open when
   the hand is already up. */
.comment.answered { background: var(--ok-bg); border-left-color: var(--ok); }
details.doubt { margin-top: .6rem; }
details.doubt > summary { cursor: pointer; color: var(--brand-2); font-size: .9rem;
                          width: fit-content; }
details.doubt[open] > summary { margin-bottom: .5rem; }
details.doubt textarea { width: 100%; }
.doubt-row .prompt { margin: .5rem 0; }
.asked { background: #fbf7ef; border-left: 3px solid var(--brown); padding: .5rem .8rem;
         margin: .5rem 0; }
.badge { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 999px;
         background: var(--brand-2); color: #fff; font-size: .75rem; text-align: center; }

/* Looking at a student's screen ----------------------------------------
   Across the top of everything, including the exam player, because the
   mistake this prevents is an admin forgetting which screen they are on. */
.viewing-bar { position: sticky; top: 0; z-index: 50; display: flex; gap: 1rem;
               align-items: center; justify-content: space-between; flex-wrap: wrap;
               background: var(--brown); color: #fff; padding: .45rem 22px; font-size: .9rem; }
.viewing-bar b { color: #fff; }
.viewing-bar button { background: #fff; color: var(--brown); border: 0; }
.row-actions { display: flex; gap: .35rem; }

/* A table with more columns than the page is wide scrolls on its own. The
   alternative is the whole page scrolling sideways, which takes the nav with
   it and loses the row you were reading. */
.scroll-x { overflow-x: auto; }
.scroll-x > .table { min-width: 860px; }

@media (max-width: 900px) {
  .exam-body { flex-direction: column; overflow: auto; }
  .stimulus { border-right: 0; border-bottom: 1px solid var(--line); flex: none; }
  .question-pane { flex: none; overflow: visible; padding: 1rem; }
  body.exam { overflow: auto; }
  .exam-app { height: auto; min-height: 100vh; }
  .exam-bar { flex-wrap: wrap; }
  .candidate, .save-status { display: none; }
  .exam-nav { position: sticky; bottom: 0; }
  #prev { grid-row: 1; grid-column: 1; }
  .nav-right { grid-row: 1; grid-column: 3; }
  .nav-items { grid-row: 2; grid-column: 1 / -1; }
  .progress { grid-row: 3; }
  .mark-layout { grid-template-columns: 1fr; }
  .mark-side { position: static; }
}

/* ---------------------------------------------------------------- paper editor */
body.editing { overflow: hidden; }
body.editing { display: flex; flex-direction: column; height: 100vh; }
.editor-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.editor-app > .flash { margin: .5rem 1rem 0; }
.ed-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .55rem 1rem; background: #fff; border-bottom: 1px solid var(--line); }
.ed-actions { display: flex; gap: .5rem; align-items: center; }
.ed-status { font-size: .85rem; color: var(--muted); margin-right: .8rem; }
.ed-status.bad { color: var(--bad); font-weight: 600; }
.ed-cols { display: grid; grid-template-columns: 270px minmax(0, 1fr) minmax(0, 0.85fr); flex: 1; min-height: 0; }
.ed-outline { overflow: auto; background: #eef1f5; border-right: 1px solid var(--line); padding: .6rem; }
.ed-form { overflow: auto; padding: 1rem 1.5rem 4rem; background: #fff; }
.ed-try { overflow: auto; padding: 1rem 1.25rem 3rem; background: #fafbfd; border-left: 1px solid var(--line); }

.ol-item { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; text-align: left;
  border: 1px solid transparent; background: transparent; padding: .4rem .55rem; border-radius: 6px; margin: 1px 0; }
.ol-item:hover { background: #fff; }
.ol-item.sel { background: #fff; border-color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ol-item.bad { box-shadow: inset 3px 0 0 var(--bad); }
.ol-paper { margin-bottom: .5rem; }
.ol-section { border-top: 1px solid #d6dce4; padding: .4rem 0; }
.ol-sec strong { font-size: .92rem; }
.ol-q { flex-direction: row; gap: .5rem; padding-left: .8rem; }
.ol-num { font-weight: 700; color: var(--brand); min-width: 1.4rem; }
.ol-text { display: flex; flex-direction: column; min-width: 0; }
.ol-type { font-size: .72rem; color: var(--muted); }
.ol-snip { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.ol-add { border: 1px dashed #b9c2cf; background: transparent; width: 100%; margin-top: .3rem; font-size: .85rem; color: var(--brand-2); }
.ol-totals { margin-top: .8rem; font-size: .85rem; }
.ol-totals div { display: flex; justify-content: space-between; padding: .1rem .3rem; }
.ed-problems { margin-top: .8rem; border-top: 1px solid #d6dce4; padding-top: .6rem; }
.ed-problems .problem { display: block; width: 100%; text-align: left; font-size: .8rem; color: var(--bad);
  background: #fff; border-color: #f0c5c0; margin: .25rem 0; padding: .3rem .5rem; }
.ok-note { color: var(--ok); font-weight: 600; font-size: .9rem; }

.form-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.form-head h2 { margin: 0; }
.form-actions { display: flex; gap: .3rem; }
.q-problems { background: var(--bad-bg); color: var(--bad); border-radius: 6px; padding: .5rem .5rem .5rem 1.6rem; margin: 0 0 .8rem; font-size: .9rem; }
.fld { margin: 0 0 1rem; }
.fld-label { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
details.fld > summary { cursor: pointer; }
.fld-help { font-size: .8rem; color: var(--muted); margin-top: .3rem; }
.fld input:not([type=checkbox]):not([type=radio]), .fld select { max-width: 100%; }
.fld-grid > .fld { min-width: 0; }
.fld input.wide { width: 100%; }
.fld-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.type-block { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0 .2rem; margin-bottom: 1rem; }
.ed-list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .45rem; }
.ed-row { display: flex; align-items: center; gap: .5rem; }
.ed-row .grow { flex: 1; min-width: 0; }
.ed-row.correct input.grow { border-color: var(--ok); background: #f3fbf6; }
.ed-row .letter, .zone-num { min-width: 1.4rem; color: var(--brand-2); }
.tag { font-size: .72rem; background: #eef1f5; color: var(--muted); border-radius: 4px; padding: .05rem .4rem; }
label.check { display: flex; align-items: center; gap: .3rem; font-weight: 400; margin: .3rem 0; }
label.check input { display: inline; margin: 0; }
.row-gap { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .3rem 0; }
.axis-grid { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: .3rem .8rem; }
.axis-grid label { font-weight: 400; font-size: .85rem; margin: 0; }
.axis-grid input { width: 100%; }
.axis-grid .wide { grid-column: 1 / -1; }
.ed-table { border-collapse: collapse; }
.ed-table th, .ed-table td { border: 1px solid #c4ccd7; padding: .3rem; vertical-align: top; }
.ed-table th { background: #eef2f7; }
.ed-table input { width: 8rem; display: block; }
.ed-table th button { margin-top: .2rem; }
.ed-table td.blank { background: #fffbe6; }
.ed-table .tol { display: flex; align-items: center; gap: .2rem; margin: .2rem 0; font-weight: 400; font-size: .8rem; }
.ed-table .tol input { width: 4.5rem; display: inline; }
.ed-table .toggle { margin-top: .2rem; font-size: .75rem; }
.ed-table .toggle.on { background: #fff1b8; border-color: #e0b400; }
.label-image.editing { cursor: crosshair; border: 1px solid var(--line); margin-top: .4rem; }
.zone-marker { position: absolute; transform: translate(-50%, -50%); width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
  cursor: grab; box-shadow: 0 0 0 3px rgba(255,255,255,.8); touch-action: none; user-select: none; }

.rt { border: 1px solid #b9c2cf; border-radius: 6px; background: #fff; }
.rt-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-bottom: 1px solid var(--line); background: #f6f8fb; border-radius: 6px 6px 0 0; }
.rt-bar button { padding: .15rem .5rem; font-size: .82rem; border-color: transparent; background: transparent; }
.rt-bar button:hover { background: #e4e9f0; }
.rt-bar button[data-k=B] { font-weight: 700; }
.rt-bar button[data-k=I] { font-style: italic; }
.rt-bar button[data-k=U] { text-decoration: underline; }
/* A formatting button that is currently on. It has to be unmistakable:
   superscript is a toggle, and not knowing it is on is how a whole answer
   ends up raised. */
.rt-bar button.on { background: var(--brand-2); color: #fff; border-color: var(--brand-2);
                    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.rt-bar button.on:hover { background: var(--brand-2); }
.rt-area { min-height: 5rem; padding: .6rem .8rem; outline: none; overflow-wrap: anywhere; }
.rt.tall .rt-area { min-height: 14rem; }
.rt-area:empty::before { content: attr(data-placeholder); color: #9aa5b3; }
.rt-area img { max-width: 100%; }
.rt-area table, .rt-preview table { border-collapse: collapse; }
.rt-area td, .rt-area th { border: 1px solid #aeb8c6; padding: .3rem .6rem; min-width: 3rem; }
.rt-source { border: 0; border-radius: 0; min-height: 10rem; font-size: .82rem; }
.rt-preview { border-top: 1px dashed var(--line); padding: .5rem .8rem; background: #fcfcfd; font-size: .95rem; }
.rt-preview::before { content: "Preview"; display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.maths-dialog, .type-dialog { border: 0; border-radius: var(--radius); padding: 1.2rem; width: min(560px, 94vw); }
.maths-dialog::backdrop, .type-dialog::backdrop { background: rgba(10,20,35,.5); }
.type-dialog { width: min(720px, 94vw); }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.type-card { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; padding: .7rem .8rem; }
.type-card:hover { border-color: var(--accent); background: #f3f7ff; }

.try-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; margin-bottom: .6rem; }
.try-result { margin-top: 1rem; padding: .6rem .8rem; border-radius: 6px; background: #eef1f5; font-size: .92rem; }
.try-result.ok { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.try-result.part { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.try-result.bad { background: var(--bad-bg); color: var(--bad); font-weight: 600; }
.try-result.warn { background: var(--warn-bg); color: var(--warn); }
.stimulus-preview { background: #fbfaf6; border: 1px solid var(--line); border-radius: 6px; padding: 1rem; }
.stimulus-ref { margin-bottom: 1rem; }
code.big { font-size: 1.1rem; }
.button.disabled { opacity: .45; }

@media (max-width: 1100px) {
  body.editing { overflow: auto; height: auto; display: block; }
  .ed-cols { grid-template-columns: 220px 1fr; }
  .ed-try { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .ed-outline, .ed-form, .ed-try { overflow: visible; }
}

/* ---------------------------------------------------------------- mistakes and practice */
.tallies { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: .8rem 0; }
.tallies > div { display: flex; flex-direction: column; }
.tallies span { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tallies strong { font-size: 1.6rem; line-height: 1.1; }
.filters { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1rem 0; }
.filters .pill { text-decoration: none; color: var(--ink); border: 1px solid var(--line); }
.filters .pill.on { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.mistakes-strip { align-items: center; }
.mistakes-strip .muted { display: block; font-size: .85rem; }
/* The question on a mistake row.
 *
 * It used to be clipped to 7.5rem always, which suits a one-line question and
 * cuts an MYP one in half - and the whole point of the row is to say why you
 * got that question wrong, which you cannot do without reading it. (Sanjeev,
 * 29-10-2026: "in my mistakes the complete question is not visible".)
 *
 * So the clamp is applied by script and only to the questions long enough to
 * need it, with a button to open them. The failure is the safe way round: if
 * the script does not run, nothing is clipped and every question is readable.
 */
article.mistake .snippet { margin: .6rem 0; }
article.mistake .snippet.clipped { max-height: 11rem; overflow: hidden; position: relative; }
article.mistake .snippet.clipped::after { content: ""; position: absolute; inset: auto 0 0 0;
  height: 2.5rem; background: linear-gradient(transparent, #fff); pointer-events: none; }
article.mistake .unclip { font-size: .85rem; padding: .1rem .5rem; }
.why summary { cursor: pointer; font-weight: 600; color: var(--brand-2); font-size: .9rem; }
.why .reasons { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .5rem 0; }
.why textarea { margin-bottom: .5rem; }

/* ---------------------------------------------------------------- rubrics */
.rubrics { grid-column: 1 / -1; }
details.rubric { background: #fbfcfe; border: 1px solid var(--line); border-radius: 6px;
  padding: .4rem .7rem; margin: .5rem 0; }
details.rubric summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--brand-2); }
.bands { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.band { display: flex; gap: .7rem; align-items: baseline; text-align: left; width: 100%;
  border: 1px solid var(--line); background: #fff; padding: .4rem .6rem; font-size: .88rem; }
.band:hover { border-color: var(--accent); }
.band.on { border-color: var(--brand-2); background: #eef4ff; box-shadow: inset 3px 0 0 var(--brand-2); }
.band strong { min-width: 2.2rem; color: var(--brand); }
.band-now { display: flex; gap: .6rem; align-items: baseline; margin: .5rem 0; font-size: .92rem; }
.band-aim { background: #f1f9f4; border-left: 3px solid var(--ok); padding: .5rem .8rem;
  font-size: .92rem; margin-bottom: .5rem; }
.rubric-edit textarea { min-height: 3.4rem; }
.rubric-edit .band-row { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .5rem;
  align-items: start; margin-bottom: .4rem; }


/* Paper folders --------------------------------------------------------- */
.shelf { border: 1px solid var(--line); border-radius: 6px; margin: 10px 0; background: #fff; }
.shelf > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; list-style: none; }
.shelf > summary::-webkit-details-marker { display: none; }
.shelf > summary::before { content: "▸"; display: inline-block; width: 1em; color: #888; }
.shelf[open] > summary::before { content: "▾"; }
.shelf > summary:hover { background: var(--tint, #f6f6f4); }
.shelf .shelf { margin: 0 10px 10px 16px; background: transparent; }
.shelf.depth-0 > summary { font-size: 1.05rem; }
.shelf .scroll-x { overflow-x: auto; margin: 0 12px 12px; }
.shelf .scroll-x .table { margin: 0; min-width: 540px; }


/* The student's list of papers: one line each --------------------------- */
.paper-list { list-style: none; margin: 0 12px 12px; padding: 0; }
.paper-list li { display: flex; align-items: center; justify-content: space-between;
                 gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.paper-list li:last-child { border-bottom: 0; }
.paper-list li:hover { background: var(--tint, #f6f6f4); }
.paper-list .what { display: flex; flex-direction: column; min-width: 0; }
.paper-list .name { font-weight: 600; overflow-wrap: anywhere; }
.paper-list .act { flex: 0 0 auto; }
.button.small { padding: 3px 10px; font-size: 0.85rem; }

@media (max-width: 560px) {
  .paper-list li { flex-direction: column; align-items: flex-start; gap: 6px; }
}


/* =======================================================================
   The SAT@KANS house style, applied to this app's own components.
   These come last so they win over the rules above without those being
   rewritten. Shapes and sizes are the portal's, not invented here.
   ======================================================================= */

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

h1 { font: 600 clamp(24px, 3vw, 31px)/1.15 var(--display); color: var(--brown);
     margin: 0 0 .7rem; text-wrap: balance; }
h2 { font: 600 18px var(--display); margin: 0 0 .6rem; }
h3 { font: 600 15px var(--display); margin: 1.2rem 0 .4rem; }


/* Panels, as on the portal: 14px, one hairline, no shadow. */
.card, .shelf { background: var(--surface); border: 1px solid var(--line);
                border-radius: 14px; }
.shelf .shelf { border-radius: 11px; }

/* Buttons: a pill, 700 weight, teal when it is the thing to do. */
.button, button.primary, .btn {
  display: inline-block; border: 1px solid transparent; border-radius: 99px;
  padding: 8px 16px; font: 700 14px var(--body); text-decoration: none;
  white-space: nowrap; cursor: pointer;
  background: var(--surface); border-color: var(--line); color: var(--ink);
}
.button:hover, .btn:hover { background: var(--raise); }
.button.primary, button.primary, .btn.primary {
  background: var(--teal); border-color: var(--teal); color: var(--teal-ink);
}
.button.primary:hover, button.primary:hover { filter: brightness(1.1); background: var(--teal); }
.button.small, .btn.small { padding: 5px 12px; font-size: 13px; }

/* Status words are chips, not boxes. */
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px;
        padding: 2px 10px; font-size: 13px; font-weight: 700;
        color: var(--muted); background: var(--raise); border: none; }
.pill.ok { color: var(--ok); background: var(--ok-soft); }
.pill.warn { color: var(--brown); background: var(--brown-soft); }
.pill.bad { color: var(--st-red); background: var(--bad-bg); }

/* Folders and the paper list, in the portal's vocabulary. */
.shelf > summary { font: 600 16px var(--display); padding: 13px 18px; }
.shelf .shelf > summary { font-size: 15px; }
.paper-list li { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); }
.paper-list .name { font-weight: 700; font-size: 16px; line-height: 1.3; }
.paper-list .muted.small { font-size: 14px; }

.table { font-size: 15px; }
.table th { color: var(--muted); font-weight: 600; }
.flash { border-radius: 11px; border-color: var(--brown); }

@media (max-width: 980px) { .page { padding: 18px 16px 48px; } }
@media (max-width: 560px) { .topbar { padding: 10px 16px; } }


/* The shell -------------------------------------------------------------
   Sidebar and page, as on the portal. The exam player and the editor blank
   the nav and want the whole width, so they collapse to a single column. */
.shell { max-width: 1180px; margin: 0 auto; padding: 0 22px 60px;
         display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 30px; }
.shell > main.page { max-width: none; margin: 0; padding: 24px 0 0; min-width: 0; }
body.exam .shell, body.editing .shell {
  max-width: none; padding: 0; gap: 0; grid-template-columns: minmax(0, 1fr); }
/* Signed out there is nothing in the sidebar but the wordmark, and a column
   kept empty for it pushes the sign-in card off centre. */
body.anon .shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
body.anon nav.side { position: static; padding: 18px 0 0; }
body.anon .logo { margin-bottom: 0; }
body.exam .shell > main, body.editing .shell > main { padding: 0; }

nav.side { position: sticky; top: 0; align-self: start; padding-top: 24px; }
.logo { display: block; font: 700 18px var(--display); color: var(--brown);
        text-decoration: none; margin-bottom: 22px; }
.logo small { display: block; font: 500 13px var(--body); color: var(--muted); margin-top: 2px; }
nav.side .links { display: flex; flex-direction: column; gap: 2px; }
nav.side a { display: flex; align-items: center; gap: 11px; padding: 9px 12px;
             border-radius: 9px; color: var(--muted); text-decoration: none;
             font-weight: 600; font-size: 15px; }
nav.side a:hover { color: var(--ink); background: var(--raise); }
nav.side a[aria-current="page"] { background: var(--teal-soft); color: var(--teal-deep); }
nav.side .who { margin-top: 26px; padding: 16px 12px 0; border-top: 1px solid var(--line);
                font-size: 14px; color: var(--muted); }
nav.side .who b { display: block; color: var(--ink); }
nav.side .who form { margin: 0; }
nav.side .who .link { padding: 0; margin-top: 8px; background: none; border: none;
                      color: var(--teal); font: 700 14px var(--body); cursor: pointer; }
nav.side .who .link:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px 48px; }
  nav.side { position: static; padding: 12px 0 10px; display: flex; flex-wrap: wrap;
             align-items: center; gap: 6px 14px; border-bottom: 1px solid var(--line); }
  .logo { margin: 0; }
  .logo small { display: inline; margin-left: 6px; }
  nav.side .links { flex-direction: row; overflow-x: auto; gap: 2px; max-width: 100%; }
  nav.side a { padding: 7px 10px; font-size: 14px; white-space: nowrap; }
  /* The portal hides this on a phone; a student still needs to sign out, so
     it moves to the end of the row instead of disappearing. */
  nav.side .who { margin: 0 0 0 auto; padding: 0; border: 0;
                  display: flex; align-items: center; gap: 12px; }
  nav.side .who b { display: inline; }
  nav.side .who .link { margin: 0; }
  .shell > main.page { padding-top: 16px; }
}
@media (max-width: 560px) {
  nav.side .who b { display: none; }
}


/* Revision notes ------------------------------------------------------- */
.note { max-width: 46rem; padding: 20px 24px; }
.note > :first-child { margin-top: 0; }
.note h2 { font: 600 17px var(--display); margin: 22px 0 8px;
           padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.note h3 { font: 600 15px var(--display); margin: 16px 0 6px; }
.note p, .note li { line-height: 1.6; }
.note ol, .note ul { padding-left: 22px; }
.note li { margin: 4px 0; }
.note blockquote { margin: 12px 0; padding: 8px 14px; border: 0;
                   border-left: 3px solid var(--teal); background: var(--teal-soft);
                   border-radius: 0 8px 8px 0; }
.note blockquote p:last-child { margin-bottom: 0; }
.note code { background: var(--raise); padding: 1px 5px; border-radius: 4px; }

/* A markdown table has no class of its own, so it is styled by position. */
.note table { border-collapse: collapse; width: 100%; max-width: 100%;
              table-layout: auto; margin: 14px 0; font-size: 15px;
              background: var(--surface); border: 1px solid var(--line); }
.note th, .note td { border: 1px solid var(--line-soft); padding: 7px 12px;
                     text-align: left; vertical-align: top; white-space: normal; }
.note thead th { background: var(--raise); font-weight: 600; color: var(--ink);
                 border-bottom: 1px solid var(--line); }
.note tbody tr:nth-child(even) { background: var(--raise); }
/* a label column reads better on one line when it will fit */
.note tbody td:first-child { font-weight: 600; }
.note .katex { font-size: 1.02em; }

@media (max-width: 700px) {
  .note { padding: 16px; }
  .note table { display: block; overflow-x: auto; min-width: 0; }
}


/* A long answer's live typeset preview ---------------------------------- */
.long-preview { white-space: pre-wrap; margin-top: 10px; padding: 10px 14px;
                border: 1px solid var(--line); border-left: 3px solid var(--teal);
                border-radius: 0 8px 8px 0; background: var(--raise);
                font-size: .97rem; line-height: 1.6; }
.long-preview:empty { display: none; }
.long-input + .wordcount + .hint { margin: 6px 0 0; }


/* The symbol palette on a long answer ----------------------------------- */
.rt-bar { position: relative; }
.rt-symbols { position: absolute; z-index: 40; margin-top: 4px; display: grid;
              grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px;
              background: var(--surface); border: 1px solid var(--line);
              border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.rt-symbols button { min-width: 30px; padding: 5px 0; font-size: 1.05rem;
                     background: var(--surface); border: 1px solid transparent;
                     border-radius: 5px; cursor: pointer; }
.rt-symbols button:hover { background: var(--teal-soft); border-color: var(--line); }

/* Giving time back to a sitting, on the sittings table. */
.addtime { display: flex; gap: .3rem; align-items: center; margin-bottom: .4rem; flex-wrap: wrap; }
.addtime input[name="minutes"] { width: 4.5rem; }
.addtime input[name="reason"] { width: 12rem; }
.badge.warn { background: var(--warn); }
.reported { color: var(--warn); }

/* A student's own answer on their result, marked up with the right one where
   the paper allows it - the same thing the teacher sees while marking. */
.your-answer, .right-answer { border: 1px solid var(--line); border-radius: 6px;
                              padding: .6rem .8rem; margin: .5rem 0; background: #fbfcfe; }
.right-answer { background: var(--ok-soft); border-color: var(--ok); }
.your-answer > .label, .right-answer > .label { font-size: .75rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); margin-bottom: .4rem; font-weight: 600; }
.right-answer > .label { color: var(--ok); }
.slot-key { display: block; font-size: .8rem; color: var(--ok); margin-top: .15rem; }

/* A doubt, as the conversation it is. Each turn is attributed, because a
   reply asking "which part exactly?" only makes sense next to the question
   it is about. */
.thread { margin: .5rem 0; }
.thread .turn { padding: .45rem .7rem; margin-bottom: .35rem; border-radius: 6px;
                border-left: 3px solid var(--line); background: #fbfcfe; white-space: pre-line; }
.thread .turn.theirs { border-left-color: var(--brown); background: #fbf7ef; }
.thread .turn.mine { border-left-color: var(--brand-2); background: #f5f8fc; }
.thread .turn .muted { white-space: normal; }