/* ══════════════════════════════════════════════════════════════════════════
   BARRE — genuinely one-off, screen-specific rules
   Anything reusable belongs in components.css.
   ══════════════════════════════════════════════════════════════════════ */

/* ── TODAY ─────────────────────────────────────────────────────────────── */
.s-today__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-12);
  padding: 0 var(--gutter);
}
.s-today__greeting { font: var(--font-display-screen-t); margin-top: var(--space-5); }
/* The second and third techniques of a focus. Same face as the quote it sits
   under, a step quieter, so the card still has one title. */
.s-today__focusalso { color: var(--text-on-inverse-55); margin-top: var(--space-5); }

/* ── MOVE DETAIL ───────────────────────────────────────────────────────── */
.s-move__top {
  display: flex; align-items: center; gap: var(--space-10);
  padding: 0 var(--gutter);
}
.s-move__why { font: var(--font-body-lg); color: var(--text-muted); margin-top: var(--space-10); }
/* The way on from a dead deep link. Matches .s-me__actions so the button sits
   on the same gutter as the heading above it; .b-pill--outline in a11y.css
   already takes it to the 44px target. */
.s-move__missing-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-7);
  padding: var(--space-14) var(--gutter) 0;
}
.s-move__stage { padding: var(--space-17) var(--gutter) 0; }
.s-move__stage .b-kicker { letter-spacing: var(--ls-narrow); margin-bottom: var(--space-8); }
.s-move__formatswitch {
  display: flex; justify-content: flex-end;
  padding: var(--space-14) var(--gutter) 0;
}

/* ── SKILLS ────────────────────────────────────────────────────────────── */
.s-skills__blurb { font: var(--font-body-tight); color: var(--text-muted); margin-top: var(--space-8); }
.s-skills__switch { padding-top: var(--space-14); }
.s-skills__weakest { margin: var(--space-18) var(--gutter) 0; }
.s-skills__cta { margin-top: var(--space-11); }
.s-skills__knowledgeline { margin-top: 0; margin-bottom: var(--space-8); }
.s-skills__knowledgeline strong { font-weight: 500; color: var(--text-ink); }

/* FOUR stage columns, not three. A move at stage `none` used to appear in no
   column at all while still counting against its category's bar. */
.s-skills__grid { padding: var(--space-17) var(--space-14) 0; }
.s-skills__gridhead {
  display: grid; grid-template-columns: 74px repeat(4, minmax(0, 1fr)); gap: var(--space-3);
  align-items: end;
  padding: 0 var(--space-4) var(--space-6);
}
.s-skills__col {
  font: var(--font-microlabel-2);
  letter-spacing: var(--ls-tighter);
  text-transform: uppercase;
  color: var(--text-kicker);
  text-align: center;
}
.s-skills__rows { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-4); }
.s-skills__row {
  display: grid; grid-template-columns: 74px repeat(4, minmax(0, 1fr)); gap: var(--space-3);
  align-items: stretch;
}
.s-skills__rowlabel { font: var(--font-label-grid); display: flex; align-items: center; }
.s-skills__cell {
  height: 52px;
  border-radius: var(--radius-md-2);
  border: 1px solid var(--border-cell-empty);
  background: var(--surface-cell-empty);
  color: var(--text-disabled);
  font: var(--font-display-num);
  display: flex; align-items: center; justify-content: center;
}
.s-skills__cell[data-kind="none"][data-n]      { background: var(--status-none-bg);      border-color: var(--status-none-bd);      color: var(--status-none-fg); }
.s-skills__cell[data-kind="learning"][data-n]  { background: var(--status-learning-bg);  border-color: var(--status-learning-bd);  color: var(--status-learning-fg); }
.s-skills__cell[data-kind="ready"][data-n]     { background: var(--status-ready-bg);     border-color: var(--status-ready-bd);     color: var(--status-ready-fg); }
.s-skills__cell[data-kind="performed"][data-n] { background: var(--status-performed-bg); border-color: var(--status-performed-bd); color: var(--status-performed-fg); }
.s-skills__foot { padding: var(--space-12) var(--space-4) 0; font: var(--font-body-xxs); color: var(--text-faint); }

/* Radar — geometry lives in components/radar.js, colour lives here so the
   chart is drawn in tokens like everything else. */
