/* ============================================================
   ANNOTATED NOTEBOOK SKIN — Subject Resources hub (legacy layout).
   COLORS ONLY. The legacy hub's layout/structure/buttons are locked 1:1
   (owner decision, 2026-07-03): this file recolors the existing sr-*
   markup with the nb ink palette and does not move a single box.

   Loaded ONLY when nb_active, from subject_resources.html's head block —
   i.e. AFTER noteviewer.css and the theme-light.css link. Every selector
   here mirrors its legacy counterpart at equal-or-higher specificity, so
   later-in-cascade wins in BOTH themes. The `html .sr-page` prefix ties
   theme-light.css's `html.theme-light` prefix (0,1,1) exactly; card
   children ride through `.sr-card` to tie the per-resource variants.
   Light/dark values flip inside the tokens (notebook-tokens.css). Resource
   identity uses the narrow icon-plate palette documented in DESIGN.md;
   every interaction and non-icon card accent remains student blue.
   ============================================================ */

/* ── The page is the notebook paper (texture lives on --nb-paper only) ── */
html.theme-light .sr-page,
html:not(.theme-light) .sr-page {
  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);
  color: var(--nb-ink);
}

/* ── Breadcrumbs — quiet ink, blue links ── */
html .sr-page .sr-breadcrumbs,
html .sr-page .sr-breadcrumbs span:not(.breadcrumb-sep) {
  color: var(--nb-ink);
}
html .sr-page .sr-breadcrumbs .breadcrumb-sep {
  color: var(--nb-ink-3); /* decorative glyph, not text */
}
html .sr-page .sr-breadcrumbs a {
  color: var(--nb-blue);
}
html .sr-page .sr-breadcrumbs a:hover {
  color: var(--nb-blue-strong);
}
/* The separator is now drawn after the crumb it follows (noteviewer.css,
   audit K-011); it keeps the separator's ink, not the link's. */
html .sr-page .sr-breadcrumbs > :not(.breadcrumb-sep):not(:last-child)::after {
  color: var(--nb-ink-3);
}

/* ── Header — ink title, the "Resources" word in the student's pen.
   Legacy paints it as gradient text (banned ink); flatten to solid blue. ── */
html .sr-page .sr-title {
  color: var(--nb-ink);
}
html .sr-page .sr-title-accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--nb-blue);
}
/* ⚑ .sr-header IN THE SELECTOR IS LOAD-BEARING: theme-light.css greys this
   line with html.theme-light .sr-header p at (0,2,2), which beat the old
   (0,2,1) here, so the lead line stayed --muted grey in light mode. No grey
   text on the hub (owner, 2026-09-23): the desk's blue-slate, both themes. */
html .sr-page .sr-header .sr-subtitle {
  color: var(--nb-desk-text-2);
}

/* ── Cards — raised paper sheets. Legacy accent consumers stay blue;
   a separate custom property limits resource colour to icon plates. ── */
html .sr-page .sr-card {
  --sr-card-accent: var(--nb-blue);
  --sr-card-soft: var(--nb-blue-wash);
  --sr-card-border: var(--nb-border);
  --sr-card-border-hover: var(--nb-blue);
  --nb-resource-icon-accent: var(--nb-blue);
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  color: var(--nb-ink);
  box-shadow: var(--nb-shadow-1);
}
html .sr-page .sr-card:hover,
html .sr-page .sr-card:focus-visible {
  background: var(--nb-paper-raised);
  border-color: var(--nb-blue);
  box-shadow: var(--nb-shadow-2);
}
html .sr-page a.sr-card:focus-visible {
  outline-color: var(--nb-blue);
}

/* Resource identity was decorative, and it is now gone. Every plate inherits
   --nb-resource-icon-accent: var(--nb-blue) from the base .sr-card rule above.
   The seven per-modifier overrides were removed 2026-08-16: the hue mapping
   encoded nothing (MCQ carried Questions' hue by class-reuse accident, and the
   same --nb-resource-* tokens double as the programme/board palette, where
   --nb-resource-mocks means "IGCSE" — a token with two meanings is a swatch,
   not a signal). Notes is unaffected: --nb-resource-notes already resolved to
   var(--nb-blue) in both themes, so its plate and wash are byte-identical.
   The tokens themselves are NOT deleted — they remain the source of the
   programme, board and homepage palettes in notebook-tokens.css. */
