/* ============================================================
   THE MODULE PICKER — a module subject's hub (owner mockup 2026-09-30).
   Loaded only by subject_resources.html when the view returns
   module_groups, so no other hub reads a byte of it.

   One section per module family (Pure, Mechanics, Statistics, Decision):
   a short blue tag in the left gutter, a blue rule beside the family's
   title and its own counts, then its modules, each in a grey box with a
   soft grey edge (owner, 2026-10-05: "make it gray background for these
   buttons so they are more visible"). Hover and keyboard focus turn the edge
   blue. Every word is
   the one ink; blue is for the tag, the rule, the accent word in the title
   and the arrows.

   SIZES FOLLOW THE SCREEN. Each size is a straight line between its value
   at 1280px and at 1920px wide (a + b*vw), clamped at both ends, so a
   1280 laptop, a 1536 laptop at 125% and a 1920 monitor each get a page
   that fills them without a jump at any width.

   Tokens carry legacy fallbacks so the un-flagged build still reads.
   ============================================================ */

.sr-page--modules {
  --mod-ink: var(--nb-ink, #f0efec);
  --mod-blue: var(--nb-blue, #789ff2);
  --mod-line: var(--nb-border, rgba(255, 255, 255, 0.12));
  --mod-paper: var(--nb-paper, #0f1013);
  --mod-card-line: var(--nb-border-strong, #3a404d);
  /* the module box's grey: a little of the ink in the paper, so it is a
     lighter grey by night and a darker one by day */
  --mod-card: color-mix(in srgb, var(--mod-ink) 7%, var(--mod-paper));
  --mod-tag-w: clamp(84px, 40px + 4.2vw, 128px);
  --mod-bar-gap: clamp(26px, 14px + 1.25vw, 40px);
  --mod-cell-pad: clamp(18px, 8px + 1.1vw, 32px);
}

/* by day the module's edge is a lighter grey than the strong border */
html.theme-light .sr-page--modules {
  --mod-card-line: color-mix(in srgb, var(--nb-border-strong) 45%, var(--nb-border));
}

.sr-page--modules .sr-inner {
  max-width: clamp(1080px, 600px + 41.7vw, 1440px);
}

/* ── Header: bigger title, the subject's name in blue, one count line ── */
.sr-page--modules .sr-header {
  max-width: none;
  margin-bottom: clamp(20px, 4px + 1.6vw, 36px);
}

.sr-page--modules .sr-header .sr-title {
  font-size: clamp(2rem, 20px + 1.875vw, 3.75rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: clamp(8px, 2px + 0.5vw, 14px);
}

html .sr-page.sr-page--modules .sr-header .sr-mod-total {
  max-width: none;
  font-size: clamp(15px, 11px + 0.47vw, 22px);
  line-height: 1.4;
  color: var(--mod-ink);
}

/* ── One family section ── */
.sr-mods {
  display: grid;
}

.sr-mod-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(28px, 12px + 1.875vw, 56px);
  border-bottom: 1px solid var(--mod-line);
}

.sr-mod-group:last-child {
  border-bottom: 0;
}

.sr-mod-tag {
  margin: 0 0 10px;
  font-size: clamp(13px, 10px + 0.3125vw, 17px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mod-blue);
}

.sr-mod-head {
  padding-left: var(--mod-bar-gap);
  border-left: 3px solid var(--mod-blue);
}

.sr-mod-title {
  margin: 0;
  font-size: clamp(22px, 14px + 0.9375vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--mod-ink);
}

.sr-mod-line {
  margin: 6px 0 0;
  font-size: clamp(14px, 10px + 0.47vw, 20px);
  line-height: 1.4;
  color: var(--mod-ink);
}

/* ── The family's modules: four columns, so every section's modules
   line up under one another. Each module sits in its own box, a soft grey
   edge around the cell at its full size (owner 2026-10-01: "make a border
   around the modules, its too blended in", then "just add a border around
   it": the words, the arrow and the row keep their size). ── */
.sr-mod-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 16px;
  margin: clamp(20px, 6px + 1.25vw, 36px) 0 0;
  /* the first module's words line up with the family title */
  margin-left: calc(3px + var(--mod-bar-gap) - var(--mod-cell-pad) - 1px);
  padding: 0;
  list-style: none;
}

.sr-mod-item {
  display: flex;
}

.sr-mod {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 6px;
  padding: clamp(18px, 10px + 0.8vw, 26px) var(--mod-cell-pad);
  border: 1px solid var(--mod-card-line);
  border-radius: var(--nb-r-lg, 12px);
  background-color: var(--mod-card);
  color: var(--mod-ink);
  text-decoration: none;
  transition-property: background-color, border-color;
  transition-duration: var(--hover-dur, 0.18s);
  transition-timing-function: var(--hover-ease, ease);
}

.sr-mod-name {
  font-size: clamp(16px, 10px + 0.625vw, 23px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--mod-ink);
}

.sr-mod-count {
  font-size: clamp(14px, 11px + 0.3125vw, 18px);
  line-height: 1.35;
  color: var(--mod-ink);
}

.sr-mod-arrow {
  width: clamp(18px, 12px + 0.47vw, 22px);
  height: auto;
  margin-top: 6px;
  color: var(--mod-blue);
}

/* hover and focus: the edge turns the one blue; nothing moves */
.sr-mod:hover,
.sr-mod:focus-visible {
  background-color: color-mix(in srgb, var(--mod-blue) 8%, var(--mod-card));
  border-color: var(--mod-blue);
}

.sr-mod:focus-visible {
  outline: 2px solid var(--mod-blue);
  outline-offset: 3px;
}

/* ── Wide screens: the tag hangs in the gutter, level with the title,
   and the rule lines up with the page title above it ── */
@media (min-width: 1440px) {
  .sr-mod-group {
    grid-template-columns: var(--mod-tag-w) minmax(0, 1fr);
    margin-left: calc(-1 * var(--mod-tag-w));
  }

  .sr-mod-tag {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding-top: 0.55em;
  }

  .sr-mod-head,
  .sr-mod-list {
    grid-column: 2;
  }
}

/* ── Tablets: two modules a row ── */
@media (max-width: 1023px) {
  .sr-mod-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Phones: one module a row, the arrow at its right end ── */
@media (max-width: 600px) {
  .sr-mod-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    margin-left: 0;
  }

  .sr-mod {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    padding: 16px 18px;
  }

  .sr-mod-name,
  .sr-mod-count {
    grid-column: 1;
  }

  .sr-mod-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-mod {
    transition: none;
  }
}