/* ============================================================================
 * cm-mobile.css — Cube Mobile Home visual skin (v1), PRESENTATION ONLY.
 *
 * Reuses the `cm-` visual language from /cubo/mobile/ (the UX lab) as a SHARED,
 * reusable stylesheet. It restyles the EXISTING /cube/student/home/ markup for a
 * mobile-native feel and adds two mobile-only chrome elements (a 5-tab bottom nav
 * and an honest "streak coming soon" preview card).
 *
 * GUARANTEES:
 *  - No JavaScript, no data binding, no logic. Pure CSS + the markup it targets.
 *  - Desktop is byte-for-byte unaffected: every rule that touches existing
 *    elements lives INSIDE `@media (max-width:720px)`; the only base rule hides
 *    the new mobile-only chrome (`.cm-mobile-only{display:none}`).
 *  - Tokens/values mirror /cubo/mobile/ but NO logic is copied from it.
 * ========================================================================== */

/* Base (all widths): mobile-only chrome hidden → desktop shell unchanged. */
.cm-mobile-only { display: none; }

@media (max-width: 720px) {
  :root {
    --cm-bg:        #0c1020;
    --cm-bg-2:      #131734;
    --cm-bg-3:      #20264e;
    --cm-fg:        #f7f9ff;
    --cm-fg-dim:    #b7c0e8;
    --cm-fg-mute:   #7a83a8;
    --cm-accent:    #8a6dff;
    --cm-accent-2:  #a99aff;
    --cm-accent-dim:rgba(138,109,255,.18);
    --cm-line:      #2c335a;
    --cm-card:      #161b39;
    --cm-card-border: rgba(255,255,255,.06);
    --cm-card-elev: 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.22);
    --cm-warn:      #ffc185;
    --cm-warn-dim:  rgba(255,193,133,.14);
    --cm-ok:        #82ecbc;
    --cm-radius-card: 16px;
    --cm-radius-btn:  14px;
    --cm-safe-top:    env(safe-area-inset-top, 0px);
    --cm-safe-bottom: env(safe-area-inset-bottom, 0px);
    --cm-tab-h:       60px;
  }

  /* Un-hide mobile-only chrome (component rules below set flex where needed). */
  .cm-mobile-only { display: block; }

  /* ── Canvas ── */
  html, body { overflow: auto; background: var(--cm-bg); color: var(--cm-fg); }

  /* ── Collapse the desktop shell; bottom nav replaces the big sidebar ── */
  .app-shell   { display: block; height: auto; }
  .sidebar     { display: none; }
  .right-column{ display: block; height: auto; }

  /* ── Compact dark topbar (identity preserved) ── */
  .topbar {
    position: sticky; top: 0; z-index: 40;
    background: var(--cm-bg-2); border-bottom: 1px solid var(--cm-line);
    padding: calc(10px + var(--cm-safe-top)) 14px 10px;
  }
  .school-name, .user-name { color: var(--cm-fg); }
  .school-sub, .user-role  { color: var(--cm-fg-mute); }
  .user-box { background: var(--cm-bg-3); border-color: var(--cm-line); }

  /* ── Page content: leave room for the fixed bottom nav + safe area ── */
  .page-content {
    background: var(--cm-bg);
    padding: 14px;
    padding-bottom: calc(var(--cm-tab-h) + var(--cm-safe-bottom) + 20px);
  }

  /* ── Hero → tighter cm card rhythm (gradient kept) ── */
  .hero { border-radius: 20px; padding: 20px 18px; box-shadow: var(--cm-card-elev); }
  .hero-title { font-size: 22px; }
  .hero-sub { font-size: 14px; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }

  /* ── Cards on the dark canvas ── */
  .next-card, .work-card, .side-card, #snap-card, .practice-card, .empty {
    background: var(--cm-card);
    border-color: var(--cm-card-border);
    color: var(--cm-fg);
    box-shadow: var(--cm-card-elev);
    border-radius: var(--cm-radius-card);
  }
  .next-card { grid-template-columns: 1fr; gap: 12px; }
  .next-cta { justify-content: flex-end; }
  .next-title, .work-title, .side-card h3, .snap-row strong, .snap-stat .value { color: var(--cm-fg); }
  .next-desc, .work-meta, .sec-meta, .side-card p, .snap-row, .empty, .snap-stat .label { color: var(--cm-fg-dim); }
  .empty { border-color: var(--cm-line); }
  .empty strong { color: var(--cm-fg); }
  .sec-title { color: var(--cm-fg); font-size: 16px; }
  .sec-link  { color: var(--cm-accent-2); }
  .snap-bar, .next-progress .progress-bar { background: var(--cm-bg-3); }
  .snap-stat { background: var(--cm-bg-3); border-color: var(--cm-line); }
  .work-glyph { background: linear-gradient(135deg, var(--cm-accent-dim), rgba(169,154,255,.12)); }

  /* ── Buttons: ≥44px touch targets ── */
  .btn { min-height: 44px; }
  .btn:not(.primary):not(.ghost) {
    background: var(--cm-bg-3); color: var(--cm-fg); border-color: var(--cm-line);
  }
  .cta-strip { gap: 8px; }
  .cta-strip .btn { flex: 1 1 auto; justify-content: center; }

  /* ── Single-column content ── */
  .home-layout { grid-template-columns: 1fr; gap: 14px; }
  .home-main, .home-side { gap: 14px; }

  /* ── Mobile-only: 5-tab bottom navigation (HTML/CSS only) ── */
  .cm-bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--cm-bg-2); border-top: 1px solid var(--cm-line);
    padding: 6px 6px calc(6px + var(--cm-safe-bottom));
    justify-content: space-around;
  }
  .cm-tab {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-height: 44px; padding: 6px 2px;
    text-decoration: none; color: var(--cm-fg-mute);
    font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  }
  .cm-tab[aria-current="page"], .cm-tab.active { color: var(--cm-accent-2); }
  .cm-tab .cm-tab-ico { font-size: 19px; line-height: 1; }

  /* ── Mobile-only: honest streak preview (no fabricated number) ── */
  .cm-streak-preview {
    display: flex; align-items: center; gap: 12px;
    background: var(--cm-card); border: 1px solid var(--cm-card-border);
    border-radius: var(--cm-radius-card); padding: 14px 16px;
    box-shadow: var(--cm-card-elev);
  }
  .cm-streak-ico { font-size: 24px; line-height: 1; flex-shrink: 0; }
  .cm-streak-copy h3 { margin: 0 0 2px; font-size: 15px; font-weight: 800; color: var(--cm-fg); }
  .cm-streak-copy p  { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--cm-fg-dim); }
  .cm-streak-tag {
    margin-left: auto; align-self: flex-start;
    background: var(--cm-warn-dim); color: var(--cm-warn);
    border-radius: 999px; padding: 4px 10px; font-size: 10.5px; font-weight: 800;
    white-space: nowrap;
  }
}