html .sr-page .sr-card--featured {
  --nb-resource-card-surface: color-mix(in srgb, var(--nb-blue) var(--nb-resource-featured-wash), var(--nb-paper-raised));
  background: var(--nb-resource-card-surface);
}

/* Notes alone keeps a very soft full-card wash at every interactive state. */
html .sr-page .sr-card--featured:hover,
html .sr-page .sr-card--featured:focus-visible {
  background: var(--nb-resource-card-surface);
}

/* Coming-soon cards carry the SAME treatment as the subject pickers
   (2026-08-16): recessed paper, no lift, neutral plate, ink untouched. The
   card is sunk into the page rather than dimmed on top of it — a fade says
   "turned down", a sunken fill says "this slot is empty".

   opacity is reset to 1 here, clearing the 0.55 that noteviewer.css:6492
   declares. That fade was not merely cosmetic: it pushed the Videos plate
   glyph to 2.81:1 in light, under the 3:1 non-text floor (2.96:1 before the
   plates were neutralised — it never passed). Shipped, that glyph measures
   5.33:1 light / 6.42:1 dark. Ink is untouched, so title and description keep
   the same contrast a live card has.

   ORDER IS LOAD-BEARING — DO NOT MOVE THIS BLOCK EARLIER. Two ties resolve
   here purely by declaration order, because both sides are (0,3,1):
     · vs `html .sr-page .sr-card--featured` (background: the blue Notes wash)
       — on the two hubs where Notes itself is unavailable (alevel/edexcel
       business and maths), the sunken fill must win, or an entry point that
       does not exist would render as the page's most inviting card.
     · vs the generic `html .sr-page .sr-card--soon:hover` escalation above.
   Moving this block above either one silently reverts the treatment with no
   test failure at the CSS level. */
html .sr-page .sr-card--soon {
  background: var(--nb-paper-sunken);
  box-shadow: none;
  opacity: 1;
  /* Unavailable cards sort after every available one. This is CSS `order` and
     the LIVE card order is not — the two mechanisms differ on purpose:
       · live cards are <a>, focusable, and in the tab sequence, so their order
         is fixed in the TEMPLATE. CSS order would leave a keyboard user
         tabbing in one sequence while reading another.
       · coming-soon cards are <div data-ui-disabled="true"> with no href and no
         tabindex — they are not in the tab sequence at all, so moving them
         visually desynchronises nothing.
     Do not "tidy" these into one mechanism in either direction. */
  order: 1;
}
html .sr-page .sr-card--soon:hover {
  border-color: var(--nb-border);
  box-shadow: none;
}
/* The top accent rail (noteviewer.css:6518, painted from --sr-card-accent =
   --nb-blue) is removed on a coming-soon card at rest AND on hover. It was the
   last blue thing left on an inert sheet — the same defect as the blue kicker:
   action ink on something with no action. Zeroed rather than recoloured, since
   a sunken slot has nothing to accent. */
html .sr-page .sr-card--soon::before,
html .sr-page .sr-card--soon:hover::before {
  opacity: 0;
}

/* ── Icon plates — the sole per-resource colour surface ── */
html .sr-page .sr-card .sr-card-icon {
  background: color-mix(in srgb, var(--nb-resource-icon-accent) var(--nb-resource-icon-wash), transparent);
  border-color: color-mix(in srgb, var(--nb-resource-icon-accent) var(--nb-resource-icon-line), var(--nb-border));
  color: var(--nb-resource-icon-accent);
  box-shadow: none;
}
/* color is restated too: theme-light.css re-inks each plate's glyph on
   hover (Questions amber, Summaries teal, Videos rose) at the same weight
   as this rule, so in light mode the retired resource hues came back under
   the pointer. The glyph stays the plate's one ink in both themes. */
