/* ============================================================
   CoCo Counselor Connect — "Aurora" v2 design system
   Calm, editorial, human. Serif display + humanist sans + mono.
   Restyles the Blade /admin portal. Keeps every legacy class
   name + token alias so existing views re-skin cleanly.
   ============================================================ */

/* Fonts are loaded by a <link> in each page that uses this sheet
   (layouts/admin.blade.php, admin/login.blade.php), not by @import here. A
   stylesheet's own requests follow the stylesheet's referrer policy, and nginx
   serves this file with none — so an @import sent the page's origin to Google
   even on the ops host, whose pages say Referrer-Policy: same-origin. */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---- warm-calm neutrals ---- */
  --paper:#E7EFEB;
  --paper-2:#EEF4F0;
  --surface:#FFFFFF;
  --surface-2:#F4F8F6;
  --surface-3:#EBF2EE;
  --ink:#0F2E2B;
  --ink-2:#4A645F;
  /* #8AA29C in the prototype measures 2.54:1 on --surface-2, against a 4.5:1
     AA floor, and it drives .text-muted — 269 uses across these views, at
     9-14px. This is coco-aurora.css:118's corrected value, ported verbatim.
     Do not "restore" the prototype value. */
  --ink-3:#5F7573;
  --line:#E6EDE9;
  --line-2:#D4E1DC;

  /* ---- brand teal ---- */
  --teal:#0E8F8C;
  --teal-d:#0B6F6D;
  --teal-dd:#083E3C;
  --teal-l:#18A8A4;
  /* The gradient stop for anything carrying WHITE TEXT. White on --teal-l is
     2.93:1 and on --teal 3.94:1, so the prototype's teal-l -> teal-d button
     gradient is under AA across its whole light half. This is 4.84:1 and
     --teal-d is 5.98:1, so every pixel of a primary button clears.
     --teal-l stays exactly as it is wherever it is a border, icon or accent
     rather than a ground under text: 3.94:1 clears the 3:1 bar those use. */
  --teal-btn:#0C7F7C;
  --teal-50:#E5F4F2;
  --teal-100:#CDE9E6;
  --teal-200:#A6D8D3;
  --cyan:#54C6C9;
  --mint:#7FD9C0;
  --mascot:#DAF0F9;
  --mascot-d:#A9D0D9;

  /* ---- warm secondary (clay) + violet ---- */
  --clay:#DB9161;
  --clay-d:#B96C3D;
  --clay-50:#F8ECE1;
  --violet:#7C73C8;
  --violet-50:#ECEAF8;

  /* ---- stress scale (graduated, low-arousal) ---- */
  --s-low:#4FB8A0; --s-lowmed:#86C98C; --s-med:#E7C45F;
  --s-medhigh:#E59E5B; --s-high:#DA8362; --s-crit:#C56B6B;
  --s-low-bg:#E4F4EF; --s-med-bg:#FBF2DC; --s-high-bg:#F7E6DD; --s-crit-bg:#F6E3E3;

  /* ---- emotions ---- */
  --e-happy:#4FB8A0; --e-meh:#94A6AD; --e-sad:#6E96C9; --e-mad:#D08585; --e-worried:#E0A95E;

  /* ---- radii ---- */
  --r-xs:8px; --r-sm:11px; --r:14px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* ---- shadow (soft, layered) ---- */
  --sh-sm:0 1px 2px rgba(9,42,40,.04), 0 2px 6px rgba(9,42,40,.05);
  --sh:0 2px 8px rgba(9,42,40,.05), 0 14px 34px rgba(9,42,40,.07);
  --sh-lg:0 30px 70px rgba(9,42,40,.16);

  --font:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:'Spline Sans Mono', ui-monospace, monospace;

  /* ============================================================
     LEGACY ALIASES — keep old views' inline styles + classes
     mapped onto the Aurora palette. Do not remove.
     ============================================================ */
  --font-sans:var(--font);
  --font-display:var(--serif);
  --font-mono:var(--mono);

  /* sage → teal */
  --sage:var(--teal); --sage-light:var(--teal-l); --sage-pale:var(--teal-50);
  --sage-bg:var(--teal-100); --sage-dark:var(--teal-d);

  /* forest → ink / teal */
  --forest:var(--ink); --forest-mid:var(--ink-2); --forest-light:var(--ink-2);
  --forest-50:var(--teal-50); --forest-100:var(--teal-100); --forest-200:var(--teal-100);
  --forest-400:var(--teal-l); --forest-500:var(--teal); --forest-600:var(--teal);
  --forest-700:var(--teal-d); --forest-800:var(--teal-dd); --forest-900:var(--teal-dd);

  /* warm neutrals */
  --cream:var(--paper); --cream-dark:var(--surface-3); --cream-border:var(--line);
  --warm-white:var(--surface);

  /* peach → clay */
  --peach:var(--clay); --peach-light:var(--clay-50); --peach-dark:var(--clay-d);
  --terracotta:var(--clay-d); --warm-peach:var(--clay-50);

  /* lavender → violet */
  --lavender:var(--violet); --lavender-light:var(--violet-50); --lavender-dark:#6a5fb0;

  /* semantic surfaces */
  --bg:var(--paper); --bg-sunk:var(--surface-3);
  --ink-4:var(--ink-3); --ink-5:#9fb4af; --ink-6:#b3c4bf; --ink-7:#c7d4d0;
  --border:var(--line); --border-2:var(--line-2);
  --gray-100:var(--surface-2); --gray-400:var(--ink-3);
  --teal-400:var(--teal-l); --teal-500:var(--teal);

  /* status pairs
     ------------------------------------------------------------------
     Foregrounds are coco-aurora.css:130-133's CORRECTED values, not the
     prototype's. Aurora documents the measurements: danger 3.69 -> 5.07,
     warning 3.43 -> 4.61, success 3.00 -> 4.67, info 3.44 -> 4.56. The
     backgrounds are byte-identical between the two files, so those ratios
     transfer without recomputation.

     This portal is read by counsellors between sessions. Every one of these
     renders at 11-13px, which WCAG treats as normal text. */
  --danger:#B44E4E; --danger-bg:var(--s-crit-bg);
  --warning:#8A6420; --warning-bg:var(--s-med-bg);
  --success:#1E7A52; --success-bg:var(--s-low-bg);
  --info:#6A5FB0;    --info-bg:var(--violet-50);

  /* radii legacy */
  --shadow-xs:var(--sh-sm); --shadow-sm:var(--sh-sm); --shadow-md:var(--sh); --shadow-lg:var(--sh-lg);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root { color-scheme:light; }