/* ============================================================================
 * CM.3 — Mobile semantic home cards (presentation only).
 * Mobile-only: the 6 semantic sections replace the desktop two-column content
 * under 720px; desktop is untouched (base rule hides .cm-sem-home).
 * Data binding is done by the EXISTING home renderer over the SAME getData()
 * result — these are styles only.
 * ========================================================================== */

.cm-sem-home { display: none; }   /* desktop: hidden (semantic home is mobile-only) */

@media (max-width: 720px) {
  /* Replace the desktop content with the semantic home on mobile. */
  .cta-strip, .home-layout { display: none; }
  .cm-sem-home { display: grid; gap: 16px; margin-top: 4px; }

  .cm-section { display: grid; gap: 10px; }
  .cm-section-head { display: flex; align-items: center; gap: 8px; }
  .cm-section-label {
    margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cm-fg-mute);
  }
  .cm-section-tag {
    font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--cm-accent-2); background: var(--cm-accent-dim);
    border-radius: 999px; padding: 3px 8px;
  }

  .cm-card {
    background: var(--cm-card); border: 1px solid var(--cm-card-border);
    border-radius: var(--cm-radius-card); padding: 14px 16px;
    box-shadow: var(--cm-card-elev); display: grid; gap: 10px;
  }
  a.cm-card-link { text-decoration: none; color: inherit; }
  .cm-card-compact {
    grid-auto-flow: column; grid-template-columns: 1fr auto;
    align-items: center; padding: 12px 14px; gap: 12px;
  }
  .cm-card-row { display: flex; align-items: center; gap: 12px; }
  .cm-card-glyph {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--cm-accent-dim), rgba(169,154,255,.12));
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  }
  .cm-card-copy { min-width: 0; flex: 1; }
  .cm-card-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--cm-fg); line-height: 1.2; }
  .cm-card-meta  { margin: 2px 0 0; font-size: 12.5px; color: var(--cm-fg-dim); }
  .cm-card-cta   { font-size: 13px; font-weight: 700; color: var(--cm-accent-2); white-space: nowrap; }

  .cm-status-pill {
    font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 4px 9px;
    white-space: nowrap; align-self: flex-start;
  }
  .cm-status-pill.warn   { background: var(--cm-warn-dim); color: var(--cm-warn); }
  .cm-status-pill.danger { background: rgba(255,120,120,.14); color: #ff9a9a; }
  .cm-status-pill.soft   { background: var(--cm-accent-dim); color: var(--cm-accent-2); }

  .cm-progress-track { height: 8px; border-radius: 999px; background: var(--cm-bg-3); overflow: hidden; }
  .cm-progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cm-accent), var(--cm-accent-2)); }

  .cm-action-row { display: flex; gap: 10px; }
  .cm-primary-action {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; flex: 1; text-decoration: none; border-radius: var(--cm-radius-btn);
    background: var(--cm-accent); color: #fff; font-weight: 800; font-size: 13.5px; padding: 0 16px;
  }
  .cm-primary-action.ghost { background: var(--cm-bg-3); color: var(--cm-fg); border: 1px solid var(--cm-line); }

  .cm-empty-state {
    background: var(--cm-card); border: 1px dashed var(--cm-line);
    border-radius: var(--cm-radius-card); padding: 14px 16px;
    color: var(--cm-fg-dim); font-size: 13px; line-height: 1.5;
  }
  .cm-empty-state strong { color: var(--cm-fg); }
  .cm-derived-note { display: block; margin-top: 4px; color: var(--cm-fg-mute); font-size: 12px; }
  .cm-more-note { margin: 6px 2px 0; font-size: 12px; color: var(--cm-fg-mute); }

  .cm-progress-preview {
    background: var(--cm-card); border: 1px solid var(--cm-card-border);
    border-radius: var(--cm-radius-card); padding: 16px; box-shadow: var(--cm-card-elev);
    display: grid; gap: 12px;
  }
  .cm-progress-head { display: flex; justify-content: space-between; align-items: baseline; color: var(--cm-fg-dim); font-size: 12.5px; font-weight: 700; }
  .cm-progress-head strong { color: var(--cm-fg); font-size: 18px; }
  .cm-progress-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cm-stat { background: var(--cm-bg-3); border: 1px solid var(--cm-line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
  .cm-stat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cm-fg-mute); }
  .cm-stat-value { font-size: 15px; font-weight: 800; color: var(--cm-fg); }
  .cm-streak-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cm-fg-dim); }
  .cm-streak-line .cm-status-pill { margin-left: auto; }
  .cm-streak-line .cm-streak-ico { font-size: 17px; }

  .cm-feedback-preview {
    display: flex; align-items: center; gap: 12px;
    background: var(--cm-card); border: 1px solid var(--cm-card-border);
    border-radius: var(--cm-radius-card); padding: 14px 16px; box-shadow: var(--cm-card-elev);
  }
  .cm-feedback-ico { font-size: 22px; flex-shrink: 0; }
  .cm-feedback-preview h3 { margin: 0 0 2px; font-size: 14px; font-weight: 800; color: var(--cm-fg); }
  .cm-feedback-preview p  { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--cm-fg-dim); }
}

