/* CertaRounds — Specialty screen styles (src/screens/specialty.js). Owned by its M3 screen agent.
   Semantic tokens only (docs/COMPONENTS.md §2); scope every rule under a screen class.
   Shared bits (.spx-bar, .spx-tone--*, .spx-due) live in specialties.css. */

.sp { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
@media (min-width: 768px) { .sp { gap: var(--sp-5); } }

/* ---------- hero ---------- */
.sp-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.sp-hero__gem { display: inline-flex; margin-top: 14px; }
@media (min-width: 1024px) { .sp-hero { align-items: center; } .sp-hero__gem { margin-top: 0; } }
.sp-hero__eyebrow {
  font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.sp-hero__crumb {
  display: inline-flex; align-items: center; gap: 2px; margin-left: -2px;
  color: var(--link); text-decoration: none; min-height: 24px;
}
.sp-hero__crumb:hover { color: var(--link-hover); text-decoration: underline; }
.sp-hero__crumb:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
.sp-hero__title {
  margin-top: 2px; font-size: var(--fs-24); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight);
  color: var(--text-strong); overflow-wrap: break-word;
}
.sp-hero__facts { margin-top: var(--sp-1); font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .sp-hero__title { font-size: var(--fs-30); }
  .sp-hero__facts { font-size: var(--fs-15); }
}

/* ---------- inline stats (phones / tablets) ---------- */
.sp-inline { display: flex; flex-direction: column; gap: var(--sp-4); }
.sp-inline__ring { display: flex; align-items: center; gap: var(--sp-4); }
.sp-inline__status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sp-inline__cap { margin: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: var(--lh-snug); }
.sp-inline__line { font-size: var(--fs-13); color: var(--text-2); line-height: 1.35; }
.sp-inline__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--divider); padding-top: var(--sp-3);
}
.sp-istat { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 var(--sp-2); }
.sp-istat:first-child { padding-left: 0; }
.sp-istat + .sp-istat { border-left: 1px solid var(--divider); }
.sp-istat__label { font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-2); }
.sp-istat__value {
  font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--text-strong);
  letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; line-height: 1.25;
}
.sp-istat__sub { font-size: var(--fs-12); color: var(--text-3); line-height: 1.3; }
/* R3 P2: figures never break inside ("of 495 questions", "on 143 answers"). Tablet portrait keeps the
   phone's stacked card (the row layout squeezed the three columns); the row starts at 1024. */
@media (min-width: 768px) {
  .sp-istat__sub { white-space: nowrap; }
  .sp-istat { padding: 0 var(--sp-4); }
}
@media (min-width: 1024px) {
  .sp-inline { flex-direction: row; align-items: center; gap: var(--sp-6); }
  .sp-inline__stats { flex: 1 1 auto; border-top: 0; padding-top: 0; border-left: 1px solid var(--divider); padding-left: var(--sp-5); }
  .sp-istat { padding: 0 var(--sp-3); }
}

/* ---------- actions (R4 P2): each button with its own caption; "Customize a round" on its own line ---------- */
.sp-actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.sp-actions__row { display: flex; flex-direction: column; gap: var(--sp-3); }
.sp-actions__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-actions__item > .btn { width: 100%; }
.sp-actions__cap { font-size: var(--fs-13); color: var(--text-3); line-height: 1.45; padding: 0 var(--sp-1); }
.sp-actions__more { margin: 0; }
.sp-actions__more .sp-actions__custom { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: var(--fs-13); }
/* D7: the 23 px link + 2 × 12 px = 47 px hit height. */
.sp-actions__more .sp-actions__custom::after { inset: -12px -8px; }
@media (min-width: 768px) {
  .sp-actions__row { flex-direction: row; align-items: flex-start; gap: var(--sp-4); }
  .sp-actions__item > .btn { width: auto; align-self: flex-start; }
  .sp-actions__item--weak { flex: 0 1 34ch; }
  .sp-actions__cap { padding: 0 var(--sp-2); }
}

