body { background: #f4f2ee; }
[hidden] { display: none !important; }

.paper-wrap { max-width: 1080px; margin: 0 auto; padding: 1em 1em 5em; }
.paper-card {
  background: #fff; border: 1px solid var(--rule); border-radius: 14px;
  padding: 1.35em 1.5em; margin-bottom: 1em;
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.paper-hero { border-top: 5px solid var(--accent); }
.paper-hero h1 { margin: .15em 0 .35em; font-size: clamp(1.6em, 4vw, 2.25em); }
.eyebrow {
  margin: 0; color: var(--accent); font-size: .78em; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.hero-copy { max-width: 780px; color: #555; line-height: 1.75; }
.paper-badges, .topic-counts { display: flex; flex-wrap: wrap; gap: .45em; margin: .9em 0; }
.paper-badge, .topic-counts span {
  display: inline-flex; align-items: center; min-height: 30px; padding: .2em .7em;
  border-radius: 999px; background: #f1f0ec; color: #444; font-size: .86em; font-weight: 700;
}
.paper-badge.warning { background: #fef3c7; color: #92400e; }
.coverage-card {
  margin-top: 1.2em; padding: 1em; border: 1px solid #e5e2dc; border-radius: 10px;
  background: #faf9f6;
}
.coverage-card > div:first-child { display: flex; justify-content: space-between; gap: 1em; }
.coverage-label { color: #666; }
.coverage-track { height: 9px; margin: .65em 0; overflow: hidden; border-radius: 999px; background: #e7e5e4; }
.coverage-track span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .25s ease; }
.coverage-card p { margin: 0; color: #777; font-size: .86em; }
.year-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8em; margin: 1em 0; }
.year-card {
  display: flex; min-height: 190px; flex-direction: column; background: #fff;
  border: 1px solid var(--rule); border-radius: 12px; padding: 1em; color: inherit; text-decoration: none;
}
.year-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.year-card h2 { margin: .2em 0; font-size: 1.35em; }
.year-card p { color: #666; line-height: 1.5; }
.year-card .year-status { margin-top: auto; color: var(--accent); font-weight: 750; }
.year-card.completed { border-color: #86b89a; }
.year-card.reviewed { background: #f0fdf4; }
.split-note { display: flex; justify-content: space-between; align-items: center; gap: 1.2em; }
.split-note h2 { margin: 0 0 .3em; }
.split-note p { margin: 0; max-width: 710px; color: #666; line-height: 1.6; }
.error-card { color: #991b1b; border-color: #fca5a5; background: #fff7f7; }

.primary-action, .secondary-action, .danger-action {
  display: inline-flex; min-height: 44px; box-sizing: border-box; align-items: center; justify-content: center;
  border-radius: 7px; padding: .65em 1.15em; cursor: pointer; font: inherit; font-weight: 750;
  border: 1px solid var(--ink); text-decoration: none;
}
.primary-action { color: #fff; background: var(--ink); }
.secondary-action { color: var(--ink); background: #fff; border-color: #bbb; }
.danger-action { color: #fff; background: #991b1b; border-color: #991b1b; }
.primary-action:hover, .danger-action:hover { opacity: .86; }
.primary-action:disabled, .secondary-action:disabled { cursor: default; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.start-row, .result-actions { display: flex; flex-wrap: wrap; gap: .65em; align-items: center; margin-top: 1em; }
.local-note { color: #777; font-size: .82em; line-height: 1.55; }
.exam-note { margin-top: .8em; padding: .8em 1em; border-left: 4px solid #999; border-radius: 5px; background: #f7f7f4; color: #555; line-height: 1.65; font-size: .91em; }
.warning-note { border-color: #f59e0b; background: #fffbeb; color: #854d0e; }

.exam-toolbar {
  position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr;
  gap: .7em; align-items: center; margin-bottom: 1em; padding: .75em 1em; border-radius: 10px;
  color: #fff; background: #202020; box-shadow: 0 3px 12px rgba(0,0,0,.16);
}
.exam-toolbar .answered { text-align: right; }
.timer { font: 750 1.32em/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.timer.urgent { color: #fca5a5; }
.question-heading { display: flex; justify-content: space-between; gap: 1em; align-items: start; }
.question-heading h2 { margin: 0; font-size: 1.3em; }
.question-tags { display: flex; flex-wrap: wrap; gap: .35em; justify-content: flex-end; }
.question-tag { padding: .14em .55em; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: .78em; }
.question-stem { margin: 1em 0; font-size: 1.08em; line-height: 1.8; white-space: pre-wrap; }
.question-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .8em; margin: 1em 0; }
.source-image { margin: 0; padding: .6em; border: 1px solid #ddd; border-radius: 9px; background: #fafafa; }
.source-image img { display: block; width: 100%; max-height: 560px; object-fit: contain; }
.source-image figcaption { margin-top: .45em; color: #666; font-size: .8em; text-align: center; }
.option-list { display: grid; gap: .65em; margin: 0; padding: 0; border: 0; }
.option-row {
  display: grid; grid-template-columns: auto 1fr; gap: .7em; align-items: start;
  border: 1px solid #ddd; border-radius: 8px; padding: .75em .85em; cursor: pointer; line-height: 1.65;
}
.option-row:hover { border-color: #777; background: #fafaf7; }
.option-row:has(input:checked) { border-color: var(--accent); background: #fff8e6; }
.option-row input { width: 18px; height: 18px; margin-top: .32em; }
.question-controls { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; margin-top: 1.1em; }
.question-controls .flag { margin-left: auto; padding: .55em .7em; }
.palette { display: grid; grid-template-columns: repeat(10, minmax(38px, 1fr)); gap: .35em; margin-top: 1em; padding-top: 1em; border-top: 1px solid #eee; }
.palette button { min-height: 38px; border: 1px solid #ccc; border-radius: 5px; background: #fff; cursor: pointer; }
.palette button.answered { background: #dcfce7; border-color: #86efac; }
.palette button.flagged { box-shadow: inset 0 0 0 2px #f59e0b; }
.palette button.current { color: #fff; background: var(--ink); border-color: var(--ink); }
.submit-row { margin-top: 1.2em; padding-top: 1em; border-top: 1px solid #eee; text-align: right; }

.score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65em; margin: 1em 0; }
.score-box { padding: .9em; border-radius: 9px; background: #f7f7f4; text-align: center; }
.score-box strong { display: block; margin-top: .18em; font-size: 1.45em; }
.review-heading { display: flex; justify-content: space-between; gap: 1em; align-items: end; margin-top: 2em; border-top: 1px solid #eee; padding-top: 1.2em; }
.review-heading h2 { margin: 0 0 .25em; }
.review-heading p { margin: 0; color: #666; }
.review-controls { display: flex; flex-wrap: wrap; gap: .45em; }
.review-controls [aria-pressed="true"] { color: #fff; background: var(--ink); border-color: var(--ink); }
.review-status { color: #666; font-size: .88em; }
.review-item { padding: 1.2em 0; border-top: 1px solid #eee; }
.review-item h3 { margin: 0 0 .55em; font-size: 1em; }
.review-item.correct h3 { color: #166534; }
.review-item.wrong h3 { color: #991b1b; }
.review-stem { margin: .65em 0; color: var(--ink); line-height: 1.75; white-space: pre-wrap; }
.review-options { display: grid; gap: .45em; margin: .7em 0; padding: 0; list-style: none; }
.review-option { display: flex; justify-content: space-between; align-items: start; gap: .6em; padding: .65em .75em; border: 1px solid #ddd; border-radius: 7px; line-height: 1.55; }
.review-option.correct { border-color: #10b981; background: #ecfdf5; }
.review-option.picked.wrong { border-color: #ef4444; background: #fef2f2; }
.review-option-markers { display: inline-flex; flex: 0 0 auto; flex-wrap: wrap; gap: .3em; justify-content: flex-end; }
.review-option-marker { padding: .1em .45em; border-radius: 999px; font-size: .72em; font-weight: 750; white-space: nowrap; }
.review-option-marker.correct { color: #166534; background: #dcfce7; }
.review-option-marker.picked { color: #991b1b; background: #fee2e2; }
.review-answer { margin-top: .65em; color: #555; line-height: 1.65; }
.review-explanation { margin-top: .75em; padding: .85em 1em; border-left: 4px solid var(--accent); border-radius: 7px; background: #f7f7f4; line-height: 1.72; }
.review-explanation-label { margin-bottom: .45em; color: var(--accent); font-size: .82em; font-weight: 800; }
.review-explanation-body { white-space: pre-wrap; }
.dispute-note { margin-top: .7em; padding: .65em .8em; border: 1px solid #f59e0b; border-radius: 6px; color: #854d0e; background: #fffbeb; }
.read-completion { margin-top: 1.4em; padding: 1.1em; border: 1px solid #d6d3d1; border-radius: 10px; background: #fafaf7; }
.read-completion h3 { margin: 0 0 .35em; }
.read-completion p { color: #666; line-height: 1.6; }
#reviewed-at { display: inline-block; margin-left: .6em; }

@media (max-width: 900px) {
  .year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .year-card:last-child { grid-column: 1 / -1; }
  .score-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .paper-wrap { padding: .65em .65em 4em; }
  .paper-card { padding: 1em; border-radius: 10px; }
  .year-grid { grid-template-columns: 1fr; }
  .year-card:last-child { grid-column: auto; }
  .split-note, .review-heading { display: block; }
  .split-note .secondary-action, .review-controls { margin-top: .8em; }
  .exam-toolbar { grid-template-columns: 1fr auto; }
  .exam-toolbar .answered { grid-column: 1 / -1; text-align: left; font-size: .85em; }
  .palette { grid-template-columns: repeat(5, minmax(40px, 1fr)); }
  .question-heading { display: block; }
  .question-tags { justify-content: flex-start; margin-top: .5em; }
  .question-controls .flag { width: 100%; margin-left: 0; }
  .start-row > button, .start-row > a, .result-actions > a { width: 100%; }
  #reviewed-at { display: block; margin: .6em 0 0; }
}