/* ============================================================
   THE ANNOTATED NOTEBOOK — subject resource hub (Phase 3 Wave 1).
   Page-scoped layout for nb_subject_resources.html. Builds ONLY on
   the shared nb-card / nb-chip / nb-breadcrumb / nb-callout
   components + the --nb-* tokens; adds the hub's own header rhythm
   and the resource-card internals (icon plate, body, quiet CTA).

   Discipline (test-enforced by pages/tests_notebook.py):
   · zero raw colors — every color enters as var(--nb-*)
   Craft:
   · ONE muted card treatment for every resource type — the audit's
     #1 complaint was four-colour candy coding. The only per-type
     variance is the icon glyph and the copy. No accent borders, no
     per-type tints, no gradients.
   · spacing rides the 4px grid (--nb-s*); type is --nb-text-*.
   · rest = shadow-1; link cards answer hover with shadow-2 + a 1px
     lift (the shared a.nb-card rule); a soon card never lifts.
   ============================================================ */

/* ---------- 1 · Hub shell + header ------------------------------ */
.nb-hub {
  width: 100%;
}

.nb-hub-header {
  margin-bottom: var(--nb-s8);
}
.nb-hub-header .nb-breadcrumb {
  margin-bottom: var(--nb-s5);
}
.nb-hub-eyebrow {
  margin-bottom: var(--nb-s2);
  font-family: var(--nb-sans);
  font-size: var(--nb-text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-blue);
}
.nb-hub-title {
  font-family: var(--nb-sans);
  font-size: var(--nb-text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--nb-ink);
}
.nb-hub-lede {
  max-width: 54ch;
  margin-top: var(--nb-s3);
  font-family: var(--nb-sans);
  font-size: var(--nb-text-md);
  line-height: 1.55;
  color: var(--nb-ink-2);
}

/* ---------- 2 · Card grid --------------------------------------- */
.nb-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--nb-s5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nb-hub-grid > li {
  display: flex; /* the card fills the row so every card in a row matches height */
}

/* ---------- 3 · Resource card ----------------------------------
   The shared .nb-card sheet, laid out as a horizontal row:
   icon plate · body (grows) · quiet CTA. One treatment for all
   types — muted, consistent, premium. Padding is trimmed one step
   off the component default so the denser hub grid breathes right. */
.nb-hub-card {
  display: flex;
  align-items: flex-start;
  gap: var(--nb-s4);
  width: 100%;
  padding: var(--nb-s5); /* tighter than the component --s5/--s6 for the grid */
}

/* Icon plate — a sunken paper tile carrying a currentColor stroke
   glyph inked in the student's blue. The plate is the ONLY colour
   on the card; it is identical for every resource type (only the
   glyph inside changes), so no type reads louder than another. */
.nb-hub-card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nb-s9);
  height: var(--nb-s9);
  border-radius: var(--nb-r-md);
  background: var(--nb-paper-sunken);
  border: 1px solid var(--nb-border);
  color: var(--nb-blue);
}
.nb-hub-card-icon svg {
  width: var(--nb-s6);
  height: var(--nb-s6);
}

/* Body — eyebrow (Notes only), title, one-line description. */
.nb-hub-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--nb-s1);
  min-width: 0;
  flex: 1 1 auto;
}
.nb-hub-card-eyebrow {
  font-family: var(--nb-sans);
  font-size: var(--nb-text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nb-blue);
}
.nb-hub-card-title {
  font-family: var(--nb-sans);
  font-size: var(--nb-text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--nb-ink);
}
/* Baseline-align titles across a row: only the Notes card carries a "Start
   here" eyebrow, which would push its title down out of line with Flashcards.
   Cards WITHOUT an eyebrow reserve the same eyebrow-row height above the title
   so every card title starts at the same offset. Height = --nb-text-xs *
   line-height (1.4) + the body's --nb-s1 gap. */
.nb-hub-card-title:first-child {
  margin-top: calc(var(--nb-text-xs) * 1.4 + var(--nb-s1));
}
.nb-hub-card-desc {
  margin-top: var(--nb-s1);
  font-family: var(--nb-sans);
  font-size: var(--nb-text-sm);
  line-height: 1.5;
  color: var(--nb-ink-2); /* small text: the 4.5:1 tier, never ink-3 */
}

/* Quiet CTA — the pen's flick to the right. Text stays muted at
   rest and inks blue with the arrow sliding out when the card is
   hovered/focused. Sits on the first baseline of the title row. */
