/* ============================================================
   papers-shelf.css — the past-papers revamp (owner, 2026-10-08:
   "revamp the past paper resource area. it looks ugly rn with a cool
   animation. and cool layout. make a cool user flow animation style,
   and prettiness.")

   A LAYER, not a rewrite: notebook-papers.css keeps every selector,
   every JS hook (pp-*, data-pp-*) and every href pastpapers.js reads.
   This file only RESTYLES what is already there, and papers-shelf.js
   adds the parts that follow the student down the page:

   - wide screens get a year index in the left margin that sticks while
     the page scrolls, lights the year in view and takes the student to
     any year (built from the groups the filters leave showing);
   - a session's papers are the old rows on hairlines (owner: "no
     blocky"), dealing in one after another the first time it comes into
     view.

   Tokens only (no hex/rgb literals); both themes come free because the
   tokens it reads already carry them. No glow (flat rows on hairlines,
   never a blurred shadow) and no pills (every control is a rounded
   rectangle). Named
   outside the notebook-*.css family on purpose, so the font ratchet in
   pages/tests_font_foundation.py never has to re-pin it.
   ============================================================ */

/* ---------- 0 · No pills here (owner: "i hate pill") ------------
   notebook-components.css's shared .nb-chip defaults to a full pill
   radius, and notebook-papers.css's unit-code badge reaches for the same
   token; both are scoped to THIS page's own classes here, so the shared
   component everywhere else on the site is untouched. */
.nb-papers-chip,
.nb-papers-unit-badge {
  border-radius: var(--nb-r-sm);
}

/* ---------- 0b · A wider page (owner, 2026-10-08: "make the past paper ui
   bigger, its a bit too small"). notebook-page.css gives every notebook page
   an 860px reading measure; the papers index takes 1040px, as the dashboard
   and the profile take their own. */
.nb-page-main:has(> .nb-papers) {
  max-width: 1040px;
}

/* ---------- 1 · A session: its head on its hairline, its rows under it
   Owner, 2026-10-08: "the pastpapers is nice, but make it match the old
   one, no blocky". The session is the old page's: its name over a hairline
   (notebook-papers.css), here in Sora with its count in the soft ink, and
   its papers as the old rows on hairlines, never tiles or cards. */
.nb-papers-groups {
  gap: var(--nb-s9);
}
.nb-papers-group {
  position: relative;
  scroll-margin-top: 96px;
}
.nb-papers-group-title {
  font: 700 var(--nb-text-xl)/1.25 var(--nb-display);
  letter-spacing: -0.015em;
}
.nb-papers-group-count {
  font-size: var(--nb-text-base);
  color: var(--nb-soft);
}

/* ---------- 2 · No spine (owner, 2026-10-08: "i dont like the spine. remove
   it"). The timeline's line, its fill and the dots are gone; the sessions sit
   flush on the page as the old one had them. The groups stay positioned for
   the year index beside them. */
.nb-papers-groups {
  position: relative;
}

/* ---------- 3 · The year index (wide screens) --------------------
   papers-shelf.js builds it from the groups showing: a year per line, a
   short rule before it that grows and takes the subject's hue for the
   year in view. It sticks under the navbar while the page scrolls. */
.pps-years {
  display: none;
}
@media (min-width: 1360px) {
  .pps-years {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -152px;
    width: 112px;
  }
  .pps-years-in {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 2px;
  }
  .pps-years-h {
    margin: 0 0 var(--nb-s2);
    padding-left: 10px;
    font: 600 var(--nb-text-sm)/1.3 var(--nb-sans);
    color: var(--nb-soft);
  }
  .pps-years a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--nb-r-sm);
    font: 600 var(--nb-text-md)/1.2 var(--nb-display);
    font-variant-numeric: tabular-nums;
    color: var(--nb-soft);
    text-decoration: none;
    transition: color var(--nb-dur-1) var(--nb-ease), background-color var(--nb-dur-1) var(--nb-ease);
  }
  .pps-years a::before {
    content: "";
    flex: none;
    width: 20px;
    height: 2px;
    border-radius: var(--nb-r-sm);
    background: currentColor;
    transform: scaleX(0.5);
    transform-origin: left;
    transition: transform var(--nb-dur-2) var(--nb-ease), background-color var(--nb-dur-2) var(--nb-ease);
  }
  .pps-years a:hover {
    color: var(--nb-ink);
    background: color-mix(in srgb, var(--nb-ink) 5%, transparent);
  }
  .pps-years a:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: 1px;
  }
  .pps-years a.is-on {
    color: var(--nb-ink);
  }
  .pps-years a.is-on::before {
    transform: scaleX(1);
    background: var(--subject-hue, var(--nb-blue));
  }
}