/* ---------- sparse trend (1–2 scored weeks): one line of figures instead of a chart ---------- */
.sp-trend__few { display: flex; flex-direction: column; gap: var(--sp-2); }
.sp-trend__stat { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.45; font-variant-numeric: tabular-nums; }
.sp-trend__rule { font-size: var(--fs-13); color: var(--text-3); line-height: 1.45; }
/* "9" ready count inside the weak-areas button (the button's aria-label says it in words). */
.sp-actions__count {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; margin-left: 8px;
  border-radius: var(--r-pill); background: var(--surface); color: var(--accent-soft-fg);
  font-size: var(--fs-12); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.sp-actions__fact { color: var(--text-2); font-weight: var(--fw-semibold); }

/* ---------- section list header ---------- */
.sp-secs { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.sp-secs__head { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.sp-secs__titles { min-width: 0; }
.sp-secs .sp-secs__sh { margin: 0; }
.sp-secs__sub { margin-top: 4px; font-size: var(--fs-13); color: var(--text-3); line-height: 1.45; max-width: 62ch; }
.sp-secs__sort { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sp-secs__sortlabel { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-2); }
.sp-tsort { flex: 0 0 auto; }
@media (min-width: 768px) {
  .sp-secs { gap: var(--sp-4); }
  .sp-secs__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .sp-secs__sort { flex: 0 0 auto; }
}

/* ---------- section card ---------- */
.sp-sec { display: flex; flex-direction: column; gap: var(--sp-3); }
.sp-sec__body { display: flex; flex-direction: column; gap: var(--sp-3); }
/* R1 P2: title + score on one line, the figures on a full-width line under them. */
.sp-sec__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title score" "meta meta";
  column-gap: var(--sp-3); row-gap: 4px; align-items: start;
}
.sp-sec__head .sp-sec__title { grid-area: title; }
.sp-sec__head .sp-sec__score { grid-area: score; }
.sp-sec__head .sp-sec__meta { grid-area: meta; }
.sp-sec__title {
  font-size: var(--fs-17); font-weight: var(--fw-semibold); line-height: var(--lh-snug);
  color: var(--text-strong); overflow-wrap: break-word; text-wrap: pretty;
}
/* One line (D16, .spx-meta1 sets the line box — no line-height here, or the clip would cut descenders). */
.sp-sec__meta { font-size: var(--fs-13); color: var(--text-2); }
.sp-sec__score { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex: 0 0 auto; white-space: nowrap; }
.sp-sec__unit { font-size: var(--fs-13); color: var(--text-3); margin-left: -4px; }
/* D12: the evidence beside a Weak pill ("71% right"). */
.sp-sec__raw { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--warning); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-sec__pct {
  font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--text-strong);
  letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.sp-sec__st { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 1.25; }
.sp-sec__st.spx-tone--neutral { font-weight: var(--fw-medium); }
.sp-sec__bar { margin-top: -2px; }
.sp-sec__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: -6px 0 -10px; }
.sp-sec--single .sp-sec__head { grid-template-areas: "meta meta"; }
.sp-sec__more {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 var(--sp-3); margin-left: calc(-1 * var(--sp-3));
  border-radius: var(--r-pill);
  font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--link);
  transition: background var(--dur-1) var(--ease-out);
}
.sp-sec__more:hover { background: var(--surface-hover); }
.sp-sec__more:active { background: var(--surface-pressed); }
.sp-sec__more:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sp-sec__practice { min-height: 44px; }

/* Phone accordion (R1 P1): a collapsed section is one row — name · % · status · chevron, the
   figures under it; the whole row is the toggle (≥ 44 px). */
.sp-sec--acc { gap: var(--sp-3); }
.sp-sec--acc.is-collapsed { --card-p: var(--sp-3) var(--sp-4); }
.sp-sec__h { margin: 0; font: inherit; }
/* R2 P2: name and chevron on the first line; "80% mastery · ⚠ Weak · 71% right" on its own line;
   the figures under it — the name keeps the full width. */