.nb-hub-card-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--nb-s1);
  margin-top: var(--nb-s1);
  font-family: var(--nb-sans);
  font-size: var(--nb-text-sm);
  font-weight: 600;
  color: var(--nb-ink-3); /* decorative affordance; the whole card is the link */
  transition: color var(--nb-dur-1) var(--nb-ease);
}
.nb-hub-card-arrow {
  display: inline-block;
  transition: transform var(--nb-dur-1) var(--nb-ease);
}
.nb-hub-card:hover .nb-hub-card-cta,
.nb-hub-card:focus-visible .nb-hub-card-cta {
  color: var(--nb-blue);
}
.nb-hub-card:hover .nb-hub-card-arrow,
.nb-hub-card:focus-visible .nb-hub-card-arrow {
  transform: translateX(2px);
}

/* ---------- 4 · Coming-soon state ------------------------------
   A muted, non-link sheet: the icon plate loses its blue ink and
   the whole card sits back a shade. The nb-chip carries the label.
   It never lifts (it is a <div>, not a.nb-card) — a static sheet
   never pretends to be pressable. */
.nb-hub-card--soon {
  background: var(--nb-paper-sunken);
}
.nb-hub-card--soon .nb-hub-card-icon {
  color: var(--nb-ink-3);
  background: var(--nb-paper);
}
.nb-hub-card--soon .nb-hub-card-title {
  color: var(--nb-ink-2);
}
.nb-hub-card--soon .nb-hub-card-desc {
  color: var(--nb-ink-3); /* larger, secondary muted copy on a soon card */
}
.nb-hub-card-soon {
  flex: none;
  align-self: flex-start;
  margin-top: var(--nb-s1);
}

/* ---------- 5 · Footer tip -------------------------------------
   The one closing margin note, reusing the shared --note callout.
   The label is a small caps kicker; the copy sits beside it. */
.nb-hub-tip {
  margin-top: var(--nb-s8);
  align-items: baseline;
}
.nb-hub-tip-label {
  flex: none;
  font-family: var(--nb-sans);
  font-size: var(--nb-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nb-blue);
}
.nb-hub-tip p {
  margin: 0;
  font-family: var(--nb-sans);
  font-size: var(--nb-text-base);
  line-height: 1.55;
  color: var(--nb-ink-2);
}

/* ---------- 6 · Responsive -------------------------------------- */
@media (max-width: 620px) {
  .nb-hub-title {
    font-size: var(--nb-text-2xl);
  }
  .nb-hub-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nb-s4);
  }
  /* On a narrow card the CTA text is redundant beside the tap-whole-card
     affordance and crowds the row — collapse it to just the arrow, kept
     for the visual flick. */
  .nb-hub-card {
    gap: var(--nb-s3);
  }
}


/* ============================================================
   THE ANNOTATED NOTEBOOK — notes chapter index (Phase 3 Wave 1,
   NOTES ONLY). Page-scoped layout for nb_topic_landing.html. This
   is the chapter overview a student sees when browsing a subject's
   notes. Builds ONLY on the shared nb-card / nb-callout / nb-breadcrumb
   components + the --nb-* tokens.

   Craft:
   · The chapter list is a stack of quiet index ROWS — a tabular
     chapter number, the title, a muted topic count, and the pen's
     arrow. One treatment for every chapter; no per-chapter candy.
   · Paid chapters wear the SAME gold "Premium" padlock pill as the
     rail's locked chapters (--nb-premium), so the two never drift.
     It is a small quiet marker, never a loud locked card.
   · The old tlo-hero-art per-subject SVG is gone (missing-asset gap).
   ============================================================ */

/* ---------- 1 · Index shell + header ---------------------------- */
.nb-index {
  width: 100%;
}
.nb-index-header {
  margin-bottom: var(--nb-s8);
}
.nb-index-header .nb-breadcrumb {
  margin-bottom: var(--nb-s5);
}
.nb-index-eyebrow {
  margin-bottom: var(--nb-s2);
  font: var(--nb-type-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-blue);
}
.nb-index-title {
  font: var(--nb-type-headline);
  letter-spacing: -0.015em;
  color: var(--nb-ink);
  text-wrap: balance;
}
.nb-index-lede {
  max-width: 58ch;
  margin-top: var(--nb-s3);
  font: var(--nb-type-prose);
  color: var(--nb-ink-2);
  text-wrap: pretty;
}

