/* ============================================================
   Subject rows: the board pages (/alevel/edexcel/, /alevel/cie/,
   /igcse/edexcel/, /igcse/cie/, /ap/, /sat/). Owner mockup 2026-10-01,
   "1:1, beautiful colors, no gray text": two columns of rows, each a hued
   icon tile, the subject's name, what it holds, a round arrow, and a
   hairline under the row. A subject that is not there yet keeps its row
   with a Coming soon pill.

   Loaded only by those six templates, after the picker skin; the
   typography bridge loads later, so every rule is scoped
   html .si-page.si-page--rows (0,2,1) and wins on specificity alone.
   The subject's colour sits on its tile and its name (owner 2026-10-02: one
   colour for every word looked dull, every contents line in colour was too
   much, the name in colour reaches AP and SAT too); the code and the
   contents line are the ink, the board line and the title's last words blue;
   no violet anywhere (the mockup's violet maths tiles are amber and coral).
   ============================================================ */

html .si-page.si-page--rows {
  --si-col: 1106px;
  --si-tile: 66px;
  --si-go: 44px;
  --si-gap-x: 29px;
  --si-col-gap: 80px;
  --si-name: 23px;
  --si-meta: 16px;
  --si-rule: var(--nb-border);
  --si-go-bg: var(--nb-paper-raised);
  --si-go-line: var(--nb-border);
  --si-ink: var(--nb-ink);
}

/* ── The header ─────────────────────────────────────────── */
html .si-page.si-page--rows .pg-inner {
  width: min(var(--si-col), 100% - 48px);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
html .si-page.si-page--rows .pg-hero.pg-hero--sub {
  padding: 57px 0 0;
}
html .si-page.si-page--rows .pg-back {
  display: none;
}
html .si-page.si-page--rows .pg-board-context {
  margin: 0 0 14px;
  font: 500 15px/1.4 var(--nb-sans, "IBM Plex Sans", sans-serif);
  letter-spacing: 0;
  color: var(--nb-blue);
}
html .si-page.si-page--rows .pg-hero-title {
  margin: 0;
  font: 600 32.5px/1.2 var(--nb-sans, "IBM Plex Sans", sans-serif);
  letter-spacing: -0.03em;
  color: var(--si-ink);
}
/* The title's last words in the notebook blue, the way a subject library's
   header ends in a blue "Library" (owner 2026-10-02: one colour everywhere
   made the page look dull). */
html .si-page.si-page--rows .pg-hero-accent {
  color: var(--nb-blue);
}
html .si-page.si-page--rows .pg-hero-body {
  max-width: 530px;
  margin: 9px 0 0;
  font: 400 18px/32px var(--nb-sans, "IBM Plex Sans", sans-serif);
  letter-spacing: 0.02em;
  color: var(--si-ink);
}

/* ── The rows ───────────────────────────────────────────── */
html .si-page.si-page--rows > .si-grid-section {
  padding: 60px 0 96px;
}
html .si-page.si-page--rows > .si-grid-section > .pg-inner {
  margin-block: 0;
  padding-inline: 0;
}
html .si-page.si-page--rows .si-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--si-col-gap);
  row-gap: 0;
  gap: 0 var(--si-col-gap);
}
html .si-page.si-page--rows .si-card {
  display: grid;
  grid-template-columns: var(--si-tile) minmax(0, 1fr) var(--si-go);
  align-items: center;
  column-gap: var(--si-gap-x);
  row-gap: 0;
  margin: 0 0 44px;
  padding: 0 0 29px;
  border: 0;
  border-bottom: 1px solid var(--si-rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--si-ink);
  text-decoration: none;
  overflow: visible;
  transform: none;
  transition: none;
  --si-hue: var(--nb-blue);
}
html .si-page.si-page--rows .si-card::before {
  content: none;
}
html .si-page.si-page--rows .si-card > * {
  order: 0;
}

