/* CertaRounds — Specialties screen styles (src/screens/specialties.js). Owned by its M3 screen agent.
   Semantic tokens only (docs/COMPONENTS.md §2); scope every rule under a screen class.
   .spx-bar / .spx-tone--* / .spx-due are shared with the detail screen (specialty.css). */

.spx { display: flex; flex-direction: column; gap: var(--sp-4); }
.spx .page-header { margin-bottom: 0; }
.spx-head .page-header__sub { max-width: 60ch; }

/* ---------- shared bits ---------- */
.spx-bar { display: block; min-width: 0; }
.spx-bar .progress { gap: 0; }
.spx-tone--success { color: var(--success); }
.spx-tone--primary { color: var(--text-accent); }
.spx-tone--warning { color: var(--warning); }
.spx-tone--neutral { color: var(--text-3); }
/* R4 P2: due counts are plain ink, semibold, on every layout (violet read as a link; nothing here is one). */
.spx-due, .spx-key { color: var(--text); font-weight: var(--fw-semibold); }

/* D16 one-line meta (meta1): unbroken tokens; the "·" is drawn BEFORE each token after the first,
   and the box is clipped to one line — a token that doesn't fit wraps onto the hidden second line
   and disappears with its own dot, so the visible line never wraps and never ends with "·".
   Tokens come in priority order, so the least important ones are the ones that drop. */
.spx-meta1 {
  display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0;
  line-height: 1.35; max-height: 1.35em; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.spx-tok { white-space: nowrap; flex: 0 0 auto; }
.spx-tok + .spx-tok::before { content: "\00b7"; color: var(--text-3); font-weight: var(--fw-regular); margin: 0 .4em; }
.spx-tok--quiet { color: var(--text-3); }

/* ---------- sort chips ---------- */
.spx-sort { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
/* R2 P2 (D6): the six sorts wrap instead of scrolling, so none is hidden off-screen at 360–390. */
.spx-sort__row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  padding-top: 4px; padding-bottom: 4px;       /* room for the focus ring */
}
.spx-sort__chips { flex-wrap: wrap; row-gap: var(--sp-2); }
@media (max-width: 767px) { .spx-sort__chips { row-gap: 10px; } }   /* F4: phone chip hit areas (46 px) never overlap */
.spx-sort__chips > .chip { flex: 0 0 auto; }
.spx-sort__label {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-2);
  margin-right: 2px;
}
.spx-sort__hint { font-size: var(--fs-13); color: var(--text-3); line-height: 1.45; }
.spx-sort__hint .info-dot { margin-left: 2px; vertical-align: -6px; }

/* ---------- fresh learner note ---------- */
.spx-fresh {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: start;
}
.spx-fresh__gem { display: inline-flex; margin-top: 2px; }
.spx-fresh__title { font-size: var(--fs-15); line-height: var(--lh-snug); }
.spx-fresh__text { margin-top: 2px; font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; }
@media (min-width: 768px) {
  .spx-fresh__title { font-size: var(--fs-17); }
  .spx-fresh__text { font-size: var(--fs-15); }
}
.spx-fresh__cta { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .spx-fresh { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .spx-fresh__cta { grid-column: auto; }
}

/* ---------- phone list ---------- */
.spx-list { overflow: hidden; }
/* Column header: names the phone % ("Mastery"); its right edge lines up with the score column
   (row padding 12 + chevron 18 + gap 12). */
.spx-list__head {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: 10px 42px 8px var(--sp-4); border-bottom: 1px solid var(--divider);
  font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-3); letter-spacing: .02em;
}
.spx-list__ul > li + li { border-top: 1px solid var(--divider); }
/* R5 P1: name beside the score; the bar and the ONE meta line each run full width under both, so every
   row draws its bar on the same track (bars compare across rows) and "5 due today · 38 overdue" fits.
   (Before, the track was the name column and changed with the width of each row's score column.) */
