/* ============================================================================
 * Cube (Student) — Kairos glass skin (studio/portal-kits/cube)
 * Identity: deep institutional purple base, backlit glass, violet domain
 * accent (--kairos-cube #7b6cf6), grounded/steady motion. Presentation only.
 * Load AFTER the page's inline <style>.
 * ========================================================================== */

:root{
  --kairos-bg:#0d0a1f;
  --kairos-bg-deep:#070511;
  --kairos-purple:#7c4dff;
  --kairos-purple-soft:#a78bfa;
  --kairos-cube:#7b6cf6;
  --kairos-glass:rgba(255,255,255,.06);
  --kairos-border:rgba(255,255,255,.14);
  --kairos-text:#f4f1ff;
  --kairos-muted:#a9a3c4;
  --kairos-card:rgba(22,17,48,.72);
  --kairos-good:#4fd1c5;
  --kairos-warn:#f2b134;
  --kairos-danger:#ff8d8d;
  --kairos-grad-glass:linear-gradient(160deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 100%);
  --kairos-inset:inset 0 1px 0 rgba(255,255,255,.08);
  --kairos-shadow:0 18px 48px rgba(0,0,0,.5);
  --kairos-glow-cube:0 0 24px rgba(123,108,246,.30);
  --kairos-ease-loop:cubic-bezier(.65,0,.35,1);

  /* Remap the page + topbar-shell vars */
  --bg:var(--kairos-bg);
  --panel:#161130;
  --primary:var(--kairos-cube);
  --primary2:#9186f8;
  --text:var(--kairos-text);
  --muted:var(--kairos-muted);
  --line:var(--kairos-border);
  --accent:rgba(123,108,246,.14);
  --good:rgba(79,209,197,.12);
  --warn:rgba(242,177,52,.12);
  --danger:rgba(255,141,141,.12);
  --ok:var(--kairos-good);
  --orange:var(--kairos-warn);
  --red:var(--kairos-danger);
}

/* ---------- Base ----------
 * Canvas lifted to match Octahedron (octa-kairos-skin.css): the previous
 * near-black (#1a1236 → #070511) sat so close to the panel surfaces that
 * card edges vanished and the whole portal read darker than intended.
 * Same lifted purple canvas, violet (Cube) accent washes instead of teal. */
html,body{
  background:
    radial-gradient(90% 70% at 12% 0%,rgba(123,108,246,.10) 0%,transparent 55%),
    radial-gradient(80% 70% at 92% 8%,rgba(167,139,250,.14) 0%,transparent 55%),
    radial-gradient(120% 120% at 50% 0%,#2a2054 0%,#1a1338 48%,#120e28 100%) fixed,#120e28;
  color:var(--kairos-text);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Sidebar — matched to the Tetrahedron shell geometry ---------- */
.sidebar{
  background:
    radial-gradient(circle at 18% 10%, rgba(124,77,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(13,10,31,.92) 0%, rgba(7,5,17,.96) 100%);
  border-right:1px solid var(--kairos-border);
  border-radius:0 24px 24px 0;
  padding:18px 14px;
  box-shadow:var(--kairos-inset);
  position:relative; z-index:70;
}
.brand-wrap{gap:12px; margin-bottom:18px;}
.brand-text{font-size:18px; font-weight:800; letter-spacing:.08em;}
.brand-subtitle{font-size:10px; letter-spacing:.14em;}
.portal-chip{margin-bottom:16px;}
.nav a{border-radius:14px; font-weight:600; padding:11px 12px; margin-bottom:6px;}
.brand-subtitle{color:var(--kairos-cube); opacity:1;}
.portal-chip{
  background:rgba(123,108,246,.10);
  border:1px solid rgba(123,108,246,.35);
  color:var(--kairos-cube);
}
.nav a{color:var(--kairos-text); opacity:.85;}
.nav a:hover{background:var(--kairos-glass); opacity:1;}
.nav a.active{
  background:rgba(123,108,246,.14);
  box-shadow:inset 2px 0 0 var(--kairos-cube), var(--kairos-inset);
  color:#fff; opacity:1;
}
.sidebar-toggle{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.sidebar-footer-row{border-top:1px solid var(--kairos-border);}

/* Collapsed sidebar tooltips: Cube ships its own canonical #kGlobalTooltip
   (injected by cube-student-canonical-sidebar.js) — we only re-dress it.
   No second tooltip system here. */
#kGlobalTooltip{
  background:#161130 !important;
  border:1px solid rgba(123,108,246,.45) !important;
  color:var(--kairos-text) !important;
  box-shadow:var(--kairos-shadow), var(--kairos-glow-cube) !important;
}
#kGlobalTooltipArrow{
  background:#161130 !important;
  border-left:1px solid rgba(123,108,246,.45) !important;
  border-top:1px solid rgba(123,108,246,.45) !important;
}

/* Brand orbit — the Cube solid, grounded and steady */
.cube-orbit{position:relative; width:46px; height:46px; flex-shrink:0;}
.cube-orbit .cube-solid{
  position:absolute; inset:0; margin:auto;
  width:26px; height:26px;
  filter:drop-shadow(0 0 10px rgba(123,108,246,.35));
  transform-origin:center; animation:cube-turn 24s linear infinite;
}
.cube-orbit .cube-solid polygon,
.cube-orbit .cube-solid rect{
  fill:rgba(123,108,246,.16);
  stroke:var(--kairos-cube);
  stroke-width:1.6; stroke-linejoin:round;
}
.cube-orbit .c-ring{
  position:absolute; inset:1px;
  border:1px dashed rgba(123,108,246,.30);
  border-radius:50%;
}
.cube-orbit .c-rotor{position:absolute; inset:0; animation:cube-spin 18s linear infinite;}
.cube-orbit .c-rotor i{
  position:absolute; top:50%; left:50%;
  width:5px; height:5px; margin:-2.5px;
  border-radius:50%;
  background:var(--kairos-cube);
  box-shadow:0 0 8px rgba(123,108,246,.7);
  transform:rotate(var(--a)) translateY(-21px);
}
@keyframes cube-spin{to{transform:rotate(360deg);}}
@keyframes cube-turn{
  0%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-2px) rotate(180deg);}
  100%{transform:translateY(0) rotate(360deg);}
}

/* Nav icons (inline SVG) */
.nav-icon svg{width:18px; height:18px; display:block;}
.nav a .nav-icon{color:var(--kairos-muted);}
.nav a:hover .nav-icon{color:var(--kairos-text);}
.nav a.active .nav-icon{color:var(--kairos-cube);}

/* ---------- Topbar + widgets ---------- */
.topbar{
  /* Truly seamless with the page. The page background is a base colour PLUS a
     radial gradient painted on <body>; .right-column/.page-content are
     transparent so they show it through. The topbar must do the same —
     TRANSPARENT — otherwise any solid colour reads as a darker/lighter band
     that doesn't share the gradient. No divider line either. */
  background:transparent;
  border-bottom:1px solid transparent;
}
/* ── A1 · Kill the per-route shell flicker on cube pages ──
   The topbar/sidebar logos are cached across MPA route changes, but the
   shimmer + opacity-reveal replayed on EVERY navigation and read as a "logo
   espasmo". Show cube shell logos immediately (cached = instant; first paint is
   a one-time cost). Also: the sticky topbar is transparent by design (seamless
   on desktop where content scrolls in its own grid cell) — but on mobile the
   whole page scrolls UNDER it, so it must be opaque or the text shows through. */
html:not(.kairos-topbar-ready) .school-logo img,
html:not(.kairos-topbar-ready) .user-avatar img{opacity:1;}
/* The school-logo chip is near-white (light backing so dark logos read), and its
   <img> ships with src="" — so on every route it flashed WHITE before topbar-shell
   set the logo src. Make the chip DARK while loading (empty img / not-ready);
   the light backing returns once the logo has loaded (kairos-image-loading gone). */