/* The tile: the subject's hue as a wash, a line and the icon. */
html .si-page.si-page--rows .si-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--si-tile);
  height: var(--si-tile);
  border-radius: var(--nb-r-lg);
  border: 1px solid color-mix(in srgb, var(--si-hue) 42%, transparent);
  background: color-mix(in srgb, var(--si-hue) 13%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--si-hue) 16%, transparent);
  filter: none;
  transform: none;
  transition: background var(--nb-dur-2, 180ms) var(--nb-ease, ease), border-color var(--nb-dur-2, 180ms) var(--nb-ease, ease);
}
html .si-page.si-page--rows .si-card-icon {
  display: flex;
  color: var(--si-hue);
  filter: none;
}
html .si-page.si-page--rows .si-card-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.75;
}
html .si-page.si-page--rows .si-glyph {
  font-family: var(--nb-sans, "IBM Plex Sans", sans-serif);
  font-weight: 500;
  line-height: 1;
  color: var(--si-hue);
}
html .si-page.si-page--rows .si-glyph--fx {
  font-size: 23px;
  font-style: italic;
  letter-spacing: -0.02em;
}
html .si-page.si-page--rows :is(.si-glyph--pi, .si-glyph--int) {
  font-family: var(--nb-serif, "Vollkorn", serif);
  font-weight: 500;
}
html .si-page.si-page--rows .si-glyph--pi {
  font-size: 36px;
  margin-top: -4px;
}
html .si-page.si-page--rows .si-glyph--int {
  font-size: 40px;
  margin-top: -2px;
}

html .si-page.si-page--rows .si-card-body {
  display: block;
  min-width: 0;
  padding-top: 7px;
}
html .si-page.si-page--rows .si-card-name {
  display: block;
  font: 600 var(--si-name)/1.25 var(--nb-sans, "IBM Plex Sans", sans-serif);
  letter-spacing: -0.01em;
  color: var(--si-ink);
}
/* ── Colour on the words (owner 2026-10-02: "the title ... and the
   resources shown, the colors are all the same"; "no dark or grey colors as
   it makes the website look dull"). Colour that means something (DESIGN.md,
   The One-Ink Rule), kept to a little (owner, the same day, of the subject
   hues on every contents line: "they are too colorful"; then, to reach AP
   and SAT, which have no codes, the owner chose "subject title colored and
   the code white"): the subject's name takes its own hue, the hue its tile
   already wears, on every board alike; the code and the contents line stay
   in the ink. Night hues read 7 to 11:1 on the page. By day the paler hues are deepened for words (--si-text) so every
   one reads at 4.9:1 or more on the paper; the tiles keep --si-hue. ── */
