/*
 * Hash Design System — app layer
 * ---------------------------------------------------------------
 * The signed-in surface: learner app, parent app, mentor console,
 * admin console, account. Loads after hds-core.css.
 *
 * THE DASHBOARD CONCEPT, stated as rules so it can be checked:
 *
 *   a. A slim navigation area. The rail carries icons and short
 *      labels only; it never becomes a second page.
 *   b. Modular cards. Every block on a dashboard is a card with the
 *      same radius and the same padding scale — courses, progress,
 *      schedule, activity, quick actions.
 *   c. One large feature card per screen, supported by smaller
 *      cards. The feature card is where the primary action lives
 *      (continue a course, join a session, book an assessment).
 *   d. Secondary detail stays reachable but quiet: smaller type,
 *      muted colour, no border weight.
 *   e. Generous spacing. The desk shows through between cards; two
 *      cards never touch.
 *   f. Friendly and personalised: a greeting by name, visual course
 *      thumbnails, rounded everything, one simple icon per row.
 *
 * The concept applies to dashboards. It deliberately does NOT apply
 * to the course player (focus, near-full-bleed), the auth screens
 * (single centred card), the admin data tables (density beats air)
 * or anything in hds-doc / hds-print.
 */

/* ============================================================
   1. SHELL — rail + topbar + main
   <div class="app-shell">
     <aside class="sidenav">…</aside>
     <div class="app-body">
       <header class="topbar">…</header>
       <main class="app-main">…</main>
     </div>
   </div>
============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: 24rem minmax(0, 1fr);
  min-height: 100vh;
  background: var(--sunken);
  --paper: #ffffff;
}
.app-shell.rail { grid-template-columns: 8rem minmax(0, 1fr); }
.app-shell.wide-nav { grid-template-columns: 28rem minmax(0, 1fr); }

.sidenav {
  background: var(--paper);
  border-inline-end: 1px solid var(--edge);
  padding: 2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.sidenav .brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.4rem 1.2rem 2.4rem;
}
.sidenav .brand svg { height: 3.2rem; width: auto; }
.sidenav .nav-label {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2rem 1.2rem 0.8rem;
}
.sidenav .nav-label::before { content: '# '; opacity: 0.55; }
.sidenav .nav-it {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  position: relative;
  color: var(--fg-2);
  font-weight: 600;
  font-size: var(--fs-3);
  padding: 1.1rem 1.2rem;
  border-radius: var(--rad-xs);
  transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.sidenav .nav-it .ico { width: 2.1rem; height: 2.1rem; color: var(--muted); transition: color var(--dur-1) ease; }
.sidenav .nav-it:hover { background: var(--sunken); color: var(--fg); text-decoration: none; }
.sidenav .nav-it:hover .ico { color: var(--fg); }
.sidenav .nav-it.active { background: var(--brand-100); color: var(--brand-ink); font-weight: 700; }
.sidenav .nav-it.active .ico { color: var(--brand-500); }
.sidenav .nav-it .count {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  background: var(--sunken);
  border-radius: var(--rad-pill);
  padding: 0.2rem 0.8rem;
}
.sidenav .nav-it.active .count { background: var(--paper); }
.sidenav .nav-foot { margin-block-start: auto; padding-block-start: 2rem; }

/* the tool variant: dark rail for mentor + admin consoles */
.sidenav.ink {
  background: var(--ink);
  border-inline-end-color: transparent;
  color: rgba(255, 255, 255, 0.72);
}
.sidenav.ink .nav-label { color: rgba(255, 255, 255, 0.4); }
.sidenav.ink .nav-it { color: rgba(255, 255, 255, 0.74); }
.sidenav.ink .nav-it .ico { color: rgba(255, 255, 255, 0.5); }
.sidenav.ink .nav-it:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sidenav.ink .nav-it:hover .ico { color: #fff; }
.sidenav.ink .nav-it.active { background: rgba(255, 255, 255, 0.12); color: #fff;
  box-shadow: inset 0.4rem 0 0 var(--band-yellow); }
.sidenav.ink .nav-it.active .ico { color: var(--band-yellow); }
.sidenav.ink .nav-it .count { background: rgba(255, 255, 255, 0.14); color: #fff; }
.sidenav.ink .person b { color: #fff; }

/* collapsed icon rail */
.rail .sidenav { padding-inline: 0.8rem; align-items: stretch; }
.rail .sidenav .nav-it { justify-content: center; padding-inline: 0; }
.rail .sidenav .nav-it span,
.rail .sidenav .nav-label,
.rail .sidenav .brand b,
.rail .sidenav .count { display: none; }

.app-body { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  background: var(--paper);
  padding: 1.2rem 2.8rem;
  border-block-end: 1px solid var(--edge);
  position: sticky;
  inset-block-start: 0;
  z-index: 400;
}
.topbar .page-title { font-weight: 800; font-size: var(--fs-4); color: var(--fg); margin: 0; }
.topbar .grow { margin-inline-start: auto; }
.t-search {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--sunken);
  border-radius: var(--rad-pill);
  padding: 0.9rem 1.6rem;
  min-inline-size: 0;
  width: min(32rem, 34vw);
}
.t-search .ico { color: var(--muted); width: 1.9rem; height: 1.9rem; }
.t-search input { border: none; background: none; outline: none; font: inherit; font-size: var(--fs-2); width: 100%; min-inline-size: 0; }

.icon-btn {
  position: relative;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  border: none;
  background: var(--sunken);
  color: var(--fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-1) ease;
}
.icon-btn:hover { background: var(--brand-100); color: var(--brand-ink); }
.icon-btn .ico { width: 2rem; height: 2rem; }
.icon-btn .dot {
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-end: 0.7rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--band-orange);
  border: 2px solid var(--paper);
}

.app-main {
  padding: 2.8rem;
  display: grid;
  gap: 2rem;
  align-content: start;
  min-width: 0;
}
.app-main.roomy { padding: 3.6rem; gap: 2.4rem; }

/* mobile: the rail becomes a bottom bar (see .bottom-nav) */
@media (max-width: 1012px) {
  .app-shell, .app-shell.rail, .app-shell.wide-nav { grid-template-columns: minmax(0, 1fr); }
  .sidenav { display: none; }
  .app-main { padding: 1.8rem; }
  .topbar { padding: 1.2rem 1.8rem; }
  .t-search { width: auto; flex: 1; }
}

/* Below 760 the topbar cannot hold a page title and a search field at
   once: the field is a flex item with a zero basis, so it is the thing
   that collapses, and its icon collapses with it. The field is
   replaced by a search button, which is what a phone would show. */
@media (max-width: 760px) {
  .topbar .t-search { display: none; }
  .topbar .page-title { font-size: var(--fs-3); }
  .topbar .search-btn { display: grid; }
}
.topbar .search-btn { display: none; }

/* ============================================================
   2. GREETING — the personalised opener
============================================================ */
.greeting { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
.greeting h2 {
  font-size: var(--fs-6);
  margin: 0;
  letter-spacing: -0.02em;
}
.greeting p { margin: 0.2rem 0 0; color: var(--muted); font-size: var(--fs-3); }
.greeting .grow { margin-inline-start: auto; }

/* ============================================================
   3. DASHBOARD GRID
   .dash is the modular canvas. Children declare their span with
   .span-2 / .span-3 / .span-full — no bespoke grid per page.
============================================================ */
.dash {
  display: grid;
  grid-template-columns: repeat(var(--dash, 6), minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}
.dash > * { grid-column: span 2; min-width: 0; }
.dash > .span-1 { grid-column: span 1; }
.dash > .span-2 { grid-column: span 2; }
.dash > .span-3 { grid-column: span 3; }
.dash > .span-4 { grid-column: span 4; }
.dash > .span-full { grid-column: 1 / -1; }
@media (max-width: 1200px) {
  .dash { --dash: 4; }
  .dash > .span-4, .dash > .span-3 { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .dash { --dash: 1; }
  .dash > * { grid-column: 1 / -1; }
}

/* ============================================================
   4. FEATURE CARD — the one loud block per screen
   Thumbnail + progress + the primary action, in that order.
============================================================ */
.feature-card {
  background: var(--paper);
  border-radius: var(--rad-md);
  border: 1px solid var(--edge);
  padding: 2.4rem;
  display: grid;
  grid-template-columns: 22rem minmax(0, 1fr);
  gap: 2.4rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.feature-card.tinted { background: var(--tint, var(--tint-purple)); border-color: transparent; }
.feature-card .fc-thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--rad-sm);
  background: var(--tint, var(--tint-purple));
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* On a tinted card the thumbnail needs a white plate, or the artwork's
   own tinted ground disappears into the card behind it. */
.feature-card.tinted .fc-thumb { background: var(--paper); }
.feature-card.tinted .fc-thumb svg > rect:first-child { fill: var(--paper); }
.feature-card .fc-thumb svg { width: 100%; height: 100%; display: block; }
.feature-card .fc-body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.feature-card h3 { margin: 0; font-size: var(--fs-6); }
.feature-card .fc-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.feature-card .fc-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-block-start: 0.6rem; }
@media (max-width: 760px) {
  .feature-card { grid-template-columns: 1fr; }
  .feature-card .fc-thumb { aspect-ratio: 16 / 9; }
}

/* ============================================================
   5. STAT TILE — the small supporting card
============================================================ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.6rem;
}
.stat-tile {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--rad-sm);
  padding: 1.8rem 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.stat-tile::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 0.4rem;
  background: var(--accent, var(--brand-400));
}
.stat-tile .st-label {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.stat-tile .st-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1.1;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.stat-tile .st-delta { font-family: var(--font-mono); font-size: var(--fs-1); display: inline-flex; align-items: center; gap: 0.4rem; }
.stat-tile .st-delta.up { color: var(--ok-ink); }
.stat-tile .st-delta.down { color: var(--danger-ink); }
.stat-tile .st-delta.flat { color: var(--muted); }

/* ============================================================
   6. PROGRESS — bar, five-band track, ring
============================================================ */
.progress { display: block; height: 0.9rem; border-radius: var(--rad-pill); background: var(--sunken); overflow: hidden; }
.progress > i { display: block; height: 100%; width: var(--pct, 40%); border-radius: var(--rad-pill);
  background: var(--bar, var(--brand-500)); transition: width var(--dur-3) var(--ease-out); }
/* A bar marked data-grow animates up from zero on load. This is done
   in CSS rather than JavaScript so it cannot get stuck at 0% — an
   animation with `both` finishes at its declared value whether or not
   any script ran, and reduced motion collapses it to the end state. */
.progress > i[data-grow] { animation: hdsGrow var(--dur-3) var(--ease-out) both; }
@keyframes hdsGrow { from { width: 0; } to { width: var(--pct, 40%); } }
.progress.lg { height: 1.4rem; }
.progress.rainbow > i { background: linear-gradient(90deg, var(--band-green), var(--band-yellow),
  var(--band-orange), var(--band-blue), var(--band-purple)); }

/* the five curriculum bands as a completion tracker */
.band-track { display: flex; gap: 0.5rem; }
.progress, .band-track { min-inline-size: 0; }
.band-track > i { height: 0.9rem; flex: 1; border-radius: var(--rad-pill); background: var(--sunken); }
.band-track > i:nth-child(1).done { background: var(--band-green); }
.band-track > i:nth-child(2).done { background: var(--band-yellow); }
.band-track > i:nth-child(3).done { background: var(--band-orange); }
.band-track > i:nth-child(4).done { background: var(--band-blue); }
.band-track > i:nth-child(5).done { background: var(--band-purple); }

/* ring: <div class="ring" style="--pct:72"><b>72%</b></div> */
.ring {
  --size: 8.4rem;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--bar, var(--brand-500)) calc(var(--pct, 40) * 1%), var(--sunken) 0);
}
.ring::before {
  content: '';
  position: absolute;
  inset: 1rem;
  border-radius: 50%;
  background: var(--paper);
}
.ring b { position: relative; font-family: var(--font-mono); font-size: var(--fs-3); color: var(--fg); }
.ring.sm { --size: 5.6rem; }
.ring.sm::before { inset: 0.7rem; }
.ring.sm b { font-size: var(--fs-1); }

/* ============================================================
   7. LESSON + COURSE CARDS (learning app)
============================================================ */
.lesson-card {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--rad-sm);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  transition: transform var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
a.lesson-card:hover { transform: translateY(-0.3rem); box-shadow: var(--shadow-2); text-decoration: none; }
.lesson-card .lc-top { display: flex; align-items: center; gap: 1rem; }
.lesson-card .lc-top .grow { margin-inline-start: auto; }
.lesson-card h4 { margin: 0; font-size: var(--fs-3); }
.lesson-card .lc-meta { font-size: var(--fs-1); color: var(--muted); font-family: var(--font-mono); }
.lesson-card.locked { opacity: 0.6; }

/* a course row in a list, with its thumbnail */
.course-row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.4rem;
  border-radius: var(--rad-sm);
  transition: background var(--dur-1) ease;
  min-width: 0;
}
.course-row:hover { background: var(--sunken); text-decoration: none; }
.course-row .cr-thumb {
  width: 7.2rem;
  height: 5.4rem;
  border-radius: var(--rad-xs);
  background: var(--tint, var(--tint-purple));
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.course-row .cr-thumb svg { width: 100%; height: 100%; display: block; }
.course-row .cr-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.course-row .cr-body b { color: var(--fg); font-size: var(--fs-3); }
.course-row .cr-body span:not([class]) { font-size: var(--fs-1); color: var(--muted); }

/* ============================================================
   8. SCHEDULE + ACTIVITY + QUICK ACTIONS
============================================================ */
.sched-item {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.4rem 0;
  border-block-start: 1px solid var(--edge);
  min-width: 0;
}
.sched-item:first-child { border-block-start: none; padding-block-start: 0; }
.sched-item .when {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--fg);
  background: var(--sunken);
  border-radius: var(--rad-xs);
  padding: 0.8rem 1rem;
  text-align: center;
  line-height: 1.3;
  flex-shrink: 0;
  min-width: 7rem;
}
.sched-item .when b { display: block; font-size: var(--fs-3); }
.sched-item .sd-body { min-width: 0; flex: 1; }
.sched-item .sd-body b { display: block; color: var(--fg); font-size: var(--fs-3); }
.sched-item .sd-body span:not([class]) { font-size: var(--fs-1); color: var(--muted); }
.sched-item.now .when { background: var(--brand-500); color: #fff; }

.activity { display: grid; gap: 0; }
.act-item { display: flex; gap: 1.2rem; padding: 1.2rem 0; align-items: flex-start; min-width: 0; }
.act-item + .act-item { border-block-start: 1px solid var(--edge); }
.act-item .icon-box.sm { background: var(--tint, var(--sunken)); color: var(--accent-ink, var(--brand-ink)); }
.act-item p { margin: 0; font-size: var(--fs-2); color: var(--fg-2); }
.act-item p b { color: var(--fg); }
.act-item time { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--muted); white-space: nowrap; margin-inline-start: auto; }

