/* ============================================================================
   KAIROS WORKSPACE OS — Design System v1
   Token-based, light + dark. Presentation only — no data, no behavior.
   Reusable across the whole Course Detail (Tetrahedron) family. Later phases
   compose UI exclusively from the .kw-* components defined here.

   Theme is driven by  body[data-theme="light" | "dark"].
   Every color/space/shadow is a CSS variable — no duplicated component CSS
   between themes; only the token block changes per theme.
   ========================================================================== */

/* ── Tokens · LIGHT (default) ─────────────────────────────────────────────── */
:root{
  /* surfaces */
  --kw-bg:#f5f6fb;            --kw-bg-2:#eceef7;
  --kw-surface:#ffffff;       --kw-surface-2:#f9f9fd;   --kw-surface-3:#f2f3fa;
  --kw-glass:rgba(255,255,255,.72);
  --kw-border:#e9e7f2;        --kw-border-2:#f0eef7;

  /* text */
  --kw-text:#1b1f2a;          --kw-text-2:#42485a;      --kw-muted:#767c8c;
  --kw-on-accent:#ffffff;

  /* brand + semantic */
  --kw-accent:#4b2aad;        --kw-accent-2:#0891b2;    --kw-accent-soft:#f2ecff;
  --kw-ok:#0f766e;            --kw-ok-soft:#e6f7ef;
  --kw-warn:#9a6700;          --kw-warn-soft:#fff7e6;
  --kw-danger:#b42318;        --kw-danger-soft:#fdecec;

  /* gradients */
  --kw-grad-brand:linear-gradient(135deg,#3a1f8f,#6d4bd8 58%,#0891b2);
  --kw-grad-ai:linear-gradient(135deg,#2f1688,#4b2aad 55%,#0e7490);
  --kw-canvas-glow:radial-gradient(1200px 420px at 100% -12%, var(--kw-accent-soft), transparent 62%);

  /* radius */
  --kw-r:22px; --kw-r-md:16px; --kw-r-sm:13px; --kw-r-xs:10px; --kw-r-pill:999px;

  /* elevation */
  --kw-sh-1:0 1px 2px rgba(17,24,39,.04), 0 4px 14px rgba(17,24,39,.05);
  --kw-sh-2:0 10px 30px rgba(31,36,48,.09);
  --kw-sh-3:0 22px 54px rgba(75,42,173,.16);
  --kw-ring:0 0 0 3px rgba(75,42,173,.16);

  /* motion */
  --kw-ease:cubic-bezier(.22,.61,.36,1);
  --kw-dur:.18s;
}

/* ── Tokens · DARK (own visual language, not an inversion) ─────────────────── */
body[data-theme="dark"]{
  --kw-bg:#0d0d13;            --kw-bg-2:#08080d;
  --kw-surface:#15151f;       --kw-surface-2:#1a1a26;   --kw-surface-3:#20202e;
  --kw-glass:rgba(24,24,34,.62);
  --kw-border:#282838;        --kw-border-2:#20202c;

  --kw-text:#ececf4;          --kw-text-2:#c0c2d0;      --kw-muted:#8c8ea6;
  --kw-on-accent:#ffffff;

  --kw-accent:#8f74f2;        --kw-accent-2:#22d3ee;    --kw-accent-soft:#221b3d;
  --kw-ok:#34d399;            --kw-ok-soft:#12251f;
  --kw-warn:#fbbf24;          --kw-warn-soft:#2a2110;
  --kw-danger:#f87171;        --kw-danger-soft:#2a1414;

  --kw-grad-brand:linear-gradient(135deg,#2a1970,#5a3fc0 55%,#0e7490);
  --kw-grad-ai:linear-gradient(135deg,#241a52,#4530a0 55%,#0e7490);
  --kw-canvas-glow:radial-gradient(1200px 420px at 100% -12%, rgba(143,116,242,.14), transparent 62%);

  --kw-sh-1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  --kw-sh-2:0 14px 36px rgba(0,0,0,.5);
  --kw-sh-3:0 24px 60px rgba(90,64,190,.42);
  --kw-ring:0 0 0 3px rgba(143,116,242,.24);
}

/* Respect OS preference before an explicit choice is stored (JS sets data-theme). */
@media (prefers-color-scheme: dark){
  body:not([data-theme]){ color-scheme:dark; }
}

/* ── Base canvas ──────────────────────────────────────────────────────────── */
.kw-os{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  color:var(--kw-text);
  background:var(--kw-canvas-glow), var(--kw-bg);
  transition:background .3s var(--kw-ease), color .3s var(--kw-ease);
}
.kw-stack{display:flex;flex-direction:column;gap:18px;}
.kw-grid{display:grid;gap:18px;}

/* ══════════════════════════════════════════════════════════════════════════
   REUSABLE COMPONENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · HERO ---------------------------------------------------------------- */
.kw-hero{
  position:relative;border-radius:var(--kw-r);overflow:hidden;min-height:176px;
  border:1px solid var(--kw-border);box-shadow:var(--kw-sh-2);
  background:var(--kw-grad-brand);
}
.kw-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,12,24,.12),rgba(9,12,24,.62));}
.kw-hero__body{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;padding:22px 24px;min-height:176px;}
.kw-hero__eyebrow{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.8);}
.kw-hero__title{margin:6px 0 10px;font-size:30px;line-height:1.04;font-weight:800;letter-spacing:-.025em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.35);}
.kw-hero__initials{position:absolute;inset:0;display:grid;place-items:center;font-size:76px;font-weight:900;color:rgba(255,255,255,.14);letter-spacing:-.03em;pointer-events:none;}

