/* ============================================================
   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);
}
html .si-page .pg-board-context {
  color: var(--nb-ink);
}
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);
}
html .pg-board-shell .pg-bcard-chip {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink);
  box-shadow: none;
}
/* A chip whose subject is not written yet. Same box, dimmer ink -- the
   treatment the coming-soon subject card already uses (see the si-card rule
   below): explicit ink and the flat border it already has, never opacity and
   never a faded copy of the live style. Measured on the chip's own sunken
   ground: 4.70:1 light and 5.41:1 dark, against 13.95 / 16.35 for a live chip,
   so the demotion is unmistakable and the label still reads. The chip is a
   label, not a control, so there is no hover or focus pair to keep in step;
   the template carries the state for assistive tech in a .pg-sr-only note. */
html .pg-board-shell .pg-bcard-chip[data-ui-disabled="true"] {
  color: var(--nb-quiet-3);  /* a board not offered keeps the quiet ink (one ink is for live words) */
  border-color: var(--nb-border);
}
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);
}

/* ── Board rows (/alevel/, /igcse/ since 2026-09-30) — the board hue on the
   icon tile, same wash and line as the pg-bcard tiles. Colour on the words
   since 2026-10-02, kept to a little (owner: "the colors are all the same",
   then "they are too colorful" of subject hues on every listed subject):
   the title's last words and the list's label in the notebook blue, the
   way a subject library's header ends in a blue "Library"; every other
   word stays in the ink. ── */
html .pg-board-shell .pg-title-accent,
html .pg-board-shell .pg-bpick-eyebrow {
  color: var(--nb-blue);
}
html .pg-board-shell .pg-brow--edexcel {
  --brow-accent: var(--nb-board-edexcel);
}
html .pg-board-shell .pg-brow--cie {
  --brow-accent: var(--nb-board-cie);
}
/* The programme rows on /subject-index/ (2026-10-01) wear the programme
   hues the old programme cards had. */
html .pg-board-shell .pg-brow--igcse {
  --brow-accent: var(--nb-programme-igcse);
}
html .pg-board-shell .pg-brow--alevel {
  --brow-accent: var(--nb-programme-alevel);
}
html .pg-board-shell .pg-brow--ap {
  --brow-accent: var(--nb-programme-ap);
}
html .pg-board-shell .pg-brow--sat {
  --brow-accent: var(--nb-programme-sat);
}
html .pg-board-shell .pg-brow-tile {
  background: color-mix(in srgb, var(--brow-accent) var(--nb-programme-icon-wash), transparent);
  border-color: color-mix(in srgb, var(--brow-accent) var(--nb-programme-icon-line), var(--nb-border));
  color: var(--brow-accent);
}
/* The board's name in its tile's hue, as a subject's name is on the
   subject rows (owner 2026-10-02 picked this over hued subject lists: "no
   obnoxious colors"). The qualification and the subjects stay in the ink.
   Day hues read 4.9:1 (Edexcel) and 5.9:1 (Cambridge) on the paper. */
/* The programme rows on /subject-index/ follow (owner 2026-10-02, "color
   this too"): IGCSE, A Level, AP and SAT in their tiles' hues. */
html .pg-board-shell :is(.pg-brow--edexcel, .pg-brow--cie, .pg-brow--igcse, .pg-brow--alevel, .pg-brow--ap, .pg-brow--sat) .pg-brow-name {
  color: var(--brow-accent);
}
/* The sitemap's boards (2026-10-05) wear the board rows' hues, on the tile
   and the name only (sitemap.css reads --smap-accent). */
html .smap-board--edexcel {
  --smap-accent: var(--nb-board-edexcel);
}
html .smap-board--cie {
  --smap-accent: var(--nb-board-cie);
}
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);
}
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^="mathematics-"],
html .si-page .si-card[data-subject="further-mathematics"],
html .si-page .si-card[data-subject="pure-mathematics"],
html .si-page .si-card[data-subject="calculus"],
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);
}
html .si-page .si-card:hover .si-card-meta {
  color: var(--nb-ink);
}
html .si-page .si-card-arrow {
  color: var(--nb-ink-3);
}
html .si-page .si-card:hover .si-card-arrow {
  color: var(--nb-blue);
}