.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.2rem; }
.quick {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.6rem;
  border-radius: var(--rad-sm);
  background: var(--sunken);
  color: var(--fg);
  font-weight: 700;
  font-size: var(--fs-2);
  transition: background var(--dur-1) ease, transform var(--dur-1) ease;
}
.quick:hover { background: var(--brand-100); color: var(--brand-ink); transform: translateY(-0.2rem); text-decoration: none; }
.quick .ico { width: 2.2rem; height: 2.2rem; color: var(--brand-500); }

/* ============================================================
   9. COURSE PLAYER — deliberately NOT the dashboard look
   Wide, quiet, one column of attention. No cards competing.
============================================================ */
.player-shell { display: grid; grid-template-columns: minmax(0, 1fr) 34rem; gap: 0; min-height: 100vh; background: var(--paper); }
.player-main { min-width: 0; display: flex; flex-direction: column; }
.player-stage {
  aspect-ratio: 16 / 9;
  background: var(--ink);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
}
.player-stage svg { width: 100%; height: 100%; display: block; }
.player-body { padding: 2.8rem 3.2rem 4rem; max-width: 82rem; }
.player-side { border-inline-start: 1px solid var(--edge); padding: 2.4rem 2rem; overflow-y: auto; background: var(--sunken); }
.player-side .label { display: block; margin-bottom: 1.2rem; }
.player-bar {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem 3.2rem;
  border-block-end: 1px solid var(--edge);
  min-width: 0;
}
.player-bar .grow { margin-inline-start: auto; }
@media (max-width: 1012px) {
  .player-shell { grid-template-columns: minmax(0, 1fr); }
  .player-side { border-inline-start: none; border-block-start: 1px solid var(--edge); }
  .player-body, .player-bar { padding-inline: 1.8rem; }
}