body {
  font-family:var(--font);
  font-size:14px;
  line-height:1.55;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -8%, #dcefe8 0%, transparent 55%),
    radial-gradient(1000px 640px at 108% 12%, #d6ecef 0%, transparent 50%),
    linear-gradient(180deg,#e2ede8,#d9e6e0);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, select, textarea { font-family:inherit; }
::selection { background:var(--teal-100); }

.serif { font-family:var(--serif); }
.mono  { font-family:var(--mono); }
.tab-num { font-variant-numeric:tabular-nums; }
.eyebrow {
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.disp { font-family:var(--serif); font-weight:500; letter-spacing:-.01em; }

/* ============================================================
   SIDEBAR — light editorial
   ============================================================ */
:root {
  --sidebar-width:262px;
  --sidebar-collapsed-width:74px;
}

.admin-shell { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-width);
  min-width:var(--sidebar-width);
  background:linear-gradient(180deg,#ffffff,#fbfdfc);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  padding:0 0 14px;
  position:fixed;
  left:0; top:0; bottom:0;
  z-index:100;
  overflow-y:auto;
  scrollbar-width:none;
  transition:width .25s ease, min-width .25s ease;
}
.sidebar::-webkit-scrollbar { display:none; }

/* collapsed */
.sidebar.collapsed { width:var(--sidebar-collapsed-width); min-width:var(--sidebar-collapsed-width); }
.sidebar.collapsed .sidebar-brand-name,
.sidebar.collapsed .sidebar-brand-sub,
.sidebar.collapsed .sidebar-profile-info,
.sidebar.collapsed .sidebar-nav-item span,
.sidebar.collapsed .sidebar-badge,
.sidebar.collapsed .sidebar-status,
.sidebar.collapsed .sidebar-nav-label,
.sidebar.collapsed .sidebar-suds-text,
.sidebar.collapsed .sidebar-suds-link { display:none; }
.sidebar.collapsed .sidebar-brand { justify-content:center; padding:20px 8px 14px; }
.sidebar.collapsed .sidebar-profile { justify-content:center; padding:10px; margin:0 10px 6px; }
.sidebar.collapsed .sidebar-nav-item { justify-content:center; padding:11px; }
.sidebar.collapsed .sidebar-suds-widget { justify-content:center; padding:10px; }
.sidebar.collapsed .sidebar-logout { justify-content:center; }

/* brand lockup */
.sidebar-brand {
  display:flex; align-items:center; gap:12px;
  padding:22px 20px 14px; position:relative;
}
.sidebar-brand .brand-mark,
.sidebar-logo-img {
  width:42px; height:42px; border-radius:13px; flex-shrink:0;
  display:grid; place-items:center; box-shadow:var(--sh-sm);
  background:var(--mascot); object-fit:contain; padding:6px;
}
.sidebar-brand-lock { display:flex; flex-direction:column; line-height:1; }
.sidebar-brand-name {
  font-family:var(--serif); font-weight:600; font-size:24px;
  letter-spacing:-.01em; color:var(--teal-dd); line-height:1;
}
.sidebar-brand-sub {
  font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-top:5px;
}
.sidebar-collapse-btn {
  margin-left:auto; width:28px; height:28px; border-radius:9px;
  display:grid; place-items:center; color:var(--ink-3);
  background:var(--surface-2); border:1px solid var(--line); transition:.15s;
}
.sidebar-collapse-btn:hover { color:var(--teal-d); border-color:var(--teal-200); }

/* profile chip */
.sidebar-profile {
  margin:4px 16px 8px; border-radius:var(--r);
  padding:12px; display:flex; align-items:center; gap:12px;
  background:var(--surface-2); border:1px solid var(--line);
}
.sidebar-avatar {
  width:44px; height:44px; border-radius:13px; flex-shrink:0;
  display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff;
  background:linear-gradient(135deg,var(--teal-btn),var(--teal-d));
}
.sidebar-profile-info { min-width:0; }
.sidebar-profile-name {
  font-weight:700; font-size:14px; line-height:1.15; letter-spacing:-.01em;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar-profile-role {
  font-size:11px; font-weight:600; margin-top:3px; color:var(--teal-d);
}

/* status selector */
.sidebar-status { margin:0 16px 8px; }
.sidebar-status-select {
  width:100%; border:1px solid var(--line-2); background:var(--surface);
  border-radius:11px; padding:9px 12px; font-size:12.5px; font-weight:600;
  color:var(--ink-2); cursor:pointer; transition:.15s;
}
.sidebar-status-select:hover { border-color:var(--teal-200); }

.sidebar-divider { height:1px; background:var(--line); margin:8px 20px; }

/* nav */
.sidebar-nav { padding:6px 14px 8px; display:flex; flex-direction:column; }
.sidebar-nav-label {
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  padding:14px 10px 8px;
}
.sidebar-nav-item {
  width:100%; display:flex; align-items:center; gap:13px;
  padding:11px 12px; border-radius:12px; font-size:13.5px; font-weight:600;
  margin-bottom:2px; color:var(--ink-2); transition:.16s;
  position:relative; letter-spacing:-.01em;
}
.sidebar-nav-item svg { width:19px; height:19px; flex-shrink:0; }
.sidebar-nav-item:hover { background:var(--surface-2); color:var(--ink); }
.sidebar-nav-item.active { background:var(--teal-50); color:var(--teal-d); }
.sidebar-nav-item.active::before {
  content:""; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:4px; height:22px; border-radius:0 4px 4px 0; background:var(--teal);
}
.sidebar-badge {
  margin-left:auto; font-size:10.5px; font-weight:700; min-width:20px; height:20px;
  border-radius:99px; display:grid; place-items:center; padding:0 6px;
  background:var(--teal-100); color:var(--teal-d);
}
.sidebar-nav-item.active .sidebar-badge { background:var(--teal-100); color:var(--teal-d); }

/* logout */
.sidebar-logout {
  color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line);
  margin:2px 6px 0; justify-content:flex-start;
}
.sidebar-logout:hover { background:var(--s-crit-bg); color:#b85a5a; }
.sidebar-logout::before { display:none !important; }

/* SUDS mini card */
.sidebar-suds-widget {
  margin:2px 16px 6px; border-radius:var(--r); padding:12px 13px;
  display:flex; align-items:center; gap:11px;
  background:linear-gradient(135deg,#EFA968,#DB8047); color:#4d2a0d;
  box-shadow:0 8px 20px rgba(219,128,71,.3); cursor:pointer; transition:.16s;
}
.sidebar-suds-widget:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(219,128,71,.38); }
.sidebar-suds-icon {
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  background:rgba(255,255,255,.34); display:grid; place-items:center;
}
.sidebar-suds-text { min-width:0; }
.sidebar-suds-count { font-weight:800; font-size:13px; line-height:1; }
.sidebar-suds-label { font-size:11px; font-weight:600; margin-top:3px; opacity:.9; }
.sidebar-suds-link {
  margin-left:auto; font-size:11px; font-weight:800; padding:5px 10px;
  border-radius:99px; background:rgba(255,255,255,.5); color:#7a3f16; flex-shrink:0;
}

.main-area {
  flex:1; margin-left:var(--sidebar-width); min-width:0;
  transition:margin-left .25s ease;
}
.sidebar.collapsed ~ .main-area,
.admin-shell.collapsed .main-area { margin-left:var(--sidebar-collapsed-width); }

/* ============================================================
   MOBILE
   ============================================================ */
.mobile-menu-btn {
  display:none; position:fixed; top:14px; left:14px; z-index:120;
  width:42px; height:42px; border-radius:12px; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  box-shadow:var(--sh-sm);
}
.sidebar-overlay {
  display:none; position:fixed; inset:0; z-index:99;
  background:rgba(9,42,40,.35); backdrop-filter:blur(2px);
}
@media (max-width:900px) {
  .sidebar { transform:translateX(-100%); transition:transform .25s ease; }
  .sidebar.mobile-open { transform:translateX(0); box-shadow:var(--sh-lg); }
  .main-area { margin-left:0 !important; }
  .mobile-menu-btn { display:grid; }
  .sidebar-overlay.active { display:block; }
}

/* ============================================================
   PAGE WRAPPER + HEADER
   ============================================================ */
.page { max-width:1320px; margin:0 auto; padding:28px 30px 56px; }
@media (max-width:900px){ .page { padding:70px 18px 48px; } }

.page-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px;
}
.page-title {
  font-family:var(--serif); font-size:30px; font-weight:500;
  letter-spacing:-.015em; line-height:1.02; color:var(--ink);
}
.page-subtitle { font-size:13.5px; color:var(--ink-3); font-weight:500; margin-top:5px; }

/* ============================================================
   AURORA HERO / signature surfaces
   ============================================================ */
.aurora {
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  color:#fff; padding:26px 28px;
}
.aurora::before {
  content:""; position:absolute; inset:0; z-index:0; background:
    radial-gradient(520px 300px at 8% -20%, rgba(127,217,192,.55), transparent 60%),
    radial-gradient(460px 300px at 100% 120%, rgba(84,198,201,.5), transparent 55%),
    linear-gradient(120deg,var(--teal-d),var(--teal-l) 70%);
}
.aurora > * { position:relative; z-index:1; }
.aurora-clay::before {
  background:
    radial-gradient(460px 280px at 10% -30%, rgba(255,214,175,.5), transparent 60%),
    linear-gradient(120deg,#E07B5A,#E5A05B);
}
.grain {
  position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:5px 5px;
}
.aurora .eyebrow { color:rgba(255,255,255,.82); }
.hero-title { font-family:var(--serif); font-weight:500; font-size:31px; letter-spacing:-.015em; line-height:1.06; }
.hero-sub { font-size:14px; font-weight:500; color:rgba(255,255,255,.9); margin-top:8px; max-width:60ch; }

/* glass stat chips inside heroes */
.glass-chip {
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r); padding:13px 15px; backdrop-filter:blur(4px);
}
.glass-chip .k { font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.8); }
.glass-chip .v { font-family:var(--serif); font-size:24px; font-weight:500; margin-top:4px; line-height:1; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm);
}
.card-header {
  display:flex; align-items:center; gap:11px;
  padding:18px 22px 0;
}
.card-title { font-size:15.5px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.card-body { padding:20px 22px 22px; }
.card-body-flush { padding:0; }
.card-h { display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.card-h .t { font-size:15.5px; font-weight:800; letter-spacing:-.02em; }
.card-h .s { font-size:12px; color:var(--ink-3); font-weight:500; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--sh-sm); position:relative; overflow:hidden; transition:.2s;
}
.stat-card::after {
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accent,var(--teal)); opacity:0; transition:.2s;
}
.stat-card:hover { box-shadow:var(--sh); transform:translateY(-3px); }
.stat-card:hover::after { opacity:.9; }
.stat-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.stat-card-label { font-size:12.5px; color:var(--ink-3); font-weight:600; }
.stat-card-icon {
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex-shrink:0;
  background:var(--teal-50); color:var(--teal-d);
}
.stat-card-icon svg { width:21px; height:21px; }
.stat-card-icon.forest { --accent:var(--teal);   background:var(--teal-50);   color:var(--teal-d); }
.stat-card-icon.danger { --accent:var(--s-crit);  background:var(--s-crit-bg); color:#bd6868; }
.stat-card-icon.info   { --accent:var(--violet);  background:var(--violet-50); color:#6a5fb0; }
.stat-card-icon.warm   { --accent:var(--clay);    background:var(--clay-50);   color:var(--clay-d); }
.stat-card-icon.cyan   { --accent:var(--cyan);    background:#E1F4F5;          color:#2c9295; }
.stat-card-icon.success{ --accent:#2f9d6e;        background:#E2F3E9;          color:#2f9d6e; }
.stat-card.forest { --accent:var(--teal); }
.stat-card.danger { --accent:var(--s-crit); }
.stat-card.info   { --accent:var(--violet); }
.stat-card.warm   { --accent:var(--clay); }
.stat-card-value {
  font-family:var(--serif); font-size:36px; font-weight:500;
  letter-spacing:-.02em; line-height:.95; color:var(--ink);
}
.stat-card-meta, .stat-card .meta { font-size:11.5px; font-weight:600; margin-top:10px; display:inline-flex; align-items:center; gap:5px; }
.pos { color:#2f9d6e; } .neg { color:#c56b6b; }

/* ============================================================
   GRIDS + FLEX HELPERS
   ============================================================ */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:1100px){ .grid-4 { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .grid-4,.grid-3,.grid-2 { grid-template-columns:1fr; } }
.row { display:flex; gap:16px; }
.wrap { display:flex; flex-wrap:wrap; gap:10px; }
.grow { flex:1; }
.muted { color:var(--ink-3); }

/* ============================================================
   PILLS / BADGES
   ============================================================ */
.pill {
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  border-radius:99px; font-size:11.5px; font-weight:700; letter-spacing:.01em;
  background:var(--surface-3); color:var(--ink-2);
}
.pill-dot, .pill .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill.forest, .pill.teal  { background:var(--teal-50);   color:var(--teal-d); }
.pill.gray, .pill.grey    { background:var(--surface-3);  color:var(--ink-2); }
.pill.warning, .pill.warm, .pill.amber { background:var(--s-med-bg); color:#8A6420; }
.pill.success, .pill.low  { background:var(--s-low-bg);   color:#1E7A52; }
.pill.info                { background:var(--violet-50);  color:#6a5fb0; }
.pill.high                { background:var(--s-high-bg);  color:#9E4E2D; }
.pill.danger, .pill.crit  { background:var(--s-crit-bg);  color:#A04545; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:12px; font-size:13px; font-weight:700;
  transition:.16s; white-space:nowrap; letter-spacing:-.01em;
}
.btn svg { width:17px; height:17px; }
.btn-primary { background:linear-gradient(135deg,var(--teal-btn),var(--teal-d)); color:#fff; box-shadow:0 8px 18px rgba(14,143,140,.28); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 12px 24px rgba(14,143,140,.34); }
.btn-secondary { background:var(--surface); color:var(--ink-2); border:1px solid var(--line-2); }
.btn-secondary:hover { background:var(--surface-2); color:var(--ink); border-color:var(--teal-200); }
/* No part of the destructive button used to clear AA: white on #d98585 is
   2.75:1 and on #c56b6b 3.69:1, end to end. These two are 4.81:1 and 7.19:1,
   same hue, still visibly a gradient. */
.btn-danger { background:linear-gradient(135deg,#B85252,#933939); color:#fff; box-shadow:0 8px 18px rgba(197,107,107,.26); }
.btn-danger:hover { transform:translateY(-1px); }
.btn-dark { background:linear-gradient(135deg,#14463f,#07231f); color:#fff; box-shadow:0 8px 18px rgba(6,32,29,.3); }
.btn-dark:hover { transform:translateY(-1px); }
.btn-sm { padding:8px 13px; font-size:12px; border-radius:10px; }
.btn-xs { padding:6px 10px; font-size:11.5px; border-radius:9px; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }

/* ============================================================
   SEGMENTED TOGGLE / TABS
   ============================================================ */
.seg { display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:5px; gap:5px; }
.seg button, .seg a {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px; border-radius:10px; font-size:13.5px; font-weight:700;
  color:var(--ink-2); transition:.16s; letter-spacing:-.01em;
}
.seg button.on, .seg a.on { background:linear-gradient(135deg,var(--teal-btn),var(--teal-d)); color:#fff; box-shadow:var(--sh-sm); }

.tabs {
  display:inline-flex; gap:5px; padding:5px; margin-bottom:20px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
}
.tab-btn {
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  border-radius:10px; font-size:13.5px; font-weight:700; color:var(--ink-2);
  transition:.16s; letter-spacing:-.01em;
}
.tab-btn:hover { color:var(--ink); }
.tab-btn.active { background:linear-gradient(135deg,var(--teal-btn),var(--teal-d)); color:#fff; box-shadow:var(--sh-sm); }
.tab-panel { animation:fadeUp .36s ease both; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-label { font-size:11.5px; font-weight:700; color:var(--ink-2); letter-spacing:.01em; }
.form-input, .form-select, .form-textarea {
  width:100%; background:var(--surface); border:1px solid var(--line-2);
  border-radius:12px; padding:11px 14px; font-size:13.5px; font-weight:500;
  color:var(--ink); transition:.15s;
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--ink-3); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-50);
}
.form-textarea { resize:vertical; min-height:88px; }
.form-error { font-size:12px; color:#c56b6b; font-weight:600; }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden;
}
.table-wrap table { width:100%; border-collapse:collapse; }
.table-wrap thead th {
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); text-align:left;
  padding:13px 16px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
.table-wrap tbody td { padding:15px 16px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink); }
.table-wrap tbody tr { transition:.12s; }
.table-wrap tbody tr:hover { background:var(--surface-2); }
.table-wrap tbody tr:last-child td { border-bottom:none; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align:center; padding:48px 24px; color:var(--ink-3);
}
.empty-state svg { width:52px; height:52px; opacity:.5; margin-bottom:14px; }
.empty-state h3 { font-family:var(--serif); font-size:22px; font-weight:500; color:var(--ink-2); margin-bottom:6px; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-backdrop {
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(10,30,28,.42); backdrop-filter:blur(3px);
}
.modal-backdrop.open { display:flex; }
.modal {
  width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
}
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px; border-bottom:1px solid var(--line); }
.modal-title { font-family:var(--serif); font-size:21px; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.modal-body { padding:22px; }
.modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line); }

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap {
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(1200px 700px at 12% -8%, #dcefe8 0%, transparent 55%),
    radial-gradient(1000px 640px at 108% 12%, #d6ecef 0%, transparent 50%),
    linear-gradient(180deg,#e2ede8,#d9e6e0);
}
.login-card {
  width:100%; max-width:420px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); padding:38px 34px;
}
.login-logo { width:56px; height:56px; margin:0 auto 14px; display:block; }
.login-name { font-family:var(--serif); font-size:30px; font-weight:600; text-align:center; color:var(--teal-dd); letter-spacing:-.01em; }
.login-tagline { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; text-align:center; color:var(--ink-3); margin-top:6px; margin-bottom:26px; }
.login-form { display:flex; flex-direction:column; gap:14px; }
.login-form .btn-primary { width:100%; padding:13px; margin-top:6px; }

/* ============================================================
   STUDENT CARD
   ============================================================ */
.student-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--sh-sm); transition:.16s; display:flex; flex-direction:column; gap:12px;
}
.student-card:hover { border-color:var(--teal-200); box-shadow:var(--sh); transform:translateY(-2px); }
.student-avatar {
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  font-weight:700; font-size:16px; color:#fff; flex-shrink:0;
  background:linear-gradient(135deg,var(--teal-btn),var(--teal-d));
}

/* ============================================================
   INLINE NOTICE (advisory banner)
   ============================================================ */
.notice {
  display:flex; align-items:flex-start; gap:10px; padding:13px 16px;
  border-radius:var(--r); font-size:13px; line-height:1.5;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
}
.notice svg { flex-shrink:0; margin-top:1px; }
.notice strong { color:var(--ink); }
.notice.warn { background:var(--clay-50); border-color:#eed6c2; color:#7a4a28; }
.notice.warn strong { color:#5f3a1f; }
.notice.warn svg { color:var(--clay-d); }

/* ============================================================
   DEPARTMENT (COLLEGE) CARDS — students drill-down
   ============================================================ */
.crumbs { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-3); margin-bottom:6px; }
.crumbs a { color:var(--teal-d); font-weight:600; text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }

.dept-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(276px, 1fr)); gap:16px;
}
.dept-card {
  display:flex; flex-direction:column; gap:11px; padding:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); text-decoration:none; color:inherit; transition:.16s;
}
.dept-card:hover {
  border-color:var(--teal-200); box-shadow:var(--sh); transform:translateY(-2px);
}
.dept-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.dept-icon {
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex-shrink:0;
  background:var(--teal-50); color:var(--teal-d);
}
.dept-icon svg { width:20px; height:20px; }
.dept-count { text-align:right; line-height:1.1; }
.dept-count .n { font-family:var(--serif); font-size:26px; font-weight:600; color:var(--ink); display:block; }
.dept-count .l { font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.dept-name {
  font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.25;
  letter-spacing:-.01em; color:var(--ink); margin:0;
}
.dept-org {
  display:flex; align-items:center; gap:4px; margin-top:3px;
  font-size:11px; color:var(--ink-3);
}
.dept-org.is-external { color:var(--clay-d); font-weight:600; }
.dept-card:has(.is-external) { border-left:3px solid var(--clay); }
.dept-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dept-meta .pill { font-size:.62rem; padding:2px 8px; }
.dept-cta {
  display:inline-flex; align-items:center; gap:5px; margin-top:auto; padding-top:4px;
  font-size:12px; font-weight:700; color:var(--teal-d);
}
.dept-card:hover .dept-cta svg { transform:translateX(2px); }
.dept-cta svg { transition:.16s; }

/* ============================================================
   CONSULTATION CARD + CALENDAR
   ============================================================ */
.consult-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 17px; display:flex; align-items:center; gap:15px;
  box-shadow:var(--sh-sm); transition:.16s;
}
.consult-card:hover { border-color:var(--teal-200); box-shadow:var(--sh); transform:translateY(-1px); }
.date-block {
  width:56px; height:56px; border-radius:14px; flex-shrink:0; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--teal-50); color:var(--teal-d);
}
.date-block .day { font-family:var(--serif); font-size:22px; font-weight:600; line-height:1; }
.date-block .month { font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; }

/* calendar column + selected-day column */
.consult-split { display:grid; grid-template-columns:302px 1fr; gap:20px; align-items:start; }
@media (max-width:900px) {
  .consult-split { grid-template-columns:1fr; }
  .consult-split > .card:first-child { position:static !important; }
}

/* ── Availability calendar ── */
.cal { padding:6px 14px 14px; }
.cal-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 2px 10px; }
.cal-nav-title { font-family:var(--serif); font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.cal-nav-btn {
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); cursor:pointer; transition:.14s;
}
.cal-nav-btn:hover { background:var(--teal-50); border-color:var(--teal-200); color:var(--teal-d); }

.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-dow {
  text-align:center; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); padding:2px 0 6px;
}
.cal-day {
  position:relative; width:100%; aspect-ratio:1; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:.12s;
  border:1px solid transparent; background:transparent; padding:0;
}
.cal-day:hover { background:var(--surface-2); }
.cal-day:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.cal-day.is-past { color:var(--ink-4); }
.cal-day.is-free { background:var(--teal-50); color:var(--teal-d); }        /* availability published */
.cal-day.is-today { border-color:var(--teal); color:var(--teal-d); font-weight:800; }
.cal-day.is-selected {
  background:linear-gradient(135deg,var(--teal-btn),var(--teal-d)); color:#fff;
  border-color:transparent; box-shadow:var(--sh-sm);
}
.cal-day.is-selected:hover { background:linear-gradient(135deg,var(--teal-btn),var(--teal-d)); }

/* activity dots: booked session / open slots / urgent */
.cal-dots { display:flex; align-items:center; gap:2px; height:4px; }
.cal-dot { width:4px; height:4px; border-radius:50%; }
.cal-dot.sessions { background:var(--teal-d); }
.cal-dot.slots    { background:var(--teal-200); }
.cal-dot.urgent   { background:#e5654b; }
.cal-day.is-selected .cal-dot { background:rgba(255,255,255,.9); }

.cal-legend {
  display:flex; flex-wrap:wrap; gap:10px; padding:11px 16px 0; margin-top:10px;
  border-top:1px solid var(--line);
}
.cal-legend span { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--ink-3); }
.cal-legend i { width:8px; height:8px; border-radius:3px; flex-shrink:0; }

/* slot chips shown next to the selected day's sessions */
.slot-chips { display:flex; flex-wrap:wrap; gap:6px; }
.slot-chip {
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.02em;
  background:var(--teal-50); color:var(--teal-d); border:1px solid var(--teal-200);
}
.slot-chip.booked { background:var(--surface-2); color:var(--ink-3); border-color:var(--line); }

/* ============================================================
   ASSESSMENT INSTRUMENTS — runner + result
   ============================================================ */
.inst-card { border-top:3px solid var(--teal); }

/* consent acknowledgement on the runner */
.run-consent {
  display:flex; align-items:flex-start; gap:9px; margin-top:14px; padding:11px 13px;
  background:var(--teal-50); border:1px solid var(--teal-100); border-radius:var(--r-sm);
  font-size:12.5px; color:var(--teal-dd); line-height:1.5; cursor:pointer;
}
.run-consent input { width:16px; height:16px; accent-color:var(--teal-d); flex-shrink:0; margin-top:1px; }

.run-progress { height:4px; background:var(--surface-3); overflow:hidden; }
.run-progress > span { display:block; height:100%; background:var(--teal); transition:width .25s ease; }

.run-instructions {
  font-size:13.5px; color:var(--ink-2); line-height:1.6; margin:0 0 18px;
  padding:11px 14px; background:var(--surface-2); border-left:3px solid var(--teal-200); border-radius:var(--r-xs);
}

.run-item-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.run-num { font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
/* Item text is deliberately large: the counselor reads it aloud from across a desk. */
.run-q { font-family:var(--serif); font-size:22px; font-weight:500; line-height:1.35; color:var(--ink); margin:0 0 18px; }

.run-opts { display:flex; flex-direction:column; gap:7px; }
.run-opt {
  display:flex; align-items:center; gap:11px; width:100%; padding:13px 15px; text-align:left;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-size:14px; color:var(--ink); cursor:pointer; transition:.13s;
}
.run-opt:hover { border-color:var(--teal-200); background:var(--surface-2); }
.run-opt.is-picked { border-color:var(--teal); background:var(--teal-50); font-weight:600; }
.run-opt-v {
  display:grid; place-items:center; width:26px; height:26px; border-radius:8px; flex-shrink:0;
  background:var(--surface-3); color:var(--ink-2); font-family:var(--mono); font-size:12px; font-weight:700;
}
.run-opt.is-picked .run-opt-v { background:var(--teal); color:#fff; }

.run-nav { display:flex; align-items:center; gap:8px; margin-top:18px; flex-wrap:wrap; }

/* item jump dots — crisis items are marked so they are never skipped unnoticed */
.run-dots { display:flex; flex-wrap:wrap; gap:4px; margin-top:20px; padding-top:14px; border-top:1px solid var(--line); }
.run-dot {
  width:11px; height:11px; border-radius:50%; padding:0; cursor:pointer;
  background:var(--surface-3); border:1px solid var(--line-2); transition:.12s;
}
.run-dot:hover { transform:scale(1.25); }
.run-dot.is-done { background:var(--teal); border-color:var(--teal); }
.run-dot.is-here { box-shadow:0 0 0 2px var(--teal-200); }
.run-dot.is-crisis { border-color:var(--s-crit); border-width:2px; }

.run-review { max-width:640px; }

/* fixed student header when the runner is driven by a queue entry */
.run-who {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:13px 15px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
}

/* "next in this cohort" hand-off on the result page */
.run-next {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:16px; padding:13px 16px;
  background:var(--teal-50); border:1px solid var(--teal-100); border-radius:var(--r-sm);
}

/* ============================================================
   COHORT ASSIGNMENT — college-grouped multi-select
   ============================================================ */
.asg-layout { display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
@media (max-width:960px){ .asg-layout { grid-template-columns:1fr; } }
.asg-side { position:sticky; top:18px; }
@media (max-width:960px){ .asg-side { position:static; } }

.asg-group + .asg-group { border-top:1px solid var(--line); }
.asg-group-head { display:flex; align-items:center; gap:10px; padding:10px 20px; background:var(--surface-2); }
.asg-group-btn {
  display:flex; align-items:center; gap:8px; flex:1; padding:0; text-align:left;
  background:none; border:none; cursor:pointer; color:var(--ink);
}
.asg-group-name { font-weight:600; font-size:13px; }
.asg-group-sel {
  margin-left:auto; font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--teal-d);
}

.asg-row {
  display:flex; align-items:center; gap:10px; padding:8px 20px 8px 30px; cursor:pointer;
  border-top:1px solid var(--line);
}
.asg-row:hover { background:var(--surface-2); }
.asg-name { font-size:13px; color:var(--ink); min-width:0; }
.asg-meta { margin-left:auto; flex-shrink:0; }

/* checkbox that keeps its own hit area when the row label wraps */
.asg-check { display:inline-flex; align-items:center; gap:8px; cursor:pointer; flex-shrink:0; }
.asg-check input { width:16px; height:16px; accent-color:var(--teal-d); cursor:pointer; }
.asg-check input:disabled { cursor:not-allowed; opacity:.45; }

/* ============================================================
   SCREENING TRACKING + PER-STUDENT PROGRESS
   ============================================================ */
.trk-tabs { display:flex; gap:2px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.trk-tabs a {
  padding:9px 15px; font-size:13px; font-weight:600; color:var(--ink-3); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:.14s;
}
.trk-tabs a:hover { color:var(--ink); }
.trk-tabs a.is-on { color:var(--teal-d); border-bottom-color:var(--teal); }

.trk-batch {
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 22px; border-bottom:1px solid var(--line);
}
.trk-batch:last-child { border-bottom:none; }
.trk-batch.is-on { background:var(--teal-50); }

/* movement between the last two administrations */
.prog-deltas { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:18px; }
.prog-delta { padding:12px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); }

/* Direction only — never coloured as good/bad. A rise on DASS-21 is deterioration, a rise on a
   wellbeing scale is improvement, and the same chip is used for both. */
.prog-chip {
  display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:999px;
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.02em;
  background:var(--surface-3); color:var(--ink-2); border:1px solid var(--line-2);
}
.prog-chip.is-up   { background:var(--clay-50); color:var(--clay-d); border-color:#e8d3c4; }
.prog-chip.is-down { background:#E2F3E9; color:#2f7d5c; border-color:#c9e6d5; }
.prog-chip.is-flat { color:var(--ink-3); }

.prog-chart { height:230px; margin:0 0 18px; }

.prog-move { display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
.prog-move:first-child { border-top:none; }

/* result: the band scale a score was read against */
.res-bands { display:flex; flex-direction:column; gap:3px; margin-top:11px; padding-top:10px; border-top:1px solid var(--line); }
.res-band {
  display:flex; align-items:center; gap:6px; padding:3px 7px; border-radius:var(--r-xs);
  font-size:11px; color:var(--ink-3); border:1px solid transparent;
}
.res-band i { width:7px; height:7px; border-radius:2px; flex-shrink:0; }
.res-band .mono { margin-left:auto; font-size:10px; }
.res-band.is-here { background:var(--surface-2); color:var(--ink); font-weight:600; border-style:solid; }

/* ============================================================
   INSIGHT EVIDENCE — supporting data behind an AI insight
   ============================================================ */
.ev-toggle {
  display:inline-flex; align-items:center; gap:6px; padding:0; cursor:pointer;
  background:none; border:none; color:var(--teal-d);
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
.ev-toggle:hover { color:var(--teal); }

.ev { display:flex; flex-direction:column; gap:14px; }

/* provenance / completeness */
.ev-prov { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; }
.ev-prov-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:12px; }
.ev-prov-v { font-size:13px; font-weight:600; color:var(--ink); margin-top:3px; }
.ev-meter { display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; padding-top:11px; border-top:1px solid var(--line); }
.ev-meter-item {
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
  font-size:10.5px; font-weight:600; border:1px solid transparent;
}
.ev-meter-item.has  { background:var(--teal-50); color:var(--teal-d); border-color:var(--teal-200); }
.ev-meter-item.none { background:var(--surface-3); color:var(--ink-3); }

/* one signal group */
.ev-group { border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; background:var(--surface); }
.ev-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.ev-sub { font-size:11px; font-weight:700; color:var(--ink-2); margin-bottom:5px; }
.ev-empty { font-size:12.5px; color:var(--ink-3); font-style:italic; margin:0; }
.ev-note { font-size:12px; color:var(--ink-2); line-height:1.55; margin:9px 0 0; }
.ev-foot { font-size:11.5px; color:var(--ink-3); line-height:1.5; margin:0; }

/* headline figures */
.ev-figs { display:flex; flex-wrap:wrap; gap:8px; }
.ev-fig {
  flex:1 1 82px; min-width:82px; padding:8px 10px; border-radius:var(--r-xs);
  background:var(--surface-2); border:1px solid var(--line);
}
.ev-fig .k { display:block; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ev-fig .v { display:block; font-family:var(--serif); font-size:21px; font-weight:600; line-height:1.15; color:var(--ink); margin-top:2px; }
.ev-fig .v .u { font-family:var(--font); font-size:11px; font-weight:600; color:var(--ink-3); }

/* label + share bar + value rows */
.ev-bar-row { display:flex; align-items:center; gap:9px; padding:3px 0; }
.ev-bar-row .lbl { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); min-width:104px; }
.ev-bar-row .share-bar { flex:1; }

/* small inline chips */
.ev-chips { display:flex; flex-wrap:wrap; gap:5px; }
.ev-chip {
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line); font-size:11px; color:var(--ink-2);
}

/* per-day stress bars (the shape the model saw) */
.ev-spark { display:flex; align-items:flex-end; gap:2px; height:52px; padding:6px 0 0; }
.ev-spark-bar { flex:1; min-width:3px; border-radius:2px 2px 0 0; opacity:.9; }
.ev-spark-bar:hover { opacity:1; }
.ev-spark-axis { display:flex; justify-content:space-between; gap:8px; font-family:var(--mono); font-size:9.5px; color:var(--ink-3); margin-top:3px; }

/* risk-flag rows with rule + observed value */
.ev-flag { display:flex; align-items:flex-start; gap:9px; padding:8px 0; border-bottom:1px solid var(--line); }
.ev-flag:last-child { border-bottom:none; }
.ev-flag-dot { color:var(--ink-4); font-size:11px; line-height:1.5; flex-shrink:0; }
.ev-flag.is-met .ev-flag-dot { color:var(--s-crit); }
.ev-flag-label { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink); flex-wrap:wrap; }
.ev-flag-rule { font-size:11.5px; color:var(--ink-3); line-height:1.5; margin-top:2px; }
.ev-flag-obs  { font-size:11.5px; color:var(--ink-2); margin-top:2px; }

/* compact evidence table */
.ev-table { width:100%; border-collapse:collapse; }
.ev-table thead th {
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); text-align:left; padding:5px 8px; border-bottom:1px solid var(--line);
}
.ev-table tbody td { padding:6px 8px; font-size:12.5px; border-bottom:1px solid var(--line); }
.ev-table tbody tr:last-child td { border-bottom:none; }
.ev-table-note { font-size:11.5px; color:var(--ink-3); padding-top:0 !important; }

/* data movement vs the previous insight */
.ev-diff { background:var(--surface-2); }
.ev-diff-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px dashed var(--line); }
.ev-diff-row:last-child { border-bottom:none; }
.ev-diff-row .lbl { font-size:12.5px; color:var(--ink-2); }
.ev-diff-row .val { font-size:12.5px; color:var(--ink); }
.ev-diff-row .arw { margin:0 3px; font-weight:700; }
.ev-diff-row .arw.bad  { color:var(--s-crit); }
.ev-diff-row .arw.good { color:var(--s-low); }
.ev-diff-row .arw.neutral { color:var(--ink-3); }

/* severity buckets */
.ev-buckets { display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:9px; }
.ev-bucket { padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-xs); background:var(--surface-2); }
.ev-bucket .n { font-family:var(--serif); font-size:22px; font-weight:600; line-height:1; }
.ev-bucket .l { display:block; font-size:11.5px; font-weight:600; color:var(--ink-2); margin-top:3px; }
.ev-bucket .r { display:block; font-family:var(--mono); font-size:9.5px; color:var(--ink-3); }

/* feeling × concern matrix */
.ev-matrix-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-xs); }
.ev-matrix { width:100%; border-collapse:collapse; font-size:12px; }
.ev-matrix th {
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); padding:6px 8px; text-align:center; white-space:nowrap; background:var(--surface-2);
}
.ev-matrix tbody th {
  text-align:left; text-transform:none; letter-spacing:0; font-family:var(--font); font-size:11.5px;
  font-weight:600; color:var(--ink-2); background:var(--surface);
}
.ev-matrix tbody th .swatch { margin-right:5px; }
.ev-matrix td { padding:7px 8px; text-align:center; border-left:1px solid var(--line); border-top:1px solid var(--line); }

/* section head with a chart-form switcher on the right */
.ev-secthead {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-bottom:8px;
}
.ev-secthead .eyebrow { margin:0; }
.ev-seg {
  display:inline-flex; gap:2px; padding:2px; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px;
}
.ev-seg button {
  display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:7px;
  background:none; border:none; cursor:pointer; transition:.14s;
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.ev-seg button svg { width:11px; height:11px; }
.ev-seg button:hover { color:var(--ink-2); }
.ev-seg button.on { background:var(--surface); color:var(--teal-dd); box-shadow:var(--sh-sm); }
.ev-plot { position:relative; }
.ev-opt {
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  font-size:11.5px; font-weight:600; color:var(--ink-2);
}
.ev-opt input { width:13px; height:13px; accent-color:var(--teal); cursor:pointer; }

/* student vs peers */
.ev-compare { display:flex; flex-direction:column; gap:2px; }
.ev-compare-row { display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px dashed var(--line); }
.ev-compare-row:last-child { border-bottom:none; }
.ev-compare-row .lbl { flex:1; font-size:12.5px; color:var(--ink-2); }
.ev-compare-row .mine { font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink); }
.ev-compare-row .peer { font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink-3); }
.ev-compare-row .u { font-family:var(--font); font-size:10px; color:var(--ink-3); }
.ev-compare-row .vs { font-size:10.5px; }

/* ============================================================
   STUDENT TIMELINE (merged event feed)

   Three layers: a calendar heatmap navigator, a filter row, and a feed that
   scrolls INSIDE ITSELF. The fixed pane height is load-bearing — a 90-day
   window has to cost the same page height as a 7-day one.
   ============================================================ */
.tl { display:flex; flex-direction:column; gap:14px; }

/* ── 1. calendar heatmap navigator ── */
.tl-cal-wrap { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; }
.tl-cal { display:flex; flex-wrap:wrap; gap:18px; }
.tl-cal-month { display:flex; flex-direction:column; gap:5px; }
.tl-cal-label {
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.tl-cal-grid  { display:grid; grid-template-columns:repeat(7,14px); gap:3px; }
.tl-cal-strip { display:flex; flex-wrap:wrap; gap:3px; max-width:100%; }
.tl-cal-dow {
  font-family:var(--mono); font-size:8px; font-weight:600; color:var(--ink-3);
  text-align:center; line-height:1;
}

/* One cell = one day (or one week in the all-time strip), coloured by that day's
   WORST signal. Status colours, so they always carry the legend below. */
.tl-cal-day {
  width:14px; height:14px; border-radius:4px; padding:0; border:none;
  background:var(--surface-3); transition:.12s; cursor:pointer;
}
.tl-cal-day.is-outside { background:none; cursor:default; }
.tl-cal-day.lvl-0 { background:var(--surface-3); }
.tl-cal-day.lvl-1 { background:var(--s-low); }
.tl-cal-day.lvl-2 { background:var(--s-med); }
.tl-cal-day.lvl-3 { background:var(--s-high); }
.tl-cal-day.lvl-4 { background:var(--s-crit); }
.tl-cal-day.lvl-0.is-weekend { background:var(--paper-2); }
.tl-cal-day:not(.is-outside):hover { transform:scale(1.28); z-index:1; position:relative; }
.tl-cal-day.is-today    { box-shadow:0 0 0 1.5px var(--ink-2); }
.tl-cal-day.is-selected { box-shadow:0 0 0 2px var(--teal-d); transform:scale(1.15); }

.tl-cal-legend {
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 11px;
  margin-top:11px; padding-top:10px; border-top:1px solid var(--line);
  font-size:10.5px; color:var(--ink-3);
}
.tl-cal-legend .k {
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; margin-right:2px;
}
.tl-cal-legend span { display:inline-flex; align-items:center; gap:4px; }
.tl-cal-key { width:9px; height:9px; border-radius:3px; display:inline-block; }
.tl-cal-key.lvl-0 { background:var(--surface-3); }
.tl-cal-key.lvl-1 { background:var(--s-low); }
.tl-cal-key.lvl-2 { background:var(--s-med); }
.tl-cal-key.lvl-3 { background:var(--s-high); }
.tl-cal-key.lvl-4 { background:var(--s-crit); }

/* ── 2. filters ── */
.tl-filters { display:flex; flex-direction:column; gap:9px; }
.tl-chips { display:flex; flex-wrap:wrap; gap:5px; }
.tl-chip {
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line); cursor:pointer;
  font-size:11.5px; font-weight:600; color:var(--ink-2); transition:.14s;
}
.tl-chip svg { width:11px; height:11px; opacity:.7; }
.tl-chip b { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--ink-3); }
.tl-chip:hover { border-color:var(--line-2); color:var(--ink); }
.tl-chip.on { background:var(--teal-50); border-color:var(--teal-200); color:var(--teal-dd); }
.tl-chip.on b, .tl-chip.on svg { color:var(--teal-d); opacity:1; }

.tl-controls { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.tl-check {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--ink-2);
}
.tl-check input { width:14px; height:14px; accent-color:var(--teal); cursor:pointer; }

.tl-search { position:relative; flex:1 1 180px; min-width:150px; }
.tl-search svg {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:13px; height:13px; color:var(--ink-3); pointer-events:none;
}
.tl-search input {
  width:100%; padding:7px 10px 7px 30px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line-2);
  font-size:12.5px; color:var(--ink); transition:.15s;
}
.tl-search input::placeholder { color:var(--ink-3); }
.tl-search input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-50); }

/* Compact variant of the shared segmented control — the card header is tight. */
.tl-seg { padding:3px; gap:3px; border-radius:var(--r-sm); flex-shrink:0; }
.tl-seg button { flex:0 0 auto; padding:6px 12px; font-size:11.5px; border-radius:8px; }

.tl-active { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }

/* ── 3. the feed pane ── */
.tl-scroll {
  max-height:520px; overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); padding:0 12px 10px;
}
.tl-scroll:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.tl-scroll::-webkit-scrollbar { width:9px; }
.tl-scroll::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:999px; border:2px solid var(--surface); }
.tl-scroll::-webkit-scrollbar-track { background:transparent; }

