/* Cube Student sidebar component — component-owned structure, Tetra-aligned. */
.sidebar{display:flex!important;flex-direction:column!important;overflow:visible!important;position:relative;z-index:20}
.sidebar .nav{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:2px}
.cube-sidebar-tools{margin-top:14px;display:grid;grid-template-columns:1fr;gap:0}
.cube-sidebar-action{min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:11px 12px;margin-bottom:6px;border-radius:12px;color:#fff;text-decoration:none;background:transparent;border:0;font-size:14px;font-weight:600;opacity:.95}
.cube-sidebar-action:hover,.cube-sidebar-action.active{background:rgba(255,255,255,.16);opacity:1}
.cube-sidebar-action.ai .nav-icon{color:#d9ccff}.cube-sidebar-action.support .nav-icon{color:#bdeee4}
.cube-sidebar-action .nav-icon .nav-guide-face,.cube-sidebar-action .nav-icon .guide-avatar{position:relative;display:block;width:20px;height:20px}
.cube-sidebar-action .nav-icon .gf-disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:block;background:#0b0918;box-shadow:0 0 0 1.5px var(--guide-accent,#7b6cf6);z-index:1}
.cube-sidebar-action .nav-icon .gf-disc svg{width:100%;height:100%;display:block}
/* Orbiting accent ring around the guide face — the same animated ring the guide
 * wears across the other portals (octahedron nav, superadmin FAB, tetra Socrates):
 * a conic-gradient arc slowly rotating just outside the face. The opaque .gf-disc
 * (z-index:1) masks the centre so only the ring band shows. */
.cube-sidebar-action.ai .nav-icon .nav-guide-face::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 0deg,var(--guide-accent,#a99aff),transparent 30%,transparent 70%,var(--guide-accent,#a99aff));animation:cubeGuideRing 7s linear infinite;z-index:0;pointer-events:none}
@keyframes cubeGuideRing{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.cube-sidebar-action.ai .nav-icon .nav-guide-face::before{animation:none}}
.cube-sidebar-footer{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;align-items:center;gap:10px}
.cube-sidebar-mark{display:flex;align-items:center;justify-content:center}
.cube-sidebar-support{position:relative;display:flex;align-items:center}
.cube-sidebar-support-trigger{width:38px;height:38px;padding:5px;border:0;border-radius:10px;background:transparent;cursor:pointer;overflow:hidden}
.cube-sidebar-support-trigger:hover,.cube-sidebar-support-trigger[aria-expanded="true"]{background:rgba(255,255,255,.13)}
.cube-sidebar-mark img{width:25px;height:25px;display:block;object-fit:contain;opacity:.95}
.cube-sidebar-support-popup{position:absolute;z-index:1000;left:0;bottom:calc(100% + 12px);width:246px;padding:16px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:#17122f;color:#fff;box-shadow:0 18px 48px rgba(8,5,24,.38)}
.cube-sidebar-support-popup[hidden]{display:none}
.cube-sidebar-support-popup::after{content:"";position:absolute;left:14px;bottom:-6px;width:12px;height:12px;background:#17122f;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);transform:rotate(45deg)}
.cube-sidebar-popup-eyebrow{display:block;margin-bottom:5px;color:#bdeee4;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cube-sidebar-support-popup strong{display:block;font-size:16px}
.cube-sidebar-support-popup p{margin:7px 0 13px;color:#d7d1ea;font-size:12px;line-height:1.45}
.cube-sidebar-support-popup a{display:flex;justify-content:center;padding:9px 12px;border-radius:10px;background:#7565ed;color:#fff;text-decoration:none;font-size:12px;font-weight:800}
.cube-sidebar-support-popup a:hover{background:#8879f5}
.cube-sidebar-toggle{width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px}
body.sidebar-collapsed .cube-sidebar-action,
html.cube-sidebar-collapsed-prepaint .cube-sidebar-action{justify-content:center;padding-left:10px;padding-right:10px}
/* Collapsed rail: the support mark (38px, borderless) and the toggle (32px,
 * outlined pill) read as a broken pair — different sizes with a full-width
 * divider wider than either. Unify them: same 40x40 footprint, a short centred
 * divider that matches the button width, tighter stacking. */
/* NB: every collapsed footer rule is unioned with html.cube-sidebar-collapsed-prepaint
 * so the collapsed footer paints correctly on the FIRST frame (the prepaint sets
 * that class on <html> before body exists; body.sidebar-collapsed only arrives at
 * DOMContentLoaded). Without it the footer flashed its expanded row layout inside
 * the narrow rail on every collapsed route change — a "small expansion". */
body.sidebar-collapsed .cube-sidebar-footer,
html.cube-sidebar-collapsed-prepaint .cube-sidebar-footer{flex-direction:column;justify-content:center;gap:8px;border-top:0;margin-top:12px;padding-top:12px;position:relative}
body.sidebar-collapsed .cube-sidebar-footer::before,
html.cube-sidebar-collapsed-prepaint .cube-sidebar-footer::before{content:"";position:absolute;top:0;left:50%;width:40px;height:1px;transform:translateX(-50%);background:rgba(255,255,255,.14)}
body.sidebar-collapsed .cube-sidebar-support-trigger,
html.cube-sidebar-collapsed-prepaint .cube-sidebar-support-trigger{width:40px;height:40px}
/* Collapsed toggle: 40x40 centred pill with a clearly-visible surface (the old
 * rgba(255,255,255,.10) was near-invisible on the dark rail) and an optically
 * centred chevron (arrow glyphs carry side-bearing → nudge + line-height:1). */
body.sidebar-collapsed .cube-sidebar-toggle,
html.cube-sidebar-collapsed-prepaint .cube-sidebar-toggle{width:40px;height:40px;flex:0 0 auto;font-size:15px;line-height:1;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);color:#fff;text-indent:1px}
body.sidebar-collapsed .cube-sidebar-toggle:hover,
html.cube-sidebar-collapsed-prepaint .cube-sidebar-toggle:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.44)}
body.sidebar-collapsed .cube-sidebar-support-popup{position:fixed;left:88px;bottom:22px}
body.sidebar-collapsed .cube-sidebar-support-popup::after{left:-6px;bottom:18px;border:0;border-left:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
@media(max-width:900px){
  .app-shell>.sidebar .cube-sidebar-tools{display:grid}
  .app-shell>.sidebar .cube-sidebar-footer{display:none}
  body.sidebar-collapsed .app-shell>.sidebar .cube-sidebar-action{justify-content:flex-start;padding-left:12px;padding-right:12px}
  body.sidebar-collapsed .app-shell>.sidebar .cube-sidebar-action .nav-label{display:inline!important}
}

/* LIGHT-THEME sidebar legibility.
 * The Cube sidebar is ALWAYS dark (dark purple gradient) regardless of the page
 * theme. The Kairos skin maps `.nav a` to var(--kairos-text), which flips to a
 * DARK ink under [data-cube-theme="light"] → dark-on-dark, so the inactive nav
 * labels became nearly invisible. These `.sidebar …` rules out-specify the
 * skin's `.nav a` (0,3,1 > 0,0,2) and restore light-on-dark. Scoped to the
 * light theme; dark theme is untouched. */
html[data-cube-theme="light"] .sidebar .nav a{color:rgba(255,255,255,.9)}
html[data-cube-theme="light"] .sidebar .nav a .nav-label{color:inherit}
html[data-cube-theme="light"] .sidebar .nav a .nav-icon{color:rgba(255,255,255,.82)}
html[data-cube-theme="light"] .sidebar .nav a:hover{color:#fff;background:rgba(255,255,255,.12)}
html[data-cube-theme="light"] .sidebar .nav a.active,
html[data-cube-theme="light"] .sidebar .nav a:hover .nav-icon,
html[data-cube-theme="light"] .sidebar .nav a.active .nav-icon{color:#fff}
html[data-cube-theme="light"] .sidebar .sidebar-toggle{color:#fff}
html[data-cube-theme="light"] .sidebar .brand-text,
html[data-cube-theme="light"] .sidebar .brand-subtitle,
html[data-cube-theme="light"] .sidebar .portal-chip,
html[data-cube-theme="light"] .sidebar .cube-sidebar-action{color:#fff}