/* step list inside the player rail */
.step-list { display: grid; gap: 0.4rem; }
.step-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--rad-xs);
  color: var(--fg-2);
  font-size: var(--fs-2);
  min-width: 0;
}
.step-list a:hover { background: var(--paper); text-decoration: none; }
.step-list a.active { background: var(--paper); color: var(--brand-ink); font-weight: 700; box-shadow: var(--shadow-1); }
.step-list a .n {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--edge);
  color: var(--fg-2);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--fs-1);
  flex-shrink: 0;
}
.step-list a.done .n { background: var(--band-green); color: #fff; }
.step-list a.active .n { background: var(--brand-500); color: #fff; }

/* ============================================================
   10. WORKSHEET — the Logic Series question UI
============================================================ */
.worksheet-q {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--rad-md);
  padding: 2.4rem;
}
.worksheet-q .q-num { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--brand-ink); display: block; margin-bottom: 0.8rem; }
.worksheet-q .q-text { font-size: var(--fs-5); color: var(--fg); font-weight: 700; margin: 0 0 1.8rem; }
.ans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.2rem; }
.ans-opt {
  border: 2px solid var(--edge);
  border-radius: var(--rad-sm);
  padding: 1.6rem;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-4);
  color: var(--fg);
  background: var(--paper);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--dur-1) ease, background var(--dur-1) ease, transform var(--dur-1) ease;
}
.ans-opt:hover { border-color: var(--brand-300); transform: translateY(-2px); }
.ans-opt.selected  { border-color: var(--brand-500); background: var(--brand-100); }
.ans-opt.correct   { border-color: var(--band-green); background: var(--tint-green); }
.ans-opt.incorrect { border-color: var(--danger); background: var(--danger-bg); }