/* 2 · SECTION HEADER ------------------------------------------------------ */
.kw-section-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px;}
.kw-section-header__title{margin:0 0 3px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--kw-text);}
.kw-section-header__sub{margin:0;font-size:12.5px;color:var(--kw-muted);line-height:1.45;}

/* 3 · GLASS CARD ---------------------------------------------------------- */
.kw-glass-card{
  background:var(--kw-glass);backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid var(--kw-border);border-radius:var(--kw-r);
  box-shadow:var(--kw-sh-1);padding:18px 20px;
}

/* 4 · METRIC CARD --------------------------------------------------------- */
.kw-metric-card{
  position:relative;overflow:hidden;background:var(--kw-surface);
  border:1px solid var(--kw-border);border-radius:var(--kw-r-md);padding:16px 18px;
  box-shadow:var(--kw-sh-1);transition:transform var(--kw-dur) var(--kw-ease),box-shadow var(--kw-dur) var(--kw-ease),border-color var(--kw-dur) var(--kw-ease);
}
.kw-metric-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kw-accent);opacity:.9;}
.kw-metric-card--cyan::before{background:var(--kw-accent-2);}
.kw-metric-card--warn::before{background:var(--kw-warn);}
.kw-metric-card--ok::before{background:var(--kw-ok);}
.kw-metric-card--danger::before{background:var(--kw-danger);}
.kw-metric-card:hover{transform:translateY(-2px);box-shadow:var(--kw-sh-2);border-color:var(--kw-accent);}
.kw-metric-card__label{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--kw-muted);}
.kw-metric-card__value{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--kw-text);line-height:1.05;margin:6px 0 4px;}
.kw-metric-card__meta{font-size:11.5px;color:var(--kw-muted);font-weight:600;line-height:1.35;}

