/* ============================================================
   ANNOTATED NOTEBOOK SKIN — the picker family (legacy layouts).
   COLORS ONLY. Covers the programme gateway (/subject-index/), the
   A-Level + IGCSE board pickers, and the six subject grids (AP, SAT,
   A-Level/IGCSE × Edexcel/CIE). The owner locked these layouts (the
   2×2 pg-bcard revert, 2026-06-13) — same treatment as the hub skin:
   structure 1:1, notebook ink over it.

   Loaded ONLY when nb_active (pages/includes/nb_picker_skin.html),
   after styles.css + the theme-light.css link: rules mirror legacy
   selectors under an `html .<page-root>` prefix that TIES
   theme-light.css's `html.theme-light` prefix, so later-in-cascade
   wins in both themes; tokens flip the values.

   Card bodies and every interaction remain student-blue. Identity colour is
   permitted only on actual picker icon plates: subject hues on the si-card
   plates, programme/board hues on the pg-bcard icon tiles. Discovery chips
   stay neutral, and no identity hue carries into resource hubs, lesson
   objectives, or study surfaces.
   ============================================================ */

/* ── Page is the notebook paper; the light-show layers go dark ── */
html.theme-light body,
html:not(.theme-light) body {
  background-color: var(--nb-paper);
  background-image: radial-gradient(var(--nb-grid-dot) 1px, transparent 1px);
  background-size: var(--nb-grid-size) var(--nb-grid-size);
}
html.theme-light .pg-page-glow,
html:not(.theme-light) .pg-page-glow,
html.theme-light .lp-atmosphere,
html:not(.theme-light) .lp-atmosphere {
  display: none;
}
/* ── Shared text voices: heads, ledes, context, back link ── */
html .pg-board-shell .pg-board-title,
html .si-page .pg-hero-title {
  color: var(--nb-ink);
}
html .pg-board-shell .pg-board-lede,
html .si-page .pg-hero-body {
  color: var(--nb-ink-2);
}
html .si-page .pg-board-context {
  color: var(--nb-ink-2);
}
html .pg-board-shell .pg-back,
html .si-page .pg-back {
  color: var(--nb-blue);
}
html .pg-board-shell .pg-back:hover,
html .si-page .pg-back:hover {
  color: var(--nb-blue-strong);
}
html .pg-board-shell .pg-back::after,
html .si-page .pg-back::after {
  background: linear-gradient(90deg, var(--nb-blue), transparent);
}
html .pg-board-shell .pg-back:focus-visible,
html .si-page .pg-back:focus-visible {
  outline-color: var(--nb-blue);
}

/* ── Board/programme cards (pg-bcard) — raised paper, one ink ── */
html .pg-board-shell .pg-board-cards::before {
  content: none; /* the per-programme atmospheric tint is retired candy */
}
html .pg-board-shell .pg-bcard {
  --bcard-accent: var(--nb-blue);
  --bcard-glow: transparent;
  --nb-programme-accent: var(--nb-blue);
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
}
/* Programme/board identity is decorative and confined to each icon tile. */
html .pg-board-shell .pg-bcard--igcse {
  --nb-programme-accent: var(--nb-programme-igcse);
}
html .pg-board-shell .pg-bcard--alevel {
  --nb-programme-accent: var(--nb-programme-alevel);
}
html .pg-board-shell .pg-bcard--ap {
  --nb-programme-accent: var(--nb-programme-ap);
}
html .pg-board-shell .pg-bcard--sat {
  --nb-programme-accent: var(--nb-programme-sat);
}
html .pg-board-shell .pg-bcard--edexcel {
  --nb-programme-accent: var(--nb-board-edexcel);
}
html .pg-board-shell .pg-bcard--cie {
  --nb-programme-accent: var(--nb-board-cie);
}
html .pg-board-shell .pg-bcard:hover {
  background: var(--nb-paper-raised);
  border-color: var(--nb-blue);
  box-shadow: var(--nb-shadow-2);
}
html .pg-board-shell .pg-bcard:focus-visible {
  outline-color: var(--nb-blue);
}
html .pg-board-shell .pg-bcard-tile {
  background: color-mix(in srgb, var(--nb-programme-accent) var(--nb-programme-icon-wash), transparent);
  border-color: color-mix(in srgb, var(--nb-programme-accent) var(--nb-programme-icon-line), var(--nb-border));
  color: var(--nb-programme-accent);
  box-shadow: none;
}
html .pg-board-shell .pg-bcard:hover .pg-bcard-tile {
  background: color-mix(in srgb, var(--nb-programme-accent) var(--nb-programme-icon-wash), transparent);
  border-color: color-mix(in srgb, var(--nb-programme-accent) var(--nb-programme-icon-line), var(--nb-border));
  box-shadow: none;
}
html .pg-board-shell .pg-bcard-name {
  color: var(--nb-ink);
}
html .pg-board-shell .pg-bcard-qual {
  color: var(--nb-ink-2);
}
html .pg-board-shell .pg-bcard-chip {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
  box-shadow: none;
}
html .pg-board-shell .pg-bcard-rule {
  background: linear-gradient(90deg, transparent 0%, var(--nb-border) 20%, var(--nb-border) 80%, transparent 100%);
}
html .pg-board-shell .pg-bcard-count {
  color: var(--nb-blue);
}
html .pg-board-shell .pg-bcard-go {
  color: var(--nb-ink-2);
}
html .pg-board-shell .pg-bcard:hover .pg-bcard-go {
  color: var(--nb-blue);
}