/* ============================================================
   11. DATA TABLE (admin) — density, not air
============================================================ */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-2); }
.data-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: start;
  padding: 1.1rem 1.4rem;
  border-block-end: 1px solid var(--edge);
  white-space: nowrap;
  background: var(--paper);
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}
.data-table td { padding: 1.2rem 1.4rem; border-block-end: 1px solid var(--edge); color: var(--fg-2); vertical-align: middle; }
.data-table tbody tr { transition: background var(--dur-1) ease; }
.data-table tbody tr:hover { background: var(--sunken); }
.data-table tr:last-child td { border-block-end: none; }
.data-table td b { color: var(--fg); }
.data-table .num { text-align: end; font-family: var(--font-mono); }
.data-table .actions { display: flex; gap: 0.4rem; justify-content: flex-end; }

.toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.toolbar .grow { margin-inline-start: auto; }
.pager { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; margin-block-start: 1.6rem; }
.pager a, .pager span {
  min-width: 3.4rem; height: 3.4rem;
  border-radius: var(--rad-xs);
  display: inline-grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--fs-2);
  color: var(--fg-2);
}
.pager a:hover { background: var(--sunken); text-decoration: none; }
.pager a.active { background: var(--ink); color: #fff; }

/* ============================================================
   12. FORM EXTRAS — toggle, steps, notice, empty state
============================================================ */
.toggle { position: relative; width: 4.8rem; height: 2.8rem; display: inline-block; flex-shrink: 0; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle .tk {
  position: absolute;
  inset: 0;
  border-radius: var(--rad-pill);
  background: var(--edge-strong);
  transition: background var(--dur-2) ease;
  pointer-events: none;
}
.toggle .tk::before {
  content: '';
  position: absolute;
  inset-block-start: 0.3rem;
  inset-inline-start: 0.3rem;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) ease;
}
.toggle input:checked + .tk { background: var(--band-green); }
.toggle input:checked + .tk::before { transform: translateX(2rem); }
.toggle input:focus-visible + .tk { outline: 3px solid var(--brand-500); outline-offset: 2px; }

.steps { display: flex; counter-reset: step; }
.step-it {
  flex: 1;
  text-align: center;
  position: relative;
  counter-increment: step;
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--muted);
  padding-block-start: 3.6rem;
}
.step-it::before {
  content: counter(step);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 2.8rem; height: 2.8rem;
  border-radius: 50%;
  background: var(--sunken);
  border: 2px solid var(--edge-strong);
  color: var(--muted);
  font-family: var(--font-mono);
  display: grid; place-items: center;
  z-index: 1;
}
.step-it::after {
  content: '';
  position: absolute;
  inset-block-start: 1.4rem;
  inset-inline-start: calc(50% + 1.8rem);
  inset-inline-end: calc(-50% + 1.8rem);
  height: 2px;
  background: var(--edge);
}
.step-it:last-child::after { display: none; }
.step-it.done { color: var(--fg); }
.step-it.done::before { content: '✓'; background: var(--band-green); border-color: var(--band-green); color: #fff; }
.step-it.current { color: var(--brand-ink); }
.step-it.current::before { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

.notice {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  border-radius: var(--rad-sm);
  padding: 1.6rem 1.8rem;
  font-size: var(--fs-2);
}
.notice .ico { width: 2rem; height: 2rem; margin-block-start: 0.15em; }
.notice b { display: block; }
.notice.info { background: var(--info-bg);   color: var(--info-ink); }
.notice.good { background: var(--ok-bg);     color: var(--ok-ink); }
.notice.warn { background: var(--warn-bg);   color: var(--warn-ink); }
.notice.bad  { background: var(--danger-bg); color: var(--danger-ink); }

.empty-state { text-align: center; padding: 4.4rem 2rem; color: var(--muted); }
.empty-state .glyph { margin: 0 auto 1.4rem; display: inline-block; align-self: center; }
.empty-state b { display: block; color: var(--fg); font-size: var(--fs-4); margin-bottom: 0.4rem; }
.empty-state p { margin: 0 auto 1.8rem; max-width: 40rem; font-size: var(--fs-2); }

/* ============================================================
   13. CHAT / DISCUSSION
============================================================ */
.chat { display: grid; gap: 1.2rem; }
.msg { display: flex; gap: 0.9rem; align-items: flex-end; max-width: 78%; }
.msg .bubble {
  background: var(--sunken);
  border-radius: var(--rad-sm) var(--rad-sm) var(--rad-sm) 0.4rem;
  padding: 1.1rem 1.5rem;
  font-size: var(--fs-2);
  color: var(--fg-2);
}
.msg.me { margin-inline-start: auto; flex-direction: row-reverse; }
.msg.me .bubble { background: var(--brand-500); color: #fff; border-radius: var(--rad-sm) var(--rad-sm) 0.4rem var(--rad-sm); }
.msg time { font-family: var(--font-mono); font-size: 1rem; color: var(--muted); white-space: nowrap; }

/* ============================================================
   14. ACCOUNT — auth card, plan card, settings row
============================================================ */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--sunken);
  padding: 3rem 2rem;
  position: relative;
}
.auth-card {
  width: 100%;
  max-width: 44rem;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--rad-lg);
  padding: 3.6rem 3.6rem 0;
  box-shadow: var(--shadow-2);
  display: grid;
  gap: 1.6rem;
  position: relative;
  overflow: hidden;
}
/* The band strip is the card's masthead: it bleeds to all three top
   edges rather than floating inside the padding. */
