/* ============================================================================
 * Icosahedron (Impact) — Kairos glass skin (studio/portal-kits/icosahedron)
 * 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-icosa:#f2b134;
  --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-icosa:0 0 24px rgba(242,177,52,.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-icosa);
  --primary2:#f7c766;
  --text:var(--kairos-text);
  --muted:var(--kairos-muted);
  --line:var(--kairos-border);
  --accent:rgba(242,177,52,.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 ---------- */
html,body{
  background:radial-gradient(120% 120% at 50% 0%,#1a1236 0%,#0d0a1f 55%,#070511 100%) fixed, var(--kairos-bg-deep);
  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-icosa); opacity:1;}
.portal-chip{
  background:rgba(242,177,52,.10);
  border:1px solid rgba(242,177,52,.35);
  color:var(--kairos-icosa);
}
.nav a{color:var(--kairos-text); opacity:.85;}
.nav a:hover{background:var(--kairos-glass); opacity:1;}
.nav a.active{
  background:rgba(242,177,52,.14);
  box-shadow:inset 2px 0 0 var(--kairos-icosa), 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(242,177,52,.45) !important;
  color:var(--kairos-text) !important;
  box-shadow:var(--kairos-shadow), var(--kairos-glow-icosa) !important;
}
#kGlobalTooltipArrow{
  background:#161130 !important;
  border-left:1px solid rgba(242,177,52,.45) !important;
  border-top:1px solid rgba(242,177,52,.45) !important;
}

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

/* ---------- 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-icosa);}
.user-box, .kairos-user-box{background:var(--kairos-glass); border:1px solid var(--kairos-border);}
.school-logo, .user-avatar{background:rgba(242,177,52,.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-icosa); color:#231402;}
.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(242,177,52,.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(242,177,52,.08);}
.kairos-notif-item.unread::before{background:var(--kairos-icosa);}
.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-icosa);}
.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(242,177,52,.16); color:var(--kairos-icosa); border-color:rgba(242,177,52,.4);}

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

/* Hero — keep the violet identity, deepen it into the glass world */
.hero{
  background:
    radial-gradient(circle at 80% 10%, rgba(242,177,52,.20), transparent 45%),
    linear-gradient(135deg,#3c2a06 0%,#5c4210 55%,#8a651f 100%);
  border:1px solid rgba(167,139,250,.30);
  box-shadow:var(--kairos-glow-icosa), 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-icosa);}
.btn.primary{
  background:linear-gradient(135deg,#d99a1f 0%,#f2b134 100%);
  color:#231402;
  border-color:transparent;
  box-shadow:var(--kairos-glow-icosa), var(--kairos-inset);
}
.btn.primary:hover{background:linear-gradient(135deg,#e6ab2e 0%,#f7c766 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(242,177,52,.14); border:1px solid rgba(242,177,52,.35); color:var(--kairos-icosa);}
.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: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(242,177,52,.5); box-shadow:0 0 24px rgba(242,177,52,.14), var(--kairos-inset);}
.work-title{color:var(--kairos-text);}
.work-meta, .work-copy{color:var(--kairos-muted);}
.work-glyph{background:rgba(242,177,52,.12); border:1px solid rgba(242,177,52,.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-icosa);
  outline-offset:2px;
  border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  .icosa-orbit .icosa-solid, .icosa-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 .icosa-orbit{width:40px; height:40px; margin:0 auto;}
body.sidebar-collapsed .icosa-orbit .icosa-solid{width:22px; height:22px;}
body.sidebar-collapsed .icosa-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){ .icosa-orbit .icosa-solid{animation:none !important;} }

/* ============================================================
 * Icosa family (impact / programs / regions / reports /
 * schools / sponsorship / updates)
 * ------------------------------------------------------------
 * All seven pages ship the SAME static ops template (byte-identical
 * inline <style> to home): .hero + .hero-stats KPI band, .quick-grid/
 * .quick-card, .grid > .panel, .item rows, .pill good|warn chips,
 * .btn CTAs. No forms, no selects, no JS-hydrated content — the only
 * runtime markup is the topbar widget swap (topbar-shell.js removes
 * the static .notif/.user-box and injects the already-themed
 * kairos-notif/kairos-user kit).
 * Already covered by earlier skin sections — NOT repeated here:
 * shell/sidebar/orbit, .topbar, .user-box, .hero/.hero-stat/.btn/
 * .btn.primary, .pill.good|warn|danger|soft|neutral, token remap
 * (--primary/--muted/--line/--accent/--good...). Below are only the
 * hardcoded-light locals the remap cannot reach.
 * ============================================================ */

/* The shared skin hides .hero-stats for the Home layout ("duplicated
   numbers" note inherited from the cube skin); on this family the
   hero stats ARE the page KPIs (Students Reached / Featured Stories /
   Pledged Support...), so re-open them wherever a real .hero ships
   them — same move as the dodeca families. Local media queries only
   retune grid-template-columns, so responsiveness survives. */
.hero .hero-stats{display:grid;}

/* Card surfaces — locals hardcode #fff (.quick-card/.panel) and
   #fcfcff (.item); borders already flip via the --line remap but are
   restated so the glass recipe stands alone */
.quick-card, .panel{
  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);
}
.quick-card:hover{border-color:rgba(242,177,52,.5);}
.quick-card h3, .panel h2{color:var(--kairos-text);}
/* .quick-card p / .quick-card a read --muted / --primary — remapped */

/* Item rows inside the panels (snapshot + guidance columns) */
.item{
  background:rgba(255,255,255,.04);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.item h3{color:var(--kairos-text);}
.item p{color:var(--kairos-muted);}

/* Bare state chips — locals pair light pastel bg with dark ink
   (.good #18794e / .warn #9a6700 / .danger #b42318). This family only
   ever ships them as .pill good|warn (already themed at (0,2,0) by the
   skin), but re-ink the bare (0,1,0) classes so any future bare use
   lands on the Kairos tints instead of dark-on-dark. */
.good{background:rgba(79,209,197,.14); color:var(--kairos-good);}
.warn{background:rgba(242,177,52,.14); color:var(--kairos-warn);}
.danger{background:rgba(255,141,141,.14); color:var(--kairos-danger);}

/* Collapsed-sidebar hover tooltip — these pages run the inline toggle
   script (no cube-student-canonical-sidebar.js, so no #kGlobalTooltip
   here); the local ::after chip ships slate #1f2430 + a light-theme
   drop shadow. Re-dress it to the same glass/amber chip the skin
   gives #kGlobalTooltip. Same selector as the local rule — the skin
   loads last, so the tie breaks our way. */
body.sidebar-collapsed .nav a:hover::after{
  background:#161130;
  border:1px solid rgba(242,177,52,.45);
  color:var(--kairos-text);
  box-shadow:var(--kairos-shadow), var(--kairos-glow-icosa);
}

/* Static topbar bell — removed at runtime by topbar-shell.js (the
   themed kairos-notif widget replaces it), themed anyway so a JS-off /
   pre-swap frame never flashes a white chip. Badge bg auto-remaps to
   amber via --primary; only the #fff ink needs the dark flip. */
.notif{
  background:var(--kairos-glass);
  border:1px solid var(--kairos-border);
  color:var(--kairos-text);
}
.notif-badge{color:#231402;}