html:not(.kairos-topbar-ready) .school-logo,
.school-logo.kairos-image-loading{background-color:#1c1740!important;}
.school-logo.kairos-image-loading,.user-avatar.kairos-image-loading{animation:none!important;background-image:none!important;}
.school-logo.kairos-image-loading img,.user-avatar.kairos-image-loading img{opacity:1!important;}
.cube-sidebar-mark img{opacity:1!important;transition:none!important;}
/* The bottom-left support mark <img> has no width attr → renders at the PNG's
   full intrinsic size ("breaks") until CSS sizes it, then snaps into the button
   ("falls into the container"). Cap it render-blocking so it can never overflow
   its 38px button. */
.sidebar .cube-sidebar-mark img,.sidebar .sidebar-brand-mark{max-width:28px!important;max-height:28px!important;width:auto;height:auto;object-fit:contain;}
.sidebar .cube-sidebar-mark{overflow:hidden;}
/* Guide-face SVG (guideTutorSvg, viewBox 120x120, NO width attr) renders at the
   ~300px replaced-element default until its size CSS resolves → a GIANT Kairos
   logo flashes bottom-left of the sidebar on every route change. Cap it here in
   render-blocking CSS so it can never paint bigger than its slot. */
.sidebar .guide-avatar,.sidebar [data-guide-face],.sidebar .nav-guide-face{max-width:40px;max-height:40px;overflow:hidden;}
.sidebar .guide-avatar svg,.sidebar .gf-disc svg,.sidebar [data-guide-face] svg{width:100%!important;height:100%!important;max-width:40px;max-height:40px;display:block;}
/* The Socrates-AI footer icon starts as a static atom, then an ASYNC import
   (kairos-guides.js) swaps in the guide face — it popped in after the sidebar had
   already mounted (past the skeleton). Fade it in so the swap is smooth. Same for
   the top brand mark (cube-solid, viewBox 56x56, no width) — cap it too. */
.sidebar .nav-guide-face{animation:cubeGuideFadeIn .35s ease both;}
@keyframes cubeGuideFadeIn{from{opacity:0}to{opacity:1}}
.sidebar .cube-orbit,.sidebar .cube-orbit .cube-solid{max-width:56px;max-height:56px;}
.sidebar .cube-orbit svg{max-width:56px;max-height:56px;}
@media (max-width:900px){
  /* Mobile uses the bottom nav, not the sidebar. The rule that hides the sidebar
     lives in cube-student-mobile-nav.css which is JS-INJECTED (gated on
     body.cube-mobile-nav-ready) → it applies too late, so the sidebar (or the
     prepaint's reserved 78px column) FLASHED on every route change. Hide it +
     collapse the grid to one column here, in render-blocking CSS, so it never
     paints. !important beats the prepaint's collapsed-grid reservation. */
  /* display:block (not just grid-columns:1fr) removes the grid entirely so the
     prepaint's collapsed 78px column can't leave a gap — matches what the
     JS-injected mobile-nav CSS does once ready, but from the first paint. */
  .app-shell{display:block!important;height:auto!important;}
  .app-shell > .sidebar{display:none!important;}
  .topbar{background:#120e28!important;border-bottom:1px solid #241f48!important;}
  /* SKELETON bottom nav — the real nav is JS-built (appears a beat after each MPA
     route load), so without this it momentarily DISAPPEARS on navigation. This
     render-blocking bar (5 faint tab dots) fills the gap and vanishes the instant
     the real nav mounts (body.cube-mobile-nav-ready). */
  body:not(.cube-mobile-nav-ready)::after{
    content:'';position:fixed;left:0;right:0;bottom:0;z-index:999;
    height:calc(64px + env(safe-area-inset-bottom,0px));
    background:
      radial-gradient(circle 11px at 10% 42%,rgba(255,255,255,.06) 97%,transparent 100%),
      radial-gradient(circle 11px at 30% 42%,rgba(255,255,255,.06) 97%,transparent 100%),
      radial-gradient(circle 11px at 50% 42%,rgba(255,255,255,.06) 97%,transparent 100%),
      radial-gradient(circle 11px at 70% 42%,rgba(255,255,255,.06) 97%,transparent 100%),
      radial-gradient(circle 11px at 90% 42%,rgba(255,255,255,.06) 97%,transparent 100%),
      rgba(15,18,39,.96);
    border-top:1px solid rgba(255,255,255,.1);
  }
  /* Notifications dropdown: anchor to the VIEWPORT so it can't spill off the
     left edge (the shared right:-10px anchors it to the bell, which isn't the
     rightmost element on mobile → overflow). */
  .kairos-notif-dropdown{position:fixed!important;left:10px!important;right:10px!important;top:64px!important;width:auto!important;max-width:none!important;max-height:70vh!important;}
  /* User box: compact to avatar-only so the name can't wrap + overflow the bar. */
  .kairos-user-box{padding:4px!important;gap:0!important;}
  .kairos-user-box > div:not(.user-avatar){display:none!important;}
}
.school-sub{color:var(--kairos-cube);}
.user-box, .kairos-user-box{background:var(--kairos-glass); border:1px solid var(--kairos-border);}
.user-avatar{background:rgba(123,108,246,.12);}
/* School logo chip — same treatment as Octahedron (octa-shell.css): a school
   logo is arbitrary artwork we do not control, so the chip carries its OWN
   light near-neutral backing (a dark mark stays readable), a hairline ring
   (a white mark still shows its edge), and `contain` so non-square marks are
   never cropped. */
.school-logo{
  background:rgba(248,247,255,.94);
  box-shadow:inset 0 0 0 1px rgba(15,10,35,.18);
  border-radius:999px;
  padding:4px;
}
.school-logo img{object-fit:contain;border-radius:50%;}
.kairos-notif-trigger{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.kairos-notif-trigger:hover, .kairos-user-box:hover{background:rgba(255,255,255,.10);}
.kairos-notif-badge{background:var(--kairos-cube); color:#0b0722;}
.kairos-notif-dropdown, .kairos-user-dropdown{
  background:var(--panel);
  border:1px solid var(--kairos-border);
  box-shadow:var(--kairos-shadow);
}
.kairos-user-menu-header{background:rgba(255,255,255,.04); border-bottom:1px solid var(--kairos-border);}
.kairos-user-menu-name{color:var(--kairos-text);}
.kairos-user-menu-role{color:var(--kairos-muted);}
.kairos-user-menu-item{color:var(--kairos-text);}
.kairos-user-menu-item:hover{background:rgba(123,108,246,.10);}
.kairos-user-menu-item.muted{color:var(--kairos-muted);}
.kairos-user-menu-item.logout{color:var(--kairos-danger);}
.kairos-user-menu-divider{background:var(--kairos-border);}
.kairos-notif-header, .kairos-notif-footer{background:var(--panel); border-color:rgba(255,255,255,.08);}
.kairos-notif-item{border-bottom:1px solid rgba(255,255,255,.07);}
.kairos-notif-item:hover{background:rgba(255,255,255,.05);}
.kairos-notif-item.unread{background:rgba(123,108,246,.08);}
.kairos-notif-item.unread::before{background:var(--kairos-cube);}
.kairos-notif-title,.kairos-notif-item-title{color:var(--kairos-text);}
.kairos-notif-eyebrow,.kairos-notif-meta,.kairos-notif-time,.kairos-notif-item-body,.kairos-notif-empty p{color:var(--kairos-muted);}
.kairos-notif-action,.kairos-notif-link,.kairos-notif-footer a{color:var(--kairos-cube);}
.kairos-filter-chip{background:rgba(255,255,255,.06); border:1px solid var(--kairos-border); color:var(--kairos-muted);}
.kairos-filter-chip.active{background:rgba(123,108,246,.16); color:var(--kairos-cube); border-color:rgba(123,108,246,.4);}

/* ---------- Content ---------- */
.sec-title{color:var(--kairos-text);}
.sec-meta{color:var(--kairos-muted);}
.sec-link{color:var(--kairos-cube);}

/* Hero — keep the violet identity, deepen it into the glass world */
.hero{
  background:
    radial-gradient(circle at 80% 10%, rgba(167,139,250,.25), transparent 45%),
    linear-gradient(135deg,#241263 0%,#3b1f96 55%,#5b3fd0 100%);
  border:1px solid rgba(167,139,250,.30);
  box-shadow:var(--kairos-glow-cube), var(--kairos-inset);
}
.hero-kicker{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2);}
.hero-stat{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14);}

/* Buttons & pills */
.btn{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.btn:hover{border-color:var(--kairos-cube);}
.btn.primary{
  background:linear-gradient(135deg,#5b4bd6 0%,#7b6cf6 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:var(--kairos-glow-cube), var(--kairos-inset);
}
.btn.primary:hover{background:linear-gradient(135deg,#6a5ae5 0%,#9186f8 100%);}
.pill.good{background:rgba(79,209,197,.14); color:var(--kairos-good);}
.pill.warn{background:rgba(242,177,52,.14); color:var(--kairos-warn);}
.pill.danger{background:rgba(255,141,141,.14); color:var(--kairos-danger);}
.pill.soft{background:rgba(123,108,246,.14); border:1px solid rgba(123,108,246,.35); color:var(--kairos-cube);}
.pill.neutral{background:rgba(255,255,255,.08); color:var(--kairos-muted);}

/* Home layout polish — the hero stays lean; the snapshot panel owns the
   numbers (hero-stats duplicated Courses/Tasks/Overall — removed) */
.hero-stats{display:none;}
.side-card{
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-inset);
}
.empty{
  background:rgba(255,255,255,.03);
  border:1px dashed var(--kairos-border);
  color:var(--kairos-muted);
}

/* Cards (work list, snapshot, nudges) */
.work-card, .snap-row, .socrates-nudge, .card{
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-inset);
}
.work-card:hover{border-color:rgba(123,108,246,.5); box-shadow:0 0 24px rgba(123,108,246,.14), var(--kairos-inset);}
.work-title{color:var(--kairos-text);}
.work-meta, .work-copy{color:var(--kairos-muted);}
.work-glyph{background:rgba(123,108,246,.12); border:1px solid rgba(123,108,246,.3);}
.snap-stat .value{color:var(--kairos-text);}
.snap-stat .label{color:var(--kairos-muted);}
.snap-bar{background:rgba(255,255,255,.10);}
.snap-bar-fill{background:linear-gradient(90deg,#5b4bd6,#a78bfa);}
.progress-bar{background:rgba(255,255,255,.18);}

/* ---------- Focus + reduced motion ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--kairos-cube);
  outline-offset:2px;
  border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  .cube-orbit .cube-solid, .cube-orbit .c-rotor{animation:none !important;}
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}


/* Collapsed sidebar polish */
body.sidebar-collapsed .cube-orbit{width:40px; height:40px; margin:0 auto;}
body.sidebar-collapsed .cube-orbit .cube-solid{width:22px; height:22px;}
body.sidebar-collapsed .cube-orbit .c-rotor i{transform:rotate(var(--a)) translateY(-18px);}
body.sidebar-collapsed .brand-wrap{justify-content:center;}
body.sidebar-collapsed .nav a{justify-content:center;}
@media (prefers-reduced-motion: reduce){ .cube-orbit .cube-solid{animation:none !important;} }

/* ============================================================
 * Cube student learning family (learn / pathway / courses /
 * lessons / tasks / course-detail / resources / badges / progress)
 * ============================================================
 * Locals not covered by the :root remap or the base skin.
 * The shell (.sidebar/.topbar/.hero/.btn/.pill/.empty/.progress-bar,
 * .sec-*) is themed by the sections above; below are the family's
 * own kits. Same specificity as the page rules — this file loads
 * last, so ties resolve to the skin. */

/* ---------- Hero headers (union across the family) ----------
   learn: .cm-learn-hero · pathway: .pathway-header ·
   course-detail: .course-hero · progress: .cm-prog-hero
   Calmed to match the redesigned hero-less home: a quiet glass panel with a
   violet edge instead of the loud saturated gradient + glow. */
.cm-learn-hero, .pathway-header, .course-hero, .cm-prog-hero{
  background:
    radial-gradient(circle at 85% 0%, rgba(167,139,250,.14), transparent 45%),
    linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)) var(--kairos-card);
  border:1px solid rgba(123,108,246,.35);
  box-shadow:var(--kairos-inset);
}
/* course-detail .nudge is already a deep-violet gradient — kept as-is. */

/* ---------- Glass surfaces (union of the family's white cards) ---------- */
.panel, .quick-card,
.cm-learn-card, .cm-learn-row, .cm-learn-link-card, .cm-prac-card,
.pathway-card, .node-card, .rail-panel,
.course-card, .empty-state,
.kpi-card, .next-card, .lesson-card, .task-card, .info-panel, .filter-bar,
.ov-card, .prog-block, .state-card,
.next-badge-card, .bdg-empty,
.cm-prog-path, .cm-prog-mcard, .cm-prog-row, .inprog-row, .cm-prog-streak{
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-inset);
}
/* inner surfaces sitting on a glass parent */
.item, .prog-stat, .assigned-row, .ip-link{
  background:rgba(255,255,255,.04);
  border:1px solid var(--kairos-border);
}
/* violet-edged glass (was #ddd6ff / #d6cff5 lilac borders) */
.cm-learn-link-card, .inprog-row, .cm-prog-streak{
  border-color:rgba(123,108,246,.35);
}
/* pathway's right-rail .next-card is a bare flex container (name collision
   with the lessons/course-detail cards) — undo the union there */
.rail-panel .next-card{
  background:none; background-color:transparent;
  border:0; box-shadow:none;
}

/* Hovers — violet edge + glow instead of light-grey shadows */
.course-card:hover, .lesson-card:hover, .task-card:hover, .bdg-card:hover{
  border-color:rgba(123,108,246,.5);
  box-shadow:0 0 24px rgba(123,108,246,.14), var(--kairos-inset);
}
.assigned-row:hover{background:rgba(123,108,246,.08); border-color:rgba(123,108,246,.4);}
.ip-link:hover{background:rgba(123,108,246,.14); border-color:rgba(123,108,246,.4);}

/* ---------- Glyph tiles ---------- */
.cm-learn-glyph, .assigned-glyph, .task-glyph, .cm-prog-glyph,
.next-badge-icon-wrap, .inprog-row-icon{
  background:rgba(123,108,246,.14);
  border:1px solid rgba(123,108,246,.30);
}
.cm-learn-link-glyph, .cert-glyph{
  background:rgba(242,177,52,.16);
  border:1px solid rgba(242,177,52,.30);
}

/* ---------- Progress tracks & fills ---------- */
.cm-learn-track, .cm-prog-track,
.next-badge-bar-bg, .bdg-card-bar-bg, .inprog-bar-bg{
  background:rgba(255,255,255,.12);
}
.next-badge-bar-fill, .bdg-card-bar-fill, .inprog-bar-fill{
  background:linear-gradient(90deg,#5b4bd6,#a78bfa);
}

/* ---------- Ghost buttons / light chips → glass ---------- */
.hdr-btn, .page-header-link, .bdg-empty-link, .filter-pill, .cat-tab,
.show-more-btn, .next-ghost, .t-cta-ghost, .notif{
  background:rgba(255,255,255,.06);
  border-color:var(--kairos-border);
}
.l-cta.ghost, .t-cta.ghost{background:rgba(255,255,255,.06); border-color:var(--kairos-border);}
.l-cta.locked-btn{background:rgba(255,255,255,.04);}
.btn.outline{
  background:rgba(255,255,255,.06);
  border-color:rgba(123,108,246,.4);
  color:var(--kairos-cube);
}
.btn.outline:hover{background:rgba(123,108,246,.16);}
.next-ghost:hover, .l-cta.ghost:hover, .t-cta.ghost:hover,
.t-cta-ghost:hover, .show-more-btn:hover{
  background:rgba(123,108,246,.16);
  border-color:rgba(123,108,246,.4);
}

/* Selects (my-tasks filter bar) */
.filter-bar select{
  background:rgba(255,255,255,.06);
  border-color:var(--kairos-border);
  color:var(--kairos-text);
}
.filter-bar select option{background:#161130; color:var(--kairos-text);}

/* ---------- State chips (tinted .14 recipe) ---------- */
/* violet */
.cm-learn-dm, .cm-learn-review, .task-badge,
.sp-inprogress, .sp-pending{
  background:rgba(123,108,246,.14);
  color:var(--kairos-cube);
}
/* good */
.sp-completed, .sp-submitted, .sp-notstarted, .task-badge.b-completion{
  background:rgba(79,209,197,.14);
  color:var(--kairos-good);
}
.cm-learn-dm.lp-dm-hybrid{background:rgba(79,209,197,.14); color:var(--kairos-good);}
/* warn */
.sp-recommended, .sp-notassigned, .sp-due-today, .next-badge{
  background:rgba(242,177,52,.14);
  color:var(--kairos-warn);
}
.cm-learn-dm.lp-dm-physical{background:rgba(242,177,52,.14); color:var(--kairos-warn);}
/* danger */
.sp-overdue{background:rgba(255,141,141,.14); color:var(--kairos-danger);}
/* cool "upcoming / waiting" */
.sp-upcoming, .task-badge.b-progress, .cm-prog-pill.wait{
  background:rgba(125,170,255,.14);
  color:#9ec1ff;
}
.task-badge.b-grade{background:rgba(233,148,255,.14); color:#eeaaff;}
.task-badge.b-runtime, .sp-locked{
  background:rgba(255,255,255,.08);
  color:var(--kairos-muted);
}
/* due-date text tones */
.task-due.overdue{color:var(--kairos-danger);}
.task-due.today{color:var(--kairos-warn);}
.task-due.soon{color:#9ec1ff;}

/* ---------- KPI accents (my-tasks / my-lessons / badges) ---------- */
.kpi-card.danger-accent{
  background:linear-gradient(rgba(255,141,141,.08),rgba(255,141,141,.08)),var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border-color:rgba(255,141,141,.4);
}
.kpi-card.danger-accent .kc-value{color:var(--kairos-danger);}
.kpi-card.warn-accent{
  background:linear-gradient(rgba(242,177,52,.08),rgba(242,177,52,.08)),var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border-color:rgba(242,177,52,.4);
}
.kpi-card.warn-accent .kc-value{color:var(--kairos-warn);}
/* badges page uses border-left accents on .kpi-card — brighten to Kairos states */
.kpi-card.gold{border-left-color:var(--kairos-warn);}
.kpi-card.green{border-left-color:var(--kairos-good);}

/* ---------- Task state cards (my-tasks left-border rows) ---------- */
.task-card.overdue-card{
  border-left:4px solid var(--kairos-danger);
  background:linear-gradient(rgba(255,141,141,.06),rgba(255,141,141,.06)),var(--kairos-grad-glass);
  background-color:var(--kairos-card);
}
.task-card.today-card{
  border-left:4px solid var(--kairos-warn);
  background:linear-gradient(rgba(242,177,52,.06),rgba(242,177,52,.06)),var(--kairos-grad-glass);
  background-color:var(--kairos-card);
}
.task-card.upcoming-card{
  border-left:4px solid var(--kairos-cube);
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
}
.task-card.done-card{
  border-left:4px solid var(--kairos-good);
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
}
.lesson-card.done{border-left-color:var(--kairos-good);}

/* ---------- Pathway map (learn/pathway node track) ---------- */
.nodes::before{background:rgba(255,255,255,.14);}
.node{background:#161130;}
.node-step{background:#161130;}
.node-row.active .node{background:#161130;}
.node-row.completed .node-step{background:rgba(79,209,197,.14);}
.node-row.review .node{
  background:rgba(242,177,52,.14);
  border-color:rgba(242,177,52,.55);
}
.node-row.review .node-step{background:rgba(242,177,52,.14);}
.node-row.locked .node{
  background:rgba(255,255,255,.05);
  border-color:var(--kairos-border);
}
.node-kicker{
  background:rgba(123,108,246,.14);
  border-color:rgba(123,108,246,.35);
}
.node-row.completed .node-kicker{background:rgba(79,209,197,.14);}
.node-row.review .node-kicker{background:rgba(242,177,52,.14);}
.node-row.locked .node-kicker{background:rgba(255,255,255,.06);}

/* ---------- Course-detail sticky tabs ---------- */
.course-tabs{
  background:rgba(13,10,31,.72);
  border-bottom-color:var(--kairos-border);
}
.course-tabs::-webkit-scrollbar-thumb{background:rgba(123,108,246,.4);}
.course-tabs a{
  background:rgba(255,255,255,.06);
  border-color:var(--kairos-border);
  color:var(--kairos-muted);
}
.course-tabs a:hover{color:var(--kairos-text); border-color:rgba(123,108,246,.45);}

/* ---------- Badges & achievements ---------- */
.bdg-card.earned{
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border-color:rgba(79,209,197,.45);
}
.bdg-card.inprog{
  background:linear-gradient(rgba(123,108,246,.10),rgba(123,108,246,.10)),var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border-color:rgba(123,108,246,.45);
}
.bdg-card.locked{
  background:rgba(255,255,255,.03);
  border-color:var(--kairos-border);
}
.bdg-card.earned .bdg-icon-wrap{
  background:linear-gradient(135deg,rgba(242,177,52,.30),rgba(242,177,52,.10));
  border-color:var(--kairos-warn);
  box-shadow:0 0 0 4px rgba(242,177,52,.14);
}
.bdg-card.inprog .bdg-icon-wrap{border-color:rgba(123,108,246,.45);}
.bdg-card.locked .bdg-icon-wrap{
  background:rgba(255,255,255,.06);
  border-color:var(--kairos-border);
}
.bdg-earned-date{color:var(--kairos-good);} /* local var --good-fg is not remapped */
.next-badge-action{border-color:rgba(123,108,246,.4);}
.next-badge-action:hover{background:rgba(123,108,246,.24);}

/* ---------- Pathway mobile bars (≤900px; later cascade wins ties) ---------- */
.mobile-cta-bar{
  background:rgba(13,10,31,.92);
  border-top:1px solid var(--kairos-border);
  box-shadow:0 -8px 24px rgba(0,0,0,.5);
}
.mobile-bottom-nav{
  background:rgba(13,10,31,.94);
  border-top:1px solid var(--kairos-border);
  box-shadow:0 -8px 24px rgba(0,0,0,.5);
}
.mobile-bottom-nav a.active{background:rgba(123,108,246,.14);}

/* ============================================================
 * Cube student comms & runtime family (messages / calendar /
 * socrates / exam-reports / challenges / coach / timeline /
 * session / debug)
 * ============================================================
 * Page-local classes → Kairos glass. The skin :root already remaps
 * --bg/--panel/--primary/--primary2/--text/--muted/--line/--accent/
 * --good/--warn/--danger/--ok/--orange/--red, so only hardcoded light
 * paints need rules here (#fff, #fbfbff, #fafafe, pastel chips, light
 * gradients/shadows). Shell (.sidebar/.topbar/.user-box/.pill.*) is
 * themed by earlier skin sections. Identity gradients are KEPT: role
 * avatars (.avatar.*, .message-avatar.*, .soc-avatar, .msg-avatar)
 * and the cm hero surfaces read fine on dark.
 * The exam-report DETAIL is a printable document: its .k-* paper
 * blocks (.k-institutional / .k-card / .k-report-footer) stay light
 * on purpose, framed as a glass-edged sheet on the dark canvas.
 * challenges/coach/timeline/session are standalone (no shared
 * sidebar); their cm-*-topbar chrome + page surface are themed here.
 * These rules load after cm-mobile.css, so at ≤720px they supersede
 * its provisional --cm-* dark variant with the same Kairos glass. */

/* ---------- Shared widgets across the family ---------- */
/* Topbar bell (calendar / socrates / exam-reports ship a local .notif) */
.notif{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}

/* Secondary buttons (messages .k-btn/.ghost-btn, calendar .k-btn,
   socrates .soc-clear-btn) — locals hardcode background:#fff */
.k-btn, .ghost-btn, .soc-clear-btn{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.k-btn:hover, .soc-clear-btn:hover{
  border-color:var(--kairos-cube);
  background:rgba(123,108,246,.10);
  color:var(--kairos-text);
}
.k-btn.primary{
  background:linear-gradient(135deg,#5b4bd6 0%,#7b6cf6 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:var(--kairos-glow-cube), var(--kairos-inset);
}

/* Local dashed empty states (union across the family) */
.empty-note, .cm-ch-empty, .cm-tl-empty, .cm-ses-empty{
  background:rgba(255,255,255,.03);
  border:1px dashed var(--kairos-border);
  color:var(--kairos-muted);
}
.cm-ch-empty strong, .cm-tl-empty strong, .cm-ses-empty strong{color:var(--kairos-text);}

/* ---------- Messages (3-column inbox workspace) ---------- */
.summary-card, .shell-panel{
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-inset);
}
.panel-head, .conversation-head{
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--kairos-border);
}
.summary-value, .panel-head h2, .panel-head h3, .conversation-copy h2{color:var(--kairos-text);}
.summary-label, .summary-meta, .panel-sub, .conversation-copy p{color:var(--kairos-muted);}

/* Inputs (locals hardcode #fbfbff) */
.search, .composer-box textarea{
  background:rgba(0,0,0,.28);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.search::placeholder, .composer-box textarea::placeholder{color:rgba(169,163,196,.7);}
.search:focus, .composer-box textarea:focus{
  border-color:var(--kairos-cube);
  box-shadow:0 0 0 3px rgba(123,108,246,.18);
}

/* Lane nav (workspace-scoped .nav-item — never the sidebar) */
.nav-item{
  background:rgba(255,255,255,.04);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.nav-item:hover{border-color:rgba(123,108,246,.45);}
.nav-item.active{
  background:rgba(123,108,246,.16);
  border-color:rgba(123,108,246,.4);
  color:var(--kairos-cube);
}
.nav-item .nav-icon{background:rgba(255,255,255,.08);}
.nav-count{
  background:rgba(255,255,255,.06);
  border:1px solid var(--kairos-border);
  color:var(--kairos-muted);
}

/* Thread list */
.thread-card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.thread-card:hover{
  border-color:rgba(123,108,246,.45);
  box-shadow:0 0 24px rgba(123,108,246,.14), var(--kairos-inset);
}
.thread-card.active{
  background:rgba(123,108,246,.10);
  border-color:rgba(123,108,246,.5);
  box-shadow:var(--kairos-inset);
}

/* Lane tags (locals paint pastel chips via page-local vars) */
.tag{background:rgba(255,255,255,.08); border-color:transparent; color:var(--kairos-muted);}
.tag.student{background:rgba(123,108,246,.14); color:var(--kairos-cube); border-color:transparent;}
.tag.announcement, .tag.announce{background:rgba(124,77,255,.18); color:var(--kairos-purple-soft); border-color:transparent;}
.tag.guardian, .tag.good{background:rgba(79,209,197,.14); color:var(--kairos-good); border-color:transparent;}
.tag.admin, .tag.warning{background:rgba(242,177,52,.14); color:var(--kairos-warn); border-color:transparent;}
.tag.danger{background:rgba(255,141,141,.14); color:var(--kairos-danger); border-color:transparent;}

/* Conversation column */
.conversation-body{background:rgba(7,5,17,.35);}
.message-day span{
  background:rgba(22,17,48,.85);
  border:1px solid var(--kairos-border);
  color:var(--kairos-muted);
}
.message-bubble{
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border:1px solid var(--kairos-border);
  box-shadow:var(--kairos-inset);
}
.bubble-text{color:var(--kairos-text);}
.bubble-meta{color:var(--kairos-muted);}
/* Outgoing: the one violet moment in the thread */
.message-row.outgoing .message-bubble{
  background:linear-gradient(135deg,#5b4bd6 0%,#7b6cf6 100%);
  border-color:transparent;
  box-shadow:var(--kairos-glow-cube), var(--kairos-inset);
}
.message-row.outgoing .bubble-meta, .message-row.outgoing .bubble-text{color:#fff;}
.attachment{
  background:rgba(255,255,255,.10);
  border:1px solid var(--kairos-border);
}
.message-row.outgoing .attachment{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.28);
}
.composer{
  background:var(--kairos-card);
  border-top:1px solid var(--kairos-border);
}

/* ---------- Calendar (week grid + mini-month + upcoming) ---------- */
/* Re-scope the page-local event tone pairs (bg/fg) — this also flips
   the legend dots, which read var(--*-fg) through inline styles. */
.calendar-page{
  --lesson-bg:rgba(123,108,246,.14);  --lesson-fg:#a99aff;
  --assign-bg:rgba(255,141,141,.14);  --assign-fg:#ff8d8d;
  --exam-bg:rgba(242,177,52,.14);     --exam-fg:#f2b134;
  --tutor-bg:rgba(77,182,255,.14);    --tutor-fg:#6cc4ff;
  --school-bg:rgba(79,209,197,.14);   --school-fg:#4fd1c5;
  --shadow:var(--kairos-shadow);
}
.cal-header, .calendar-toolbar, .calendar-surface, .side-panel{
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-inset);
}
/* Mini-month */
.mini-day{
  background:rgba(255,255,255,.04);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.mini-day:hover{background:rgba(123,108,246,.14);}
.mini-day.muted{background:transparent; border-color:transparent; color:rgba(169,163,196,.45);}
.mini-day.today{
  background:rgba(123,108,246,.16);
  border-color:var(--kairos-cube);
  color:var(--kairos-cube);
}
/* Upcoming list (type tones come from the re-scoped vars above) */
.upcoming-item{background:rgba(255,255,255,.04);}
/* Toolbar view switch */
.view-switch{background:rgba(0,0,0,.25); border:1px solid var(--kairos-border);}
.view-btn.active{
  background:rgba(123,108,246,.16);
  color:var(--kairos-cube);
  box-shadow:none;
}
/* Week grid cells (locals hardcode #fff / #fbfbff) */
.corner-cell, .dow-cell, .hour-cell, .slot-cell{background:rgba(255,255,255,.02);}
.dow-cell, .hour-cell, .corner-cell{background:rgba(255,255,255,.04);}
.event-badge{background:rgba(255,255,255,.12);}

/* ---------- Socrates (chat + context rail) ---------- */
.soc-chat-panel, .rail-card{
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-inset);
}
.chat-msg.system .chat-bubble{
  background:rgba(255,255,255,.06);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.chat-msg.user .chat-bubble{
  background:linear-gradient(135deg,#5b4bd6 0%,#7b6cf6 100%);
  color:#fff;
  box-shadow:var(--kairos-glow-cube), var(--kairos-inset);
}
.starter-btn{
  background:rgba(123,108,246,.14);
  border:1px solid rgba(123,108,246,.35);
  color:var(--kairos-cube);
}
.starter-btn:hover{background:rgba(123,108,246,.22);}
.chat-input{
  background:rgba(0,0,0,.28);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.chat-input::placeholder{color:rgba(169,163,196,.7);}
.chat-input:focus{
  background:rgba(0,0,0,.28);
  border-color:var(--kairos-cube);
  box-shadow:0 0 0 3px rgba(123,108,246,.18);
}
.chat-send-btn{
  background:linear-gradient(135deg,#5b4bd6 0%,#7b6cf6 100%);
  box-shadow:var(--kairos-glow-cube), var(--kairos-inset);
}
.chat-send-btn:hover{background:linear-gradient(135deg,#6a5ae5 0%,#9186f8 100%);}
/* Context rail */
.ctx-course-card{
  background:rgba(123,108,246,.10);
  border:1px solid rgba(123,108,246,.35);
  color:var(--kairos-text);
}
.ctx-course-card:hover{background:rgba(123,108,246,.18);}
.ctx-task-item{
  background:rgba(242,177,52,.14);
  border-left-color:var(--kairos-warn);
}
.ctx-task-meta{color:var(--kairos-warn);}
.ctx-task-item.overdue{
  background:rgba(255,141,141,.14);
  border-left-color:var(--kairos-danger);
}
.ctx-task-item.overdue .ctx-task-meta{color:var(--kairos-danger);}
.quick-action-btn{
  background:rgba(255,255,255,.04);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.quick-action-btn:hover{
  background:rgba(123,108,246,.14);
  border-color:rgba(123,108,246,.4);
  color:var(--kairos-cube);
}
.honest-note{
  background:rgba(255,255,255,.04);
  border:1px solid var(--kairos-border);
  color:var(--kairos-muted);
}

/* ---------- Exam reports (list) ---------- */
.report-card{
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-inset);
}
.report-card:hover{
  border-color:rgba(123,108,246,.5);
  box-shadow:0 0 24px rgba(123,108,246,.14), var(--kairos-inset);
}
/* Score/state chips — the skin remap turns the local var(--good) text
   into a tint (unreadable), so the pair is restated explicitly. */
.pill-released{background:rgba(79,209,197,.14); color:var(--kairos-good);}
.pill-score{background:rgba(123,108,246,.14); color:var(--kairos-purple-soft);}
.pill-meta{background:rgba(255,255,255,.08); color:var(--kairos-muted);}
.report-card .view-btn{
  background:linear-gradient(135deg,#5b4bd6 0%,#7b6cf6 100%);
  border-color:transparent;
  box-shadow:var(--kairos-glow-cube), var(--kairos-inset);
}
.report-card .view-btn:hover{background:linear-gradient(135deg,#6a5ae5 0%,#9186f8 100%);}
.empty-state, .error-state{
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border:1px solid var(--kairos-border);
  color:var(--kairos-muted);
  box-shadow:var(--kairos-inset);
}
.empty-state strong{color:var(--kairos-text);}
.error-state{
  background:rgba(255,141,141,.12);
  border-color:rgba(255,141,141,.4);
  color:var(--kairos-danger);
}
.error-state strong{color:var(--kairos-danger);}

/* ---------- Exam report (detail) ---------- */
/* Guard states live on the dark canvas → glass */
.k-guard{
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border:1px solid var(--kairos-border);
  color:var(--kairos-muted);
  box-shadow:var(--kairos-inset);
}
.k-guard strong{color:var(--kairos-text);}
.k-guard.error{
  background:rgba(255,141,141,.12);
  border-color:rgba(255,141,141,.4);
  color:var(--kairos-danger);
}
.k-guard.error strong{color:var(--kairos-danger);}
/* The report itself is PAPER: institutional header, score cards, the
   question table and the provenance footer keep their light document
   ink (also what prints). The skin :root remap would have flipped
   .k-card's var(--panel)/var(--line)/var(--muted) to dark-glass values,
   so the document tokens are re-scoped back on the paper blocks, and
   each sheet gets a glass frame against the dark canvas. Inline
   styles inside the paper that read var(--muted)/var(--line) (empty
   note, table wrap) resolve through this same re-scope. */
.k-institutional, .k-card, .k-report-footer{
  --panel:#fff;
  --line:#e4e7f0;
  --text:#1a1f2e;
  --muted:#6b7280;
  --primary:#4b2aad;
  box-shadow:0 0 0 1px var(--kairos-border), var(--kairos-shadow);
}
.k-card{background:#fff;}
.k-inst-print-btn{
  background:linear-gradient(135deg,#5b4bd6 0%,#7b6cf6 100%);
  border-color:transparent;
}

/* ---------- Standalone cm-* runtime pages ---------- */
/* Local topbars (challenges / timeline / session / coach) — these
   pages have NO shared sidebar; this is their whole chrome. */
.cm-ch-topbar, .cm-tl-topbar, .cm-ses-topbar, .cm-coach-topbar{
  background:rgba(13,10,31,.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--kairos-border);
}

/* Hero surfaces — calmed to the same quiet glass recipe as the
   learning-family heroes above (redesigned hero-less home style). */
.cm-ch-hero, .cm-ses-head, .cm-coach-hero, .cm-tl-continue{
  background:
    radial-gradient(circle at 85% 0%, rgba(167,139,250,.14), transparent 45%),
    linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)) var(--kairos-card);
  border:1px solid rgba(123,108,246,.35);
  box-shadow:var(--kairos-inset);
}

/* Cards (challenges rows, timeline rows, session steps/panels,
   related card, coach previews) — locals hardcode background:#fff */
.cm-ch-card, .cm-tl-row, .cm-step, .cm-ses-panel, .cm-related-card, .cm-coach-prev{
  background:var(--kairos-grad-glass);
  background-color:var(--kairos-card);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-inset);
}
.cm-ch-glyph, .cm-tl-glyph, .cm-related-glyph{
  background:linear-gradient(135deg,rgba(123,108,246,.28),rgba(123,108,246,.10));
}

/* Status pills (locals paint pastel chips) */
.cm-ch-pill.attention, .cm-ch-pill.today{background:rgba(242,177,52,.14); color:var(--kairos-warn);}
.cm-ch-pill.ready, .cm-tl-pill.ready, .cm-step-status.st-available, .cm-step-status.ready{
  background:rgba(123,108,246,.14);
  border:1px solid rgba(123,108,246,.35);
  color:var(--kairos-cube);
}
.cm-ch-pill.feedback, .cm-tl-pill.wait{background:rgba(77,182,255,.14); color:#6cc4ff;}
.cm-ch-pill.done{background:rgba(79,209,197,.14); color:var(--kairos-good);}

/* Timeline rail */
.cm-tl-dot{background:#161130;}
.cm-tl-dot.soft{border-color:rgba(123,108,246,.35);}

/* Session stepper */
.cm-step.is-current{
  border-color:rgba(123,108,246,.6);
  box-shadow:0 0 0 2px rgba(123,108,246,.18), var(--kairos-inset);
}
.cm-step-status{background:rgba(255,255,255,.08); color:var(--kairos-muted);}
.cm-step-status.st-locked, .cm-step-status.st-skipped, .cm-step-status.soon{
  background:rgba(255,255,255,.06);
  color:var(--kairos-muted);
}
.cm-step-status.st-review_recommended{background:rgba(123,108,246,.14); color:var(--kairos-cube);}
.cm-ses-streak .cm-step-status{
  background:rgba(123,108,246,.14);
  border:1px solid rgba(123,108,246,.35);
  color:var(--kairos-cube);
}
.lp-nt, .lp-dm{background:rgba(123,108,246,.14); color:var(--kairos-purple-soft);}
.lp-dm.lp-dm-physical{background:rgba(242,177,52,.14); color:var(--kairos-warn);}
.lp-dm.lp-dm-hybrid{background:rgba(79,209,197,.14); color:var(--kairos-good);}
.cm-step-action{
  background:linear-gradient(135deg,#5b4bd6 0%,#7b6cf6 100%);
  box-shadow:var(--kairos-inset);
}
.cm-ses-track{background:rgba(255,255,255,.10);}

/* Coach CTA */
.cm-coach-cta{
  background:linear-gradient(135deg,#5b4bd6 0%,#7b6cf6 100%);
  box-shadow:var(--kairos-glow-cube), var(--kairos-inset);
}

/* ---------- Debug (StudentCourseProgress diagnostic) ---------- */
/* The debug page has no shell — its content hangs directly off <body>,
   so the generic locals (h2 / pre / .lead / .small / .meta) are scoped
   with `body >` to keep them from leaking into shell pages that load
   this same skin. */
body > .lead, body > .small, .row .meta{color:var(--kairos-muted);}
body > .lead code, body > .small code{color:var(--kairos-text);}
body > h2{color:var(--kairos-muted);}
body > pre{
  background:rgba(7,5,17,.6);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.verdict.ok{background:rgba(79,209,197,.14); color:var(--kairos-good); border:1px solid rgba(79,209,197,.35);}
.verdict.warn{background:rgba(242,177,52,.14); color:var(--kairos-warn); border:1px solid rgba(242,177,52,.35);}
.verdict.bad{background:rgba(255,141,141,.14); color:var(--kairos-danger); border:1px solid rgba(255,141,141,.35);}
.verdict.info{background:rgba(123,108,246,.14); color:var(--kairos-purple-soft); border:1px solid rgba(123,108,246,.35);}
#copyBtn{
  background:linear-gradient(135deg,#5b4bd6 0%,#7b6cf6 100%);
  box-shadow:var(--kairos-inset);
}
#copyBtn:hover{background:linear-gradient(135deg,#6a5ae5 0%,#9186f8 100%);}

/* ============================================================
 * Cube guardian family (alerts / attendance / calendar /
 * child-overview / child-progress / messages / profile / reports)
 * ============================================================
 * These eight routes are clones of one template that reuses the
 * guardian-home class kit verbatim (.hero/.hero-stat/.quick-card/
 * .panel/.item/.btn/.pill good|warn|danger, plus the shell). The
 * :root remap and the base sections above already theme all of it:
 * surfaces via the glass unions (.panel/.quick-card at the learning
 * family, .item as inner surface), .hero via the base hero recipe,
 * .btn/.pill.* via the base button/pill rules, and the topbar
 * .notif/.user-box via the comms family + topbar-shell hydration
 * (topbar-shell.js removes the static .notif/.user-box and mounts
 * the kairos-notif/kairos-user widgets themed above). Nothing is
 * duplicated here — only the three guardian-specific gaps. */

/* ---------- Hero KPI rows: rule removed ----------
   This file used to restore .hero-stats on the guardian sub-routes,
   on the reasoning that those tiles were the page's only headline
   metrics. They were not metrics at all — every value was a
   hardcoded fixture (92% attendance, a named child, a named school)
   presented as the family's own data. The guardian routes now carry
   the hero-less .page-head language with no stat tiles, so there is
   nothing left to restore and the :has() override is gone. */

/* ---------- Collapsed-sidebar tooltip (kill the double) ----------
   Guardian pages ship a CSS-only tooltip in their inline <style>
   (body.sidebar-collapsed .nav a:hover::after, light-theme ink:
   #1f2430 box + light shadow) AND load cube-guardian-shell.js,
   which injects the canonical #kGlobalTooltip already re-dressed
   by the base skin. Hovering a collapsed nav item showed both.
   Suppress the page-local ::after on guardian nav links only
   (href-scoped, so student routes are untouched); the attribute
   selector also provides the extra specificity needed to beat the
   page rule. The canonical glass tooltip remains the only one. */
body.sidebar-collapsed .nav a[href^="/cube/guardian/"]:hover::after{
  content:none;
}

/* ---------- Topbar bell badge (pre-hydration flash) ----------
   The static .notif-badge paints white ink on the remapped violet
   (var(--primary)) until topbar-shell.js replaces it with the
   kairos widget — unreadable at 10px, and it stays if the script
   ever fails. Same dark-ink-on-cube recipe as .kairos-notif-badge;
   same (0,1,0) specificity as the page rule — this file loads
   last, so the tie resolves to the skin. */
.notif-badge{
  background:var(--kairos-cube);
  color:#0b0722;
}

/* ============================================================
 * Cube skeleton kit — shimmer, not a text placeholder
 * ============================================================
 * A loading slot used to read "Loading your learning paths…" —
 * a sentence the eye tries to read before discovering it means
 * nothing. A skeleton says the same thing faster and without
 * asking to be read.
 *
 * Defined ONCE here rather than per page: home/ and socrates/
 * each shipped their own copy of this animation, which is how
 * two pages end up shimmering at different speeds. Pages now
 * just use the classes.
 *
 * Accessibility: skeletons are decorative and must carry
 * aria-hidden. Keep a .sr-only line ("Loading …") next to them
 * so assistive tech still announces the state; a shimmering box
 * announces nothing on its own.
 * ========================================================== */
/* Ships with the kit on purpose: the skeletons above are aria-hidden, so
   without this the paired "Loading …" line is the only thing assistive tech
   has — and a page that defines the skeleton but not .sr-only would render
   that line as visible body text, which is the placeholder we just removed. */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@keyframes kx-skel{
  0%{ background-position:140% 0; }
  100%{ background-position:-140% 0; }
}
.kx-skel,
.kx-skel-row::before,
.kx-skel-row::after{
  background-color:rgba(125,125,160,.10);
  background-image:linear-gradient(
    100deg,
    rgba(125,125,160,0) 30%,
    rgba(125,125,160,.20) 50%,
    rgba(125,125,160,0) 70%
  );
  background-size:220% 100%;
  background-repeat:no-repeat;
  animation:kx-skel 1.4s ease infinite;
  border-radius:8px;
}
/* A single shimmer bar. Height matches a line of body text. */
.kx-skel{ height:14px; }
.kx-skel + .kx-skel{ margin-top:9px; }
.kx-skel.w95{ width:95%; }
.kx-skel.w80{ width:80%; }
.kx-skel.w65{ width:65%; }
.kx-skel.w45{ width:45%; }
.kx-skel.tall{ height:20px; }
/* A list-row silhouette: leading glyph chip + two text lines, the shape
   most Cube slots actually load into (task rows, path rows, result rows). */
.kx-skel-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 0;
}
.kx-skel-row + .kx-skel-row{ border-top:1px solid var(--line); }
.kx-skel-row::before{
  content:""; flex-shrink:0;
  width:34px; height:34px; border-radius:10px;
}
.kx-skel-row::after{
  content:""; flex:1; height:14px; max-width:70%;
}
/* Stagger so the rows don't pulse in lockstep, which reads as one block
   rather than a list. */
.kx-skel-row:nth-child(2)::before,
.kx-skel-row:nth-child(2)::after{ animation-delay:.12s; }
.kx-skel-row:nth-child(3)::before,
.kx-skel-row:nth-child(3)::after{ animation-delay:.24s; }
.kx-skel-row:nth-child(3)::after{ max-width:55%; }

@media (prefers-reduced-motion: reduce){
  .kx-skel,
  .kx-skel-row::before,
  .kx-skel-row::after{ animation:none; }
}

/* ============================================================================
 * LIGHT MODE  (html[data-cube-theme="light"])
 * ----------------------------------------------------------------------------
 * Cube runs DARK by default: the :root block above remaps every page's own
 * (light) tokens to dark and paints dark surfaces. When the student picks Light
 * in Preferences, cube-theme-state.js stamps html[data-cube-theme="light"] —
 * this branch UNDOES the darkening: it restores light token values (which flips
 * every var()-based colour back to light) and relights the skin's own hardcoded
 * dark surfaces. Content + chrome go light; the brand rail keeps its identity.
 * ========================================================================== */
html[data-cube-theme="light"]{
  color-scheme:light;
  /* base --kairos-* tokens → light */
  --kairos-card:#ffffff;   /* flips EVERY glass card/panel surface to white at once */
  --kairos-bg:#f5f6fb;
  --kairos-bg-deep:#eef0f8;
  --kairos-glass:rgba(20,16,45,.035);
  --kairos-border:#e6e8f2;
  --kairos-text:#1f2430;
  --kairos-muted:#69707d;
  --kairos-grad-glass:linear-gradient(160deg,rgba(20,16,45,.035) 0%,rgba(20,16,45,.012) 100%);
  --kairos-inset:inset 0 1px 0 rgba(255,255,255,.7);
  --kairos-shadow:0 16px 40px rgba(31,36,48,.10);
  --kairos-glow-cube:0 0 20px rgba(123,108,246,.16);
  /* page + topbar-shell vars → light (undo the dark remap) */
  --bg:#f5f6fb;
  --panel:#ffffff;
  --primary:#5c39c0;
  --primary2:#6b4fe6;
  --text:#1f2430;
  --muted:#69707d;
  --line:#e7e9f2;
  --accent:#ece5ff;
  --good:#dff5e8;--warn:#fff4d6;--danger:#ffe2e2;
  --ok:#18794e;--orange:#9a6700;--red:#b42318;
}
/* Canvas: replace the fixed dark gradient with a soft light wash. */
html[data-cube-theme="light"],
html[data-cube-theme="light"] body{
  background:
    radial-gradient(90% 70% at 12% 0%,rgba(123,108,246,.06) 0%,transparent 55%),
    radial-gradient(80% 70% at 92% 8%,rgba(167,139,250,.07) 0%,transparent 55%),
    #f5f6fb fixed !important;
  color:#1f2430;
}
/* Topbar + chrome: the skin hardcodes dark paints — relight them. */
html[data-cube-theme="light"] .topbar{background:#ffffff!important;border-bottom:1px solid #e7e9f2!important;}
html[data-cube-theme="light"] .kairos-notif-trigger:hover,
html[data-cube-theme="light"] .kairos-user-box:hover{background:rgba(20,16,45,.05);}
html[data-cube-theme="light"] .kairos-user-menu-header{background:rgba(20,16,45,.03);}
html[data-cube-theme="light"] .kairos-user-menu-item:hover{background:rgba(123,108,246,.10);}
html[data-cube-theme="light"] .kairos-notif-item:hover{background:rgba(20,16,45,.04);}
html[data-cube-theme="light"] .kairos-notif-item.unread{background:rgba(123,108,246,.08);}
html[data-cube-theme="light"] .kairos-notif-badge{color:#fff;}
/* Any surface still painted with a white-on-dark glass tint reads invisible on
 * a light canvas — flip the common hardcoded white tints to dark tints. */
html[data-cube-theme="light"] [style*="rgba(255,255,255"]{}

/* --- Light mode: relight the skin's hardcoded glass/dark surfaces --- */
/* EVERY card/panel family the skin repaints to the dark glass var(--kairos-card)
 * — one comprehensive override so all pages relight at once. */
html[data-cube-theme="light"] .card,
html[data-cube-theme="light"] .side-card,
html[data-cube-theme="light"] .work-card,
html[data-cube-theme="light"] .snap-row,
html[data-cube-theme="light"] .socrates-nudge,
html[data-cube-theme="light"] .cm-learn-hero,
html[data-cube-theme="light"] .pathway-header,
html[data-cube-theme="light"] .course-hero,
html[data-cube-theme="light"] .cm-prog-hero,
html[data-cube-theme="light"] .cm-prog-path,
html[data-cube-theme="light"] .cm-prog-mcard,
html[data-cube-theme="light"] .cm-prog-row,
html[data-cube-theme="light"] .inprog-row,
html[data-cube-theme="light"] .cm-prog-streak,
html[data-cube-theme="light"] .kpi-card,
html[data-cube-theme="light"] .task-card,
html[data-cube-theme="light"] .bdg-card,
html[data-cube-theme="light"] .summary-card,
html[data-cube-theme="light"] .shell-panel,
html[data-cube-theme="light"] .message-bubble,
html[data-cube-theme="light"] .composer,
html[data-cube-theme="light"] .cal-header,
html[data-cube-theme="light"] .calendar-toolbar,
html[data-cube-theme="light"] .calendar-surface,
html[data-cube-theme="light"] .side-panel,
html[data-cube-theme="light"] .soc-chat-panel,
html[data-cube-theme="light"] .rail-card,
html[data-cube-theme="light"] .report-card,
html[data-cube-theme="light"] .k-guard,
html[data-cube-theme="light"] .cm-ch-hero,
html[data-cube-theme="light"] .cm-ses-head,
html[data-cube-theme="light"] .cm-coach-hero,
html[data-cube-theme="light"] .cm-tl-continue,
html[data-cube-theme="light"] .cm-ch-card,
html[data-cube-theme="light"] .cm-tl-row,
html[data-cube-theme="light"] .cm-step,
html[data-cube-theme="light"] .cm-ses-panel,
html[data-cube-theme="light"] .cm-related-card,
html[data-cube-theme="light"] .cm-coach-prev{
  background:#ffffff !important;
  background-image:none !important;
  border-color:#e7e9f2;
  box-shadow:0 2px 10px rgba(31,36,48,.06);
  color:#1f2430;
}
html[data-cube-theme="light"] .message-day span{background:#eef0f8 !important;color:#69707d;}
/* Solid dark panels (#161130 / #120e28) → white. */
html[data-cube-theme="light"] .kairos-notif-dropdown,
html[data-cube-theme="light"] .kairos-notif-header,
html[data-cube-theme="light"] .kairos-notif-footer,
html[data-cube-theme="light"] .kairos-user-menu{background:#ffffff !important;border-color:#e7e9f2 !important;}
/* White-on-dark glass chips/stats → subtle dark tint so they read on white. */
html[data-cube-theme="light"] .hero-kicker,
html[data-cube-theme="light"] .hero-stat,
html[data-cube-theme="light"] .pill.neutral,
html[data-cube-theme="light"] .kairos-filter-chip,
html[data-cube-theme="light"] .user-box,
html[data-cube-theme="light"] .kairos-user-box{
  background:rgba(20,16,45,.045);
  border-color:#e7e9f2;
}
html[data-cube-theme="light"] .snap-bar,
html[data-cube-theme="light"] .progress-bar{background:rgba(20,16,45,.10);}
/* Empty-state / dashed placeholders read fine but the dashed border needs contrast. */
html[data-cube-theme="light"] .empty,
html[data-cube-theme="light"] .empty-state{border-color:#d7dae8;color:#69707d;}

/* Light mode — COMPLETE dark-glass card/panel relight (all skin families). */
html[data-cube-theme="light"] .card,html[data-cube-theme="light"] .side-card,html[data-cube-theme="light"] .work-card,html[data-cube-theme="light"] .snap-row,html[data-cube-theme="light"] .socrates-nudge,html[data-cube-theme="light"] .quick-card,html[data-cube-theme="light"] .rail-card,html[data-cube-theme="light"] .rail-panel,html[data-cube-theme="light"] .side-panel,html[data-cube-theme="light"] .shell-panel,html[data-cube-theme="light"] .composer,html[data-cube-theme="light"] .message-bubble,html[data-cube-theme="light"] .cm-learn-card,html[data-cube-theme="light"] .cm-learn-row,html[data-cube-theme="light"] .cm-learn-link-card,html[data-cube-theme="light"] .cm-prac-card,html[data-cube-theme="light"] .cm-learn-hero,html[data-cube-theme="light"] .pathway-card,html[data-cube-theme="light"] .pathway-header,html[data-cube-theme="light"] .node-card,html[data-cube-theme="light"] .course-card,html[data-cube-theme="light"] .course-hero,html[data-cube-theme="light"] .kpi-card,html[data-cube-theme="light"] .next-card,html[data-cube-theme="light"] .lesson-card,html[data-cube-theme="light"] .task-card,html[data-cube-theme="light"] .info-panel,html[data-cube-theme="light"] .filter-bar,html[data-cube-theme="light"] .ov-card,html[data-cube-theme="light"] .prog-block,html[data-cube-theme="light"] .state-card,html[data-cube-theme="light"] .next-badge-card,html[data-cube-theme="light"] .bdg-card,html[data-cube-theme="light"] .bdg-empty,html[data-cube-theme="light"] .cm-prog-path,html[data-cube-theme="light"] .cm-prog-mcard,html[data-cube-theme="light"] .cm-prog-row,html[data-cube-theme="light"] .inprog-row,html[data-cube-theme="light"] .cm-prog-streak,html[data-cube-theme="light"] .cm-prog-hero,html[data-cube-theme="light"] .cal-header,html[data-cube-theme="light"] .calendar-toolbar,html[data-cube-theme="light"] .calendar-surface,html[data-cube-theme="light"] .soc-chat-panel,html[data-cube-theme="light"] .report-card,html[data-cube-theme="light"] .k-guard,html[data-cube-theme="light"] .summary-card,html[data-cube-theme="light"] .cm-ch-hero,html[data-cube-theme="light"] .cm-ses-head,html[data-cube-theme="light"] .cm-coach-hero,html[data-cube-theme="light"] .cm-tl-continue,html[data-cube-theme="light"] .cm-ch-card,html[data-cube-theme="light"] .cm-tl-row,html[data-cube-theme="light"] .cm-step,html[data-cube-theme="light"] .cm-ses-panel,html[data-cube-theme="light"] .cm-related-card,html[data-cube-theme="light"] .cm-coach-prev{
  background:#ffffff !important;background-image:none !important;border-color:#e7e9f2 !important;box-shadow:0 2px 10px rgba(31,36,48,.06);color:#1f2430;
}
/* dashed empty/error states: subtle, not solid white */
html[data-cube-theme="light"] .empty-state,html[data-cube-theme="light"] .error-state{background:#fafbff !important;border-color:#d7dae8 !important;color:#69707d;box-shadow:none;}
/* dark chrome: course tabs, section topbars, pathway nodes, filter dropdown options */
html[data-cube-theme="light"] .course-tabs,html[data-cube-theme="light"] .cm-ch-topbar,html[data-cube-theme="light"] .cm-tl-topbar,html[data-cube-theme="light"] .cm-ses-topbar,html[data-cube-theme="light"] .cm-coach-topbar{background:#ffffff !important;border-color:#e7e9f2 !important;}
html[data-cube-theme="light"] .node,html[data-cube-theme="light"] .node-step{background:#f2f0fa !important;border-color:#e0dcf5 !important;}
html[data-cube-theme="light"] .filter-bar select,html[data-cube-theme="light"] .filter-bar select option{background:#ffffff !important;color:#1f2430 !important;}