.auth-card > .bands.full {
  /* Pinned rather than pulled out with negative margins: a stretched
     grid item plus negative inline margins does not land exactly on
     the padding edge, and the strip ended a few pixels short. Absolute
     positioning against the card is exact, and `overflow: hidden` on
     the card clips it to the top corners. */
  position: absolute;
  inset: 0 0 auto;
  width: auto;
  margin: 0;
  height: 0.6rem;
  gap: 0;
}
.auth-card > .bands.full span { border-radius: 0; }
.auth-card h1 { font-size: var(--fs-6); margin: 0; }
.auth-card .sub { color: var(--muted); font-size: var(--fs-2); margin: -0.8rem 0 0.6rem; }

/* The card used to stop in flat white with the last line floating in
   space. It now closes on a tinted footer that runs the full width,
   so the card reads as finished rather than cut off. */
.auth-alt {
  margin: 1.4rem -3.6rem 0;
  padding: 1.8rem 3.6rem;
  background: var(--sunken);
  border-block-start: 1px solid var(--edge);
  text-align: center;
  font-size: var(--fs-2);
  color: var(--muted);
}
.auth-alt a { font-weight: 700; }

.plan-card {
  background: var(--paper);
  border: 2px solid var(--edge);
  border-radius: var(--rad-md);
  padding: 2.4rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.plan-card.active { border-color: var(--brand-500); }
.plan-card .current-pill {
  position: absolute;
  inset-block-start: -1.2rem;
  inset-inline-end: 2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-weight: 700;
  background: var(--brand-500);
  color: #fff;
  border-radius: var(--rad-pill);
  padding: 0.4rem 1.2rem;
}
.plan-card h4 { margin: 0; }
.plan-card .plan-line { font-family: var(--font-mono); font-size: var(--fs-2); color: var(--brand-ink); }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.8rem 0;
  border-block-end: 1px solid var(--edge);
}
.setting-row:last-child { border-block-end: none; }
.setting-row b { display: block; color: var(--fg); font-size: var(--fs-3); }
/* see the note on `.person` in hds-core.css — a settings row can hold
   an avatar, a chip or a status, and a bare `span` selector would
   flatten every one of them */
