/* ExamStudyAid: a module subject's hub, apple style (owner, 2026-10-24: a demo of /apple-style
   /alevel/edexcel/pure-mathematics/resources/, then "do it"). A layer over hub-modules.css and the hub skin, loaded after
   hub-modules.css by subject_resources.html (only when the view returns module_groups), every rule under .sr-page--modules.
   The page keeps its order, its sections and its four-across modules; it loses what made it a template: the capitals in
   spaced letters (the family tags, the tip), the blue word in the heading, the blue bar beside each family, and the edge
   round each module. Now:
   - the heading all in the one ink, its counts in the soft ink (the trail above it is nb-crumbs.css, sitewide);
   - each family a plain heading over its modules, its counts in the soft ink;
   - each module a grey tile with no edge (the grey the owner asked for stays, 2026-10-05), its count in the soft ink;
     under the pointer the grey deepens and the arrow turns blue, nothing moves;
   - the tip a plain line under a hairline, no box.
   Tokens only, both themes; no edge, no glow, no capsule. */

html body .sr-page--modules {
  --hub-soft: var(--nb-soft, var(--nb-ink));
  --hub-tile: color-mix(in srgb, var(--nb-ink) 7%, var(--nb-paper));
  --hub-tile-on: color-mix(in srgb, var(--nb-ink) 11%, var(--nb-paper));
}

/* ── The heading: the one ink; the counts in the soft ink ── */
html body .sr-page--modules .sr-header .sr-title {
  font-weight: 600;
  letter-spacing: -0.03em;
}
html body .sr-page--modules .sr-header .sr-title-accent {
  color: inherit;
}
html body .sr-page.sr-page--modules .sr-header .sr-mod-total {
  color: var(--hub-soft);
}

/* ── A family: a plain heading, no tag, no bar ── */
html body .sr-page--modules .sr-mod-tag {
  display: none;
}
html body .sr-page--modules .sr-mod-head {
  padding-left: 0;
  border-left: 0;
}
html body .sr-page--modules .sr-mod-title {
  font-weight: 600;
}
html body .sr-page--modules .sr-mod-line {
  color: var(--hub-soft);
}
html body .sr-page--modules .sr-mod-list {
  margin-left: 0;
}
@media (min-width: 1440px) {
  html body .sr-page--modules .sr-mod-group {
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0;
  }
  html body .sr-page--modules :is(.sr-mod-head, .sr-mod-list) {
    grid-column: 1;
  }
}

/* ── A module: a grey tile, no edge ── */
html body .sr-page--modules .sr-mod {
  border-color: transparent;
  background-color: var(--hub-tile);
}
html body .sr-page--modules .sr-mod-count {
  color: var(--hub-soft);
}
html body .sr-page--modules .sr-mod-arrow {
  color: var(--hub-soft);
  transition: color var(--nb-dur-1, 120ms) var(--nb-ease, ease);
}
@media (hover: hover) {
  html body .sr-page--modules .sr-mod:hover {
    border-color: transparent;
    background-color: var(--hub-tile-on);
  }
  html body .sr-page--modules .sr-mod:hover .sr-mod-arrow {
    color: var(--nb-blue);
  }
}
html body .sr-page--modules .sr-mod:focus-visible {
  border-color: transparent;
  background-color: var(--hub-tile-on);
}

/* ── The tip: a plain line under a hairline ── */
html body .sr-page--modules .sr-tips {
  padding: clamp(20px, 1.6vw, 28px) 0 0;
  border-radius: 0;
  background: none;
  /* the hairline is drawn as a shadow: nb-boxes.css holds every edge of this box clear */
  box-shadow: inset 0 1px 0 var(--nb-border);
}
html body .sr-page--modules .sr-tips::before {
  content: none;
}
html body .sr-page--modules .sr-tips-label {
  letter-spacing: 0;
  text-transform: none;
  color: var(--nb-ink);
}
html body .sr-page--modules .sr-tips p {
  color: var(--hub-soft);
}

@media (prefers-reduced-motion: reduce) {
  html body .sr-page--modules .sr-mod-arrow { transition: none; }
}