/* ExamStudyAid — the homepage's shelf pass (owner, 2026-10-08: "can you do anything about the home page?"), redrawn
   2026-10-21 after the AI-look audit.

   A layer over home-landing.css, loaded after it: buttons as rounded rectangles (owner: "i hate pill"), no shadow
   under a button, each programme's subjects as a shelf of books in their own colours, and the price card's dress.
   The books are flat, drawn like an illustration and not a render (owner, 2026-10-21: "make them more detailed and
   intricate", then, of the shaded spines with labels, gilt, a leaning book and a bookend: "the realism on the books
   look ugly"): a spine in its subject's colour, two thin bands at the head and one at the tail, every third book a
   paler tone of its colour, widths and heights that never repeat in step, the plank one flat line. Pointed at, the
   row's books lift one after another. Every rule hangs off html .hp so it outranks the page's sheet. Tokens only,
   both themes; reduced motion keeps every picture still. */

/* ── No capsules, no shadow under a button ────────────────────────────── */
html .hp .hp-btn { border-radius: var(--nb-r-md); box-shadow: none; }
html .hp .hp-btn:hover { box-shadow: none; }

/* ── A book, the same on both shelves ─────────────────────────────────── */
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i {
  --hp-hue: var(--subject-hue, var(--nb-blue));
  --hp-spine: color-mix(in srgb, var(--hp-hue) 90%, var(--nb-paper));
  --hp-band: color-mix(in srgb, var(--hp-hue) 52%, var(--nb-paper));
  display: block;
  flex: none;
  width: 13px;
  height: 80%;
  border-radius: 2px 2px 1px 1px;
  background:
    linear-gradient(to bottom,
      transparent 0 11%,
      var(--hp-band) 11% calc(11% + 2px), transparent calc(11% + 2px) calc(11% + 4px),
      var(--hp-band) calc(11% + 4px) calc(11% + 6px), transparent calc(11% + 6px) calc(88% - 2px),
      var(--hp-band) calc(88% - 2px) 88%, transparent 88%),
    var(--hp-spine);
  transition: translate 280ms var(--hp-ease, ease);
  transition-delay: calc(var(--hp-b, 0) * 35ms);
}
/* every third book a paler tone of its colour, so a row of one subject still reads as several books */
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(3n + 2) {
  --hp-spine: color-mix(in srgb, var(--hp-hue) 68%, var(--nb-paper));
  --hp-band: color-mix(in srgb, var(--hp-hue) 92%, var(--nb-paper));
}
/* no two books quite alike */
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(2n) { width: 11px; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(3n) { width: 15px; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(5n + 1) { width: 16px; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(7n + 1) { height: 82%; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(7n + 2) { height: 96%; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(7n + 3) { height: 72%; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(7n + 4) { height: 90%; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(7n + 5) { height: 77%; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(7n + 6) { height: 100%; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(7n) { height: 86%; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(2) { --hp-b: 1; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(3) { --hp-b: 2; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(4) { --hp-b: 3; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(5) { --hp-b: 4; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(6) { --hp-b: 5; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(7) { --hp-b: 6; }
html .hp :is(.hp-course-shelf, .hp-pshelf-books) i:nth-child(n + 8) { --hp-b: 7; }

/* the plank: one flat line under the books */
html .hp :is(.hp-course-shelf, .hp-pshelf-books)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--nb-ink) 24%, transparent);
}

/* ── Courses by exam board: each programme's subjects as a shelf ──────── */
/* the shelf and the link have columns of their own width, so every row's subjects start and end on the same lines */
html .hp .hp-course { grid-template-columns: minmax(180px, 0.8fr) 172px minmax(0, 1.8fr) 8.5em; }
html .hp .hp-course-go { justify-self: end; }
html .hp .hp-course-shelf {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 58px;
  padding: 0 6px 2px;
  justify-self: start;
}
@media (hover: hover) {
  html .hp .hp-course:hover .hp-course-shelf i { translate: 0 -4px; }
}
@media (max-width: 960px) {
  html .hp .hp-course { grid-template-columns: minmax(0, 1fr) auto auto; }
  html .hp .hp-course-shelf { grid-row: 1; grid-column: 2; }
}
@media (max-width: 560px) {
  html .hp .hp-course-shelf { display: none; }
}

/* ── Reduced motion: every picture still ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html .hp .hp-course-shelf i { transition: none; }
  html .hp .hp-course:hover .hp-course-shelf i { translate: none; }
}