.setting-row span:not([class]) { color: var(--muted); font-size: var(--fs-2); }

/* ============================================================
   15. MOBILE FRAME
   Renders any app markup inside a phone-sized viewport so a mobile
   layout can be reviewed on a desktop page.
============================================================ */
.phone-row { display: flex; gap: 3.2rem; flex-wrap: wrap; justify-content: center; }
.phone {
  width: 34rem;
  border-radius: 4.6rem;
  background: var(--ink);
  padding: 1.2rem;
  box-shadow: var(--shadow-3);
  flex-shrink: 0;
}
.phone-screen {
  background: var(--paper);
  border-radius: 3.6rem;
  overflow: hidden;
  height: 68rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.phone-notch { height: 2.8rem; display: grid; place-items: center; flex-shrink: 0; }
.phone-notch::before { content: ''; width: 9rem; height: 2rem; border-radius: var(--rad-pill); background: var(--ink); }
.phone-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.4rem;
  /* flex column, not grid: a grid row inside a scrolling flex item
     resolves an aspect-ratio child against a zero content height and
     collapses the card. Flex sizes every child from its own content. */
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  background: var(--sunken);
  scrollbar-width: none;
}
.phone-body::-webkit-scrollbar { display: none; }
.phone-body > * { flex: 0 0 auto; }
.phone-label { text-align: center; font-family: var(--font-mono); font-size: var(--fs-1); color: var(--muted); margin-block-start: 1.2rem; }