/* Coming-soon subjects — the CARD must read as unavailable, not just its label.
   The markup already makes these inert: a <div> (not <a>), no href, tabindex
   -1, and pointer-events:none from styles.css, so nothing here is a lie about
   what the card can do. The chevron is likewise already omitted upstream.
   The card is RECESSED, not dimmed (owner directive 2026-08-16). A fade says
   "this card is turned down"; a sunken fill says "this slot is empty", which is
   what a coming-soon subject is. So the paper drops to --nb-paper-sunken and
   the lift goes — a raised sheet is the strongest cue that says pressable —
   while the border stays exactly the live card's hairline and the identity
   plate goes neutral, so the subject hue stops signalling a live surface.
   NO opacity. The recession now does the work the fade was doing, and stacking
   both cost separation on every axis: measured at 0.85 the light fill fell from
   1.081:1 to 1.071:1 against the ground and the ink from 13.95:1 to 10.17:1.
   --nb-border-strong was measured too and rejected at 3.26:1 against the ground
   in light — a hard outline reads as an error state, not an empty slot.
   Painted-pixel measurement, both themes: name and meta 13.95:1 light /
   17.11:1 dark, glyph-on-plate 5.66 / 6.99. The sunken fill separates from the
   page ground at 1.081:1 light (the faded version managed only 1.037:1, which
   is what made it look washed) and from the live card's paper at 1.141:1.
   Hover is unreachable here, so there is no hover pair to keep in step. */
html .si-page .si-card[data-ui-disabled="true"] {
  background: var(--nb-paper-sunken);
  box-shadow: none;
}
html .si-page .si-card[data-ui-disabled="true"] .si-card-icon-wrap {
  filter: grayscale(1);
  box-shadow: none;
}

/* ── 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);
}
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;
}

/* ── Touch: no sticky hover (audit K-003) ──
   A finger leaves :hover on the card, subject or back link it last tapped,
   so after a tap (and in Chromium even after scrolling on) it stayed blue,
   lifted, its arrow nudged. The hover rules come from three sheets this
   file cannot wrap (styles.css, theme-light.css and the ones above), so on
   screens that cannot hover the resting look is restated over them. The
   html-prefixed selectors outrank every legacy hover rule in both themes.
   :focus-visible keeps its states for a keyboard, and :active is left to
   the shared press state (interaction-feedback.css), so a tap still gives
   feedback while the finger is down; only the stuck state after it goes.
   The two opacities are the legacy resting values (styles.css .si-card
   hairline 0.48; theme-light.css hides it). */
@media (hover: none) {
  html .pg-board-shell .pg-bcard:hover:not(:focus-visible):not(:active) {
    border-color: var(--nb-border);
    box-shadow: var(--nb-shadow-1);
    transform: none;
  }
  html .pg-board-shell .pg-bcard:hover:not(:focus-visible):not(:active) .pg-bcard-tile,
  html .pg-board-shell .pg-bcard:hover:not(:focus-visible):not(:active) .pg-bcard-arrow {
    transform: none;
  }
  html .pg-board-shell .pg-bcard:hover:not(:focus-visible):not(:active) .pg-bcard-go {
    color: var(--nb-ink);
  }

  html .si-page a.si-card:hover:not(:focus-visible):not(:active) {
    border-color: var(--nb-border);
    box-shadow: var(--nb-shadow-1);
    transform: none;
  }
  html .si-page a.si-card:hover:not(:focus-visible):not(:active)::before {
    background: linear-gradient(90deg, transparent 0%, var(--nb-border-strong) 50%, transparent 100%);
    opacity: 0.48;
  }
  html.theme-light .si-page a.si-card:hover:not(:focus-visible):not(:active)::before {
    opacity: 0;
  }
  html .si-page a.si-card:hover:not(:focus-visible):not(:active) .si-card-icon-wrap {
    transform: none;
    filter: none;
  }
  html .si-page a.si-card:hover:not(:focus-visible):not(:active) .si-card-arrow {
    color: var(--nb-ink-3);
    opacity: 1;
    transform: none;
  }

  html .pg-board-shell .pg-back:hover:not(:focus-visible):not(:active),
  html .si-page .pg-back:hover:not(:focus-visible):not(:active) {
    color: var(--nb-blue);
    transform: none;
  }
  html .pg-board-shell .pg-back:hover:not(:focus-visible):not(:active)::after,
  html .si-page .pg-back:hover:not(:focus-visible):not(:active)::after {
    transform: scaleX(0.72);
    opacity: 0.6;
  }
  html .pg-board-shell .pg-back:hover:not(:focus-visible):not(:active) .pg-back-icon,
  html .si-page .pg-back:hover:not(:focus-visible):not(:active) .pg-back-icon {
    transform: none;
    opacity: 0.92;
  }
}