.s-radar { padding: var(--space-12) var(--gutter) 0; display: flex; flex-direction: column; align-items: center; }
.s-radar__wrap { position: relative; width: 100%; max-width: 330px; }
.s-radar__wrap svg { width: 100%; display: block; overflow: visible; }

.s-radar__ring  { fill: none; stroke: var(--border-card); stroke-width: 1; }
.s-radar__spoke { stroke: var(--surface-sunken); stroke-width: 1; }
.s-radar__poly {
  fill: var(--accent-radar-fill);
  stroke: var(--accent-rose);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: all var(--dur-bar-slow) var(--ease);
}
.s-radar__dot { fill: var(--accent-rose); }
/* A category with no moves in scope: drawn, but visibly hollow. */
.s-radar__dot--empty { fill: var(--surface-app); stroke: var(--border-muted); stroke-width: 1.5; }

/* Labels are HTML over the SVG, not <text>, so they inherit the type scale.
   Only the two anchor coordinates come from the data. */
.s-radar__label {
  position: absolute;
  left: var(--radar-l); top: var(--radar-t);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  text-align: center;
}
.s-radar__label[data-shift="left"]  { transform: translateY(-50%);        text-align: left; }
.s-radar__label[data-shift="right"] { transform: translate(-100%, -50%);  text-align: right; }
.s-radar__cat { font: var(--font-label-node); color: var(--text-muted); }
.s-radar__pct { font: var(--font-tiny); color: var(--text-label); margin-top: var(--space-1); }
.s-radar__cap { font: var(--font-body-xs); color: var(--text-faint); text-align: center; padding-top: var(--space-4); }

/* ── QUIZ ──────────────────────────────────────────────────────────────── */
.s-quiz__head { display: flex; align-items: center; gap: var(--space-10); padding: 0 var(--gutter); }
.s-quiz__counter { font: var(--font-meta-plain); color: var(--text-faint); flex: none; }
.s-quiz__kicker { padding: var(--space-19) var(--gutter) 0; }
.s-quiz__question { font: var(--font-display-question); padding: var(--space-17) var(--gutter) 0; }
.s-quiz__kicker + .s-quiz__question { padding-top: var(--space-9); }
.s-quiz__options { display: flex; flex-direction: column; gap: var(--space-7); padding: var(--space-16) var(--gutter) 0; }

/* Answered state: the explainer and the one way forward. */
.s-quiz__after { padding: 0 var(--gutter); }
.s-quiz__srs {
  font: var(--font-body-xxs);
  color: var(--text-faint);
  margin-top: var(--space-8);
}
.s-quiz__next { width: 100%; margin-top: var(--space-12); padding: var(--space-13) var(--space-18); }

/* Result */
.s-quiz__done { padding: var(--space-21) var(--gutter) 0; text-align: center; }
.s-quiz__score { font: var(--font-display-hero); text-align: center; animation: pop .5s var(--ease); }
.s-quiz__suffix { font: var(--font-glyph-lg); color: var(--text-label); }
.s-quiz__verdict { font: var(--font-display-result); margin-top: var(--space-10); }
.s-quiz__note { font: var(--font-body-note); color: var(--text-muted); margin-top: var(--space-8); }
.s-quiz__missed {
  margin-top: var(--space-17);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
}
.s-quiz__missed .b-kicker { margin-bottom: var(--space-1); }
.s-quiz__boundary {
  margin-top: var(--space-17);
  padding: var(--space-14);
  border-radius: var(--radius-card);
  background: var(--surface-tint);
  border: 1px solid var(--border-card);
  font: var(--font-body-sm);
  color: var(--text-body);
  text-align: left;
}
.s-quiz__actions {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-10);
  margin-top: var(--space-17);
}
.s-quiz__best { font: var(--font-body-xxs); color: var(--text-label); margin-top: var(--space-14); }

/* ── ME ────────────────────────────────────────────────────────────────── */
.s-me__head { display: flex; align-items: center; gap: var(--space-12); padding: 0 var(--gutter); }
.s-me__name { font: var(--font-display-panel); }
.s-me__school { font: var(--font-meta-xs); color: var(--text-faint); margin-top: var(--space-2); }
.s-me__build {
  padding: var(--space-19) var(--gutter) 0;
  font: var(--font-body-xxs);
  color: var(--text-label);
}
.s-me__actions { display: flex; flex-wrap: wrap; gap: var(--space-7); padding: var(--space-12) var(--gutter) 0; }
.s-me__restline { margin-top: 0; }
.s-me__restline strong { font-weight: 500; color: var(--text-ink); }
.s-me__nudge { padding: var(--space-10) var(--gutter) 0; }