.bottom-nav { display: flex; border-block-start: 1px solid var(--edge); background: var(--paper); flex-shrink: 0; }
/* the page-level bottom bar replaces the rail, so it only exists at
   the width where the rail is hidden */
@media (min-width: 1013px) { .bottom-nav.app-bottom { display: none; } }
.bottom-nav a {
  flex: 1;
  text-align: center;
  padding: 1rem 0 1.4rem;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  min-width: 0;
}
.bottom-nav a .ico { display: block; margin: 0 auto 0.3rem; width: 2.1rem; height: 2.1rem; }
.bottom-nav a.active { color: var(--brand-ink); }
.bottom-nav a:hover { text-decoration: none; }

/* inside a phone, the dashboard collapses to one column regardless
   of the outer viewport — container-relative, not viewport-relative */
.phone-body .dash { --dash: 1; }
.phone-body .dash > * { grid-column: 1 / -1; }
.phone-body .feature-card { grid-template-columns: 1fr; padding: 1.6rem; gap: 1.4rem; }
.phone-body .feature-card .fc-thumb { aspect-ratio: 16 / 9; }
.phone-body .tile-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
.phone-body .panel { padding: 1.6rem; border-radius: var(--rad-sm); }
.phone-body h3, .phone-body .feature-card h3 { font-size: var(--fs-4); }
.phone-body .stat-tile .st-value { font-size: 2.2rem; }