html .sr-page .sr-card:hover .sr-card-icon,
html .sr-page .sr-card:focus-visible .sr-card-icon {
  background: color-mix(in srgb, var(--nb-resource-icon-accent) var(--nb-resource-icon-wash), transparent);
  border-color: color-mix(in srgb, var(--nb-resource-icon-accent) var(--nb-resource-icon-line), var(--nb-border));
  color: var(--nb-resource-icon-accent);
}
html .sr-page .sr-card--soon:hover .sr-card-icon {
  background: color-mix(in srgb, var(--nb-resource-icon-accent) var(--nb-resource-icon-wash), transparent);
  border-color: color-mix(in srgb, var(--nb-resource-icon-accent) var(--nb-resource-icon-line), var(--nb-border));
}
/* The plate on an unavailable card goes neutral. grayscale() preserves
   luminance, so this costs nothing in contrast — it only removes the hue that
   would otherwise signal a live surface. Rest and hover in step, because a
   coming-soon card must not change under the cursor at all. */
html .sr-page .sr-card--soon .sr-card-icon,
html .sr-page .sr-card--soon:hover .sr-card-icon {
  filter: grayscale(1);
  box-shadow: none;
}

/* ── Card text ── */
html .sr-page .sr-card-label {
  color: var(--nb-blue);
}
/* The featured "Start here" kicker sits on the Notes wash, where plain
   --nb-blue measured 4.48:1 — under the 4.5 floor for 13px text. The strong
   blue takes it to 6.64:1 light / 8.33:1 dark. Paired with the wash dropping
   to 8% in notebook-tokens.css, which is what rescues the "Open notes" CTA
   (4.48 -> 4.74); the CTA keeps plain --nb-blue because it is a link, and
   darkening it too would put two different blues on one card. */
html .sr-page .sr-card--featured .sr-card-label {
  color: var(--nb-blue-strong);
}
/* By night the strong blue is a pale periwinkle (#A9C1EE), the bluish grey
   the owner ruled out (one ink, 2026-09-26), so the kicker takes the link
   blue there (5.05:1 on the night wash, measured). :not(.sr-card--soon) keeps it clear
   of the coming-soon kicker below, which must never be blue; (0,5,1) wins
   outright, never on source order. */
html:not(.theme-light) .sr-page .sr-card--featured:not(.sr-card--soon) .sr-card-label {
  color: var(--nb-blue);
}
/* The coming-soon kicker reuses the "Start here" slot but must NOT reuse its
   ink: blue is reserved for actions, and this card has none.

   The doubled class is deliberate and gives (0,4,1), which beats BOTH the
   generic kicker (0,2,1) and the featured kicker (0,3,1) OUTRIGHT rather than
   on a source-order tie. It has to: on the two all-soon hubs the Notes card is
   `.sr-card--featured.sr-card--soon`, so the featured rule above would
   otherwise paint its COMING SOON kicker in action blue.

   PREFER THIS SHAPE OVER DECLARATION ORDER ANYWHERE IN THIS FILE. Order-based
   ties here have failed three times in one pass (2026-08-16): the coming-soon
   kicker rendering blue, the featured wash beating the sunken fill, and the
   featured kicker beating the coming-soon kicker. Every one was two rules at
   close specificity resolved by source order, and every one was caught by
   measuring the rendered page — never by reading the stylesheet. */
html .sr-page .sr-card--soon .sr-card-label.sr-card-label--soon {
  color: var(--nb-ink-2);
}
html .sr-page .sr-card-title,
html .sr-page .sr-card--featured .sr-card-title {
  color: var(--nb-ink);
}
html .sr-page .sr-card-desc,
html .sr-page .sr-card--featured .sr-card-desc {
  color: var(--nb-ink);
}

/* ── CTA + arrows — interaction is blue, rest state is quiet ink ── */
html .sr-page .sr-card-cta {
  color: var(--nb-blue);
}
html .sr-page .sr-card--featured:hover .sr-card-cta,
html .sr-page .sr-card--featured:focus-visible .sr-card-cta {
  color: var(--nb-blue-strong);
}
html .sr-page .sr-card .sr-card-arrow {
  color: var(--nb-desk-text-3); /* 1rem UI glyph; blue-slate, never grey (2026-09-23) */
}
html .sr-page .sr-card:hover .sr-card-arrow,
html .sr-page .sr-card:focus-visible .sr-card-arrow {
  color: var(--nb-blue);
}

/* ── Tip strip — a raised sheet with a neutral hairline, not a blue glow
   (the strip is not interactive, so it doesn't get the student's pen) ── */