/* ── The board-uncertainty aside — a quiet paper note ── */
html .pg-board-shell .pg-board-help {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
}
html .pg-board-shell .pg-board-help-icon {
  color: var(--nb-blue);
}

/* ── Subject cards (si-card) — identity stays on the icon plate ── */
html .si-page .si-card {
  --subject-accent: var(--nb-subject-accent);
  --subject-soft: var(--nb-blue-wash);
  --subject-border: var(--nb-border);
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  color: var(--nb-ink);
  box-shadow: var(--nb-shadow-1);
}
html .si-page .si-card {
  --nb-subject-accent: var(--nb-blue);
}
html .si-page .si-card[data-subject="biology"] {
  --nb-subject-accent: var(--nb-subject-biology);
}
html .si-page .si-card[data-subject="chemistry"],
html .si-page .si-card[data-subject="computer-science"],
html .si-page .si-card[data-subject="computer_science"],
html .si-page .si-card[data-subject="computerscience"] {
  --nb-subject-accent: var(--nb-subject-chemistry);
}
html .si-page .si-card[data-subject^="physics"] {
  --nb-subject-accent: var(--nb-subject-physics);
}
html .si-page .si-card[data-subject="math"],
html .si-page .si-card[data-subject="maths"],
html .si-page .si-card[data-subject="mathematics"],
html .si-page .si-card[data-subject="calculus"] {
  --nb-subject-accent: var(--nb-subject-mathematics);
}
html .si-page .si-card[data-subject="english"],
html .si-page .si-card[data-subject="reading"],
html .si-page .si-card[data-subject="writing"],
html .si-page .si-card[data-subject="psychology"] {
  --nb-subject-accent: var(--nb-subject-english);
}
html .si-page .si-card[data-subject="economics"],
html .si-page .si-card[data-subject="business"] {
  --nb-subject-accent: var(--nb-subject-economics);
}
html .si-page .si-card[data-subject] {
  --subject-soft: color-mix(in srgb, var(--subject-accent) var(--nb-subject-icon-wash), transparent);
  --subject-border: color-mix(in srgb, var(--subject-accent) var(--nb-subject-icon-line), var(--nb-border));
}
html .si-page .si-card::before {
  background: linear-gradient(90deg, transparent 0%, var(--nb-border-strong) 50%, transparent 100%);
}
html .si-page .si-card:hover {
  background: var(--nb-paper-raised);
  border-color: var(--nb-blue);
  box-shadow: var(--nb-shadow-2);
}
html .si-page .si-card:hover::before {
  background: linear-gradient(90deg, transparent 0%, var(--nb-blue) 50%, transparent 100%);
}
html .si-page .si-card:focus-visible {
  outline-color: var(--nb-blue);
}
html .si-page .si-card-icon-wrap {
  background: var(--subject-soft);
  border-color: var(--subject-border);
  box-shadow: none;
}
html .si-page .si-card:hover .si-card-icon-wrap {
  background: var(--subject-soft);
  border-color: var(--subject-border);
}
html .si-page .si-card-icon {
  color: var(--subject-accent);
}
html .si-page .si-card:hover .si-card-icon {
  filter: none; /* ink does not glow brighter under a lamp */
}
html .si-page .si-card-name,
html .si-page .si-card:hover .si-card-name {
  color: var(--nb-ink);
}
html .si-page .si-card-meta {
  color: var(--nb-ink-2);
}
html .si-page .si-card:hover .si-card-meta {
  color: var(--nb-ink-2);
}
html .si-page .si-card-arrow {
  color: var(--nb-ink-3);
}
html .si-page .si-card:hover .si-card-arrow {
  color: var(--nb-blue);
}

/* ── Gateway bottom CTA — plain paper section, one primary pen ── */
html .pg-cta-section {
  border-top-color: var(--nb-border);
}
html .pg-cta-section::before {
  background: linear-gradient(90deg, transparent 0%, var(--nb-border-strong) 50%, transparent 100%);
}
html .pg-cta-section .pg-cta-title {
  color: var(--nb-ink);
}
html .pg-cta-section .pg-cta-body {
  color: var(--nb-ink-2);
}
html .pg-cta-section .lp-cta-primary {
  background: var(--nb-blue);
  border: 1px solid var(--nb-blue);
  border-radius: var(--nb-r-sm);
  color: var(--nb-on-blue);
  box-shadow: none;
  text-shadow: none;
}
html .pg-cta-section .lp-cta-primary:hover {
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
  color: var(--nb-on-blue);
  box-shadow: var(--nb-shadow-1);
}
html .pg-cta-section .lp-cta-primary:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}