html .si-page.si-page--rows .si-card {
  --si-text: var(--si-hue);
}
html.theme-light .si-page.si-page--rows .si-card[data-subject="biology"] { --si-text: #11764a; }
html.theme-light .si-page.si-page--rows .si-card[data-subject="chemistry"] { --si-text: #08727e; }
html.theme-light .si-page.si-page--rows .si-card:is([data-subject="further-mathematics"], [data-subject="calculus-ab"]) { --si-text: #975a08; }
html.theme-light .si-page.si-page--rows .si-card:is([data-subject="pure-mathematics"], [data-subject="calculus-bc"]) { --si-text: #b53c25; }
html.theme-light .si-page.si-page--rows .si-card:is([data-subject="business"], [data-subject="economics"]) { --si-text: #446e0f; }
html .si-page.si-page--rows .si-card-name {
  color: var(--si-text);
}
html .si-page.si-page--rows .si-card-code {
  color: var(--si-ink);
}

/* The syllabus code after the name (owner 2026-10-02: on the subject picker
   too; 2026-10-01: plain words, no pill, no colour, the font's own size): the
   name's type in the ink (above), kept on one line so "XBI11 / YBI11"
   never splits. */
html .si-page.si-page--rows .si-card-code {
  white-space: nowrap;
}
html .si-page.si-page--rows .si-card-meta {
  display: block;
  margin-top: 3px;
  font: 400 var(--si-meta)/1.4 var(--nb-sans, "IBM Plex Sans", sans-serif);
  letter-spacing: 0;
  word-spacing: 1px;
  color: var(--si-ink);
}

/* The round arrow. */
html .si-page.si-page--rows .si-card-go {
  display: grid;
  place-items: center;
  width: var(--si-go);
  height: var(--si-go);
  border-radius: 50%;
  border: 1px solid var(--si-go-line);
  background: var(--si-go-bg);
  color: var(--si-ink);
  transition: background var(--nb-dur-2, 180ms) var(--nb-ease, ease), border-color var(--nb-dur-2, 180ms) var(--nb-ease, ease), color var(--nb-dur-2, 180ms) var(--nb-ease, ease), transform var(--nb-dur-2, 180ms) var(--nb-ease, ease);
}
html .si-page.si-page--rows .si-card .si-card-arrow {
  width: 20px;
  height: 20px;
  margin: 0;
  color: currentColor;
  opacity: 1;
  transform: none;
  transition: none;
}

/* Hover and focus: the arrow fills with the one blue and steps forward,
   the tile's wash deepens. The row itself does not move. */
html .si-page.si-page--rows a.si-card:hover,
html .si-page.si-page--rows a.si-card:hover:not(:focus-visible):not(:active) {
  background: none;
  border-color: var(--si-rule);
  box-shadow: none;
  transform: none;
}
html .si-page.si-page--rows a.si-card:hover .si-card-name {
  color: var(--si-text);
}
html .si-page.si-page--rows a.si-card:hover .si-card-icon-wrap,
html .si-page.si-page--rows a.si-card:hover:not(:focus-visible):not(:active) .si-card-icon-wrap {
  background: color-mix(in srgb, var(--si-hue) 22%, transparent);
  border-color: color-mix(in srgb, var(--si-hue) 62%, transparent);
  filter: none;
  transform: none;
}
html .si-page.si-page--rows a.si-card:hover .si-card-go,
html .si-page.si-page--rows a.si-card:focus-visible .si-card-go {
  background: var(--nb-blue);
  border-color: var(--nb-blue);
  color: var(--nb-on-blue);
  transform: translateX(3px);
}
html .si-page.si-page--rows a.si-card:hover:not(:focus-visible):not(:active) .si-card-arrow {
  color: currentColor;
  opacity: 1;
  transform: none;
}
html .si-page.si-page--rows a.si-card:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 6px;
  border-radius: var(--nb-r-sm);
}
html .si-page.si-page--rows a.si-card:active .si-card-go {
  transform: translateX(1px);
}

/* Not there yet, drawn disabled the way a subject library draws its Videos
   and Mock Exams cards (owner 2026-10-02, with that card as the model: "make
   the subjects saying coming soon look like this, disabled"). The tile, the
   name and the code rest at half strength, the name back in the ink so it
   reads as the library's faded "Videos" does (a disabled cue drawn by
   opacity, DESIGN.md's named exception), the arrow is drawn at 0.3, and the
   facts line is the library's Coming soon flag at full strength. */
html .si-page.si-page--rows .si-card[data-ui-disabled="true"] {
  background: none;
  box-shadow: none;
  cursor: default;
}
/* notebook-pickers-skin.css greys the old cards' tile (grayscale): not here. */
html .si-page.si-page--rows .si-card[data-ui-disabled="true"] .si-card-icon-wrap {
  filter: none;
}
html .si-page.si-page--rows .si-card[data-ui-disabled="true"] :is(.si-card-icon-wrap, .si-card-name) {
  opacity: 0.5;
}
html .si-page.si-page--rows .si-card[data-ui-disabled="true"] .si-card-name {
  color: var(--si-ink);
}
html .si-page.si-page--rows .si-card[data-ui-disabled="true"] .si-card-go {
  opacity: 0.3;
}
html .si-page.si-page--rows .si-card[data-ui-disabled="true"] .si-card-meta {
  margin-top: 6px;
}

/* The Coming soon flag, the library's own (hub-library.css .lib-soon, the
   Extended tier flag's look): white capitals, tracked, on the flag's
   saturated blue, its rounded left end edged in a brighter blue by night and
   a deeper one by day. The values are the library's, set here because a
   board page does not load the hub's sheet. */
html .si-page.si-page--rows {
  --si-soon-ink: var(--nb-feedback-ink, #fff);
  --si-soon-fill: #2457d6;
  --si-soon-edge: #7eb0ff;
}
html.theme-light .si-page.si-page--rows {
  --si-soon-ink: var(--nb-on-blue, #fff);
  --si-soon-fill: #1f5fe0;
  --si-soon-edge: #0b3fb4;
}
html .si-page.si-page--rows .si-soon {
  display: inline-block;
  padding: 0.22em 0.8em 0.22em 0.7em;
  border-left: 3px solid var(--si-soon-edge);
  border-radius: var(--nb-r-pill, 999px);
  background: var(--si-soon-fill);
  color: var(--si-soon-ink);
  font: var(--nb-type-label, 600 14px/1.2 "IBM Plex Sans", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Subject hues (night) ───────────────────────────────── */
html .si-page.si-page--rows .si-card[data-subject="biology"] { --si-hue: #4fd49b; }
html .si-page.si-page--rows .si-card[data-subject^="physics"] { --si-hue: #62a0ff; }
html .si-page.si-page--rows .si-card[data-subject="chemistry"] { --si-hue: #36c9d8; }
html .si-page.si-page--rows .si-card:is([data-subject="mathematics"], [data-subject^="mathematics-"], [data-subject="math"], [data-subject="precalculus"], [data-subject="statistics"]) { --si-hue: #8ea6ff; }
html .si-page.si-page--rows .si-card:is([data-subject="further-mathematics"], [data-subject="calculus-ab"]) { --si-hue: #f3b64c; }
html .si-page.si-page--rows .si-card:is([data-subject="pure-mathematics"], [data-subject="calculus-bc"]) { --si-hue: #ff8a6e; }
html .si-page.si-page--rows .si-card:is([data-subject="english"], [data-subject="reading"], [data-subject="writing"], [data-subject="psychology"]) { --si-hue: #f28ba4; }
html .si-page.si-page--rows .si-card:is([data-subject="business"], [data-subject="economics"]) { --si-hue: #a9d65c; }

/* ── Subject hues (day): the same hue, deep enough to read on paper ── */
html.theme-light .si-page.si-page--rows .si-card[data-subject="biology"] { --si-hue: #16814f; }
html.theme-light .si-page.si-page--rows .si-card[data-subject^="physics"] { --si-hue: #1d5fd8; }
html.theme-light .si-page.si-page--rows .si-card[data-subject="chemistry"] { --si-hue: #0a7f8c; }
html.theme-light .si-page.si-page--rows .si-card:is([data-subject="mathematics"], [data-subject^="mathematics-"], [data-subject="math"], [data-subject="precalculus"], [data-subject="statistics"]) { --si-hue: #3b53cc; }
html.theme-light .si-page.si-page--rows .si-card:is([data-subject="further-mathematics"], [data-subject="calculus-ab"]) { --si-hue: #a8650a; }
html.theme-light .si-page.si-page--rows .si-card:is([data-subject="pure-mathematics"], [data-subject="calculus-bc"]) { --si-hue: #c2432a; }
html.theme-light .si-page.si-page--rows .si-card:is([data-subject="english"], [data-subject="reading"], [data-subject="writing"], [data-subject="psychology"]) { --si-hue: #b0385a; }
html.theme-light .si-page.si-page--rows .si-card:is([data-subject="business"], [data-subject="economics"]) { --si-hue: #4e7d12; }
html.theme-light .si-page.si-page--rows .si-card-go {
  background: var(--nb-paper-raised);
}

/* ── Narrower screens ───────────────────────────────────── */
@media (max-width: 1023px) {
  html .si-page.si-page--rows {
    --si-col-gap: 40px;
    --si-tile: 56px;
    --si-gap-x: 20px;
    --si-name: 20px;
    --si-meta: 15px;
  }
  html .si-page.si-page--rows .si-card-icon svg { width: 26px; height: 26px; }
  html .si-page.si-page--rows .si-glyph--fx { font-size: 20px; }
  html .si-page.si-page--rows :is(.si-glyph--pi, .si-glyph--int) { font-size: 30px; }
}
@media (max-width: 760px) {
  html .si-page.si-page--rows {
    --si-tile: 52px;
    --si-go: 40px;
    --si-gap-x: 16px;
    --si-name: 19px;
    --si-meta: 14px;
  }
  html .si-page.si-page--rows .pg-inner { width: calc(100% - 32px); }
  html .si-page.si-page--rows .pg-hero.pg-hero--sub { padding-top: 36px; }
  html .si-page.si-page--rows .pg-hero-title { font-size: 28px; }
  html .si-page.si-page--rows .pg-hero-body { font-size: 16px; line-height: 1.65; }
  html .si-page.si-page--rows > .si-grid-section { padding: 36px 0 64px; }
  html .si-page.si-page--rows .si-grid { grid-template-columns: minmax(0, 1fr); }
  html .si-page.si-page--rows .si-card { margin-bottom: 22px; padding-bottom: 20px; }
  html .si-page.si-page--rows .si-card-icon-wrap { border-radius: var(--nb-r-lg); }
  html .si-page.si-page--rows .si-card-icon svg { width: 24px; height: 24px; }
  html .si-page.si-page--rows .si-card-go .si-card-arrow { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html .si-page.si-page--rows :is(.si-card-go, .si-card-icon-wrap) { transition: none; }
  html .si-page.si-page--rows a.si-card:hover .si-card-go { transform: none; }
}