/* ============================================================================
 * CM.4 — Learning Session shell, mobile dark overrides (presentation only).
 * The session page (/cube/student/session/) ships desktop-light styles inline;
 * these mobile-gated rules apply the cm- dark skin + bottom-nav spacing.
 * cm-mobile.css loads AFTER the page's inline <style>, so these win at ≤720px.
 * ========================================================================== */
@media (max-width: 720px) {
  .cm-ses-topbar {
    position: sticky; top: 0; z-index: 40;
    background: var(--cm-bg-2); border-bottom: 1px solid var(--cm-line);
    padding: calc(10px + var(--cm-safe-top)) 14px 10px;
  }
  .cm-ses-brand b { color: var(--cm-fg); }
  .cm-ses-back { color: var(--cm-accent-2); }

  .cm-ses-page {
    padding: 16px 14px;
    padding-bottom: calc(var(--cm-tab-h) + var(--cm-safe-bottom) + 20px);
  }
  .cm-ses-head { box-shadow: var(--cm-card-elev); }

  .cm-ses-section-label { color: var(--cm-fg-mute); }

  .cm-step, .cm-ses-panel, .cm-related-card {
    background: var(--cm-card); border-color: var(--cm-card-border);
    box-shadow: var(--cm-card-elev);
  }
  .cm-step-title, .cm-related-title, .cm-ses-prow strong { color: var(--cm-fg); }
  .cm-step-desc, .cm-related-meta, .cm-ses-prow, .cm-ses-streak { color: var(--cm-fg-dim); }
  .cm-step-num { background: var(--cm-accent-dim); color: var(--cm-accent-2); }
  .cm-step-status.now   { background: var(--cm-ok-dim, rgba(130,236,188,.12)); color: var(--cm-ok); }
  .cm-step-status.ready { background: var(--cm-accent-dim); color: var(--cm-accent-2); }
  .cm-step-status.soon  { background: var(--cm-bg-3); color: var(--cm-fg-mute); }
  .cm-ses-track { background: var(--cm-bg-3); }
  .cm-ses-fill  { background: linear-gradient(90deg, var(--cm-accent), var(--cm-accent-2)); }
  .cm-ses-streak .cm-step-status { background: var(--cm-accent-dim); color: var(--cm-accent-2); border: 0; }
  .cm-related-glyph { background: linear-gradient(135deg, var(--cm-accent-dim), rgba(169,154,255,.12)); }
  .cm-related-cta { color: var(--cm-accent-2); }
  .cm-ses-empty { background: var(--cm-card); border-color: var(--cm-line); color: var(--cm-fg-dim); }
  .cm-ses-empty strong { color: var(--cm-fg); }
  .cm-derived-note { color: var(--cm-fg-mute); }
}

