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

/* ── 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);
}
html .sr-page .sr-subtitle {
  color: var(--nb-ink-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 is decorative and confined to each icon plate. */
html .sr-page .sr-card--featured {
  --nb-resource-icon-accent: var(--nb-resource-notes);
  --nb-resource-card-surface: color-mix(in srgb, var(--nb-resource-notes) var(--nb-resource-featured-wash), var(--nb-paper-raised));
  background: var(--nb-resource-card-surface);
}
html .sr-page .sr-card--flashcards {
  --nb-resource-icon-accent: var(--nb-resource-flashcards);
}
html .sr-page .sr-card--questions {
  --nb-resource-icon-accent: var(--nb-resource-questions);
}
html .sr-page .sr-card--summaries {
  --nb-resource-icon-accent: var(--nb-resource-summaries);
}
html .sr-page .sr-card--videos {
  --nb-resource-icon-accent: var(--nb-resource-videos);
}
html .sr-page .sr-card--pastpapers {
  --nb-resource-icon-accent: var(--nb-resource-pastpapers);
}
html .sr-page .sr-card--mocks {
  --nb-resource-icon-accent: var(--nb-resource-mocks);
}

/* 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 stay inert: keep the quiet border on hover (declared
   after the generic hover rule so the tie resolves to this) */
html .sr-page .sr-card--soon:hover {
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
}
html .sr-page .sr-card--soon:hover::before {
  opacity: 0.42;
}
html .sr-page .sr-soon-tag {
  border-color: var(--nb-border-strong);
  color: var(--nb-ink-2);
}

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

/* ── Card text ── */
html .sr-page .sr-card-label {
  color: var(--nb-blue);
}
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-2);
}

/* ── 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-ink-3); /* 1rem UI glyph — 3:1 tier, same intent as legacy */
}
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-2);
}