/* story.css — story screens: the chapter timetable card and THE BOOK page.
   Same stationery language as the HUD: exercise paper, red ink, a push pin,
   the VP's blue-black handwriting (Caveat) and a rubber stamp. */

/* ── Chapter card: the day's timetable, pinned up ────────── */
.chapter-card { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; }
.chapter-card .sheet { position: relative; box-sizing: border-box; width: min(88vw, 380px); padding: 22px 18px 14px 50px;
  background:
    linear-gradient(90deg, transparent 36px, rgba(215, 38, 30, .55) 36px 38px, transparent 38px),
    repeating-linear-gradient(180deg, var(--paper) 0 27px, var(--paper-line) 27px 28px);
  border: 2.5px solid var(--ink); border-radius: 6px;
  box-shadow: 0 6px 0 var(--ink), 0 20px 44px rgba(22, 18, 14, .38);
  transform: translateY(75vh) rotate(-9deg); transition: transform .7s var(--spring); }
.chapter-card.is-in .sheet { transform: translateY(0) rotate(-2deg); }
.chapter-card.is-out .sheet { transform: translate(-42vw, -42vh) scale(.22) rotate(-14deg); opacity: 0;
  transition: transform .6s cubic-bezier(.6, 0, .9, .4), opacity .6s ease-in; }
.chapter-card .pin { position: absolute; top: -10px; left: 50%; width: 20px; height: 20px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ff8a80, var(--red-ink) 62%); border: 2px solid var(--ink); }
.chapter-card header small { display: block; font: 800 10px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--red-ink); }
.chapter-card header b { display: block; margin-top: 4px; font: 800 30px/1 var(--display); color: var(--ink); }
.chapter-card header em { display: block; font: 700 21px/1.1 var(--hand); font-style: normal; color: var(--uniform-blue); }
.chapter-card ol { list-style: none; margin: 8px 0 0; padding: 0; }
.chapter-card li { position: relative; display: flex; align-items: baseline; gap: 12px; height: 28px; font: 700 16px/28px var(--ui); color: rgba(22, 18, 14, .5); }
.chapter-card li time { flex: none; width: 42px; font-weight: 800; }
.chapter-card li.now { font: 800 19px/28px var(--display); color: var(--ink); }
.chapter-card .tick { position: absolute; left: -34px; top: 5px; width: 20px; height: 20px; color: var(--emerald); }
.chapter-card .tick svg { width: 100%; height: 100%; }
.chapter-card .ring { position: absolute; left: -26px; top: -9px; width: calc(100% + 30px); height: 46px; overflow: visible; }
.chapter-card .ring path { fill: none; stroke: var(--red-ink); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 900; stroke-dashoffset: 900; }
.chapter-card.is-in .ring path { animation: ring-draw .8s .6s ease-out forwards; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }

/* ── THE BOOK: the caught screen ─────────────────────────── */
.book-page { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; gap: 14px;
  padding: calc(var(--safe-t) + 14px) 12px calc(var(--safe-b) + 14px); overflow-y: auto;
  background: rgba(22, 18, 14, .6); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; font-family: var(--ui); }