.sp-sec__toggle {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px;
  grid-template-areas: "title chev" "score score" "meta meta";
  column-gap: var(--sp-2); row-gap: 3px; align-items: center;
  width: calc(100% + 2 * var(--sp-2)); margin: calc(-1 * var(--sp-1)) calc(-1 * var(--sp-2));
  padding: var(--sp-1) var(--sp-2); min-height: 44px;
  border-radius: var(--r-sm); text-align: left; color: var(--text);
  transition: background var(--dur-1) var(--ease-out);
}
.sp-sec__toggle:hover { background: var(--surface-hover); }
.sp-sec__toggle:active { background: var(--surface-pressed); }
.sp-sec__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sp-sec__toggle .sp-sec__title { grid-area: title; font-size: var(--fs-15); }
.sp-sec__toggle .sp-sec__score { grid-area: score; justify-content: flex-start; flex-wrap: wrap; white-space: normal; gap: 2px 8px; }
.sp-sec__toggle .sp-sec__pct { font-size: var(--fs-15); }
.sp-sec__toggle .sp-sec__unit { font-size: var(--fs-12); }
.sp-sec__toggle .sp-sec__raw { font-size: var(--fs-12); }
.sp-sec__toggle .sp-sec__meta { grid-area: meta; font-size: var(--fs-12); }
.sp-sec__chev { grid-area: chev; display: inline-flex; color: var(--text-3); }
/* R3 P2: the accordion runs at every width (desktop was ~3.6 screens with every section open). From
   768 up the header is one row — name · 80% mastery · pill · % right · chevron — figures under it. */
@media (min-width: 768px) {
  .sp-sec--acc.is-collapsed { --card-p: var(--sp-4) var(--sp-5); }
  .sp-sec__toggle {
    grid-template-columns: minmax(0, 1fr) auto 20px;
    grid-template-areas: "title score chev" "meta meta meta";
    column-gap: var(--sp-3); row-gap: 4px;
  }
  .sp-sec__toggle .sp-sec__title { font-size: var(--fs-17); }
  .sp-sec__toggle .sp-sec__score { justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; gap: var(--sp-2); }
  .sp-sec__toggle .sp-sec__pct { font-size: var(--fs-20); }
  .sp-sec__toggle .sp-sec__unit { font-size: var(--fs-13); }
  .sp-sec__toggle .sp-sec__raw { font-size: var(--fs-13); }
  .sp-sec__toggle .sp-sec__meta { font-size: var(--fs-13); }
}

/* ---------- topic rows ---------- */
.sp-topics { display: flex; flex-direction: column; border-top: 1px solid var(--divider); }
.sp-topics > li + li { border-top: 1px solid var(--divider); }
/* R3 P1 — phones: the name has the full row width and wraps (D6, never clamped); the bar and the score
   ("68% · ⚠ Weak · 69% right") share the line under it; ONE meta line under that (D16). A topic
   without a score has no bar (R3 P2): what it needs takes that line instead. */
.sp-topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  grid-template-areas: "name name chev" "bar score chev" "meta meta chev";
  column-gap: var(--sp-3); row-gap: 5px; align-items: center;
  width: calc(100% + 2 * var(--sp-2)); margin: 0 calc(-1 * var(--sp-2));
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-sm);
  text-align: left; color: var(--text);
  transition: background var(--dur-1) var(--ease-out);
}
.sp-topic:hover { background: var(--surface-hover); }
.sp-topic:active { background: var(--surface-pressed); }
.sp-topic:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sp-topic--unscored { grid-template-areas: "name name chev" "score score chev" "meta meta chev"; }
.sp-topic__name {
  grid-area: name; font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--text-strong);
  line-height: var(--lh-snug); overflow-wrap: break-word; text-wrap: pretty;
}
/* One line (.spx-meta1 owns line-height / clip). */
.sp-topic__meta { grid-area: meta; font-size: var(--fs-12); color: var(--text-2); }
.sp-topic__bar { grid-area: bar; min-width: 0; }
.sp-topic__score {
  grid-area: score; display: flex; flex-direction: row; align-items: baseline; justify-content: flex-end;
  gap: 6px; text-align: right; min-width: 0; white-space: nowrap;
}
.sp-topic--unscored .sp-topic__score { justify-content: flex-start; text-align: left; white-space: normal; }
.sp-topic__pct { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1.2; }
.sp-topic__st { white-space: nowrap; display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 1.25; }
.sp-topic__st.spx-tone--neutral { font-weight: var(--fw-medium); }
.sp-topic__need { display: inline; white-space: normal; line-height: 1.3; }
/* D12: the figure that makes a topic Weak, beside the word. */
.sp-topic__raw { font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--warning); font-variant-numeric: tabular-nums; line-height: 1.25; }
.sp-topic__chev { grid-area: chev; color: var(--text-3); }
/* Tablet / desktop (R4 P2): the same one-liner as the section header — "63% · ⚠ Weak · 58% right" on
   the name's line, the bar under it beside the meta line; so section headers, the Weakest-topics card
   and topic rows read the same evidence the same way. A narrow need ("Needs 2 more answers") keeps
   " and 1 more question" for screen readers (the title has it too). */