.tl-day { margin-bottom:10px; }
.tl-date {
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); background:var(--surface);
  padding:9px 0 5px; border-bottom:1px solid var(--line); margin-bottom:6px;
}

/* digest row — one line per day, click to expand that day's events */
.tl-digest {
  display:flex; align-items:flex-start; gap:9px; width:100%; padding:7px 0;
  background:none; border:none; cursor:pointer; text-align:left;
}
.tl-digest-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px;
  background:var(--ink-3);
}
.tl-digest.tone-low     .tl-digest-dot { background:var(--s-low); }
.tl-digest.tone-med     .tl-digest-dot { background:var(--s-med); }
.tl-digest.tone-high    .tl-digest-dot { background:var(--s-high); }
.tl-digest.tone-crit    .tl-digest-dot { background:var(--s-crit); }
.tl-digest.tone-neutral .tl-digest-dot { background:var(--ink-3); }
.tl-digest-sum { flex:1; min-width:0; font-size:12.5px; color:var(--ink); line-height:1.45; }
.tl-digest-chev { width:14px; height:14px; flex-shrink:0; margin-top:3px; color:var(--ink-3); transition:transform .16s; }
.tl-digest-chev.is-open { transform:rotate(180deg); }
.tl-digest:hover .tl-digest-sum { color:var(--teal-dd); }
.tl-digest:hover .tl-digest-chev { color:var(--teal-d); }
.tl-expand { padding:2px 0 6px 17px; border-left:1px solid var(--line); margin-left:3px; }