/* ---------- 4 · Papers as the old rows -------------------------
   notebook-papers.css's rows on their hairlines, as the page always drew
   them (owner: "no blocky"): the glyph and the paper's name on the left,
   Question paper and Mark scheme on the right. This layer only sizes them
   up a step, gives the glyph the subject's hue and lets them deal in. */
.nb-papers-row {
  padding: var(--nb-s4) var(--nb-s3);
}
/* the paper's glyph wears the subject's hue */
.nb-papers-row-icon {
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--subject-hue, var(--nb-blue)) 12%, transparent);
  border-color: color-mix(in srgb, var(--subject-hue, var(--nb-blue)) 32%, transparent);
  color: var(--subject-hue, var(--nb-blue));
}
.nb-papers-row-icon svg {
  width: 22px;
  height: 22px;
}
.nb-papers-row-title {
  font: 700 var(--nb-text-lg)/1.3 var(--nb-display);
  letter-spacing: -0.015em;
}
.nb-papers-row-meta {
  font-size: var(--nb-text-base);
}

/* ---------- 4b · Question paper and Mark scheme, under the pointer ---
   Owner, 2026-10-08: "when you hover over the btn make the color ...
   change", then "make the hover animation not make the text bigger. just
   keep the faint btn". The two keep their plain look at a readable size;
   the one under the pointer takes a faint wash and a new colour (the
   paper's blue deepens, the scheme turns blue), the paper's arrow leaving
   up and to the right. Its words never change size. Question paper is its
   own link, on z-index over the stretched one, like Mark scheme. */
.nb-papers-row-go {
  position: relative;
  z-index: 1;
  border-radius: var(--nb-r-md);
  text-decoration: none;
}
.nb-papers-row-go,
.nb-papers-row-ms {
  padding: 6px var(--nb-s3);
  font-size: var(--nb-text-base);
  transition:
    color 200ms var(--nb-ease),
    background-color 200ms var(--nb-ease);
}
.nb-papers-row-go:hover,
.nb-papers-row-go:focus-visible {
  color: var(--nb-blue-strong);
  background: color-mix(in srgb, var(--nb-blue) 14%, transparent);
}
.nb-papers-row-ms:hover,
.nb-papers-row-ms:focus-visible {
  color: var(--nb-blue);
  background: var(--nb-blue-wash);
}
.nb-papers-row-go:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}
.nb-papers-row-go:hover svg,
.nb-papers-row-go:focus-visible svg {
  transform: translate(2px, -2px);
}

/* A session's rows deal in, one after another, the first time it comes
   into view (papers-shelf.js: html.pps-anim, .pps-in on the session,
   --pps-i on each row). */
html.pps-anim .nb-papers-group:not(.pps-in) .nb-papers-row {
  opacity: 0;
}
html.pps-anim .nb-papers-group.pps-in .nb-papers-row {
  animation: nb-pp-deal 460ms var(--nb-ease) backwards;
  animation-delay: calc(min(var(--pps-i, 0), 10) * 45ms);
}
@keyframes nb-pp-deal {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- 5 · Reduced motion ----------------------------------
   Every picture stays still: no deal. The lit year still follows the page; that is
   state, not motion, and it simply jumps. */
@media (prefers-reduced-motion: reduce) {
  .nb-papers-row {
    animation: none !important;
  }
  .pps-years a,
  .pps-years a::before,
  .nb-papers-row {
    transition-duration: 0s !important;
  }
  html.pps-anim .nb-papers-group .nb-papers-row {
    opacity: 1;
  }
  /* the two links still change colour under the pointer; nothing moves */
  .nb-papers-row-go,
  .nb-papers-row-ms {
    transition-duration: 0s !important;
  }
  .nb-papers-row-go:hover svg,
  .nb-papers-row-go:focus-visible svg {
    transform: none;
  }
}

/* ---------- 6 · Phone -------------------------------------------
   No index: the sessions one under another,
   their rows as notebook-papers.css lays them out on a phone. */
@media (max-width: 760px) {
  .nb-papers-groups {
    gap: var(--nb-s8);
  }
  .nb-papers-group-title {
    font-size: var(--nb-text-lg);
  }
  .nb-papers-row-icon {
    width: var(--nb-s8);
    height: var(--nb-s8);
  }
  .nb-papers-row-title {
    font-size: var(--nb-text-md);
  }
}

/* ---------- 7 · The single paper viewer, opening -----------------
   The frame rises into place once, the same one-shot arrival every
   other notebook surface uses for its hero. */
@media (prefers-reduced-motion: no-preference) {
  .nb-pv-frame-wrap {
    animation: nb-pp-pv-in var(--nb-dur-3) var(--nb-ease) both;
  }
}
@keyframes nb-pp-pv-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}