/* CLIENT DASHBOARD — design file for this surface ONLY.
 *
 * Deliberately NOT shared with the other surfaces. The owner's call: each of
 * the four (public website, course portal, client dashboard, admin console)
 * owns its own design file, so a change made for one can never reach into
 * another and break it.
 *
 * The trade-off is stated rather than hidden: four files carrying similar
 * intent WILL drift unless changed together. When a rule below is edited for
 * brand reasons rather than for something specific to this surface, the same
 * edit probably belongs in the other three.
 *
 * Tokens fall back to literals, so this file renders correctly on its own and
 * inherits the measured palette (including dark mode) where one is present.
 */

/* ── The lede ─────────────────────────────────────────────────────────────
   The reference opens with a SENTENCE, not a number: it says what happened and
   leaves the figures below as the evidence. A page of numbers alone makes the
   reader do the interpreting every time. */
.lede {
  font: 400 16.5px/1.6 var(--sans, 'IBM Plex Sans', system-ui, sans-serif);
  color: var(--dim, #5B6679);
  margin: 2px 0 16px;
  max-width: 74ch;
}
.lede b { color: var(--txt, #0B1220); font-weight: 600; }

/* ── Labels as furniture ──────────────────────────────────────────────────
   Small, heavy, tracked wide. They stop competing with the data they
   introduce, which is what lets the data sit forward. */
.ph { letter-spacing: .14em; font-size: 10px; }
.ph .x { letter-spacing: 0; }

/* ── The bordered stat grid ───────────────────────────────────────────────
   One rounded container divided by hairlines, not cards floating in space, so
   a row of figures reads as a single instrument rather than scattered parts. */
.sgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 0; border: 1px solid var(--line, #E3E8EF);
  border-radius: var(--r-panel, 12px);
  background: var(--panel, #FFFFFF);
  overflow: hidden; margin: 12px 0;
}
.sgrid > .stat {
  padding: 16px 18px 17px; display: flex; flex-direction: column; gap: 5px;
  min-height: 104px;
  border-right: 1px solid var(--line, #E3E8EF);
  border-bottom: 1px solid var(--line, #E3E8EF);
}
.sgrid > .stat:last-child { border-right: 0; }
.sgrid .stat-l {
  font: 600 9.5px var(--sans, 'IBM Plex Sans', system-ui, sans-serif);
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint, #616A77);
}
.sgrid .stat-v {
  font: 600 27px/1.05 var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  letter-spacing: -.04em; color: var(--txt, #0B1220);
  font-variant-numeric: tabular-nums;
}
.sgrid .stat-s {
  font: 400 12px var(--sans, 'IBM Plex Sans', system-ui, sans-serif);
  color: var(--dim, #5B6679); margin-top: auto;
}

@media (max-width: 640px) {
  .lede { font-size: 15px; margin-bottom: 12px; }
  .sgrid > .stat { padding: 13px 14px; min-height: 88px; }
  .sgrid .stat-v { font-size: 23px; }
}