html .sr-page .sr-tips {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
}
html .sr-page .sr-tips::before {
  background: linear-gradient(90deg, transparent 0%, var(--nb-border-strong) 50%, transparent 100%);
}
html .sr-page .sr-tips-label {
  color: var(--nb-blue);
}
html .sr-page .sr-tips p {
  color: var(--nb-ink);
}

/* ── Tutor row — no grey anywhere (owner, 2026-09-23). Studying is the
   desk's teal, the done colour; the tutor is the student's pen, blue. The
   geometry lives in noteviewer.css beside .sr-tips; this file stays colour
   only. ── */
html .sr-page .sr-tutor-text {
  background: var(--nb-desk-teal-wash);
  color: var(--nb-desk-teal);
}
html .sr-page .sr-tutor-nib {
  background: var(--nb-desk-teal);
  color: var(--nb-paper-raised);
}
html .sr-page .sr-tutor-link {
  background: var(--nb-paper-raised);
  border-color: color-mix(in srgb, var(--nb-blue) 38%, var(--nb-border));
  color: var(--nb-blue);
  box-shadow: var(--nb-shadow-1);
}
html .sr-page .sr-tutor-link:hover {
  background: var(--nb-blue-wash);
  border-color: var(--nb-blue);
  color: var(--nb-blue-strong);
  box-shadow: var(--nb-shadow-2);
}
html .sr-page .sr-tutor-ic {
  background: var(--nb-blue);
  color: var(--nb-paper-raised);
}
html .sr-page .sr-tutor-link:focus-visible {
  outline-color: var(--nb-blue);
}
@keyframes sr-tutor-hello-nb {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nb-blue) 45%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--nb-blue) 0%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  html .sr-page .sr-tutor-ic { animation-name: sr-tutor-hello-nb; }
}

/* ── Touch: no sticky hover (audit K-003) ──
   A finger leaves :hover on the card it last tapped, so it stayed blue with
   a raised shadow and its arrow nudged. The hover rules come from
   noteviewer.css, theme-light.css and this file, so on screens that cannot
   hover the resting look is restated over all three (the html .sr-page
   prefix plus the pseudo-classes outrank each of them in both themes).
   :focus-visible keeps its states for a keyboard, and :active is left to
   the shared press state (interaction-feedback.css), so only the stuck
   state after the tap goes. The accent rail opacities are the legacy
   resting values (noteviewer.css 0.42 and 0.65 for Notes; theme-light.css
   0.55). Coming-soon cards are <div>s, so a.sr-card leaves them alone. */
@media (hover: none) {
  html .sr-page a.sr-card:hover:not(:focus-visible):not(:active) {
    border-color: var(--nb-border);
    box-shadow: var(--nb-shadow-1);
    transform: none;
  }
  html .sr-page a.sr-card:hover:not(:focus-visible):not(:active)::before {
    opacity: 0.42;
  }
  html .sr-page a.sr-card--featured:hover:not(:focus-visible):not(:active)::before {
    background: linear-gradient(90deg, transparent 0%, var(--sr-card-accent) 20%, var(--sr-card-accent) 80%, transparent 100%);
    opacity: 0.65;
  }
  html.theme-light .sr-page a.sr-card:hover:not(:focus-visible):not(:active)::before {
    opacity: 0.55;
  }
  html .sr-page a.sr-card:hover:not(:focus-visible):not(:active) .sr-card-arrow {
    color: var(--nb-desk-text-3);
    transform: none;
  }
  html .sr-page a.sr-card--featured:hover:not(:focus-visible):not(:active) .sr-card-cta {
    color: var(--nb-blue);
  }
  html .sr-page a.sr-card--featured:hover:not(:focus-visible):not(:active) .sr-card-cta-arrow {
    transform: none;
  }
  html .sr-page .sr-tutor-link:hover:not(:focus-visible):not(:active) {
    background: var(--nb-paper-raised);
    border-color: color-mix(in srgb, var(--nb-blue) 38%, var(--nb-border));
    color: var(--nb-blue);
    box-shadow: var(--nb-shadow-1);
    transform: none;
  }
  html .sr-page .sr-tutor-link:hover:not(:focus-visible):not(:active) .sr-tutor-arrow {
    transform: none;
  }
}