/* 5 · INSIGHT CARD (student signal: avatar · title · action · badge) ------ */
.kw-insight-card{display:flex;align-items:center;gap:12px;background:var(--kw-surface-2);border:1px solid var(--kw-border-2);border-radius:var(--kw-r-sm);padding:11px 13px;}
.kw-insight-card__avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;background:var(--kw-grad-brand);overflow:hidden;}
.kw-insight-card__avatar img{width:100%;height:100%;object-fit:cover;}
.kw-insight-card__body{min-width:0;flex:1;}
.kw-insight-card__title{font-size:13px;font-weight:800;color:var(--kw-text);}
.kw-insight-card__meta{font-size:11.5px;color:var(--kw-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 6 · TIMELINE CARD (recent activity) ------------------------------------- */
.kw-timeline{display:flex;flex-direction:column;gap:2px;}
.kw-timeline-card{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:10px 2px;position:relative;}
.kw-timeline-card__time{font-size:11px;font-weight:800;color:var(--kw-muted);white-space:nowrap;padding-top:2px;min-width:56px;}
.kw-timeline-card__dot{position:absolute;left:60px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--kw-accent);box-shadow:0 0 0 3px var(--kw-accent-soft);}
.kw-timeline-card__body{padding-left:18px;}
.kw-timeline-card__title{font-size:13px;font-weight:700;color:var(--kw-text);}
.kw-timeline-card__sub{font-size:11.5px;color:var(--kw-muted);}

/* 7 · WORKSPACE CARD (standard content panel) ----------------------------- */
.kw-workspace-card{
  background:var(--kw-surface);border:1px solid var(--kw-border);border-radius:var(--kw-r);
  padding:18px 20px;box-shadow:var(--kw-sh-1);transition:box-shadow .2s var(--kw-ease);
}
.kw-workspace-card:hover{box-shadow:var(--kw-sh-2);}

/* 8 · AI CARD (Socrates) -------------------------------------------------- */
.kw-ai-card{
  position:relative;overflow:hidden;border-radius:var(--kw-r);padding:18px 20px;
  color:#fff;background:var(--kw-grad-ai);border:1px solid rgba(255,255,255,.14);box-shadow:var(--kw-sh-2);
}
.kw-ai-card::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.35),transparent 60%);pointer-events:none;}
.kw-ai-card__title{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;}
.kw-ai-card__text{font-size:13px;line-height:1.55;color:rgba(255,255,255,.9);position:relative;z-index:2;}

/* 9 · DOCK BUTTON (floating action bar) ----------------------------------- */
.kw-dock-btn{
  display:inline-flex;align-items:center;gap:6px;padding:10px 15px;border-radius:12px;
  font-size:13px;font-weight:800;text-decoration:none;cursor:pointer;
  background:var(--kw-surface);color:var(--kw-text);border:1px solid var(--kw-border);
  box-shadow:var(--kw-sh-1);transition:transform var(--kw-dur) var(--kw-ease),box-shadow var(--kw-dur) var(--kw-ease);
}
.kw-dock-btn:hover{transform:translateY(-2px);box-shadow:var(--kw-sh-2);}
.kw-dock-btn--primary{background:var(--kw-accent);color:var(--kw-on-accent);border-color:var(--kw-accent);}

/* 10 · STATUS BADGE ------------------------------------------------------- */
.kw-status-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--kw-r-pill);font-size:11px;font-weight:800;letter-spacing:.01em;white-space:nowrap;background:var(--kw-surface-3);color:var(--kw-text-2);}
.kw-status-badge--ok{background:var(--kw-ok-soft);color:var(--kw-ok);}
.kw-status-badge--warn{background:var(--kw-warn-soft);color:var(--kw-warn);}
.kw-status-badge--danger{background:var(--kw-danger-soft);color:var(--kw-danger);}
.kw-status-badge--accent{background:var(--kw-accent-soft);color:var(--kw-accent);}

/* 11 · PROGRESS RING (conic; --kw-val = 0..100) --------------------------- */
.kw-progress-ring{
  --kw-val:0; --kw-size:84px; --kw-thick:9px;
  width:var(--kw-size);height:var(--kw-size);border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:conic-gradient(var(--kw-accent) calc(var(--kw-val)*1%), var(--kw-surface-3) 0);
  transition:background .5s var(--kw-ease);
}
.kw-progress-ring__hole{width:calc(var(--kw-size) - var(--kw-thick)*2);height:calc(var(--kw-size) - var(--kw-thick)*2);border-radius:50%;background:var(--kw-surface);display:grid;place-items:center;}
.kw-progress-ring__val{font-size:18px;font-weight:800;color:var(--kw-text);letter-spacing:-.02em;}

/* 12 · SEGMENTED TABS ----------------------------------------------------- */
.kw-tabs{display:flex;gap:2px;flex-wrap:wrap;padding:5px;background:var(--kw-surface);border:1px solid var(--kw-border);border-radius:var(--kw-r-md);box-shadow:var(--kw-sh-1);}
.kw-tab{position:relative;padding:9px 15px;border-radius:11px;text-decoration:none;font-size:13px;font-weight:700;color:var(--kw-muted);transition:color var(--kw-dur) var(--kw-ease),background var(--kw-dur) var(--kw-ease);}
.kw-tab:hover{color:var(--kw-text);background:var(--kw-surface-2);}
.kw-tab.active,.kw-tab[aria-current="page"]{color:var(--kw-accent);background:var(--kw-accent-soft);font-weight:800;}

