/* The free practice papers (learn/web/papers.py): the index, a paper to sit,
   the marked paper and the paper to print.

   practice.css loads first and brings the page of reading and the free
   checks' slips, options, marks and email form; this adds what a whole paper
   needs on top: its facts, the clock, what the paper found, the index's list
   and the paper as it prints. */

/* ------------------------------------------------------------------ the facts */

/* What a paper covers: each skill or area beside its count, two across on a wide page. */
.pp-covers { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0 28px; }
.pp-covers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; }
.pp-count { flex: none; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pp-print-link a { font-weight: 700; }

/* ------------------------------------------------------------------ the clock

   A strip of the page itself, the way the child's timed paper carries its
   clock in the cover bar: plain paper ruled off in pen blue, flush under the
   sticky nav, so it covers the questions cleanly as the child works down the
   paper instead of floating over their words. It casts no shadow. At zero it
   says so in plain ink: no red, nothing flashes. */

.pp-clock {
  position: sticky;
  top: 77px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  min-height: 64px;
  margin: 34px -14px 0;
  padding: 6px 14px;
  background: var(--paper);
  border-bottom: 2px solid var(--pen);
}
/* .key and the line set a display, which beats the browser's own [hidden]
   rule: keep each away until static/papers.js turns it on. */
.pp-clock[hidden], .pp-clock [hidden] { display: none; }
.pp-clock .key { min-height: 48px; background: var(--slip); color: var(--pen); border-color: var(--pen); }
.pp-time { display: flex; align-items: baseline; gap: 12px; margin: 0; font-weight: 700; }
.pp-time b { font-size: 1.45rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-up b { display: none; }
/* The questions start clear of the strip once it rides. */
.pp-form .qs { margin-top: 40px; }

/* ------------------------------------------------------------------ the marked paper */

.pp-took { font-weight: 700; }
/* Each skill or area with how many of its questions were right, ruled like the test facts. */
.pp-rows { max-width: 40em; margin: 22px 0 0; border-top: 2px solid var(--rule); }
.pp-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ink-soft); }
.pp-rows dt { font-weight: 700; }
.pp-rows dd { flex: none; margin: 0; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ the index */

.pp-list { list-style: none; margin: 22px 0 0; padding: 0; border-top: 2px solid var(--rule); }
.pp-list > li { padding: 14px 0 20px; border-bottom: 1px solid var(--ink-soft); }
.pp-list h3 { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.pp-list h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.pp-list p { max-width: 40em; margin: 4px 0 0; }
.pp-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 14px; }
.pp-ways a:not(.key) { font-weight: 700; }

/* ------------------------------------------------------------------ the paper to print

   On screen it is the page of reading with a Print key; on paper it is a
   plain sheet: the name and date lines, the questions in a numbered list
   that never splits one across a page, and the answers on a page of their own. */

.pp-head { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 30px 0 0; }
.pp-line { display: flex; align-items: baseline; gap: 10px; margin: 0; font-weight: 700; }
.pp-blank { display: inline-block; width: min(14rem, 52vw); border-bottom: 1px solid var(--ink); }
.pp-say { max-width: 40em; margin: 16px 0 0; }
.pp-print-qs { margin: 28px 0 0; padding-left: 2.2em; display: grid; gap: 26px; }
.pp-print-qs > li { padding-left: 0.3em; break-inside: avoid; }
.pp-print-qs > li::marker { font-weight: 800; color: var(--pen); }
.pp-print-qs .figure { margin: 0 0 10px; color: var(--ink); }
.pp-print-qs .figure svg { max-width: 300px; overflow: visible; }
.pp-print-opts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pp-print-opts li { display: flex; align-items: baseline; gap: 12px; }
.pp-print-opts .q-letter { align-self: center; }
.pp-key { margin-top: clamp(56px, 7vw, 88px); }
.pp-key-for, .pp-key-online { max-width: 40em; margin: 18px 0 0; }
.pp-key-list { margin: 18px 0 0; padding-left: 2.2em; columns: 2 16rem; column-gap: 32px; }
.pp-key-list li { padding: 3px 0 3px 0.3em; break-inside: avoid; }
.pp-key-list span { color: var(--ink-soft); }

@media (max-width: 620px) {
  .pp-clock { top: 65px; }
  .pp-ways .key { width: 100%; }
}

/* On paper: black on white at a test paper's size, the options two across,
   a question never split across two pages, and the answers on a page of
   their own. */
@media print {
  @page { margin: 14mm 15mm; }
  html, body.pub, .page { background: #ffffff; box-shadow: none; }
  .page::before { display: none; }
  .nav, .back, .skip, .pp-screen, .pp-clock, .prep-more { display: none !important; }
  .page { min-height: 0; padding: 0; max-width: none; }
  .prep { max-width: none; font-size: 11pt; }
  body.pub, .prep, .q-stem { color: #000000; }
  .q-stem { font-size: 11pt; line-height: 1.4; }
  .q-letter { width: 20px; height: 20px; font-size: 8pt; color: #000000; border-width: 1.5px; border-color: #000000; }
  .pp-print-qs > li::marker { color: #000000; }
  .pp-sheet h1 { font-size: 18pt; }
  .pp-sheet .prep-meta { margin-top: 4px; }
  .pp-head { margin-top: 14px; }
  .pp-say { margin-top: 8px; }
  .pp-blank { border-bottom-color: #000000; }
  .pp-print-qs { margin-top: 14px; gap: 14px; }
  .pp-print-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin-top: 6px; }
  .pp-print-qs .figure svg { max-width: 240px; }
  .pp-key { break-before: page; margin-top: 0; }
  .pp-key-list span { color: #444444; }
  .prep h2 { text-decoration-color: #000000; }
  .prep-fine { font-size: 8pt; color: #333333; }
}