.spx-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 18px;
  grid-template-areas: "gem name score chev" "gem bar bar chev" "gem meta meta chev";
  align-items: center;
  column-gap: var(--sp-3); row-gap: 5px;
  min-height: 72px;
  padding: 10px var(--sp-3) 10px var(--sp-4);
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out);
}
.spx-row:hover { background: var(--surface-hover); text-decoration: none; }
.spx-row:active { background: var(--surface-pressed); }
.spx-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: var(--r-sm); }
.spx-row__gem { grid-area: gem; display: inline-flex; align-self: start; margin-top: 2px; }
.spx-row__main { display: contents; }
.spx-row__name {
  grid-area: name; align-self: center;
  font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong);
  line-height: var(--lh-snug); overflow-wrap: break-word;
}
.spx-row > .spx-row__main > .spx-bar { grid-area: bar; align-self: center; margin-top: 2px; }
.spx-row__meta { grid-area: meta; font-size: var(--fs-13); color: var(--text-2); }
/* Wrapping meta (hero facts): tokens never break inside; the dot ends the previous token. */
.spx-mi { white-space: nowrap; }
.spx-mi .spx-dot { color: var(--text-3); }
/* "Needs 4 more answers" in the stat slot (the full rule is in its title / screen-reader text). */
.spx-row__status.spx-row__need { max-width: 88px; white-space: normal; text-align: right; line-height: 1.3; }
.spx-row__score { grid-area: score; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 64px; text-align: right; }
.spx-row__raw { font-size: var(--fs-12); color: var(--text-2); line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
.spx-row__raw.is-weak { color: var(--warning); font-weight: var(--fw-semibold); }
/* "9 more answers for Strong" (R4 P2, phones too): quiet, may take two short lines in the score column. */
.spx-row__raw.is-quiet { color: var(--text-3); white-space: normal; max-width: 84px; text-align: right; }
.spx-row__pct {
  font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--text-strong);
  letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.spx-row__status {
  display: inline-flex; align-items: center; gap: 3px;
  justify-content: flex-end;
  font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 1.25; max-width: 100%;
}
.spx-row__status.spx-tone--neutral { font-weight: var(--fw-medium); }
.spx-row__chev { grid-area: chev; color: var(--text-3); }

/* ---------- card grid (tablet / desktop) ---------- */
.spx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
  gap: var(--sp-4);
}
.spx-grid__cell { display: flex; min-width: 0; }
.spx-card {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: var(--sp-2);
  --card-p: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  text-decoration: none; color: var(--text);
}
.spx-card:hover { text-decoration: none; }
.spx-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.spx-card__gem { display: inline-flex; }
/* R2 P2: every name block reserves two lines under the gem, so one-line names no longer open a
   ~65 px band above them; the score row takes the free space (margin-top: auto), so values still
   align across a row even when a name needs a third line. */
.spx-card__name {
  flex: 0 0 auto; min-height: calc(2 * var(--lh-snug) * 1em);
  font-size: var(--fs-17); font-weight: var(--fw-semibold); color: var(--text-strong);
  line-height: var(--lh-snug); letter-spacing: -0.01em; overflow-wrap: break-word;
}
.spx-card__score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-height: 30px; margin-top: auto; padding-top: var(--sp-1); }
.spx-card__pct {
  font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--text-strong);
  letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.spx-card__unit { font-size: var(--fs-13); color: var(--text-3); }
.spx-card__na { font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--text-3); line-height: var(--lh-snug); align-self: flex-end; }
.spx-card__meta { font-size: var(--fs-13); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (min-width: 1024px) {
  .spx { gap: var(--sp-5); }
  .spx-grid { gap: var(--sp-5); }
  .spx-sort__row { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}

/* ---------- card lower block (R4 P2, D5): fixed heights under the big number ----------
   note line (reserved) · bar · footer of two lines (the sort key, then seen). With the score pushed
   down by margin-top:auto, the big numbers share one baseline across a row of cards. */
.spx-card__note {
  display: block; min-height: calc(1.35 * 1em); margin-top: -4px;
  font-size: var(--fs-13); line-height: 1.35; color: var(--text-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.spx-card__note.is-weak { color: var(--warning); font-weight: var(--fw-semibold); }
.spx-card__note.is-quiet { color: var(--text-3); }
.spx-card__ghost { display: block; visibility: hidden; }
.spx-card__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 2px; min-width: 0; }
.spx-card__key { font-size: var(--fs-13); color: var(--text-2); }

/* ---------- phone rows without a score ---------- */
/* Same three-line shape as a scored row (an empty bar slot, no grey bar), so the status sits where the
   mastery block sits on populated rows and the meta line keeps its full width. */
.spx-row__ghost { height: 6px; }