/* ============================================================================
 * CM.5 — Challenge UX layer, mobile dark overrides (presentation only).
 * The challenges page (/cube/student/challenges/) ships desktop-light inline;
 * these mobile-gated rules apply the cm- dark skin + bottom-nav spacing.
 * ========================================================================== */
@media (max-width: 720px) {
  .cm-ch-topbar {
    position: sticky; top: 0; z-index: 40;
    background: var(--cm-bg-2); border-bottom: 1px solid var(--cm-line);
    padding: calc(10px + var(--cm-safe-top)) 14px 10px;
  }
  .cm-ch-brand b { color: var(--cm-fg); }
  .cm-ch-back { color: var(--cm-accent-2); }

  .cm-ch-page {
    padding: 16px 14px;
    padding-bottom: calc(var(--cm-tab-h) + var(--cm-safe-bottom) + 20px);
  }
  .cm-ch-hero { box-shadow: var(--cm-card-elev); }
  .cm-ch-section-label { color: var(--cm-fg-mute); }
  .cm-ch-tag { color: var(--cm-accent-2); background: var(--cm-accent-dim); }

  .cm-ch-card { background: var(--cm-card); border-color: var(--cm-card-border); box-shadow: var(--cm-card-elev); }
  .cm-ch-title { color: var(--cm-fg); }
  .cm-ch-meta  { color: var(--cm-fg-dim); }
  .cm-ch-glyph { background: linear-gradient(135deg, var(--cm-accent-dim), rgba(169,154,255,.12)); }

  .cm-ch-pill.attention, .cm-ch-pill.today { background: var(--cm-warn-dim); color: var(--cm-warn); }
  .cm-ch-pill.ready    { background: var(--cm-accent-dim); color: var(--cm-accent-2); border: 0; }
  .cm-ch-pill.feedback { background: rgba(120,160,255,.16); color: #9bb8ff; }
  .cm-ch-pill.done     { background: var(--cm-ok-dim, rgba(130,236,188,.12)); color: var(--cm-ok); }

  .cm-ch-empty { background: var(--cm-card); border-color: var(--cm-line); color: var(--cm-fg-dim); }
  .cm-ch-empty strong { color: var(--cm-fg); }
  .cm-ch-note { color: var(--cm-fg-mute); }
}

/* ============================================================================
 * CM.6A — Learning Hub, mobile dark overrides (presentation only).
 * /cube/student/learn/ uses the shared .app-shell/.sidebar/.topbar/.page-content
 * (dark-themed by the CM.1 block above) + these content overrides. Desktop-light
 * styles ship inline in the page; cm-mobile.css loads after, so these win ≤720px.
 * ========================================================================== */
@media (max-width: 720px) {
  .cm-learn-hero { border-radius: 20px; padding: 20px 18px; box-shadow: var(--cm-card-elev); }
  .cm-learn-hero-title { font-size: 22px; }

  .sec-title { color: var(--cm-fg); }
  .sec-meta  { color: var(--cm-fg-dim); }
  .sec-link  { color: var(--cm-accent-2); }
  .sec-tag   { color: var(--cm-accent-2); background: var(--cm-accent-dim); }

  .cm-learn-grid { grid-template-columns: 1fr; }
  .cm-learn-card, .cm-learn-row {
    background: var(--cm-card); border-color: var(--cm-card-border); box-shadow: var(--cm-card-elev);
  }
  .cm-learn-card-title, .cm-learn-row-title { color: var(--cm-fg); }
  .cm-learn-card-sub, .cm-learn-row-meta, .cm-learn-card-foot { color: var(--cm-fg-dim); }
  .cm-learn-card-cta, .cm-learn-row-cta { color: var(--cm-accent-2); }
  .cm-learn-glyph { background: linear-gradient(135deg, var(--cm-accent-dim), rgba(169,154,255,.12)); }
  .cm-learn-track { background: var(--cm-bg-3); }
  .cm-learn-fill  { background: linear-gradient(90deg, var(--cm-accent), var(--cm-accent-2)); }

  .cm-learn-link-card {
    background: var(--cm-card); border-color: var(--cm-card-border); box-shadow: var(--cm-card-elev);
  }
  .cm-learn-link-title { color: var(--cm-fg); }
  .cm-learn-link-meta  { color: var(--cm-fg-dim); }
  .cm-learn-link-arrow { color: var(--cm-accent-2); }

  .empty { background: var(--cm-card); border-color: var(--cm-line); color: var(--cm-fg-dim); }
  .empty strong { color: var(--cm-fg); }
  .cm-learn-empty-all h2 { color: var(--cm-fg); }
  .cm-learn-empty-all p  { color: var(--cm-fg-dim); }
}

/* ============================================================================
 * CM.6B — Timeline / Action Flow, mobile dark overrides (presentation only).
 * /cube/student/timeline/ ships desktop-light inline; these mobile-gated rules
 * apply the cm- dark skin + bottom-nav spacing. Calm, low-contrast pills.
 * ========================================================================== */
@media (max-width: 720px) {
  .cm-tl-topbar {
    position: sticky; top: 0; z-index: 40;
    background: var(--cm-bg-2); border-bottom: 1px solid var(--cm-line);
    padding: calc(10px + var(--cm-safe-top)) 14px 10px;
  }
  .cm-tl-brand b { color: var(--cm-fg); }
  .cm-tl-back { color: var(--cm-accent-2); }

  .cm-tl-page {
    padding: 16px 14px;
    padding-bottom: calc(var(--cm-tab-h) + var(--cm-safe-bottom) + 20px);
  }
  .cm-tl-intro h1 { color: var(--cm-fg); }
  .cm-tl-intro p  { color: var(--cm-fg-dim); }

  .cm-tl-group::before { background: var(--cm-line); }
  .cm-tl-dot { background: var(--cm-bg-2); border-color: var(--cm-accent); }
  .cm-tl-dot.soft { border-color: var(--cm-line); }
  .cm-tl-label { color: var(--cm-fg-mute); }
  .cm-tl-tag { color: var(--cm-accent-2); background: var(--cm-accent-dim); }

  .cm-tl-row { background: var(--cm-card); border-color: var(--cm-card-border); box-shadow: var(--cm-card-elev); }
  .cm-tl-title { color: var(--cm-fg); }
  .cm-tl-meta  { color: var(--cm-fg-dim); }
  .cm-tl-glyph { background: linear-gradient(135deg, var(--cm-accent-dim), rgba(169,154,255,.12)); }

  .cm-tl-pill.now    { background: var(--cm-accent-dim); color: var(--cm-accent-2); }
  .cm-tl-pill.gentle { background: var(--cm-warn-dim); color: var(--cm-warn); }
  .cm-tl-pill.wait   { background: rgba(120,160,255,.16); color: #9bb8ff; }
  .cm-tl-pill.done   { background: var(--cm-ok-dim, rgba(130,236,188,.12)); color: var(--cm-ok); }
  .cm-tl-pill.ready  { background: var(--cm-accent-dim); color: var(--cm-accent-2); border: 0; }

  .cm-tl-continue { box-shadow: var(--cm-card-elev); }
  .cm-tl-empty { background: var(--cm-card); border-color: var(--cm-line); color: var(--cm-fg-dim); }
  .cm-tl-empty strong { color: var(--cm-fg); }
  .cm-tl-note { color: var(--cm-fg-mute); }
}

/* ============================================================================
 * CM.7 — Growth & Continuity (Progress), mobile dark overrides (presentation only).
 * /cube/student/progress/ uses the shared shell (dark-themed by CM.1) + these
 * content overrides. Desktop-light ships inline; cm-mobile.css wins ≤720px.
 * ========================================================================== */
@media (max-width: 720px) {
  .cm-prog-hero { border-radius: 20px; padding: 20px 18px; box-shadow: var(--cm-card-elev); }
  .cm-prog-headline { font-size: 22px; }

  .sec-title { color: var(--cm-fg); }
  .sec-meta  { color: var(--cm-fg-dim); }
  .sec-tag   { color: var(--cm-accent-2); background: var(--cm-accent-dim); }

  .cm-prog-path, .cm-prog-mcard, .cm-prog-row {
    background: var(--cm-card); border-color: var(--cm-card-border); box-shadow: var(--cm-card-elev);
  }
  .cm-prog-path-name, .cm-prog-row-title { color: var(--cm-fg); }
  .cm-prog-path-sub, .cm-prog-row-meta, .cm-prog-mcard .cap { color: var(--cm-fg-dim); }
  .cm-prog-pct, .cm-prog-mcard .num { color: var(--cm-accent-2); }
  .cm-prog-glyph { background: linear-gradient(135deg, var(--cm-accent-dim), rgba(169,154,255,.12)); }
  .cm-prog-track { background: var(--cm-bg-3); }
  .cm-prog-fill  { background: linear-gradient(90deg, var(--cm-accent), var(--cm-accent-2)); }

  .cm-prog-pill.done   { background: var(--cm-ok-dim, rgba(130,236,188,.12)); color: var(--cm-ok); }
  .cm-prog-pill.wait   { background: rgba(120,160,255,.16); color: #9bb8ff; }
  .cm-prog-pill.gentle { background: var(--cm-warn-dim); color: var(--cm-warn); }

  .cm-prog-streak { background: var(--cm-card); border-color: var(--cm-card-border); box-shadow: var(--cm-card-elev); }
  .cm-prog-streak h3 { color: var(--cm-fg); }
  .cm-prog-streak p  { color: var(--cm-fg-dim); }
  .cm-prog-streak-tag { background: var(--cm-accent-dim); color: var(--cm-accent-2); }

  .empty { background: var(--cm-card); border-color: var(--cm-line); color: var(--cm-fg-dim); }
  .empty strong { color: var(--cm-fg); }
}

/* ============================================================================
 * CM.7A — Coach placeholder, mobile dark overrides (presentation only).
 * /cube/student/coach/ ships desktop-light inline; these mobile-gated rules
 * apply the cm- dark skin + bottom-nav spacing. Fully static page (no data).
 * ========================================================================== */
@media (max-width: 720px) {
  .cm-coach-topbar {
    position: sticky; top: 0; z-index: 40;
    background: var(--cm-bg-2); border-bottom: 1px solid var(--cm-line);
    padding: calc(10px + var(--cm-safe-top)) 14px 10px;
  }
  .cm-coach-brand b { color: var(--cm-fg); }
  .cm-coach-back { color: var(--cm-accent-2); }

  .cm-coach-page {
    padding: 24px 16px;
    padding-bottom: calc(var(--cm-tab-h) + var(--cm-safe-bottom) + 20px);
  }
  .cm-coach-hero { box-shadow: var(--cm-card-elev); }

  .cm-coach-prev { background: var(--cm-card); border-color: var(--cm-card-border); box-shadow: var(--cm-card-elev); }
  .cm-coach-prev .name { color: var(--cm-fg); }
  .cm-coach-prev .desc { color: var(--cm-fg-dim); }
  .cm-coach-foot p { color: var(--cm-fg-dim); }
  .cm-coach-cta { background: var(--cm-accent); }
}

/* ============================================================================
 * CM.7B — Cube Mobile Post-Login Polish (presentation only, ≤720px).
 * Compacts the authenticated mobile header and unifies empty-state styling so
 * empties read as "ready", not "broken". No data, no copy invented; the shell's
 * "Guest" role_label is simply not shown on mobile (name leads). Desktop is
 * untouched (everything is gated under this breakpoint).
 * ========================================================================== */
@media (max-width: 720px) {
  /* ── Compact header: lead with the name; drop the secondary role/sub line
       (that line is where topbar-shell renders "Guest"/role) so it is never the
       dominant identity. Identity data is preserved in the shell. ── */
  .topbar { padding: calc(8px + var(--cm-safe-top)) 12px 8px; gap: 10px; }
  .topbar .school-logo, .topbar .user-avatar { width: 32px; height: 32px; }
  .topbar .user-name, .topbar .school-name { font-size: 13.5px; line-height: 1.15; }
  .topbar .school-sub, .topbar .user-role { display: none; }  /* hide secondary "Guest"/role + "Student" sub */
  .topbar .user-box { padding: 5px 8px; border-radius: 12px; gap: 6px; }

  /* ── Unified empty-state polish: calm, centered, consistent rhythm across
       Home / Learn / Challenges / Session / Timeline / Progress. Keeps each
       existing honest message; only makes it feel designed and ready. ── */
  .empty,
  .cm-learn-empty,
  .cm-ch-empty,
  .cm-ses-empty,
  .cm-tl-empty,
  .cm-prog-list .empty,
  .cm-prog-paths .empty {
    text-align: center;
    padding: 20px 16px;
    border-radius: var(--cm-radius-card);
    line-height: 1.55;
    font-size: 13px;
  }
  .empty strong,
  .cm-learn-empty strong,
  .cm-ch-empty strong,
  .cm-ses-empty strong,
  .cm-tl-empty strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13.5px;
  }
  /* A soft accent rail above each empty card → "fresh start", not error. */
  .empty,
  .cm-learn-empty,
  .cm-ch-empty,
  .cm-ses-empty,
  .cm-tl-empty {
    border-top: 2px solid var(--cm-accent-dim);
  }
}

/* ============================================================================
 * CM.8 — Teacher Learning Path Bridge: honest "From your class" origin label
 * on Learn course cards (real StudentCourseProgress enrolled classes only).
 * Mobile dark variant; desktop-light ships inline. Presentation only.
 * ========================================================================== */
@media (max-width: 720px) {
  .cm-learn-origin {
    color: var(--cm-accent-2);
    background: var(--cm-accent-dim);
  }
}

/* Bottom-nav icons are now the same stroke SVGs as the desktop sidebar
   (emoji glyphs replaced); size them like the old emoji footprint. */
.cm-tab .cm-tab-ico svg { width: 20px; height: 20px; display: block; margin: 0 auto; }