/* 12b · WORKSPACE DOCK (floating glass icon navigation) ------------------- */
.kw-dock{
  display:flex;gap:4px;align-items:center;padding:7px;border-radius:var(--kw-r-pill);
  background:var(--kw-glass);backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid var(--kw-border);box-shadow:var(--kw-sh-2);
  overflow-x:auto;scrollbar-width:none;
}
.kw-dock::-webkit-scrollbar{display:none;}
.kw-dock-item{
  display:inline-flex;flex-direction:column;align-items:center;gap:3px;min-width:62px;
  padding:8px 12px;border-radius:16px;text-decoration:none;color:var(--kw-muted);
  font-size:10.5px;font-weight:700;white-space:nowrap;flex-shrink:0;
  transition:color var(--kw-dur) var(--kw-ease),background var(--kw-dur) var(--kw-ease);
}
.kw-dock-item__ico{font-size:19px;line-height:1;transition:transform var(--kw-dur) var(--kw-ease);}
.kw-dock-item:hover{color:var(--kw-text);background:var(--kw-surface-2);}
.kw-dock-item:hover .kw-dock-item__ico{transform:translateY(-2px) scale(1.08);}
.kw-dock-item.active,.kw-dock-item[aria-current="page"]{color:var(--kw-accent);background:var(--kw-accent-soft);}

/* 13 · COMMAND BUTTON (primary CTA) --------------------------------------- */
.kw-command-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 17px;border-radius:12px;font-size:13px;font-weight:800;text-decoration:none;cursor:pointer;background:var(--kw-accent);color:var(--kw-on-accent);border:1px solid var(--kw-accent);transition:filter var(--kw-dur) var(--kw-ease),transform var(--kw-dur) var(--kw-ease);}
.kw-command-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.kw-command-btn--ghost{background:var(--kw-surface);color:var(--kw-accent);}
.kw-command-btn--ghost:hover{background:var(--kw-accent-soft);filter:none;}

/* 14 · CONTEXT CHIP ------------------------------------------------------- */
.kw-context-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--kw-r-pill);font-size:12px;font-weight:700;color:var(--kw-text-2);background:var(--kw-surface-3);border:1px solid var(--kw-border);}
.kw-context-chip--on-media{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26);backdrop-filter:blur(6px);}

/* 15 · QUICK ACTION BUTTON (icon + label tile) ---------------------------- */
.kw-quick-action{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 8px;border-radius:var(--kw-r-sm);text-decoration:none;text-align:center;background:var(--kw-surface-2);border:1px solid var(--kw-border-2);color:var(--kw-text-2);font-size:11px;font-weight:700;transition:.16s var(--kw-ease);cursor:pointer;}
.kw-quick-action:hover{background:var(--kw-accent-soft);color:var(--kw-accent);border-color:var(--kw-accent);transform:translateY(-2px);}
.kw-quick-action__ico{font-size:18px;line-height:1;color:var(--kw-accent);}

/* 16b · COMMAND CARD (clickable command surface — Today Dashboard) -------- */
.kw-command-card{
  display:flex;flex-direction:column;gap:6px;min-height:118px;
  background:var(--kw-surface);border:1px solid var(--kw-border);border-radius:var(--kw-r-md);
  padding:15px 16px;box-shadow:var(--kw-sh-1);text-decoration:none;color:inherit;cursor:pointer;
  position:relative;overflow:hidden;transition:transform var(--kw-dur) var(--kw-ease),box-shadow var(--kw-dur) var(--kw-ease),border-color var(--kw-dur) var(--kw-ease);
}
.kw-command-card:hover{transform:translateY(-3px);box-shadow:var(--kw-sh-2);border-color:var(--kw-accent);}
.kw-command-card:focus-visible{outline:none;box-shadow:var(--kw-ring);}
.kw-command-card__head{display:flex;align-items:center;gap:10px;}
.kw-command-card__ico{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;font-size:17px;background:var(--kw-accent-soft);color:var(--kw-accent);}
.kw-command-card__title{font-size:12.5px;font-weight:800;color:var(--kw-text);letter-spacing:-.01em;}
.kw-command-card__value{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--kw-text);line-height:1.05;margin-top:auto;}
.kw-command-card__meta{font-size:11.5px;color:var(--kw-muted);font-weight:600;line-height:1.35;}
.kw-command-card__go{position:absolute;top:14px;right:14px;color:var(--kw-muted);font-size:14px;opacity:0;transform:translateX(-4px);transition:.16s var(--kw-ease);}
.kw-command-card:hover .kw-command-card__go{opacity:1;transform:none;}