/* Activity feed — rows are a record, not a control surface. */
.s-me__recent .b-recent { cursor: default; }

/* Settings cards: a form inside a card, so the card's own padding is the
   form's gutter and nothing inside sets a margin of its own. */
.s-me__settings { display: flex; flex-direction: column; }
.s-me__settings .b-card__note { margin-top: 0; margin-bottom: var(--space-10); }

/* ── SHARED FORM CONTROLS (setup + Me settings) ────────────────────────────
   The app had no text inputs until the dancer could name herself, so there is
   no component for one. These stay here rather than in components.css because
   they are used by exactly two screens, and both of them are the same form. */

.s-form__label {
  display: block;
  font: var(--font-eyebrow);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--text-kicker);
  margin-bottom: var(--space-5);
}
.s-form__label--spaced { margin-top: var(--space-14); }

.s-form__input,
.s-form__select,
.s-form__textarea {
  width: 100%;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  color: var(--text-ink);
  font: var(--font-body-lg);
  padding: var(--space-11) var(--space-12);
  /* base.css sets `user-select: none` on everything carrying [data-action] —
     right for buttons, wrong for a field you type in, and on iOS it takes the
     caret with it. These are the only [data-action] elements in the app whose
     job is text. */
  user-select: text;
  -webkit-user-select: text;
  appearance: none;
  -webkit-appearance: none;
}
.s-form__input::placeholder,
.s-form__textarea::placeholder { color: var(--text-hint); }
.s-form__input:focus,
.s-form__select:focus,
.s-form__textarea:focus { border-color: var(--accent-rose); }

/* A date field is a native control; let it keep its own picker affordance. */
.s-form__input--date { appearance: auto; -webkit-appearance: none; min-height: 46px; }
.s-form__textarea { resize: vertical; min-height: 72px; font: var(--font-body); }

/* The one control with a native arrow worth keeping. */
.s-form__select { appearance: auto; -webkit-appearance: auto; }

.s-form__hint { margin-top: var(--space-5); }
.s-form__value { font: var(--font-body-lg); color: var(--text-ink); margin-top: var(--space-2); }

.s-form__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-10);
  margin-top: var(--space-14);
}
.s-form__row--end { margin-top: var(--space-14); }

.s-form__panel {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-divider);
}

/* Chips WRAP here. The filter rows in components.css scroll sideways because
   they are one row of five; a class list is twenty-two across three tracks and
   a sideways scroller would hide half of it behind an edge. */
.s-form__chips {
  display: flex; flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.s-form__chips--chosen { margin-bottom: var(--space-6); }
.s-form__chip--on {
  background: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.s-form__group { margin-top: var(--space-14); }
.s-form__grouphead { font: var(--font-display-sub); }
.s-form__track { margin-top: var(--space-10); }
.s-form__tracklab {
  font: var(--font-label-seg);
  letter-spacing: var(--ls-min);
  text-transform: uppercase;
  color: var(--text-faint);
}
.s-form__chosen { margin-top: var(--space-14); }

/* ── SETUP (first run) ─────────────────────────────────────────────────────
   One column, one question at a time. No card: the whole screen is the card. */
.s-setup__head { padding: var(--space-14) var(--gutter) 0; }
.s-setup__dots { display: flex; gap: var(--space-4); margin-top: var(--space-14); }
.s-setup__dot {
  width: 26px; height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border-muted);
}
.s-setup__dot[data-filled="1"] { background: var(--accent-rose); }

.s-setup__body { padding: var(--space-17) var(--gutter) 0; }
.s-setup__body .t-body { margin-bottom: var(--space-16); }
.s-setup__body .s-form__label { margin-top: var(--space-14); }

.s-setup__foot { padding: var(--space-21) var(--gutter) 0; }
.s-setup__nav { display: flex; gap: var(--space-7); align-items: center; }
.s-setup__nav .b-pill--solid { margin-left: auto; }
.s-setup__skip {
  display: block;
  margin-top: var(--space-14);
  font: var(--font-body-sm);
  text-align: left;
}
/* Room to scroll clear of the home indicator — this screen has no tab bar. */
.s-setup__tail { height: 40px; }