/* AMS Q-Bank. Warm paper in the manner of the FT: a pale tint for the page, the full salmon kept for
   panels, warm near-black text, teal links, thin rules, one sans face throughout. Buttons and
   inputs are the browser's own, apart from the font and two named variants (.primary, .quiet). */
:root {
  --paper: #fdebdd; --tint: #f9dcc8; --salmon: #fcd0b1;
  --ink: #33302e; --ink-2: #66605b; --rule: #d9c5b6; --hair: #ebd8c9;
  --link: #0d7680; --claret: #990f3d; --ok: #1e7a3a; --hl: #ffe27a;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html { color-scheme: light; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
main, .top, .foot { max-width: 68rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
main { padding-top: 1.5rem; padding-bottom: 4rem; min-height: 60vh; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--ink); }
h1 { font-size: 1.6rem; font-weight: 700; margin: 0.4em 0 0.6em; line-height: 1.25; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; font-weight: 700; margin: 1.8em 0 0.5em; }
h3 { font-size: 1rem; margin: 1.5em 0 0.4em; }
p { margin: 0 0 0.9em; }
/* Controls: one button, three variants. Default is outlined; .primary is filled; .quiet is text-only; .link looks like a link. */
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 1px solid var(--ink); border-radius: 4px; background: #fff; color: var(--ink); padding: 0.45em 1em; line-height: 1.25; font-weight: 500; }
button:hover { background: var(--tint); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
button.primary { background: var(--ink); color: var(--paper); font-weight: 600; }
button.primary:hover { background: #000; }
button.quiet { background: none; border-color: transparent; padding: 0.35em 0.5em; color: var(--ink-2); font-weight: 500; }
button.quiet:hover { background: var(--tint); color: var(--ink); }
button.quiet.on { color: var(--ink); }
button.link { background: none; border: 0; border-radius: 0; padding: 0; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; font-weight: 400; }
button.link:hover { color: var(--ink); background: none; }
a.btn { display: inline-block; border: 1px solid var(--ink); border-radius: 4px; background: #fff; color: var(--ink); padding: 0.45em 1em; line-height: 1.25; font-weight: 500; text-decoration: none; }
a.btn:hover { background: var(--tint); color: var(--ink); }
a.btn.primary { background: var(--ink); color: var(--paper); font-weight: 600; }
a.btn.primary:hover { background: #000; }
.actions { display: flex; flex-wrap: wrap; gap: 0.6em; }
input[type=text], input[type=email], input[type=password], input[type=number], input:not([type]), textarea, select { border: 1px solid var(--rule); border-radius: 4px; padding: 0.45em 0.6em; background: #fff; color: var(--ink); }
input[type=checkbox], input[type=radio] { accent-color: var(--link); width: 1.05em; height: 1.05em; }
th.pass, td.pass { text-align: center; padding-right: 0.6em; padding-left: 0.6em; white-space: nowrap; }
td.pass input { margin: 0; vertical-align: middle; cursor: pointer; }
table.kv th { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 400; color: var(--ink); border-bottom: 1px solid var(--hair); }
table.kv { max-width: 28rem; }
textarea { width: 100%; max-width: 46rem; box-sizing: border-box; }
svg.i { vertical-align: -0.15em; }
mark { background: var(--hl); color: inherit; cursor: pointer; }
.eyebrow { font-size: 0.85rem; color: var(--ink-2); margin-bottom: 0.3em; }
h1.eyebrow { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: 2em 0 0.6em; }
.muted { color: var(--ink-2); }
.tag { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); background: var(--tint); border-radius: 3px; padding: 0.15em 0.5em; vertical-align: middle; white-space: nowrap; }
.inline { display: inline; }
.flash { background: var(--tint); padding: 0.6em 1em; margin-bottom: 1.2em; border-left: 3px solid var(--ink); }
.flash p { margin: 0; }

.top { padding-top: 0.9rem; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1.5rem; border-bottom: 1px solid var(--rule); }
.top .brand { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); padding-bottom: 0.6rem; }
.top nav { display: flex; flex-wrap: wrap; gap: 0 1.2em; font-size: 0.95rem; padding-bottom: 0.6rem; }
.top nav a, .top nav button.link { text-decoration: none; color: var(--ink-2); font-weight: 500; }
.top nav a:hover, .top nav button.link:hover { color: var(--ink); text-decoration: underline; }
.foot { padding: 1.2rem 1.5rem 2rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 0.85rem; }
.foot p { margin: 0 0 0.3em; }
.foot a { color: inherit; }
.foot p:first-child .keys { margin: 0; }

.prose { max-width: 40rem; }
.prose .lede { font-size: 1.15rem; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose .small { font-size: 0.9rem; }
ul.team { list-style: none; padding: 0; }
a.cta { font-weight: 600; }

.stack label { display: block; margin-bottom: 0.8em; }
.stack label:not(.row) input { display: block; width: 100%; max-width: 24rem; box-sizing: border-box; margin-top: 0.2em; }
.stack label:not(.row) input[type=number] { width: 6em; }
.stack label textarea { display: block; margin-top: 0.2em; }
.stack fieldset { border: 1px solid var(--rule); padding: 0.5em 1em; margin: 0 0 1em; }
.stack legend { padding: 0 0.4em; color: var(--ink-2); font-size: 0.9rem; }
label.row { display: block; margin: 0.2em 0; }

.table-wrap { overflow-x: auto; margin: 0 0 1.5em; }
table { border-collapse: collapse; width: 100%; margin: 0; }
.small { font-size: 0.9rem; }
th, td { text-align: left; padding: 0.6em 1.5em 0.6em 0; vertical-align: top; border-bottom: 1px solid var(--hair); }
th:last-child, td:last-child { padding-right: 0; }
th { font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); border-bottom: 1px solid var(--ink); }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.draft td { color: var(--ink-2); }
ul.plain { list-style: none; padding: 0; }

.set { margin-bottom: 1.5em; }
.grid { line-height: 1; margin: 0.4em 0 0.6em; }
.grid .cell { display: inline-block; width: 2.1em; height: 2.1em; line-height: 2.1em; text-align: center; margin: 0 0.3em 0.3em 0; border: 1px solid var(--rule); border-radius: 3px; text-decoration: none; color: var(--ink-2); font-size: 0.85rem; background: #fff8; }
.grid .cell.right { border-color: var(--ok); color: var(--ok); }
.grid .cell.wrong { border-color: var(--claret); color: var(--claret); }
.grid .cell { position: relative; }
.grid .cell.flagged::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 0.55em 0.55em 0; border-color: transparent var(--claret) transparent transparent; border-top-right-radius: 3px; }
.grid .cell:hover { border-color: var(--ink); color: var(--ink); }

/* Practice, in the MCAT's structure: dark top bar (section · question n of N · clock), a tool row
   (Highlight, Flag for Review), question left and answers right with a divider,
   dark bottom bar (Navigation left; Previous, Submit / Next right). */
:root { --bar: #33302e; --bar-ink: #fdebdd; --bar-line: #5a544f; }
.exam { padding: 2.2rem 0 5rem; }   /* room for the two fixed bars */
.exam-top, .exam-bottom { position: fixed; left: 0; right: 0; z-index: 2; background: var(--bar); color: var(--bar-ink); }
.exam-top { top: 0; font-size: 0.95rem; }
.exam-top .wrap, .exam-bottom .wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
.exam-top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1em; height: 2.6rem; }
.exam-top .section { min-width: 0; display: flex; align-items: center; gap: 0.8em; }
.exam-top .exit { flex: none; display: inline-flex; align-items: center; gap: 0.3em; line-height: 1.2; color: inherit; text-decoration: none; border: 1px solid #fdebdd66; border-radius: 4px; padding: 0.25em 0.6em; white-space: nowrap; }
.exam-top .exit:hover { background: #ffffff1a; border-color: var(--bar-ink); }
.exam-top .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.8; }
.exam-top .pos { font-weight: 600; white-space: nowrap; }
.exam-top .clock { text-align: right; font-variant-numeric: tabular-nums; opacity: 0.85; }
.exam-tools { display: flex; justify-content: flex-end; gap: 0.3em; padding: 0.4rem 0; margin: 0 0 1.4rem; border-bottom: 1px solid var(--rule); }
.exam-tools .tool { background: none; border-color: transparent; color: var(--ink-2); padding: 0.35em 0.7em; font-weight: 500; }
.exam-tools .tool:hover { background: var(--tint); color: var(--ink); }
.exam-tools .tool.on { color: var(--claret); font-weight: 600; }
.exam-tools .tool.on svg { fill: currentColor; }
.exam-bottom { bottom: 0; border-top: 1px solid var(--bar-line); }
.exam-bottom .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1em; height: 3.4rem; }
.exam-bottom .move { display: flex; gap: 0.6em; }
.exam-bottom button { background: transparent; color: var(--bar-ink); border-color: #fdebdd66; padding: 0.45em 1em; }
.exam-bottom button:hover { background: #ffffff1a; border-color: var(--bar-ink); }
.exam-bottom button.primary { background: var(--bar-ink); color: var(--bar); border-color: var(--bar-ink); }
.exam-bottom button.primary:hover { background: #fff; }
.exam-bottom .navopen .count { opacity: 0.7; font-variant-numeric: tabular-nums; margin-left: 0.3em; }

.question { margin: 0; }
/* Question left, answers right, with a divider; one column on phones. */
.qgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "stem right" "key right"; gap: 0 2.5rem; }
.qgrid .stem { grid-area: stem; }
.qgrid .key { grid-area: key; }
.qright { grid-area: right; border-left: 1px solid var(--rule); padding-left: 2.5rem; }
.stem { font-size: 1.125rem; line-height: 1.55; margin: 0 0 1.2em; }
.options { list-style: none; padding: 0; margin: 0 0 1.2em; font-size: 1.0625rem; }
.options li { display: flex; align-items: stretch; margin: 0 0 0.3em; border-radius: 4px; border-left: 3px solid transparent; }
.options label { flex: 1; display: flex; align-items: baseline; gap: 0.6em; padding: 0.5em 0.7em; cursor: pointer; }
.options li:hover { background: #fff6; }
.options li:has(input:checked) { background: var(--tint); border-left-color: var(--ink); }
.options input[type=radio] { margin: 0; flex: none; position: relative; top: 0.15em; }
.options .letter { flex: none; width: 1.5em; font-weight: 600; }
.options .text { flex: 1; }
.options .strike { background: none; border: 0; padding: 0 0.7em; color: var(--rule); line-height: 1; opacity: 0; }
.options li:hover .strike, .options li.struck .strike { opacity: 1; }
@media (pointer: coarse) { .options .strike { opacity: 1; } }
.options .strike:hover { color: var(--ink); background: none; }
.options li.struck .text { text-decoration: line-through; color: var(--ink-2); }
.options li.struck .letter { color: var(--rule); }
.options.answered li { padding: 0.45em 0.7em; gap: 0.6em; }
.options.answered .correct { background: #dff0e2; border-left-color: var(--ok); font-weight: 600; }
.options.answered .chosen-wrong { background: #f6dede; border-left-color: var(--claret); }
.options.answered .chosen-wrong .text { color: var(--claret); }
.options .mark { font-weight: 700; }
.options.answered .correct .mark { color: var(--ok); }
.options.answered .chosen-wrong .mark { color: var(--claret); }
.options .pct { flex: none; color: var(--ink-2); font-size: 0.85rem; font-variant-numeric: tabular-nums; align-self: center; }
.result { display: flex; flex-wrap: wrap; gap: 0.3em 1.4em; align-items: baseline; padding: 0.7em 0.9em; background: var(--tint); border-radius: 4px; margin: 0 0 1em; }
.result .ok { color: var(--ok); }
.result .bad { color: var(--claret); }
.result .hard { color: var(--ink); }
.key { margin: 0.4em 0 1.2em; }
.key h3 { margin: 1em 0 0.3em; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.key h3:first-child { margin-top: 0; }
.key p { margin-bottom: 0.6em; }
.rebuttals { list-style: none; padding: 0; margin: 0 0 0.6em; }
.rebuttals li { display: flex; gap: 0.6em; margin-bottom: 0.35em; }
.rebuttals .letter { flex: none; width: 1.5em; font-weight: 600; color: var(--ink-2); }
.report { margin: 0.5em 0 1em; font-size: 0.95rem; }
.report .notice { background: #f6dede; border-left: 3px solid var(--claret); padding: 0.6em 0.9em; border-radius: 3px; }
.tag.hot { background: #f6dede; color: var(--claret); }
.tag.new { background: #dff0e2; color: var(--ok); }
.question.hot { border-left: 3px solid var(--claret); padding-left: 1em; }
.report summary { cursor: pointer; color: var(--ink-2); }
.report summary:hover { color: var(--ink); }
.report form { margin-top: 0.6em; }
.question .comments { max-width: 44rem; }
.navigator { border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); padding: 1em 1.2em; max-width: 36rem; width: calc(100% - 3rem); }
.navigator::backdrop { background: #33302e88; }
.navigator .close { float: right; }
.navigator .grid .cell.current { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.keys { font-size: 0.8rem; }
.comments { border-top: 1px solid var(--hair); padding-top: 0.5em; margin-top: 1.5em; }
.comment { margin-bottom: 0.8em; }
.comment.resolved { color: var(--ink-2); }

@media (max-width: 600px) {
  main, .top, .foot { padding-left: 1rem; padding-right: 1rem; }
  th, td { padding-right: 0.8em; }
  .opt { display: none; }
  .top { display: block; } .top .brand { display: block; padding-bottom: 0.3rem; } .top nav { gap: 0 0.9em; }
  .exam-top { font-size: 0.85rem; }
  .exam-top .wrap, .exam-bottom .wrap { padding: 0 1rem; }
  .exam-tools .lbl, .exam-bottom .lbl { display: none; }
  .qgrid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "stem" "right" "key"; }
  .qright { border-left: 0; padding-left: 0; }
}
@media print { .top, .foot, .exam-top, .exam-bottom, .comments, .report { display: none; } body { background: #fff; } }

/* Editor review */
.grid .cell.signed { text-decoration: underline; text-decoration-color: var(--ok); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.reviewbox { background: var(--tint); padding: 0.6em 1em; border-radius: 3px; max-width: 46rem; }
button.signed { color: var(--ok); border-color: var(--ok); font-weight: 600; }
.grid .cell.part { text-decoration: underline dotted; text-decoration-color: var(--ok); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.done { color: var(--ok); font-weight: 600; }
button.link:disabled { color: var(--ink-2); text-decoration: none; cursor: default; opacity: 0.6; }
/* The note panel: a fixed column on the right between the two bars; a sheet above the bottom bar on phones. */
:root { --note-w: 21rem; }
.notepad { position: fixed; z-index: 1; top: 2.6rem; bottom: calc(3.4rem + 1px); right: 0; width: var(--note-w); box-sizing: border-box; padding: 1rem 1.2rem; background: var(--paper); border-left: 1px solid var(--rule); overflow: auto; }   /* under the two bars */
.notepad .grip { position: absolute; top: 0; bottom: 0; left: -3px; width: 7px; cursor: col-resize; touch-action: none; }
.notepad .grip:hover, .notepad.resizing .grip { background: var(--rule); }
.notepad.resizing { user-select: none; }
.notepad form { display: flex; flex-direction: column; height: 100%; gap: 0.5em; }
.notepad .note-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.notepad textarea { flex: 1; resize: none; min-height: 8em; }
body.note-open main { padding-right: calc(var(--note-w) + 2rem); }   /* content stays ≤ 68rem; the panel sits in the padding */
.exam-tools .tool.note.on { color: var(--link); }
.note-cell { white-space: pre-line; color: var(--ink-2); }
@media (max-width: 900px) {
  .notepad { top: auto; left: 0; width: auto; height: 40vh; border-left: 0; border-top: 1px solid var(--rule); }
  .notepad .grip { display: none; }
  body.note-open main { padding-right: 1.5rem; padding-bottom: calc(40vh + 4rem); }
}
/* Confidence, asked before submitting: two radios in one quiet row. */
.conf { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; align-items: center; font-size: 0.95rem; margin: -0.4em 0 1.2em; }
.conf label { cursor: pointer; display: inline-flex; align-items: center; gap: 0.35em; }
.rebuttals li.yours { background: var(--tint); border-radius: 4px; }
.rebuttals .tag.hot { margin-right: 0.2em; }
.exam-top .clock { justify-self: end; background: none; border: 0; padding: 0.2em 0.4em; color: inherit; font-weight: inherit; font-variant-numeric: tabular-nums; }
.exam-top .clock:hover { background: #ffffff1a; }
.exam-top .clock.off { opacity: 0.55; font-size: 0.85em; }
.score { font-size: 1.25rem; margin-bottom: 1.4em; }
.exports li { margin: 0 0 0.6em; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--tint); padding: 0.05em 0.3em; border-radius: 3px; }
.redo li { margin: 0 0 0.5em; }