/* per-event row (used flat in "all events", and nested inside an expanded digest) */
.tl-row { display:flex; align-items:flex-start; gap:10px; padding:6px 0; }
.tl-icon {
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex-shrink:0;
  background:var(--surface-3); color:var(--ink-2);
}
.tl-icon svg { width:13px; height:13px; }
.tl-row.tone-low     .tl-icon { background:var(--s-low-bg);  color:#2f7d6a; }
.tl-row.tone-med     .tl-icon { background:var(--s-med-bg);  color:#a9803a; }
.tl-row.tone-high    .tl-icon { background:var(--s-high-bg); color:#bd6e4c; }
.tl-row.tone-crit    .tl-icon { background:var(--s-crit-bg); color:#b85656; }
.tl-row.tone-neutral .tl-icon { background:var(--surface-3); color:var(--ink-2); }
.tl-title { font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.4; }
.tl-meta  { font-size:11.5px; color:var(--ink-3); line-height:1.45; margin-top:1px; }
.tl-time  { font-size:10px; color:var(--ink-3); flex-shrink:0; padding-top:2px; }

.tl-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }

@media (max-width:520px) {
  .tl-cal { gap:14px; }
  .tl-cal-grid { grid-template-columns:repeat(7,12px); }
  .tl-cal-day { width:12px; height:12px; }
  .tl-scroll { max-height:420px; }
}

/* ============================================================
   SHARE-OF-TOTAL BAR (report tables)
   ============================================================ */
.share-cell { display:flex; align-items:center; gap:9px; min-width:130px; }
.share-bar {
  flex:1; height:6px; border-radius:999px; background:var(--surface-3); overflow:hidden;
}
.share-bar > span { display:block; height:100%; border-radius:999px; background:var(--teal); }
.share-pct { font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--ink-3); min-width:34px; text-align:right; }
.swatch { width:9px; height:9px; border-radius:3px; display:inline-block; flex-shrink:0; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 16px; box-shadow:var(--sh-sm); margin-bottom:20px;
}
.filter-bar .form-input, .filter-bar .form-select { margin:0; }

/* ============================================================
   CHAT LAYOUT
   ============================================================ */
.chat-layout {
  display:grid; grid-template-columns:320px 1fr;
  height:calc(100vh - 56px); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh); overflow:hidden;
}
.chat-sidebar { border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--surface-2); }
.chat-room-item {
  display:flex; align-items:center; gap:12px; padding:13px 15px;
  border-bottom:1px solid var(--line); cursor:pointer; transition:.14s; position:relative;
}
.chat-room-item:hover { background:var(--surface); }
.chat-room-item.active { background:var(--teal-50); }
.chat-room-item.active::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--teal);
}
.chat-messages { display:flex; flex-direction:column; min-height:0; position:relative; }
.chat-messages-header {
  display:flex; align-items:center; gap:12px; padding:15px 20px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.7); backdrop-filter:blur(8px);
}
.chat-messages-body { flex:1; overflow-y:auto; padding:22px 20px; display:flex; flex-direction:column; gap:12px; background:var(--surface-2); }
.chat-messages-input { display:flex; align-items:flex-end; gap:10px; padding:14px 18px; border-top:1px solid var(--line); background:var(--surface); }
.chat-messages-input .form-textarea { min-height:44px; max-height:130px; margin:0; }

