/* ============================================================================
 * Octahedron (School) — Kairos glass skin (studio/portal-kits/octahedron)
 * Identity: deep institutional purple base, backlit glass, teal domain
 * accent (--kairos-octahedron #4fd1c5), balanced/settling 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-octa:#4fd1c5;
  --kairos-glass:rgba(255,255,255,.06);
  --kairos-border:rgba(255,255,255,.14);
  --kairos-text:#f4f1ff;
  --kairos-muted:#a9a3c4;
  --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-octa:0 0 24px rgba(79,209,197,.28);
  --kairos-ease-loop:cubic-bezier(.65,0,.35,1);

  /* Remap the page + topbar-shell vars */
  --bg:var(--kairos-bg);
  --panel:#161130;
  --primary:var(--kairos-octa);
  --primary2:#7fe0d6;
  --text:var(--kairos-text);
  --muted:var(--kairos-muted);
  --line:var(--kairos-border);
  --accent:rgba(79,209,197,.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 ----------
 * The page canvas lives HERE, not per-page. It was previously set both in this
 * file (a near-black #1a1236 → #070511) and, for redesigned pages, by an
 * .octa-page class carrying a lighter wash — so the portal visibly changed
 * background as you moved between converted and unconverted pages, which read
 * as a broken layout. One definition, every Octahedron page.
 *
 * The lift is also a legibility fix: panel surfaces sat at roughly 1.1:1
 * against the old near-black, so card edges effectively vanished. */
html,body{
  background:
    radial-gradient(90% 70% at 12% 0%,rgba(79,209,197,.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-octa); opacity:1;}
.portal-chip{
  background:rgba(79,209,197,.10);
  border:1px solid rgba(79,209,197,.35);
  color:var(--kairos-octa);
}
.nav a{color:var(--kairos-text); opacity:.85;}
.nav a:hover{background:var(--kairos-glass); opacity:1;}
.nav a.active{
  background:rgba(79,209,197,.14);
  box-shadow:inset 2px 0 0 var(--kairos-octa), 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(79,209,197,.45) !important;
  color:var(--kairos-text) !important;
  box-shadow:var(--kairos-shadow), var(--kairos-glow-octa) !important;
}
#kGlobalTooltipArrow{
  background:#161130 !important;
  border-left:1px solid rgba(79,209,197,.45) !important;
  border-top:1px solid rgba(79,209,197,.45) !important;
}

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

/* 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-octa);}

/* ---------- Topbar + widgets ---------- */
.topbar{
  background:rgba(13,10,31,.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--kairos-border);
}
.school-sub{color:var(--kairos-octa);}
.user-box, .kairos-user-box{background:var(--kairos-glass); border:1px solid var(--kairos-border);}
.school-logo, .user-avatar{background:rgba(79,209,197,.12);}
.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-octa); color:#03211d;}
.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(79,209,197,.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(79,209,197,.08);}
.kairos-notif-item.unread::before{background:var(--kairos-octa);}
.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-octa);}
.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(79,209,197,.16); color:var(--kairos-octa); border-color:rgba(79,209,197,.4);}

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

/* 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-octa), 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-octa);}
.btn.primary{
  background:linear-gradient(135deg,#2a9d92 0%,#4fd1c5 100%);
  color:#03211d;
  border-color:transparent;
  box-shadow:var(--kairos-glow-octa), var(--kairos-inset);
}
.btn.primary:hover{background:linear-gradient(135deg,#33b3a6 0%,#7fe0d6 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(79,209,197,.14); border:1px solid rgba(79,209,197,.35); color:var(--kairos-octa);}
.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 se muestra: en octa llevan datos reales (infra/ops/grades) */
.side-card{
  background:var(--kairos-grad-glass);
  background-color:rgba(22,17,48,.72);
  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:rgba(22,17,48,.72);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-inset);
}
.work-card:hover{border-color:rgba(79,209,197,.5); box-shadow:0 0 24px rgba(79,209,197,.14), var(--kairos-inset);}
.work-title{color:var(--kairos-text);}
.work-meta, .work-copy{color:var(--kairos-muted);}
.work-glyph{background:rgba(79,209,197,.12); border:1px solid rgba(79,209,197,.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-octa);
  outline-offset:2px;
  border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  .octa-orbit .octa-solid, .octa-orbit .o-rotor{animation:none !important;}
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}


/* ============================================================
 * Octahedron home components
 * ============================================================ */