@media (min-width: 768px) {
  .sp-topic, .sp-topic--unscored {
    grid-template-columns: minmax(0, 1fr) 208px 16px;
    grid-template-areas: "name score chev" "meta bar chev";
    column-gap: var(--sp-4); row-gap: 4px;
  }
  .sp-topic--unscored { grid-template-areas: "name score chev" "meta score chev"; }
  .sp-topic__score, .sp-topic--unscored .sp-topic__score {
    flex-direction: row; align-items: baseline; justify-content: flex-end; gap: 6px; text-align: right;
  }
  .sp-topic__bar { align-self: center; }
  .sp-topic__rest {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
/* Deep-linked row / section (Search, Library): an outline, not just a tint. Cleared on blur / after 4 s. */
.sp-topic.is-target { outline: 2px solid var(--focus); outline-offset: 1px; background: var(--selected-bg); }
.sp-sec.is-target { outline: 2px solid var(--focus); outline-offset: 3px; }
.sp-sec[data-route-focus]:focus, .sp-sec[tabindex="-1"]:focus { outline: none; }
.sp-sec.is-target:focus { outline: 2px solid var(--focus); }

/* ---------- weakest topics card (one column: ≤ 5 rows, R1 P2) ---------- */
.sp-weak { display: flex; flex-direction: column; }
.sp-weak > li + li { border-top: 1px solid var(--divider); }
/* R3 P1 (D6): names wrap in full. Phones: the name takes the whole row; "68% ⚠ Weak · 64% right ·
   45 answers" is the one line under it. Wider: name + evidence left, % / status right. */
.sp-weak__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 16px; align-items: center; column-gap: 8px; row-gap: 3px;
  grid-template-areas: "name name chev" "val ev chev";
  width: calc(100% + 2 * var(--sp-2)); margin: 0 calc(-1 * var(--sp-2)); min-height: 52px;
  padding: var(--sp-2); border-radius: var(--r-sm); text-align: left; color: var(--text);
  transition: background var(--dur-1) var(--ease-out);
}
.sp-weak__row:hover { background: var(--surface-hover); }
.sp-weak__row:active { background: var(--surface-pressed); }
.sp-weak__row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sp-weak__name {
  grid-area: name; min-width: 0;
  font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--text-strong); line-height: var(--lh-snug);
  overflow-wrap: break-word; text-wrap: pretty;
}
.sp-weak__ev { grid-area: ev; font-size: var(--fs-12); color: var(--text-2); }
.sp-weak__raw { color: var(--warning); font-weight: var(--fw-semibold); }
.sp-weak__val { grid-area: val; display: flex; flex-direction: row; align-items: baseline; gap: 6px; white-space: nowrap; }
.sp-weak__pct { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.sp-weak__st { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-12); font-weight: var(--fw-semibold); white-space: nowrap; }
.sp-weak__chev { grid-area: chev; color: var(--text-3); }
/* Phones: the evidence continues the status line, so a "·" joins them. */
@media (max-width: 767px) {
  .sp-weak__ev::before { content: "\00b7"; color: var(--text-3); margin-right: .4em; flex: 0 0 auto; }
}
@media (min-width: 768px) {
  .sp-weak__row {
    grid-template-columns: minmax(0, 1fr) auto 16px; column-gap: var(--sp-3);
    grid-template-areas: "name val chev" "ev val chev";
  }
  .sp-weak__val { flex-direction: column; align-items: flex-end; gap: 1px; }
}
.sp-weak__empty { font-size: var(--fs-13); color: var(--text-3); line-height: 1.45; }

