/* Layout: one narrow exam-booklet column; setup, question and results are three states of the same sheet. */
/* Palette influenced by the George Washington University colors: a deep blue and a buff.
   Colors only. No university logo, seal or wordmark is used. */
:root {
  --paper: #f4f0e6;
  --sheet: #fffdf8;
  --ink: #0a2c40;
  --ink-soft: #526775;
  --rule: #ddd4bf;
  --accent: #033c5a;
  --accent-ink: #ffffff;
  --accent-wash: #ece5d1;
  --band: #033c5a;
  --band-ink: #ffffff;
  --band-soft: #d5dfe5;
  --buff: #aa9868;
  /* metallic finish: gradients and bevels, redefined per theme */
  --metal-band: linear-gradient(180deg, #0b5a82 0%, #033c5a 48%, #02293d 100%);
  --metal-accent: linear-gradient(180deg, #0b5a82 0%, #033c5a 55%, #022f47 100%);
  --metal-buff: linear-gradient(90deg, #8a7848 0%, #dccb96 28%, #aa9868 52%, #e8dbad 74%, #8f7d4c 100%);
  --metal-buff-v: linear-gradient(180deg, #e8dbad 0%, #aa9868 50%, #86743f 100%);
  --metal-sheet: linear-gradient(180deg, #ffffff 0%, #fffdf8 35%, #f5f0e2 100%);
  --metal-plate: linear-gradient(180deg, #ffffff 0%, #f3eee0 55%, #e6dfcb 100%);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  --plate-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(10, 44, 64, 0.12);
  --lift: 0 1px 2px rgba(10, 44, 64, 0.18), 0 8px 20px rgba(10, 44, 64, 0.08);
  --grain: rgba(255, 255, 255, 0.045);
  --good: #17694a;
  --good-wash: #ddf0e5;
  --bad: #a8281f;
  --bad-wash: #f9e2df;
  --code-bg: #efe9d9;

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #04202f; --sheet: #07304a; --ink: #f4efe2; --ink-soft: #b3c2cc; --rule: #1f4d66;
    --accent: #d2c08c; --accent-ink: #04202f; --accent-wash: #11425d;
    --band: #021824; --band-ink: #f4efe2; --band-soft: #c9d5dc; --buff: #aa9868;
    --metal-band: linear-gradient(180deg, #0b4666 0%, #021824 55%, #010f17 100%);
    --metal-accent: linear-gradient(180deg, #efe0b2 0%, #d2c08c 48%, #a5925c 100%);
    --metal-buff: linear-gradient(90deg, #8a7848 0%, #dccb96 28%, #aa9868 52%, #e8dbad 74%, #8f7d4c 100%);
    --metal-buff-v: linear-gradient(180deg, #e8dbad 0%, #aa9868 50%, #86743f 100%);
    --metal-sheet: linear-gradient(180deg, #0a3b59 0%, #07304a 35%, #05283e 100%);
    --metal-plate: linear-gradient(180deg, #10486a 0%, #0a3651 55%, #072b42 100%);
    --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    --plate-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    --lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
    --grain: rgba(255, 255, 255, 0.035);
    --good: #6fd6a2; --good-wash: #0f3a30; --bad: #ff9a8f; --bad-wash: #4a2222; --code-bg: #052638;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --paper: #04202f; --sheet: #07304a; --ink: #f4efe2; --ink-soft: #b3c2cc; --rule: #1f4d66;
    --accent: #d2c08c; --accent-ink: #04202f; --accent-wash: #11425d;
    --band: #021824; --band-ink: #f4efe2; --band-soft: #c9d5dc; --buff: #aa9868;
    --metal-band: linear-gradient(180deg, #0b4666 0%, #021824 55%, #010f17 100%);
    --metal-accent: linear-gradient(180deg, #efe0b2 0%, #d2c08c 48%, #a5925c 100%);
    --metal-buff: linear-gradient(90deg, #8a7848 0%, #dccb96 28%, #aa9868 52%, #e8dbad 74%, #8f7d4c 100%);
    --metal-buff-v: linear-gradient(180deg, #e8dbad 0%, #aa9868 50%, #86743f 100%);
    --metal-sheet: linear-gradient(180deg, #0a3b59 0%, #07304a 35%, #05283e 100%);
    --metal-plate: linear-gradient(180deg, #10486a 0%, #0a3651 55%, #072b42 100%);
    --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    --plate-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    --lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
    --grain: rgba(255, 255, 255, 0.035);
    --good: #6fd6a2; --good-wash: #0f3a30; --bad: #ff9a8f; --bad-wash: #4a2222; --code-bg: #052638;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
}
.wrap {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: 16px;
  padding-block: 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* masthead */
.mast {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem;
  background: var(--band); color: var(--band-ink);
  padding: 1rem 1.25rem; border-radius: 6px; border-bottom: 4px solid var(--buff);
}
.mast h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.mast p { margin: 0; color: var(--band-soft); font-size: 0.875rem; }

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0; text-wrap: balance; }
.sheet > h2:first-child, .tutor-head h2 { padding-left: 0.6rem; border-left: 4px solid var(--buff); }

/* pickers */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
legend { padding: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.chip span {
  display: block; padding: 0.5rem 0.9rem; border: 1px solid var(--rule); border-radius: 4px;
  background: var(--sheet); cursor: pointer; font-weight: 500; font-variant-numeric: tabular-nums;
}
.chip small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--ink-soft); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:checked + span small { color: var(--accent-ink); }
.chip input:focus-visible + span, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hint { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.hint.warn { color: var(--bad); }

button {
  font: inherit; font-weight: 600; border-radius: 4px; border: 1px solid var(--rule);
  background: var(--sheet); color: var(--ink); padding: 0.65rem 1.1rem; cursor: pointer;
}
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* quiz */
.progress { display: flex; flex-direction: column; gap: 0.4rem; }
.progress-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bar { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--buff); width: 0; transition: width 0.25s ease; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 3px; background: var(--accent-wash); color: var(--ink); font-variant-numeric: tabular-nums; }
.tag.level { background: transparent; border: 1px solid var(--rule); color: var(--ink-soft); text-transform: capitalize; }
.source { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.source span { font-family: var(--font-mono); font-size: 0.8rem; overflow-wrap: anywhere; }
.qtext { font-size: 1.125rem; font-weight: 500; margin: 0; max-width: 65ch; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--code-bg); padding: 0.05em 0.3em; border-radius: 3px; overflow-wrap: anywhere; }
pre {
  margin: 0; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.5;
  background: var(--code-bg); border-radius: 4px; padding: 0.75rem 0.9rem; overflow-x: auto; max-width: 100%;
}
.options { display: flex; flex-direction: column; gap: 0.6rem; }
.opt {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.6rem; align-items: start;
  text-align: left; font-weight: 400; padding: 0.7rem 0.8rem; width: 100%;
}
.opt .key { font-family: var(--font-mono); font-weight: 600; color: var(--ink-soft); }
.opt .body { min-width: 0; }
.opt pre { background: transparent; padding: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.opt:not(:disabled):hover { border-color: var(--accent); }
.opt:disabled { opacity: 1; cursor: default; }
.opt.right { background: var(--good-wash); border-color: var(--good); }
.opt.wrong { background: var(--bad-wash); border-color: var(--bad); }
.opt.right .key { color: var(--good); }
.opt.wrong .key { color: var(--bad); }
.opt.chosen { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt.chosen .key { color: var(--accent); }
.answer { display: flex; flex-direction: column; gap: 0.4rem; }
.answer label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.answer-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.negate { flex: 0 0 auto; font-family: var(--font-mono); min-width: 3rem; }
.answer-row input {
  flex: 1 1 12rem; min-width: 0; font: inherit; font-family: var(--font-mono); color: var(--ink);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 0.6rem 0.7rem;
}
.answer-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.answer-row input:disabled { opacity: 0.8; }
.verdict { border-left: 3px solid var(--rule); padding-left: 0.9rem; display: flex; flex-direction: column; gap: 0.25rem; }
.verdict.right { border-color: var(--good); }
.verdict.wrong { border-color: var(--bad); }
.verdict strong { font-family: var(--font-display); }
.verdict.right strong { color: var(--good); }
.verdict.wrong strong { color: var(--bad); }
.verdict p { margin: 0; max-width: 65ch; }

.answer textarea {
  font: inherit; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px;
  padding: 0.6rem 0.7rem; width: 100%; resize: vertical; min-height: 5rem;
}
.answer textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.strip { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dot { padding: 0; width: 2.1rem; height: 2.1rem; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.dot.done { background: var(--accent-wash); }
.dot.here { outline: 2px solid var(--accent); outline-offset: 1px; }
.confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.confirm > span { color: var(--bad); font-weight: 600; }
.verdict p b { font-family: var(--font-display); }

/* results */
.score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.score b { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.score span { color: var(--ink-soft); }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.4rem 0.5rem 0.4rem 0; border-bottom: 1px solid var(--rule); }
th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
td.num, th.num { text-align: right; padding-right: 0; }
.scroll { overflow-x: auto; }
.missed { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.missed li { display: flex; flex-direction: column; gap: 0.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); min-width: 0; }
.missed li:last-child { border-bottom: 0; padding-bottom: 0; }
.missed p { margin: 0; }
.missed .you { color: var(--bad); }
.missed .ans { color: var(--good); }
.missed .why { color: var(--ink-soft); font-size: 0.9rem; }

.fresh { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }

/* Ask Claude */
.tutor-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.tutor-head h2 { min-width: 0; }
.chatlog { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.chatlog:empty { display: none; }
.bubble { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 65ch; padding: 0.6rem 0.8rem; border-radius: 4px; }
.bubble.claude { background: var(--code-bg); }
.bubble.note { padding: 0; color: var(--ink-soft); font-size: 0.875rem; }
a { color: var(--accent); }

/* Metallic finish */
.mast {
  position: relative; overflow: hidden; border-bottom: 0; padding-bottom: calc(1rem + 4px);
  background: repeating-linear-gradient(90deg, var(--grain) 0 1px, transparent 1px 3px), var(--metal-band);
  box-shadow: var(--bevel), var(--lift);
}
.mast::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--metal-buff); }
.mast h1 { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.sheet { background: var(--metal-sheet); box-shadow: var(--plate-bevel), var(--lift); }
.sheet > h2:first-child, .tutor-head h2 { border-image: var(--metal-buff-v) 1; }
button, .chip span { background: var(--metal-plate); box-shadow: var(--plate-bevel); }
button.primary, .chip input:checked + span { background: var(--metal-accent); box-shadow: var(--bevel); }
button:not(:disabled):active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); }
.opt.right { background: var(--good-wash); }
.opt.wrong { background: var(--bad-wash); }
.bar { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
.bar i { background: var(--metal-buff); }

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

/* signed-in line in the header, only when served by server/app.py */
.mast .who { font-size: 0.8rem; }
.mast button.link {
  background: none; border: 0; padding: 0; min-height: 0; font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; box-shadow: none;
}

/* "I guessed" toggle and its mark in the exam strip */
button.guess.on { border-color: var(--buff); box-shadow: inset 0 0 0 1px var(--buff); }
.dot.guessed { box-shadow: inset 0 -3px 0 var(--buff); }