.pg-header{
  background:
    radial-gradient(circle at 80% 10%, rgba(79,209,197,.20), transparent 45%),
    linear-gradient(135deg,#0e2f3f 0%,#12454b 55%,#1a6b63 100%);
  border:1px solid rgba(79,209,197,.30);
  box-shadow:var(--kairos-glow-octa), var(--kairos-inset);
  color:var(--kairos-text);
}
.kpi{
  background:var(--kairos-grad-glass);
  background-color:rgba(22,17,48,.72);
  border:1px solid var(--kairos-border);
  box-shadow:var(--kairos-inset);
}
.kpi .kpi-v{color:var(--kairos-text);}
.kpi .kpi-k, .kpi .kpi-sub{color:var(--kairos-muted);}
.panel{
  background:var(--kairos-grad-glass);
  background-color:rgba(22,17,48,.72);
  border:1px solid var(--kairos-border);
  box-shadow:var(--kairos-inset);
}
.panel .hint{color:var(--kairos-muted);}
.check{background:rgba(255,255,255,.04); border:1px solid var(--kairos-border);}
.check .check-label{color:var(--kairos-text);}
.check .check-sub{color:var(--kairos-muted);}
.check .check-mark{background:rgba(255,255,255,.08); color:var(--kairos-muted);}
.check.done .check-mark{background:rgba(79,209,197,.16); color:var(--kairos-good);}
.check.todo .check-mark{background:rgba(242,177,52,.16); color:var(--kairos-warn);}
.qa-card{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.qa-card:hover{border-color:var(--kairos-octa); box-shadow:0 0 24px rgba(79,209,197,.14);}
.qa-card .qa-icon{background:rgba(79,209,197,.14); color:var(--kairos-octa);}


/* ============================================================
 * octa-shell.css consistency layer — its selectors carry higher
 * specificity (.sidebar .nav a, [data-octa-topbar] .octa-*), so
 * these overrides match them explicitly. Loads last, wins.
 * ============================================================ */
:root{
  --k-bg:var(--kairos-bg);
  --k-panel:#161130;
  --k-panel-alt:rgba(255,255,255,.04);
  --k-line:var(--kairos-border);
  --k-text:var(--kairos-text);
  --k-muted:var(--kairos-muted);
  --k-primary:var(--kairos-octa);
  --k-primary-2:#7fe0d6;
  --k-accent:rgba(79,209,197,.14);
  --k-good:rgba(79,209,197,.12);
  --k-warn:rgba(242,177,52,.12);
  --k-danger:rgba(255,141,141,.12);
  --k-shadow:var(--kairos-shadow);
}

/* Sidebar (shell writes .sidebar .nav a — match it) */
.sidebar .nav a{color:var(--kairos-text); opacity:.85; border-radius:14px; font-weight:600;}
.sidebar .nav a:hover{background:var(--kairos-glass); opacity:1;}
.sidebar .nav a.active{
  background:rgba(79,209,197,.14);
  box-shadow:inset 2px 0 0 var(--kairos-octa), var(--kairos-inset);
  color:#fff; opacity:1;
}
.sidebar .portal-chip{
  background:rgba(79,209,197,.10);
  border:1px solid rgba(79,209,197,.35);
  color:var(--kairos-octa);
}
.sidebar .brand-subtitle{color:var(--kairos-octa); opacity:1;}
.sidebar .sidebar-toggle{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.sidebar .sidebar-footer{border-top:1px solid var(--kairos-border);}
body.sidebar-collapsed .sidebar .nav a[data-tooltip]:hover::after{
  background:#161130;
  border:1px solid rgba(79,209,197,.45);
  color:var(--kairos-text);
}

/* Topbar (shell writes [data-octa-topbar] .octa-*) */
.topbar{
  background:rgba(13,10,31,.55) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--kairos-border);
}
[data-octa-topbar] .octa-topbar-title-main{color:var(--kairos-text);}
[data-octa-topbar] .octa-topbar-title-sub{color:var(--kairos-octa);}
[data-octa-topbar] .octa-school-pill{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
}
[data-octa-topbar] .octa-school-badge{background:rgba(248,247,255,.94);}
[data-octa-topbar] .octa-school-name{color:var(--kairos-text);}
[data-octa-topbar] .octa-school-loc{color:var(--kairos-muted);}
[data-octa-topbar] .octa-notif-btn,
[data-octa-topbar] .octa-portal-link,
[data-octa-topbar] .octa-user-box{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
[data-octa-topbar] .octa-notif-btn:hover,
[data-octa-topbar] .octa-portal-link:hover,
[data-octa-topbar] .octa-user-box:hover{background:rgba(255,255,255,.10);}
[data-octa-topbar] .octa-notif-btn[aria-expanded="true"],
[data-octa-topbar] .octa-user-box[aria-expanded="true"]{
  background:rgba(79,209,197,.14);
  border-color:rgba(79,209,197,.4);
}
[data-octa-topbar] .octa-notif-badge{background:var(--kairos-octa); color:#03211d;}
[data-octa-topbar] .octa-notif-dropdown{
  background:#161130;
  border:1px solid var(--kairos-border);
  box-shadow:var(--kairos-shadow);
}
[data-octa-topbar] .octa-notif-header{background:#161130; border-color:rgba(255,255,255,.08);}
[data-octa-topbar] .octa-notif-eyebrow{color:var(--kairos-muted);}
[data-octa-topbar] .octa-notif-title{color:var(--kairos-text);}
[data-octa-topbar] .octa-notif-row{border-color:rgba(255,255,255,.07); color:var(--kairos-text);}
[data-octa-topbar] .octa-notif-row:hover{background:rgba(255,255,255,.05);}
[data-octa-topbar] .octa-notif-row.is-active{background:rgba(79,209,197,.10);}
[data-octa-topbar] .octa-notif-row.is-active:hover{background:rgba(79,209,197,.16);}
[data-octa-topbar] .octa-notif-row-icon{background:rgba(79,209,197,.12); color:var(--kairos-octa);}
[data-octa-topbar] .octa-notif-row-label{color:var(--kairos-text);}
[data-octa-topbar] .octa-notif-row-count{background:rgba(255,255,255,.08); color:var(--kairos-muted);}
[data-octa-topbar] .octa-notif-row-count.is-active{background:var(--kairos-octa); color:#03211d;}
[data-octa-topbar] .octa-notif-empty, [data-octa-topbar] .octa-notif-empty-sub{color:var(--kairos-muted);}
[data-octa-topbar] .octa-user-avatar{background:rgba(79,209,197,.12);}
[data-octa-topbar] .octa-user-dropdown{
  background:#161130;
  border:1px solid var(--kairos-border);
  box-shadow:var(--kairos-shadow);
}
[data-octa-topbar] .octa-user-menu-header{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08);}
[data-octa-topbar] .octa-user-menu-name{color:var(--kairos-text);}
[data-octa-topbar] .octa-user-menu-role{color:var(--kairos-muted);}
[data-octa-topbar] .octa-user-menu-item{color:var(--kairos-text);}
[data-octa-topbar] .octa-user-menu-item:hover{background:rgba(79,209,197,.10);}
[data-octa-topbar] .octa-user-menu-label{color:var(--kairos-text);}
[data-octa-topbar] .octa-user-menu-icon{color:var(--kairos-octa);}
[data-octa-topbar] .octa-user-menu-divider{background:var(--kairos-border);}


/* ── Page header ───────────────────────────────────────────────────────────
 * Converted pages (home / people / reports) use a slim flat .exec-header; the
 * pages still on .pg-header rendered a tall block with 24-26px display type,
 * so the portal changed shape as you navigated. These rules bring .pg-header
 * to the same weight WITHOUT touching each page's markup — one definition
 * instead of four hand-edits that would drift apart again.
 *
 * The lighter surface + blur match the tiles now that the canvas was lifted;
 * the previous rgba(22,17,48,.72) sat almost invisibly on it. */
.pg-header{
  background:linear-gradient(160deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.045) 100%) !important;
  background-color:rgba(45,36,84,.55) !important;
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  backdrop-filter:blur(16px) saturate(125%);
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.30);
  color:var(--kairos-text);
  border-radius:14px !important;
  padding:14px 18px !important;
  margin-bottom:18px !important;
}
/* Title down from hero scale to page-header scale, matching .exec-header. */
.pg-header h1{
  font-size:19px !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
  line-height:1.2 !important;
}
.pg-header .pg-sub,
.pg-header p{
  font-size:12.5px !important;
  line-height:1.5 !important;
  max-width:820px;
  margin-top:4px !important;
}

/* Icon-led section titles on the unconverted pages get the same 4x15 accent
   bar the converted pages use, so the two vocabularies read as one. */
.page-content .sec-title::before,
.page-content .section-title::before{
  content:"";
  width:4px; height:15px;
  border-radius:3px;
  background:var(--kairos-octa);
  display:inline-block;
  flex:0 0 auto;
  margin-right:2px;
}
.page-content .sec-title,
.page-content .section-title{
  display:flex;
  align-items:center;
  gap:9px;
}
.pg-header .school-logo-block{
  background:rgba(79,209,197,.12);
  border:1px solid rgba(79,209,197,.3);
  border-radius:999px;
}
.pg-header .pg-sub{color:var(--kairos-muted); opacity:1;}
.pg-header .activation-chip{
  background:rgba(79,209,197,.12);
  border:1px solid rgba(79,209,197,.35);
  color:var(--kairos-octa);
}
.octa-mark-orbit{position:relative; width:60px; height:60px; flex-shrink:0; display:block;}
.octa-mark-orbit .octa-mark-solid{
  position:absolute; inset:0; margin:auto; width:32px; height:32px;
  filter:drop-shadow(0 0 10px rgba(79,209,197,.35));
  animation:octa-settle 10s var(--kairos-ease-loop) infinite;
}
.octa-mark-orbit .octa-mark-solid polygon{
  fill:rgba(79,209,197,.16); stroke:var(--kairos-octa);
  stroke-width:1.6; stroke-linejoin:round;
}
.octa-mark-orbit .t-ring{position:absolute; inset:2px; border:1px dashed rgba(79,209,197,.30); border-radius:50%;}
.octa-mark-orbit .t-rotor{position:absolute; inset:0; animation:octa-spin 14s linear infinite;}
.octa-mark-orbit .t-rotor i{
  position:absolute; top:50%; left:50%; width:5px; height:5px; margin:-2.5px;
  border-radius:50%; background:var(--kairos-octa);
  box-shadow:0 0 8px rgba(79,209,197,.7);
  transform:rotate(var(--a)) translateY(-27px);
}
@media (prefers-reduced-motion: reduce){
  .octa-mark-orbit .octa-mark-solid, .octa-mark-orbit .t-rotor{animation:none !important;}
}


/* ── Octahedron: shared page components (tables, chips, modals, banners) ── */
.banner{
  background:rgba(79,209,197,.08);
  border:1px solid rgba(79,209,197,.3);
  color:var(--kairos-text);
}
.table-wrap{border:1px solid var(--kairos-border); background:rgba(22,17,48,.72);}
.table th{color:var(--kairos-muted); border-color:var(--kairos-border); background:rgba(255,255,255,.04);}
.table td{color:var(--kairos-text); border-color:rgba(255,255,255,.07);}
.table tr:hover td{background:rgba(79,209,197,.06);}
.cell-sub{color:var(--kairos-muted);}
.chip{
  background:rgba(255,255,255,.06);
  border:1px solid var(--kairos-border);
  color:var(--kairos-muted);
}
.modal{
  background:#161130;
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-shadow);
}
.empty{
  background:rgba(255,255,255,.03);
  border:1px dashed var(--kairos-border);
  color:var(--kairos-muted);
}
.page-content h1,.page-content h2,.page-content h3{color:var(--kairos-text);}
.page-content input[type="text"],.page-content input[type="search"],
.page-content input[type="email"],.page-content select,.page-content textarea{
  background:rgba(0,0,0,.28);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.page-content select option{background:var(--kairos-bg); color:var(--kairos-text);}


/* ── Hard overrides: the injected octa shell resists — force the model ── */
.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%) !important;
  border-right:1px solid var(--kairos-border) !important;
  border-radius:0 24px 24px 0 !important;
}
.sidebar .portal-chip{
  background:rgba(79,209,197,.10) !important;
  border:1px solid rgba(79,209,197,.35) !important;
  color:var(--kairos-octa) !important;
}
.sidebar .nav a{background:transparent !important; color:var(--kairos-text) !important;}
.sidebar .nav a:hover{background:rgba(255,255,255,.06) !important;}
.sidebar .nav a.active{
  background:rgba(79,209,197,.14) !important;
  box-shadow:inset 2px 0 0 var(--kairos-octa), var(--kairos-inset) !important;
}
.sidebar .brand-subtitle{color:var(--kairos-octa) !important;}
.topbar, [data-octa-topbar], [data-octa-topbar] .topbar{
  background:rgba(13,10,31,.55) !important;
  border-bottom:1px solid var(--kairos-border) !important;
  color:var(--kairos-text) !important;
}
[data-octa-topbar] .octa-topbar-title, [data-octa-topbar] .octa-topbar-title-main{color:var(--kairos-text) !important;}

/* ============================================================
 * Octahedron people & enrollment family (students / staff /
 * teachers / guardians / enrollment / profile / settings + details)
 * ============================================================
 * Page-local classes only. Shell, topbar, .pg-header, .panel,
 * .kpi, .table(-wrap), .chip base, .banner base, .btn base,
 * .modal and .empty are already themed by the skin above —
 * this section covers what the shared layers do not reach.
 * Same specificity as the page rules; wins by load order. */

/* ── Shared list kit (students / staff / guardians / enrollment) ── */
/* Local ".table thead th" outguns the skin's ".table th" — match it */
.table thead th{background:rgba(255,255,255,.04); color:var(--kairos-muted);}
.chip.tone-neutral{background:rgba(255,255,255,.08); border:1px solid var(--kairos-border); color:var(--kairos-muted);}
.chip.tone-good{background:rgba(79,209,197,.14); color:var(--kairos-good);}
.chip.tone-warn{background:rgba(242,177,52,.14); color:var(--kairos-warn);}
.chip.tone-danger{background:rgba(255,141,141,.14); color:var(--kairos-danger);}
.banner.warn{background:rgba(242,177,52,.12); border:1px solid rgba(242,177,52,.35); color:var(--kairos-text);}
.banner.danger{background:rgba(255,141,141,.12); border:1px solid rgba(255,141,141,.35); color:var(--kairos-text);}
.btn:hover{background:rgba(255,255,255,.10);}

/* Roster filter (students) */
.filter-row input{
  background:rgba(0,0,0,.28);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.filter-row input:focus{
  border-color:var(--kairos-octa);
  box-shadow:0 0 0 3px rgba(79,209,197,.16);
}

/* Invitation modal + form kit (staff) — covers input[type=date] too,
   which the shared .page-content input list does not include */
.modal-back{background:rgba(7,5,17,.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.form-row input, .form-row select{
  background:rgba(0,0,0,.28);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.form-row input:focus, .form-row select:focus{
  border-color:var(--kairos-octa);
  box-shadow:0 0 0 3px rgba(79,209,197,.16);
}
.status-line.error{color:var(--kairos-danger);}
.status-line.saved{color:var(--kairos-good);}

/* Invite code chip (enrollment) */
.ctx-code{
  background:rgba(0,0,0,.30);
  border:1px solid var(--kairos-border);
  color:var(--kairos-octa);
}

/* ── Profile + settings cards ── */
.info-cell{background:rgba(255,255,255,.04); border:1px solid var(--kairos-border);}
.section-card{background:rgba(255,255,255,.04); border:1px solid var(--kairos-border);}
.chip-soon{background:rgba(242,177,52,.14); color:var(--kairos-warn);}
.chip-readonly{background:rgba(255,255,255,.08); border:1px solid var(--kairos-border); color:var(--kairos-muted);}
.section-link{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-octa);
}
.section-link:hover{background:rgba(79,209,197,.10); border-color:var(--kairos-octa);}

/* ── Teachers roster (legacy kit — no .page-content wrapper, so the
      shared input/select rules above do not apply here) ── */
.filter-pill{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-muted);
}
.filter-pill:hover{border-color:var(--kairos-octa); color:var(--kairos-text);}
.filter-pill.active{
  background:rgba(79,209,197,.16);
  border-color:rgba(79,209,197,.4);
  color:var(--kairos-octa);
}
.search-box input, .form-group input, .form-group select{
  background:rgba(0,0,0,.28);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.search-box input:focus, .form-group input:focus, .form-group select:focus{border-color:var(--kairos-octa); outline:none;}
.form-group select option{background:#161130; color:var(--kairos-text);}
.action-button, .btn-primary{
  background:linear-gradient(135deg,#2a9d92 0%,#4fd1c5 100%);
  color:#03211d;
  border-color:transparent;
  box-shadow:var(--kairos-glow-octa), var(--kairos-inset);
}
.action-button:hover, .btn-primary:hover{background:linear-gradient(135deg,#33b3a6 0%,#7fe0d6 100%);}
.btn-cancel{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.btn-cancel:hover{border-color:var(--kairos-octa);}
.data-table thead{background:rgba(255,255,255,.04); border-bottom:2px solid var(--kairos-border);}
.data-table th{color:var(--kairos-muted);}
.data-table th:hover{color:var(--kairos-octa);}
.data-table tbody tr{border-color:rgba(255,255,255,.07);}
.data-table tbody tr:hover{background:rgba(79,209,197,.06);}
.teacher-name{color:var(--kairos-text);}
.avatar-circle{background:rgba(79,209,197,.14); color:var(--kairos-octa);}
.status-badge.status-active{background:rgba(79,209,197,.14); color:var(--kairos-good);}
.status-badge.status-suspended{background:rgba(255,141,141,.14); color:var(--kairos-danger);}
.progress-fill{background:linear-gradient(90deg,#2a9d92,#4fd1c5);}
.backlog-warn{color:var(--kairos-warn);}
.backlog-danger{color:var(--kairos-danger);}
/* .alert-item is shared vocabulary: danger strip on the roster,
   warn card on teacher-detail — neutral surface, tinted borders stay local */
.alert-item{background:rgba(255,255,255,.04);}
.modal-overlay{background:rgba(7,5,17,.6);}
.backend-contract{background:rgba(7,5,17,.85); border:1px solid var(--kairos-border);}
.backend-contract h3{color:var(--kairos-octa);}
.contract-content{background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08);}

/* ── Detail pages (student-detail / teacher-detail) ── */
.summary-card{
  background:var(--kairos-grad-glass);
  background-color:rgba(22,17,48,.72);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-inset);
}
.breadcrumb{background:rgba(13,10,31,.55); border-bottom:1px solid var(--kairos-border);}
.status-pill{background:rgba(79,209,197,.14); color:var(--kairos-good);}
.status-pill.good{background:rgba(79,209,197,.14); color:var(--kairos-good);}
.status-pill.danger{background:rgba(255,141,141,.14); color:var(--kairos-danger);}
.chip.good{background:rgba(79,209,197,.14); color:var(--kairos-good);}
.chip.warn{background:rgba(242,177,52,.14); color:var(--kairos-warn);}
.chip.danger{background:rgba(255,141,141,.14); color:var(--kairos-danger);}
.note-strip{background:rgba(242,177,52,.14); color:var(--kairos-warn);}
.danger-banner{
  background:rgba(255,141,141,.14);
  border-left-color:var(--kairos-danger);
  color:var(--kairos-danger);
}
.info-banner{
  background:rgba(242,177,52,.12);
  border-left-color:var(--kairos-warn);
  color:var(--kairos-text);
}
.panel.danger{border-color:rgba(255,141,141,.45);}
.alert-card{background:rgba(255,141,141,.06); border-color:rgba(255,141,141,.35);}
.alert-badge.critical{background:var(--kairos-danger); color:#3d0d0d;}
.alert-badge.high{background:rgba(255,141,141,.2); color:var(--kairos-danger);}
.alert-badge.medium{background:rgba(242,177,52,.2); color:var(--kairos-warn);}
.risk-chip.high{background:rgba(255,141,141,.14); color:var(--kairos-danger);}
.risk-chip.medium{background:rgba(242,177,52,.14); color:var(--kairos-warn);}
.no-alerts{background:rgba(79,209,197,.12); color:var(--kairos-good);}
.week-bar{background:linear-gradient(180deg,#2a9d92,#4fd1c5); color:#03211d;}
.bar-fill{background:linear-gradient(90deg,#2a9d92,#4fd1c5);}
.fsm-state.active{background:var(--kairos-octa); color:#03211d;}
.backend-block{border:1px solid var(--kairos-border);}

/* ============================================================
 * Octahedron operations & communications family
 * (announcements / infrastructure / operations / budget /
 *  reports / grades-sections + details)
 * ============================================================
 * Page-local classes → Kairos glass. The skin's :root remap
 * (--bg/--panel/--primary/--text/--muted/--line/--accent and the
 * --good/--warn/--danger .12 tints) already flips every rule that
 * reads those vars — this section only covers what stays hardcoded:
 * white surfaces, light-theme state colors, purple CTAs, and the
 * shared *-detail kit injected under the octa shell. */

/* ── Filter bars & toolbars (announcements / infra / ops / grades) ── */
.filter-bar, .section-filter{
  background:var(--kairos-grad-glass);
  background-color:rgba(22,17,48,.72);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-inset);
}
/* Base pills paint white; active pills paint solid purple→teal with
   white text — restate both as the skin's tint-chip model */
.pill{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.filter-pill{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-muted);
}
.pill.active, .filter-pill.active{
  background:rgba(79,209,197,.16);
  border-color:rgba(79,209,197,.4);
  color:var(--kairos-octa);
}
.filter-pill:hover{background:rgba(79,209,197,.10); color:var(--kairos-text);}

/* ── Glass surfaces (cards, list rows, side panels, summaries) ── */
.announcement-card, .panel-card, .quick-card, .grade-group,
.summary-card, .modal-content{
  background:var(--kairos-grad-glass);
  background-color:rgba(22,17,48,.72);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
  box-shadow:var(--kairos-inset);
}
.announcement-card:hover{
  border-color:rgba(79,209,197,.5);
  box-shadow:0 0 24px rgba(79,209,197,.14), var(--kairos-inset);
}
.status-card{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.status-card-chip{color:var(--kairos-warn);}

/* Inner cards / quoted blocks — quiet tier inside a panel. These
   keep their original teal (was purple) left edges via var remap;
   only the light backgrounds need re-basing. */
.item{background:rgba(255,255,255,.04); border-color:var(--kairos-border);}
.description-text, .summary-text, .announcement-body,
.note-item, .related-item, .action-card, .fsm-actions{
  background:rgba(255,255,255,.04);
}
.related-item:hover{background:rgba(79,209,197,.08);}
.alert-item{background:rgba(255,255,255,.04); border-color:rgba(255,141,141,.35);}
.empty-state{background:rgba(255,255,255,.03); color:var(--kairos-muted);}
.grade-header:hover{background:rgba(79,209,197,.20);}
.panel.danger{border-color:rgba(255,141,141,.45);}

/* ── Tables (incidents / alerts) — budget's .table is already skinned ── */
.incident-table, .alert-table{
  background:rgba(22,17,48,.72);
  border:1px solid var(--kairos-border);
}

/* ── Status vocabulary — light chips → dark .14 tints ──
   good  = teal   #4fd1c5   warn = amber #f2b134
   danger= coral  #ff8d8d   info = violet #a78bfa (was light blue) */
.severity-low, .priority-low, .status-resolved, .capacity-badge.active,
.chip-low, .chip-published, .chip.good, .badge.good, .status-pill{
  background:rgba(79,209,197,.14);
  color:var(--kairos-good);
}
.severity-high, .priority-high, .status-acknowledged, .capacity-badge.at-capacity,
.chip-medium, .chip-scheduled, .chip-review, .badge.warn, .chip.warn{
  background:rgba(242,177,52,.14);
  color:var(--kairos-warn);
}
.severity-critical, .priority-critical, .status-open, .capacity-badge.critical,
.chip-high, .chip.danger, .badge.critical{
  background:rgba(255,141,141,.14);
  color:var(--kairos-danger);
}
.severity-medium, .priority-medium, .status-inprog, .status-escalated,
.chip-submitted{
  background:rgba(167,139,250,.16);
  color:var(--kairos-purple-soft);
}
.status-closed, .chip-draft, .chip-archived, .badge.status{
  background:rgba(255,255,255,.08);
  color:var(--kairos-muted);
}
/* Audience chips (announcements) — original hue intent, Kairos palette */
.chip-teachers{background:rgba(167,139,250,.16); color:var(--kairos-purple-soft);}
.chip-students{background:rgba(79,209,197,.14);  color:var(--kairos-good);}
.chip-guardians{background:rgba(244,114,182,.16); color:#f9a8d4;}
.chip-all{background:rgba(242,177,52,.14); color:var(--kairos-warn);}
.source-badge.dodeca{background:rgba(244,114,182,.16); color:#f9a8d4;}
/* Bare state words (infra/ops "pill good|warn|danger") — the var remap
   already darkens their backgrounds; only the light-theme ink remains */
.good{color:var(--kairos-good);}
.warn{color:var(--kairos-warn);}
.danger{color:var(--kairos-danger);}
.teacher-unassigned{color:var(--kairos-danger);}
.distribution-status, .download-info{color:var(--kairos-good);}

/* ── CTAs — solid purple/teal + white text → skin's teal gradient ── */
.btn-primary, .modal-buttons .primary, .section-action{
  background:linear-gradient(135deg,#2a9d92 0%,#4fd1c5 100%);
  color:#03211d;
  border-color:transparent;
  box-shadow:var(--kairos-glow-octa), var(--kairos-inset);
}
.btn-primary:hover{opacity:1; background:linear-gradient(135deg,#33b3a6 0%,#7fe0d6 100%);}
.btn-secondary, .btn-small, .incident-btn, .alert-btn, .action-btn{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.action-btn:hover{
  background:linear-gradient(135deg,#2a9d92 0%,#4fd1c5 100%);
  color:#03211d;
}
.modal-buttons .secondary{background:rgba(255,255,255,.08); color:var(--kairos-text);}
.quick-action-btn{
  background:rgba(255,255,255,.04);
  border:1px solid var(--kairos-border);
}
.quick-action-btn:hover{background:rgba(79,209,197,.10);}

/* ── Forms — filter + modal inputs live outside .page-content ── */
.filter-input, .filter-select, .modal-input, .modal-textarea,
.form-input, .textarea-area, .modal textarea,
.form-group input, .form-group select, .form-group textarea{
  background:rgba(0,0,0,.28);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.filter-input:focus, .filter-select:focus, .modal-input:focus,
.modal-textarea:focus, .form-input:focus, .textarea-area:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none;
  border-color:var(--kairos-octa);
}
.filter-input::placeholder, .modal-input::placeholder,
.modal-textarea::placeholder, .form-input::placeholder{color:var(--kairos-muted);}
.filter-select option, .modal-input option, .form-group select option{
  background:#161130;
  color:var(--kairos-text);
}

/* ── Modals — announcements' .modal is the *overlay* (its dialog is
   .modal-content); the skin's generic .modal panel rule would turn
   that overlay into a solid slab, so restate it explicitly ── */
.modal#announcementModal{
  background:rgba(5,3,14,.65);
  border:none;
  box-shadow:none;
}

/* ── Detail kit (announcement / issue / alert / request / report) ── */
.breadcrumb{
  background:rgba(13,10,31,.55);
  border-bottom:1px solid var(--kairos-border);
}
.badge{background:rgba(255,255,255,.08); color:var(--kairos-text);}
.fsm-circle.active{
  background:var(--kairos-octa);
  box-shadow:0 0 8px rgba(79,209,197,.6);
}
.fsm-circle.inactive{background:rgba(255,255,255,.18);}
.fsm-state.active{
  background:rgba(79,209,197,.16);
  color:var(--kairos-octa);
}
.info-banner{
  background:rgba(242,177,52,.10);
  border-left-color:var(--kairos-warn);
  color:var(--kairos-text);
}
.alert-box{background:rgba(242,177,52,.10); border-left-color:var(--kairos-warn);}
.alert-box.danger{background:rgba(255,141,141,.10); border-left-color:var(--kairos-danger);}
.readonly-note{
  border-color:rgba(242,177,52,.35);
  color:var(--kairos-warn);
}

/* ── Budget visuals ── */
/* Purple bar keeps the Kairos violet identity (matches .snap-bar-fill) */
.budget-bar{background:linear-gradient(90deg,#5b4bd6,#a78bfa);}
/* Donut: the 243.216deg split is baked into the page rule — restated
   here with skin colors; update in lockstep if the page angle changes */
.donut{background:conic-gradient(var(--kairos-octa) 0deg 243.216deg, rgba(255,255,255,.12) 243.216deg 360deg);}
.donut-center{background:#161130;}

/* ── Backend contract blocks — near-dark already; settle them into
   the panel world (code-syntax inks stay as authored) ── */
.backend-contract, .backend-box, .backend-block{
  background:#0f0a24;
  border:1px solid rgba(124,77,255,.25);
}

/* ============================================================
 * Shell surface parity with the Tetrahedron model — the injected
 * octa-shell sidebar/topbar must read as the same dark glass world
 * as tetra's k-sidebar. Selectors match octa-shell.css exactly
 * (same specificity, skin loads last, wins the tie).
 * ============================================================ */
[data-octa-sidebar],
.sidebar{
  background:
    radial-gradient(circle at 18% 10%, rgba(79,209,197,.13), transparent 30%),
    linear-gradient(180deg, rgba(13,10,31,.92) 0%, rgba(7,5,17,.96) 100%);
  color:var(--kairos-text);
  border-right:1px solid var(--kairos-border);
  border-radius:0;
  box-shadow:var(--kairos-inset);
}
[data-octa-sidebar] .brand-text,
.sidebar .brand-text{color:var(--kairos-text);}
[data-octa-topbar],
.topbar{
  background:rgba(13,10,31,.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--kairos-border);
  box-shadow:none;
}
[data-octa-topbar] .octa-notif-btn{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
[data-octa-topbar] .octa-portal-link{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
[data-octa-topbar] .octa-portal-link:hover{border-color:var(--kairos-octa); color:var(--kairos-octa);}

/* Home checklist + quick actions — were still paper-white */
.check{
  background:var(--kairos-grad-glass);
  background-color:rgba(22,17,48,.72);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.check .muted, .check small{color:var(--kairos-muted);}
.qa-card{
  background:var(--kairos-grad-glass);
  background-color:rgba(22,17,48,.72);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.qa-card:hover{border-color:rgba(79,209,197,.5); box-shadow:0 0 24px rgba(79,209,197,.14), var(--kairos-inset);}

/* ============================================================
 * Topbar widget parity with Tetrahedron (topbar-shell.js look):
 * same avatar chip, bell, dropdown surfaces — octa classes,
 * tetra recipe, teal accent. Selectors match octa-shell.css
 * ([data-octa-topbar] .octa-*) so the tie goes to load order.
 * ============================================================ */
[data-octa-topbar] .octa-notif-btn{
  width:36px; height:36px; border-radius:10px;
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
[data-octa-topbar] .octa-notif-btn:hover{background:rgba(255,255,255,.10); border-color:var(--kairos-border);}
[data-octa-topbar] .octa-notif-btn[aria-expanded="true"]{background:rgba(79,209,197,.14); border-color:rgba(79,209,197,.35);}
[data-octa-topbar] .octa-notif-badge{
  background:var(--kairos-octa); color:#03211d;
  box-shadow:0 4px 10px rgba(79,209,197,.35);
  border:none;
}
[data-octa-topbar] .octa-user-box{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  border-radius:14px; gap:8px; padding:6px 10px 6px 6px;
}
[data-octa-topbar] .octa-user-box:hover{background:rgba(255,255,255,.10); border-color:var(--kairos-border);}
[data-octa-topbar] .octa-user-box:focus-visible,
[data-octa-topbar] .octa-user-box[aria-expanded="true"]{
  background:rgba(79,209,197,.14);
  border-color:rgba(79,209,197,.35);
  box-shadow:none;
}
[data-octa-topbar] .octa-user-avatar{
  width:40px; height:40px;
  background:rgba(79,209,197,.12);
  color:var(--kairos-octa);
}
[data-octa-topbar] .octa-user-name{font-weight:700; font-size:15px; color:var(--kairos-text); max-width:160px;}
[data-octa-topbar] .octa-user-role{color:var(--kairos-muted);}
[data-octa-topbar] .octa-user-caret{color:var(--kairos-muted);}
[data-octa-topbar] .octa-user-box[aria-expanded="true"] .octa-user-caret{color:var(--kairos-octa);}
/* School pill (left) — same chip language as tetra's school block */
[data-octa-topbar] .octa-school-pill{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
}
[data-octa-topbar] .octa-school-badge{background:rgba(248,247,255,.94); color:#2a2054; border:none;}
[data-octa-topbar] .octa-school-name{color:var(--kairos-text); font-weight:700; font-size:15px;}
[data-octa-topbar] .octa-school-loc{color:var(--kairos-muted);}
[data-octa-topbar] .octa-topbar-title-main{color:var(--kairos-text);}
[data-octa-topbar] .octa-topbar-title-sub{color:var(--kairos-octa);}
/* Dropdown surfaces — solid dark like tetra's */
[data-octa-topbar] .octa-notif-dropdown,
[data-octa-topbar] .octa-user-dropdown{
  background:#161130;
  border:1px solid var(--kairos-border);
  box-shadow:var(--kairos-shadow);
  color:var(--kairos-text);
}
[data-octa-topbar] .octa-notif-header,
[data-octa-topbar] .octa-user-menu-header{
  background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--kairos-border);
}
[data-octa-topbar] .octa-notif-eyebrow{color:var(--kairos-octa);}
[data-octa-topbar] .octa-notif-title{color:var(--kairos-text);}
[data-octa-topbar] .octa-notif-empty,
[data-octa-topbar] .octa-notif-empty-sub{color:var(--kairos-muted);}
[data-octa-topbar] .octa-notif-item{border-bottom:1px solid rgba(255,255,255,.07); color:var(--kairos-text);}
[data-octa-topbar] .octa-notif-item:hover{background:rgba(255,255,255,.05);}
[data-octa-topbar] .octa-notif-item.unread{background:rgba(79,209,197,.08);}
[data-octa-topbar] .octa-user-menu-item{color:var(--kairos-text);}
[data-octa-topbar] .octa-user-menu-item:hover{background:rgba(79,209,197,.10);}
[data-octa-topbar] .octa-user-menu-item.logout{color:var(--kairos-danger);}
[data-octa-topbar] .octa-user-menu-divider{background:var(--kairos-border);}
[data-octa-topbar] .octa-user-menu-error{color:var(--kairos-danger);}

/* ============================================================
 * Topbar layout parity with the dodeca/tetra model:
 * left = round school badge + name/sub, right = bell + avatar ONLY.
 * Page title and Portal switcher hidden (the sidebar carries page
 * context; portal switching lives in the user menu).
 * ============================================================ */
[data-octa-topbar] .octa-topbar-title{display:none;}
[data-octa-topbar] .octa-portal-link{display:none;}
[data-octa-topbar] .octa-school-pill{
  background:transparent;
  border:none;
  padding:0;
  box-shadow:none;
}
/* School logo chip — LAST definition of .octa-school-badge in this file, so
 * this is the one that actually paints. A school logo is artwork we do not
 * control (the first real one is dark maroon on transparent) and it vanished
 * against the previous dark teal fill. The chip therefore carries a light,
 * near-neutral backing so a dark mark reads, plus a hairline ring so a
 * white/light mark still shows its edge. See octa-shell.css for the geometry
 * (object-fit:contain + padding) that keeps the whole mark visible. */
[data-octa-topbar] .octa-school-badge{
  width:40px; height:40px; border-radius:999px;
  background:rgba(248,247,255,.94);
  box-shadow:inset 0 0 0 1px rgba(15,10,35,.18);
  color:#2a2054;                /* initials fallback: dark ink on a light chip */
  padding:4px;
}
[data-octa-topbar] .octa-school-name{font-weight:700; font-size:15px; color:var(--kairos-text); line-height:1.1;}
[data-octa-topbar] .octa-school-loc{font-size:11px; color:var(--kairos-octa); line-height:1.1;}

/* ── Dropdown geometry + SVG icon sizing — parity with tetra's
      kairos-notif/user dropdowns (390/240px, radius 22) ── */
[data-octa-topbar] .octa-notif-dropdown{width:390px; max-height:520px; border-radius:22px;}
[data-octa-topbar] .octa-user-dropdown{width:240px; border-radius:22px;}
[data-octa-topbar] .octa-notif-btn svg{width:18px; height:18px; display:block;}
[data-octa-topbar] .octa-portal-link svg{width:16px; height:16px; display:block;}
[data-octa-topbar] .octa-user-menu-icon{display:inline-flex; align-items:center; justify-content:center; color:var(--kairos-muted);}
[data-octa-topbar] .octa-user-menu-icon svg{width:17px; height:17px; display:block;}
[data-octa-topbar] .octa-user-menu-item:hover .octa-user-menu-icon{color:var(--kairos-octa);}
[data-octa-topbar] .octa-user-menu-item.logout .octa-user-menu-icon{color:var(--kairos-danger);}
@media (max-width:640px){
  [data-octa-topbar] .octa-notif-dropdown{width:min(92vw,390px); right:-10px;}
  [data-octa-topbar] .octa-user-dropdown{width:min(88vw,240px); right:-10px;}
}

/* User menu items — tetra layout: label left, chevron right, no icons */
[data-octa-topbar] .octa-user-menu-item{justify-content:space-between; gap:12px;}