/* 16 · PREVIEW BADGE (widgets without real backend data) ------------------ */
.kw-preview-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--kw-r-pill);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--kw-accent);background:var(--kw-accent-soft);border:1px dashed color-mix(in srgb, var(--kw-accent) 42%, transparent);}
.kw-preview-badge::before{content:"◔";font-size:11px;}

/* 17 · COMMAND PALETTE (⌘K / Ctrl+K) ------------------------------------- */
.kw-cmdk-overlay{position:fixed;inset:0;z-index:10060;display:none;align-items:flex-start;justify-content:center;padding:13vh 20px 20px;background:rgba(9,12,24,.5);backdrop-filter:blur(3px);}
.kw-cmdk-overlay.open{display:flex;}
.kw-cmdk{width:min(640px,100%);max-height:70vh;display:flex;flex-direction:column;overflow:hidden;background:var(--kw-surface);border:1px solid var(--kw-border);border-radius:var(--kw-r-md);box-shadow:var(--kw-sh-3);}
.kw-cmdk__top{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--kw-border);}
.kw-cmdk__top-ico{font-size:16px;color:var(--kw-muted);}
.kw-cmdk__search{flex:1;border:0;background:transparent;font-size:15px;color:var(--kw-text);outline:none;font-family:inherit;}
.kw-cmdk__search::placeholder{color:var(--kw-muted);}
.kw-cmdk__hint{font-size:10px;font-weight:800;color:var(--kw-muted);border:1px solid var(--kw-border);border-radius:6px;padding:2px 6px;}
.kw-cmdk__list{overflow-y:auto;padding:6px;scrollbar-width:thin;}
.kw-cmdk__group{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--kw-muted);padding:11px 10px 5px;}
.kw-cmdk__item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--kw-text);background:none;border:0;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.kw-cmdk__item[disabled]{cursor:not-allowed;color:var(--kw-muted);}
.kw-cmdk__item.is-active{background:var(--kw-accent-soft);color:var(--kw-accent);}
.kw-cmdk__item-ico{width:28px;height:28px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;font-size:14px;background:var(--kw-surface-2);}
.kw-cmdk__item-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kw-cmdk__item-go{font-size:11px;color:var(--kw-muted);opacity:0;}
.kw-cmdk__item.is-active .kw-cmdk__item-go{opacity:1;}
.kw-cmdk__empty{padding:24px;text-align:center;color:var(--kw-muted);font-size:13px;}
.kw-cmdk-trigger{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:12px;border:1px solid var(--kw-border);background:var(--kw-surface);color:var(--kw-muted);font-size:12.5px;font-weight:700;cursor:pointer;margin-right:6px;}
.kw-cmdk-trigger:hover{border-color:var(--kw-accent);color:var(--kw-accent);}
.kw-cmdk-trigger kbd{font-size:10px;font-weight:800;border:1px solid var(--kw-border);border-radius:5px;padding:1px 5px;background:var(--kw-surface-2);}
@media (max-width:720px){ .kw-cmdk-trigger__label{display:none;} }

/* ── Motion primitives (opt-in) ──────────────────────────────────────────── */
@keyframes kw-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.kw-skeleton{border-radius:var(--kw-r-sm);background:linear-gradient(90deg,var(--kw-surface-2) 0%,var(--kw-surface-3) 50%,var(--kw-surface-2) 100%);background-size:200% 100%;animation:kw-shimmer 1.6s linear infinite;}
@media (prefers-reduced-motion:reduce){
  .kw-os,.kw-metric-card,.kw-dock-btn,.kw-tab,.kw-command-btn,.kw-quick-action,.kw-progress-ring,.kw-skeleton{transition:none!important;animation:none!important;}
}