.book-page.is-in { opacity: 1; }
.book { box-sizing: border-box; display: grid; grid-template-columns: 1fr; width: min(94vw, 780px); padding: 9px; border-radius: 12px;
  background: linear-gradient(135deg, #bd2a22, #7c1510); border: 2.5px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink), 0 26px 60px rgba(0, 0, 0, .45);
  transform: translateY(46px) scale(.93); transition: transform .55s var(--spring); }
.book-page.is-in .book { transform: none; }
.book .page { position: relative; padding: 14px 16px 16px; background: repeating-linear-gradient(180deg, #fbf3dc 0 25px, #cfdcec 25px 26px); }
.book .ledger-page { border-radius: 5px 5px 0 0; padding-bottom: 86px; }   /* room for the stamp under the entries */
.evidence-page { border-radius: 0 0 5px 5px; border-top: 2px dashed rgba(22, 18, 14, .22); }
@media (min-width: 700px) {
  .book { grid-template-columns: 1.4fr 1fr; }
  .ledger-page { border-radius: 5px 0 0 5px; }
  .evidence-page { border-radius: 0 5px 5px 0; border-top: 0; border-left: 2px dashed rgba(22, 18, 14, .22); }
}
.ledger-page h2 { margin: 0; font: 800 28px/1 var(--display); letter-spacing: .08em; color: var(--red-ink); }
.ledger-page header small { font: 700 11px/1.4 var(--ui); color: rgba(22, 18, 14, .6); }
.ledger { width: 100%; margin-top: 6px; border-collapse: collapse; table-layout: fixed; font: 700 17px/1.05 var(--hand); color: #26306e; }
.ledger th { padding: 4px; text-align: left; font: 800 10px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); border-bottom: 2px solid var(--red-ink); }
.ledger th:nth-child(1) { width: 36px; }
.ledger th:nth-child(3) { width: 46px; }
.ledger td { padding: 5px 4px; vertical-align: top; border-bottom: 1px solid rgba(215, 38, 30, .25); overflow-wrap: anywhere; }
.ledger tr.past { opacity: .72; }
.ledger tr.new td { font-size: 21px; color: #121a55; clip-path: inset(0 100% 0 0); }
.book-page.is-in tr.new td { animation: write-in .45s ease-out forwards; }
.book-page.is-in tr.new td:nth-child(1) { animation-delay: .55s; }
.book-page.is-in tr.new td:nth-child(2) { animation-delay: .8s; animation-duration: .7s; }
.book-page.is-in tr.new td:nth-child(3) { animation-delay: 1.5s; }
.book-page.is-in tr.new td:nth-child(4) { animation-delay: 1.75s; animation-duration: .7s; }
@keyframes write-in { to { clip-path: inset(0 0 0 0); } }
.book-page .stamp { position: absolute; left: 30%; bottom: 16px; padding: 5px 14px 3px; font: 800 32px/1 var(--display); letter-spacing: .1em; color: var(--red-ink);
  border: 4px solid var(--red-ink); border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(251, 243, 220, .9), inset 0 0 0 4px var(--red-ink);
  mix-blend-mode: multiply; opacity: 0; transform: rotate(-14deg) scale(2.6); pointer-events: none; }
.book-page.is-in .stamp { animation: stamp-down .26s 2.5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes stamp-down { to { opacity: .86; transform: rotate(-14deg) scale(1); } }
.evidence-page h3 { margin: 0 0 4px; font: 800 12px/1.6 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink); }
.evidence-page dl { margin: 0; }
.evidence-page dl > div { display: flex; justify-content: space-between; gap: 12px; font: 700 20px/26px var(--hand); color: #26306e; }
.evidence-page dd { margin: 0; color: #121a55; }
.evidence-page .remark { margin: 10px 0 2px; font: 700 22px/1.15 var(--hand); color: var(--red-ink); transform: rotate(-1.5deg); }
.evidence-page .sign { margin: 0; text-align: right; font: 700 19px/26px var(--hand); color: #26306e; }
.story-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* On THE BOOK the buttons wait until the stamp is down. */
.book-page .story-actions { opacity: 0; transform: translateY(12px); transition: opacity .35s 2.9s, transform .4s 2.9s var(--spring); }
.book-page.is-in .story-actions { opacity: 1; transform: none; }
.story-actions button { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink);
  font: 800 16px/1 var(--ui); cursor: pointer; }
.story-actions button.primary { background: var(--pencil); }
.story-actions button:active { translate: 0 2px; box-shadow: 0 1px 0 var(--ink); }
.story-actions button:disabled { opacity: .5; cursor: default; }
.story-actions button:focus-visible { outline: 3px solid var(--uniform-blue); outline-offset: 3px; }
.story-actions svg { width: 22px; height: 22px; }
.story-actions .count { position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: var(--red-ink); color: #fff; font: 800 12px/22px var(--ui); }

@media (prefers-reduced-motion: reduce) {
  .chapter-card .sheet, .chapter-card.is-out .sheet, .book { transition: none; }
  .chapter-card.is-in .ring path, .book-page.is-in tr.new td, .book-page.is-in .stamp { animation-duration: .01s; animation-delay: 0s; }
  .story-actions { transition-delay: 0s; }
}

/* ── Report card: the finish screen ──────────────────────── */
.report-page, .corrections-page { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; gap: 14px;
  padding: calc(var(--safe-t) + 14px) 12px calc(var(--safe-b) + 14px); overflow-y: auto;
  background: rgba(22, 18, 14, .6); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; font-family: var(--ui); }
.report-page.is-in, .corrections-page.is-in { opacity: 1; }
.report { position: relative; box-sizing: border-box; width: min(94vw, 520px); padding: 16px 18px 18px; color: var(--ink);
  background: #fffdf4; border: 2.5px solid var(--ink); border-radius: 6px;
  box-shadow: inset 0 0 0 5px #fffdf4, inset 0 0 0 7px var(--uniform-blue), 0 6px 0 var(--ink), 0 26px 60px rgba(0, 0, 0, .45);
  transform: translateY(40px) rotate(1.5deg) scale(.94); transition: transform .55s var(--spring); }
.report-page.is-in .report { transform: rotate(-.6deg); }
.report header { padding-right: 132px; }      /* the stamp lands in the space on the right */
.report header small { display: block; font: 800 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--uniform-blue); }
.report h2 { margin: 4px 0 0; font: 800 30px/1 var(--display); }
.report header em { display: block; font: 700 19px/1.2 var(--hand); font-style: normal; color: var(--red-ink); }
.report dl { margin: 10px 0 0; }
.report .passed { margin: 10px 0 0; padding: 6px 10px; font: 800 13px/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--emerald); border-radius: 6px; }
.report .passed[hidden] { display: none; }
.report .student { display: grid; grid-template-columns: 1.4fr .6fr 1.4fr; gap: 8px; border-bottom: 1.5px solid rgba(22, 18, 14, .25); padding-bottom: 8px; }
.report dt { font: 800 10px/1.4 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: rgba(22, 18, 14, .55); }
.report dd { margin: 0; font: 700 20px/1.1 var(--hand); color: #26306e; }
.report .marks { width: 100%; margin-top: 10px; border-collapse: collapse; font: 700 15px/1.2 var(--ui); }
.report .marks th { padding: 5px 6px; text-align: left; font: 800 10px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; background: var(--uniform-blue); color: #fff; }
.report .marks td { padding: 8px 6px; border: 1.5px solid rgba(22, 18, 14, .25); vertical-align: middle; }
.report .grade { display: inline-block; padding: 2px 8px; font: 700 26px/1 var(--hand); color: var(--red-ink); border: 2.5px solid var(--red-ink); border-radius: 50%; transform: rotate(-6deg); }
.report .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.report .stats div { display: flex; justify-content: space-between; align-items: baseline; }
.report .remark { margin: 12px 0 2px; font: 700 20px/1.2 var(--hand); color: #26306e; }
.report .remark b { font: 800 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: rgba(22, 18, 14, .55); margin-right: 4px; }
.report .sign { margin: 0; text-align: right; font: 700 18px/1.4 var(--hand); color: #26306e; }
.report .stamp { position: absolute; right: 18px; top: 14px; padding: 5px 12px 3px; font: 800 20px/1 var(--display); letter-spacing: .08em; border: 3.5px solid currentColor; border-radius: 8px;
  box-shadow: inset 0 0 0 2px #fffdf4, inset 0 0 0 3.5px currentColor; mix-blend-mode: multiply; opacity: 0; transform: rotate(12deg) scale(2.4); white-space: pre-line; text-align: center; }
.report .stamp.promoted { color: var(--emerald); }
.report .stamp.trial { color: #c98a0b; }
.report .stamp.repeat { color: var(--red-ink); }
.report-page.is-in .report .stamp { animation: report-stamp .26s 1s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes report-stamp { to { opacity: .88; transform: rotate(12deg) scale(1); } }

/* ── Corrections: an exercise-book page marked in red ────── */
.exercise { box-sizing: border-box; width: min(94vw, 560px); max-height: calc(100dvh - 120px); overflow-y: auto; padding: 16px 16px 18px 52px;
  background: linear-gradient(90deg, transparent 38px, rgba(215, 38, 30, .55) 38px 40px, transparent 40px), repeating-linear-gradient(180deg, var(--paper) 0 27px, var(--paper-line) 27px 28px);
  border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: 0 6px 0 var(--ink), 0 26px 60px rgba(0, 0, 0, .45);
  transform: translateY(40px) scale(.95); transition: transform .5s var(--spring); }
.corrections-page.is-in .exercise { transform: none; }
.exercise h2 { margin: 0; font: 800 30px/1 var(--hand); color: var(--red-ink); text-decoration: underline 2px; text-underline-offset: 5px; }
.exercise header small { font: 700 13px/1.6 var(--ui); color: rgba(22, 18, 14, .55); }
.exercise ol { list-style: none; margin: 8px 0 0; padding: 0; }
.exercise li { padding: 8px 0 10px; border-bottom: 1.5px dashed rgba(22, 18, 14, .2); }
.exercise p { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.exercise .q { font: 700 16px/1.35 var(--ui); color: var(--ink); display: block; }
.exercise .q b { color: var(--red-ink); }
.exercise .yours { margin-top: 4px; font: 700 20px/1.2 var(--hand); color: #26306e; }
.exercise .yours s { text-decoration-color: var(--red-ink); text-decoration-thickness: 2px; }
/* The right answer in green (a deeper emerald, readable on the paper); the cross stays red. */
.exercise .right { font: 700 22px/1.2 var(--hand); color: #11804a; }
.exercise .mark { flex: none; width: 18px; height: 18px; translate: 0 3px; }
.exercise .mark svg { width: 100%; height: 100%; }
.exercise .cross { color: var(--red-ink); }
.exercise .tick { color: var(--red-ink); }

@media (prefers-reduced-motion: reduce) {
  .report, .exercise { transition: none; }
  .report-page.is-in .report .stamp { animation-duration: .01s; animation-delay: 0s; }
}

/* ── Start and pause cards: a note pinned over the corridor ─ */
.start-card, .pause-card { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px); font-family: var(--ui); }
.start-card { background: linear-gradient(180deg, rgba(22, 18, 14, .05), rgba(22, 18, 14, .42)); }
/* The opening shot frames Kemi and the VP in the middle: the start note keeps clear of them. */
@media (min-aspect-ratio: 1/1) { .start-card { align-items: flex-start; padding-left: max(5vw, 24px); } }
@media (max-aspect-ratio: 1/1) { .start-card { justify-content: flex-end; padding-bottom: calc(var(--safe-b) + 4vh); } }
.pause-card { background: rgba(22, 18, 14, .5); backdrop-filter: blur(2px); }
.start-card .sheet, .pause-card .sheet { position: relative; box-sizing: border-box; width: min(86vw, 360px); padding: 20px 18px 12px 50px;
  background:
    linear-gradient(90deg, transparent 36px, rgba(215, 38, 30, .55) 36px 38px, transparent 38px),
    repeating-linear-gradient(180deg, var(--paper) 0 27px, var(--paper-line) 27px 28px);
  border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: 0 6px 0 var(--ink), 0 20px 44px rgba(22, 18, 14, .38);
  transform: translateY(60vh) rotate(-8deg); transition: transform .6s var(--spring); }
.start-card.is-in .sheet, .pause-card.is-in .sheet { transform: rotate(-1.5deg); }
.start-card.is-out .sheet { transform: translateY(-70vh) rotate(6deg); transition: transform .45s cubic-bezier(.6, 0, .9, .4); }
.start-card.is-out .story-actions { opacity: 0; transition: opacity .2s; }
.start-card .pin, .pause-card .pin { position: absolute; top: -10px; left: 50%; width: 20px; height: 20px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ff8a80, var(--red-ink) 62%); border: 2px solid var(--ink); }
.start-card header small, .pause-card header small { display: block; font: 800 10px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--red-ink); }
.start-card header b, .pause-card header b { display: block; margin-top: 5px; font: 800 29px/1 var(--display); color: var(--ink); }
.start-card .subject, .pause-card .subject { margin: 8px 0 0; font: 700 23px/28px var(--hand); color: var(--uniform-blue); }
.start-card .meta, .pause-card .meta { margin: 0; font: 700 14px/28px var(--ui); color: rgba(22, 18, 14, .62); }
.start-card .note { margin: 0; font: 700 14px/20px var(--ui); color: var(--red-ink); padding: 4px 0; }
.start-card .story-actions button, .pause-card .story-actions button { transform: scale(1); transition: transform .3s var(--spring); }
.start-card .story-actions button.primary { min-height: 56px; padding: 0 26px; font-size: 19px; }
@media (prefers-reduced-motion: reduce) { .start-card .sheet, .pause-card .sheet { transition: none; } }