/* At-a-glance count line — a quiet margin note under the lede. */
.nb-index-stats {
  display: flex;
  align-items: baseline;
  gap: var(--nb-s2);
  margin-top: var(--nb-s4);
  font: var(--nb-type-label);
  color: var(--nb-ink-2); /* small text: the 4.5:1 tier, never ink-3 */
}
.nb-index-stat strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--nb-ink);
}
.nb-index-stat-sep {
  color: var(--nb-border-strong);
}

/* ---------- 2 · Optional intro prose ---------------------------- */
/* Pre-sanitised markdown intro. The index does not load notebook-notes.css,
   so its study-prose role is owned here instead of relying on a dead class. */
.nb-index-intro {
  margin-bottom: var(--nb-s8);
  max-width: 75ch;
  font: var(--nb-type-prose);
  color: var(--nb-ink);
  text-wrap: pretty;
}

/* ---------- 3 · Chapter list ------------------------------------ */
.nb-index-chapters {
  width: 100%;
}
.nb-index-h2 {
  margin-bottom: var(--nb-s4);
  font: var(--nb-type-title);
  letter-spacing: -0.01em;
  color: var(--nb-ink);
  text-wrap: balance;
}
.nb-index-list {
  display: flex;
  flex-direction: column;
  gap: var(--nb-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Chapter row — the shared .nb-card sheet, laid out as a horizontal
   index line: number plate · body (grows) · optional Premium pill ·
   quiet arrow. One muted treatment for every chapter; the whole row
   is the link, so it lifts on hover via the shared a.nb-card rule. */
.nb-index-row {
  display: flex;
  align-items: center;
  gap: var(--nb-s4);
  width: 100%;
  padding: var(--nb-s4) var(--nb-s5);
}

/* Number plate — a sunken paper tile carrying the chapter number in
   the student's blue, tabular so every plate reads the same width. */
.nb-index-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--nb-s9);
  height: var(--nb-s9);
  padding: 0 var(--nb-s2);
  border-radius: var(--nb-r-md);
  background: var(--nb-paper-sunken);
  border: 1px solid var(--nb-border);
  font: var(--nb-type-title);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--nb-blue);
}

/* Body — title over a muted topic count. */
.nb-index-body {
  display: flex;
  flex-direction: column;
  gap: var(--nb-s1);
  min-width: 0;
  flex: 1 1 auto;
}
.nb-index-row-title {
  font: var(--nb-type-title);
  letter-spacing: -0.01em;
  color: var(--nb-ink);
  text-wrap: balance;
}
.nb-index-meta {
  font: var(--nb-type-label);
  color: var(--nb-ink-2); /* small text: the 4.5:1 tier, never ink-3 */
}

/* Locked-chapter marker — the SAME bare quiet padlock as the rail's locked
   rows (owner pick 2026-07-03, demo 15b mix; the gold "Premium" pill read
   cheap). Kept in lockstep with notebook-page.css so the two surfaces never
   drift: the template ships the identical stroke SVG, inked --nb-ink-3; the
   word "Premium" stays for screen readers only (.nb-index-sr). */
.nb-index-premium {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--nb-ink-3);
}
.nb-index-premium svg {
  width: 14px;
  height: 14px;
}
.nb-index-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Quiet arrow — the pen's flick right; muted at rest, inks blue and
   slides out when the whole-card link is hovered/focused. */
.nb-index-arrow {
  flex: none;
  font-size: var(--nb-text-lg);
  line-height: 1;
  color: var(--nb-ink-3); /* decorative affordance; the whole row is the link */
  transition:
    color var(--nb-dur-1) var(--nb-ease),
    transform var(--nb-dur-1) var(--nb-ease);
}
.nb-index-row:hover .nb-index-arrow,
.nb-index-row:focus-visible .nb-index-arrow {
  color: var(--nb-blue);
  transform: translateX(2px);
}

/* ---------- 4 · Empty state ------------------------------------- */
.nb-index-empty {
  margin-top: var(--nb-s6);
}
.nb-index-empty p {
  margin: 0;
  font-family: var(--nb-sans);
  font-size: var(--nb-text-base);
  line-height: 1.55;
  color: var(--nb-ink-2);
}

/* ---------- 5 · Responsive -------------------------------------- */
@media (max-width: 620px) {
  .nb-index-row {
    gap: var(--nb-s3);
    padding: var(--nb-s4);
  }
  .nb-index-num {
    min-width: var(--nb-s8);
    height: var(--nb-s8);
  }
}