/* ---------- rail ---------- */
.sp-rail { display: flex; flex-direction: column; gap: var(--sp-4); }
.sp-mastery__body { display: flex; align-items: center; gap: var(--sp-4); }
.sp-mastery__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.sp-mastery__text .status-pill { margin-bottom: 4px; }
.sp-mastery__line { font-size: var(--fs-13); color: var(--text-2); line-height: 1.4; }
/* Figures strip: bleeds to the card edges so its hairlines run edge to edge; text stays on the card's 20px line. */
.sp-mastery .sp-kpi { margin: var(--sp-4) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)); border-top: 1px solid var(--divider); }
.sp-mastery .sp-kpi .kpi__item { padding: 14px var(--sp-5); }
.sp-mastery .sp-kpi .kpi__value { font-size: var(--fs-20); }
/* Always 2 × 2 (R1 P1: at 1024 the rail is a row above the content and auto-fit broke it 3 + 1). */
.sp-mastery .sp-kpi .kpi__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 1024–1199: the rail sits above the content as a row — mastery and trend side by side. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .sp-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ---------- topic sheet ---------- */
.sp-sheet { display: flex; flex-direction: column; gap: var(--sp-4); }
.sp-sheet__where { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; }
.sp-sheet__gem { display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.sp-sheet__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.sp-sheet__fact { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); min-width: 0; }
.sp-sheet__fact dt { font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-2); }
.sp-sheet__v {
  font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--text-strong);
  letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; line-height: 1.3;
}
.sp-sheet__s { font-size: var(--fs-12); color: var(--text-3); line-height: 1.3; }
.sp-sheet__note { font-size: var(--fs-13); color: var(--text-2); line-height: 1.5; }
.sp-sheet__foot { display: flex; width: 100%; }

.sp-sec__toggle .sp-sec__st { white-space: normal; }
/* Sheet Mastery tile: the status keeps its tone (the grey sub colour above would override it). */
.sp-sheet__s.spx-tone--warning { color: var(--warning); font-weight: var(--fw-semibold); }
.sp-sheet__s.spx-tone--success { color: var(--success); font-weight: var(--fw-semibold); }
.sp-sheet__s.spx-tone--primary { color: var(--text-accent); font-weight: var(--fw-semibold); }
.sp-sheet__s .icon { vertical-align: -1px; margin-right: 3px; }
/* "63% ⚠ Weak · 58% right" on one line at every width (D12 shape, like the section headers). */
.sp-topic__raw::before { content: "\00b7"; color: var(--text-3); font-weight: var(--fw-regular); margin-right: 6px; }

/* Hero facts (R4 P2): whole tokens; no line starts or ends with "·". Each token carries its dot on the
   left; the dot of a token that begins a line sits in a gutter the wrapper clips. */
.sp-wrapline { display: block; overflow: hidden; }
.sp-wrapline__in { display: flex; flex-wrap: wrap; margin-left: -1.1em; }
.sp-wrapline__tok { white-space: nowrap; }
.sp-wrapline__tok::before { content: "\00b7"; display: inline-block; width: 1.1em; text-align: center; color: var(--text-3); }

/* Phone stat captions (R4 P2): "of 495" / "161 answers" — the unit words drop instead of wrapping. */
@media (max-width: 430px) { .sp-long { display: none; } }

/* Unscored section (R4 P2): "Needs 2 more answers and 2 more questions" goes under the title at every width. */
.sp-sec__toggle--note { grid-template-areas: "title chev" "score score" "meta meta"; }
@media (min-width: 768px) {
  .sp-sec__toggle--note { grid-template-areas: "title title chev" "score score score" "meta meta meta"; }
  .sp-sec__toggle--note .sp-sec__score { justify-content: flex-start; white-space: normal; }
}

/* Topic record in the app's centred sheet (R4 P2, ≥768): four figures in one row from 1024, the
   practice button at its own width on the right. */
@media (min-width: 768px) {
  .sp-topic-sheet .sp-sheet__foot { justify-content: flex-end; }
  .sp-topic-sheet .sp-sheet__foot > .btn { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
  .sp-topic-sheet .sp-sheet__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}