.message-bubble { max-width:70%; padding:11px 15px; border-radius:16px; font-size:13.5px; line-height:1.45; box-shadow:var(--sh-sm); }
.message-bubble.mine { align-self:flex-end; background:linear-gradient(135deg,var(--teal-btn),var(--teal-d)); color:#fff; border-bottom-right-radius:5px; }
.message-bubble.theirs { align-self:flex-start; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:5px; }
.message-bubble.ai-reply { align-self:flex-start; background:var(--violet-50); color:#4a3f78; border:1px solid #ddd7f2; border-bottom-left-radius:5px; }
.ai-label { font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin-bottom:3px; }

/* legacy topnav avatar reused in messages */
.topnav-avatar { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff; background:linear-gradient(135deg,var(--teal-btn),var(--teal-d)); flex-shrink:0; }

/* normalized chat header/input (moved off inline styles) */
.chat-messages-header .chat-peer { display:flex; align-items:center; gap:11px; }
.chat-messages-header .chat-peer-av { position:relative; flex-shrink:0; }
.chat-messages-header .chat-peer-name { font-weight:600; font-size:.9375rem; line-height:1.2; }
.online-dot { display:none; position:absolute; bottom:-1px; right:-1px; width:12px; height:12px; border-radius:50%; background:#54c98f; border:2.5px solid var(--surface); }
.chat-sidebar-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 16px 13px; border-bottom:1px solid var(--line); background:var(--surface); flex-shrink:0; }
.msg-tick { margin-left:4px; }
.msg-tick.read { color:var(--forest-400); }
.msg-tick.sent { color:rgba(255,255,255,.6); }

/* ── student picker (new-message modal) ── */
.picker-list {
  max-height:300px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2);
}
.picker-row {
  display:flex; align-items:center; gap:11px; width:100%; padding:9px 12px;
  background:transparent; border:none; border-bottom:1px solid var(--line);
  cursor:pointer; transition:.12s; text-align:left; color:inherit;
}
.picker-row:last-child { border-bottom:none; }
.picker-row:hover { background:var(--surface); }
.picker-row.is-selected { background:var(--teal-50); box-shadow:inset 3px 0 0 var(--teal); }

/* ============================================================
   IN-CALL OVERLAY  (video main stage + PiP + docked panel)
   ============================================================ */
/* Hidden by default and opened ONLY by the .is-open class the call component adds.
   Deliberately not driven by x-show/x-cloak alone: when Alpine fails to boot the
   overlay used to stay on screen, which looked exactly like an auto-started call. */
.call-overlay {
  position:absolute; inset:0; z-index:40; display:none;
  background:#0d1414; color:#e8f0ef; overflow:hidden;
}
.call-overlay.is-open { display:flex; animation:callIn .2s ease; }
/* Pages without a positioned pane to fill (Consultations) cover the viewport instead. */
.call-overlay.is-fixed { position:fixed; }
@keyframes callIn { from { opacity:0; } to { opacity:1; } }

.call-video-col { flex:1; display:flex; flex-direction:column; min-width:0; }

.call-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08);
}
.call-header .call-peer { display:flex; align-items:center; gap:10px; min-width:0; }
.call-status-dot { position:relative; display:inline-flex; width:9px; height:9px; flex-shrink:0; }
.call-status-dot .ping { position:absolute; inset:0; border-radius:50%; opacity:.75; animation:callPing 1.4s cubic-bezier(0,0,.2,1) infinite; }
.call-status-dot .core { position:relative; width:9px; height:9px; border-radius:50%; }
.call-status-dot[data-status="connected"] .ping, .call-status-dot[data-status="connected"] .core { background:#3ddc97; }
.call-status-dot[data-status="connecting"] .ping, .call-status-dot[data-status="connecting"] .core { background:#f4c04e; }
.call-status-dot[data-status="disconnected"] .ping, .call-status-dot[data-status="disconnected"] .core { background:#e5654b; }
@keyframes callPing { 75%,100% { transform:scale(2.2); opacity:0; } }
.call-header .call-peer-name { font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.call-header .call-status-label { font-size:.72rem; color:rgba(232,240,239,.6); }
.call-header .call-timer { font-family:var(--mono); font-size:.8rem; color:rgba(232,240,239,.8); letter-spacing:.03em; }
.call-header .call-panel-toggle {
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:9px;
  background:rgba(255,255,255,.08); color:#e8f0ef; border:none; cursor:pointer; font-size:.72rem; font-weight:600; transition:.14s;
}
.call-header .call-panel-toggle:hover { background:rgba(255,255,255,.16); }

.call-stage { flex:1; position:relative; background:#050a0a; min-height:0; overflow:hidden; }
.call-stage #remote-video { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.call-stage .call-waiting { color:rgba(232,240,239,.45); font-size:.85rem; display:flex; flex-direction:column; align-items:center; gap:12px; }
.call-stage .call-waiting .spinner-ring {
  width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.14); border-top-color:var(--teal-l); animation:callSpin 1s linear infinite;
}
@keyframes callSpin { to { transform:rotate(360deg); } }
.call-pip {
  position:absolute; bottom:16px; right:16px; width:180px; height:120px; z-index:10;
  background:#0a1010; border-radius:14px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.5);
  border:1.5px solid rgba(255,255,255,.22);
}
.call-pip::after { content:"You"; position:absolute; left:8px; bottom:6px; z-index:3; font-size:.6rem; font-weight:600; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }

/* A camera that is off, or that never opened, must read as a state — not as a
   dead black panel that is indistinguishable from a broken call. */
/* Absolute and opaque on purpose: muting a camera does not remove the <video>
   element, it just stops it painting, so the placeholder has to cover the frozen
   last frame rather than sit beside it in the flex flow. */
.call-stage .call-camera-off {
  position:absolute; inset:0; z-index:2; background:#050a0a;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:rgba(232,240,239,.62); font-size:.85rem; text-align:center; padding:0 24px;
}
.call-stage .call-camera-off small { color:rgba(232,240,239,.38); font-size:.72rem; }
.call-stage .call-avatar {
  width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border:1.5px solid rgba(255,255,255,.16);
  font-size:1.9rem; font-weight:700; color:#e8f0ef; letter-spacing:.02em;
}
.call-pip-off {
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:#0a1010; color:rgba(232,240,239,.5); font-size:.66rem; font-weight:600;
}
.call-pip-off svg { width:22px; height:22px; opacity:.75; }
.call-media-error {
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:20; max-width:min(420px, calc(100% - 32px));
  padding:9px 14px; border-radius:10px; text-align:center; font-size:.75rem; line-height:1.4;
  background:rgba(229,101,75,.16); border:1px solid rgba(229,101,75,.42); color:#ffd9d0;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}

.call-controls {
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:16px; background:rgba(255,255,255,.04); border-top:1px solid rgba(255,255,255,.08);
}
.call-btn {
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer; transition:.14s;
}
.call-btn:hover { background:rgba(255,255,255,.22); }
.call-btn svg { width:20px; height:20px; }
/* Icon swap is CSS-driven off the same is-off class, so the on/off glyphs can
   never both paint at once if a JS expression fails. */
.call-btn .icon-off { display:none; }
.call-btn.is-off .icon-on { display:none; }
.call-btn.is-off .icon-off { display:block; }
.call-btn.is-off { background:#e5654b; }
.call-btn.is-off:hover { background:#ef7359; }
.call-btn.is-active { background:var(--teal); }
.call-btn.is-active:hover { background:var(--teal-l); }
.call-btn.end { width:56px; height:56px; background:#e5654b; box-shadow:0 6px 18px rgba(229,101,75,.4); }
.call-btn.end:hover { background:#ef7359; }
.call-btn.end svg { width:24px; height:24px; }

/* docked side panel: Notes / Chat */
.call-panel {
  width:340px; flex-shrink:0; display:flex; flex-direction:column; min-height:0;
  background:var(--surface); color:var(--ink); border-left:1px solid rgba(0,0,0,.08);
}
.call-panel[hidden] { display:none; }
.call-panel-tabs { display:flex; gap:2px; padding:10px 12px 0; background:var(--surface-2); border-bottom:1px solid var(--line); flex-shrink:0; }
.call-tab {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 10px; border:none; background:transparent; cursor:pointer; color:var(--ink-3);
  font-size:.8rem; font-weight:700; border-bottom:2.5px solid transparent; transition:.14s;
}
.call-tab:hover { color:var(--ink); }
.call-tab.active { color:var(--teal-d); border-bottom-color:var(--teal); }
.call-tab .tab-badge { min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--teal); color:#fff; font-size:.6rem; display:inline-grid; place-items:center; }
.call-panel-body { flex:1; min-height:0; display:flex; flex-direction:column; }

/* notes tab */
.call-notes { flex:1; min-height:0; display:flex; flex-direction:column; }
.call-notes-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line); }
.call-notes-head .lbl { font-size:.72rem; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; }
.call-notes-status { font-size:.68rem; color:var(--ink-3); display:flex; align-items:center; gap:5px; }
.call-notes-status.saved { color:var(--forest-500, #2f9e6a); }
.call-notes-status .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.call-notes textarea {
  flex:1; width:100%; border:none; outline:none; resize:none; padding:14px; font-size:.9rem; line-height:1.55;
  color:var(--ink); background:var(--surface); font-family:inherit;
}
.call-notes-hint { padding:8px 14px; font-size:.66rem; color:var(--ink-3); border-top:1px solid var(--line); background:var(--surface-2); }

/* chat tab (reuses .message-bubble styles) */
.call-chat { flex:1; min-height:0; display:flex; flex-direction:column; }
.call-chat-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--surface-2); }
.call-chat-input { display:flex; align-items:flex-end; gap:8px; padding:10px 12px; border-top:1px solid var(--line); background:var(--surface); }
.call-chat-input textarea { flex:1; min-height:40px; max-height:110px; resize:none; margin:0; }

@media (max-width:900px) {
  .call-panel { position:absolute; top:0; right:0; bottom:0; z-index:20; box-shadow:-8px 0 24px rgba(0,0,0,.3); }
}

/* ============================================================
   LIST ROW / LEGEND / MASCOT CARD
   ============================================================ */
.lrow {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 17px; display:flex; align-items:center; gap:15px; transition:.16s; box-shadow:var(--sh-sm);
}
.lrow:hover { border-color:var(--teal-200); box-shadow:var(--sh); transform:translateY(-1px); }
.legend-row { display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); }
.legend-row:last-child { border-bottom:none; }
.legend-row .sw { width:11px; height:11px; border-radius:4px; flex-shrink:0; }
.legend-row .ln { font-size:13px; font-weight:700; }
.legend-row .lr { font-family:var(--mono); font-size:10px; color:var(--ink-3); font-weight:500; margin-top:1px; }
.legend-row .lv { margin-left:auto; text-align:right; }
.legend-row .lv .n { font-family:var(--serif); font-size:17px; font-weight:500; }
.legend-row .lv .p { font-family:var(--mono); font-size:10px; color:var(--ink-3); font-weight:500; }
.mascot-card { background:linear-gradient(135deg,#E9F7FB,#D6EEF5); border:1px solid #CBE6EF; border-radius:var(--r-lg); position:relative; overflow:hidden; }
.av-sm { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff; flex-shrink:0; background:linear-gradient(135deg,var(--teal-btn),var(--teal-d)); }
.av-sm.band-low, .av-sm.band-lowmed { background:linear-gradient(135deg,var(--s-low),#3fa890); }
.av-sm.band-med { background:linear-gradient(135deg,var(--s-med),#d9b34f); }
.av-sm.band-medhigh { background:linear-gradient(135deg,var(--s-medhigh),#d68d4b); }
.av-sm.band-high { background:linear-gradient(135deg,var(--s-high),#cf7352); }
.av-sm.band-crit { background:linear-gradient(135deg,var(--s-crit),#b85a5a); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { display:flex; align-items:center; gap:6px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
.page-btn, .pagination a, .pagination span {
  min-width:38px; height:38px; padding:0 12px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); transition:.14s;
}
.page-btn:hover, .pagination a:hover { border-color:var(--teal-200); color:var(--teal-d); }
.page-btn.active, .pagination .active > span, .pagination [aria-current] { background:linear-gradient(135deg,var(--teal-btn),var(--teal-d)); color:#fff; border-color:transparent; }
.page-btn.disabled, .pagination .disabled > span { opacity:.45; cursor:not-allowed; }
.page-info { font-size:12.5px; color:var(--ink-3); font-weight:600; }

/* ============================================================
   UTILITIES
   ============================================================ */
.divider { height:1px; background:var(--line); margin:16px 0; }
.text-muted { color:var(--ink-3); }
.text-sm { font-size:12.5px; }
.text-xs { font-size:11.5px; }
.font-medium { font-weight:600; }
.font-semibold { font-weight:700; }
.truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w-full { width:100%; }
.flex { display:flex; } .items-center { align-items:center; } .justify-between { justify-content:space-between; }
.gap-2 { gap:8px; } .gap-3 { gap:12px; } .gap-4 { gap:16px; }
.mt-1 { margin-top:4px; } .mt-2 { margin-top:8px; } .mt-3 { margin-top:12px; } .mt-4 { margin-top:16px; }
.mt-5 { margin-top:20px; } .mt-6 { margin-top:24px; } .mt-8 { margin-top:32px; }
.space-y-4 > * + * { margin-top:16px; } .space-y-6 > * + * { margin-top:24px; }
[x-cloak] { display:none !important; }

/* ============================================================
   ANIMATIONS — opacity always 1; only slide (never blanks on export)
   ============================================================ */
@keyframes fadeUp { from { transform:translateY(12px); } to { transform:none; } }
.page, .stagger > * { opacity:1; }
@media (prefers-reduced-motion:no-preference) {
  .page { animation:fadeUp .36s ease both; }
  .stagger > * { animation:fadeUp .46s ease both; }
  .stagger > *:nth-child(1) { animation-delay:.02s; }
  .stagger > *:nth-child(2) { animation-delay:.06s; }
  .stagger > *:nth-child(3) { animation-delay:.10s; }
  .stagger > *:nth-child(4) { animation-delay:.14s; }
  .stagger > *:nth-child(5) { animation-delay:.18s; }
  .stagger > *:nth-child(6) { animation-delay:.22s; }
}

/* chart entrance primitives (used by inline SVG partials) */
.donut-seg { transition:stroke-dasharray .9s cubic-bezier(.4,0,.2,1); }
.bar-grow { transition:height .8s cubic-bezier(.4,0,.2,1); }
.gauge-arc { transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1); }

*:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

/* ============================================================
   TOASTS, ALERTS AND THE CONFIRM DIALOG
   ------------------------------------------------------------
   Replaces the portal's native alert()/confirm() calls and the six
   hand-inlined flash banners that had drifted into three different
   designs.

   Deliberately NOT an extension of .notice. That is an advisory
   banner that lives inside page content and is used correctly as
   one in about six places; overloading it as the error channel is
   half of what went wrong here.

   .coco-toaster is a STATIC, in-flow stack by default and only
   becomes a fixed overlay once JS adds .is-live. So a script error
   downgrades the toasts to ordinary banners at the top of the
   content area — still readable, still announced — rather than
   leaving the messages stacked invisibly in a corner.
   ============================================================ */
.coco-toaster { display:flex; flex-direction:column; gap:10px; margin:0 0 18px; }
.coco-toaster:empty { display:none; }

.coco-toaster.is-live {
  position:fixed; top:18px; right:18px; z-index:400; margin:0;
  width:min(380px, calc(100vw - 36px));
  /* The stack spans the full width even when a single toast is short,
     so the transparent gaps must not eat clicks on what is behind. */
  pointer-events:none;
}
.coco-toaster.is-live .coco-alert { pointer-events:auto; box-shadow:var(--sh-lg); }

.coco-alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line); border-left:3px solid var(--line-2);
  background:var(--surface); color:var(--ink-2);
  font-size:13.5px; font-weight:600; line-height:1.45;
}
.coco-alert__icon { flex-shrink:0; margin-top:1px; }
.coco-alert__icon svg { width:17px; height:17px; display:block; }
.coco-alert__body { margin:0; flex:1; min-width:0; }
.coco-alert__close {
  flex-shrink:0; width:32px; height:32px; margin:-6px -6px -6px 0;
  display:grid; place-items:center;
  background:none; border:0; border-radius:9px; cursor:pointer;
  color:var(--ink-3); font-size:19px; line-height:1;
}
.coco-alert__close:hover { background:rgba(9,42,40,.06); color:var(--ink); }

.coco-alert--success { background:var(--s-low-bg);  border-color:#bfe3d3; border-left-color:var(--success); color:var(--ink); }
.coco-alert--warning { background:var(--s-med-bg);  border-color:#eedfb4; border-left-color:var(--warning); color:var(--ink); }
.coco-alert--error   { background:var(--s-crit-bg); border-color:#eec9c9; border-left-color:var(--danger);  color:var(--ink); }
.coco-alert--success .coco-alert__icon { color:var(--success); }
.coco-alert--warning .coco-alert__icon { color:var(--warning); }
.coco-alert--error   .coco-alert__icon { color:var(--danger); }

@media (prefers-reduced-motion:no-preference) {
  .coco-toaster.is-live .coco-alert { animation:cocoToastIn .22s ease both; }
}
@keyframes cocoToastIn {
  from { opacity:0; transform:translateY(-7px); }
  to   { opacity:1; transform:none; }
}

/* ----- confirm dialog -------------------------------------------------
   Built on the existing .modal-backdrop / .modal primitives so it
   inherits the portal's chrome, and on the same .open contract they
   already use. The [hidden] guard is belt-and-braces: .modal-backdrop.open
   sets display:flex, which would otherwise beat the hidden attribute if a
   later author reached for it. */
.modal-backdrop[hidden] { display:none !important; }

.coco-confirm__card { max-width:460px; }
.coco-confirm__body { margin:0; font-size:13.8px; line-height:1.6; color:var(--ink-2); }
.coco-confirm__detail {
  margin:12px 0 0; padding:11px 13px;
  border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--line);
  font-size:13px; line-height:1.55; color:var(--ink-2);
}
.coco-confirm__detail:empty { display:none; }

/* One close button for every modal in the portal, at a 32px target.
   Three different designs were in use. */
.coco-modal-close {
  width:32px; height:32px; display:grid; place-items:center;
  background:none; border:0; border-radius:9px; cursor:pointer;
  color:var(--ink-3); font-size:20px; line-height:1;
}
.coco-modal-close:hover { background:rgba(9,42,40,.06); color:var(--ink); }

/* ----- utilities the portal was missing ------------------------------- */
.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;
}