/* Dean — premium admin UI. Soft-structuralism, navy/yellow brand. */
:root {
  color-scheme: light;
  --brand: #314b76;
  --navy: #314b76;
  --navy-700: #273c5f;
  --navy-50: #eaeef5;
  --yellow: #f5b517;
  --bg: #f5f5f7;                    /* Apple grouped background */
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #fafafa;
  --surface-hover: #f0f0f3;
  --card: var(--surface);          /* theme-aware card fill — alias of --surface (resolves per theme) */
  --ink: #1d1d1f;                   /* Apple label */
  /* Secondary/tertiary text: alphas raised from Apple's 0.6/0.34 (3.44:1 / 1.88:1 on white —
     WCAG AA failures for the labels/hints these tokens style). 0.78 → ≥5.3:1 and 0.74 → ≥4.8:1
     on both white and #f5f5f7, keeping the hierarchy (Sol audit, 2026-07-10). --ink-3 remains
     for supplementary small labels — never body text. */
  --ink-2: rgba(60, 60, 67, 0.78); /* secondaryLabel — ≥5.3:1 on light surfaces */
  --ink-3: rgba(60, 60, 67, 0.74); /* tertiaryLabel — ≥4.8:1 on light surfaces */
  --line: rgba(60, 60, 67, 0.13);  /* separator */
  --ring: rgba(60, 60, 67, 0.1);
  --ok: #34c759;                    /* system green */
  --warn: #f08300;                 /* system orange (text-legible) */
  --bad: #ff3b30;                  /* system red */
  --growth-accent: #9fb3c8;        /* growth-log accent (paired w/ --yellow for strengths) */
  /* Case-history "kind" accents — semantic, separate from the navy brand accent. */
  --k-incident: #e5342a; --k-damage: #e07600; --k-agency: #0a84ff; --k-reply: #159aa8; --k-log: var(--navy);
  --shadow-sm: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03), 0 10px 30px -14px rgba(20, 30, 60, 0.22);
  --shadow-pop: 0 24px 60px -16px rgba(20, 30, 60, 0.32), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --r-lg: 20px;
  --r-md: 15px;
  --r-sm: 10px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* entrance overshoot-and-settle */
  --focus-ring: color-mix(in srgb, var(--brand) 15%, transparent); /* one input focus ring, theme-aware */
  --material: rgba(246, 246, 248, 0.72);
  --glass: rgba(255, 255, 255, 0.6);          /* Liquid Glass fill */
  --glass-stroke: rgba(255, 255, 255, 0.55);  /* bright edge */
  --glass-hi: rgba(255, 255, 255, 0.75);      /* specular highlight */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', sans-serif;
  --oc-card-bg: #314b76;               /* org chart person card */
  --oc-card-ink: #ffffff;
  --oc-team-bg: #eef1f7;               /* org chart team/group card */
  --oc-team-ink: #314b76;
  --oc-line: #c7cfde;                  /* org chart connectors */
}
[data-theme="dark"] {
  color-scheme: dark;
  --brand: #7fa2d8;
  --navy: #7fa2d8;
  --navy-700: #9bb8e5;
  --navy-50: #1f2a3d;
  --yellow: #ffd60a;
  --bg: #000000;                       /* true black — glass floats over it */
  --surface: #1c1c1e;                  /* systemGray6 dark */
  --surface-2: #2c2c2e;
  --surface-3: #242426;
  --surface-hover: #3a3a3c;
  --ink: #f5f5f7;
  --ink-2: rgba(235, 235, 245, 0.6);  /* ≈6:1 on surface — already AA */
  --ink-3: rgba(235, 235, 245, 0.45); /* raised from .32 → ≥3:1 on surface */
  --line: rgba(235, 235, 245, 0.14);
  --ring: rgba(235, 235, 245, 0.1);
  --ok: #30d158;
  --warn: #ff9f0a;
  --bad: #ff453a;
  --growth-accent: #6c8299;        /* growth-log accent — dark-mode legible */
  --k-incident: #ff6961; --k-damage: #ff9f0a; --k-agency: #409cff; --k-reply: #40c8d4; --k-log: var(--navy);
  --shadow-sm: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  --shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 34px -18px rgba(0, 0, 0, 0.8);
  --shadow-pop: 0 18px 60px -10px rgba(0, 0, 0, 0.8), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  --material: rgba(28, 28, 30, 0.6);
  --glass: rgba(44, 44, 46, 0.55);
  --glass-stroke: rgba(255, 255, 255, 0.12);
  --glass-hi: rgba(255, 255, 255, 0.14);
  --oc-card-bg: #1f2a3d;
  --oc-card-ink: #f5f5f7;
  --oc-team-bg: #2c2c2e;
  --oc-team-ink: #c9d7ef;
  --oc-line: rgba(235, 235, 245, 0.25);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Screen-reader-only text (aria-live announcements, hidden labels). */
.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; }
html, body { height: 100%; }
html { accent-color: var(--brand); }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  background:
    radial-gradient(1100px 720px at 8% -8%, rgba(49, 75, 118, 0.13), transparent 58%),
    radial-gradient(900px 680px at 102% 2%, rgba(245, 181, 23, 0.11), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-theme="dark"] body {
  background:
    radial-gradient(1100px 720px at 8% -8%, rgba(94, 134, 196, 0.16), transparent 58%),
    radial-gradient(900px 680px at 102% 2%, rgba(245, 181, 23, 0.07), transparent 55%),
    var(--bg);
}
/* ---------- Liquid Glass material ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
}
/* Accessibility: collapse translucency to solid surfaces when the user asks for it
   (Reduce Transparency / Increase Contrast), and drop the GPU-costly blur. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body { background: var(--bg); }
  .glass, .card, .sidebar, .hero, .actioncard, .qlitem, .userchip, .seg button.active {
    background: var(--surface) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .sidebar { background: var(--surface-2) !important; }
  .hero::after, body::before { display: none; }
}
/* Grain retired — productivity surfaces stay clean (deference over decoration). */
.grain { display: none; }
.boot { display: grid; place-items: center; gap: 13px; grid-auto-flow: row; height: 100dvh; color: var(--ink-2); font-size: 14px; }
.boot::before { content: ""; width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--brand); animation: lsm-spin 0.7s linear infinite; }
@keyframes lsm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot::before { animation: none; } }
/* Skeleton shimmer for content placeholders. */
.skeleton { position: relative; overflow: hidden; background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: var(--r-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 5%, transparent), transparent);
  animation: lsm-shimmer 1.4s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }
@keyframes lsm-shimmer { 100% { transform: translateX(100%); } }
/* V9 delight: a one-shot brand-tinted sweep on the list row a sheet just returned to. */
@keyframes lsm-row-sweep { 0% { background-color: color-mix(in srgb, var(--navy) 15%, transparent); } 100% { background-color: transparent; } }
tr.row-sweep > td { animation: lsm-row-sweep 1.15s var(--ease) 1; }
@media (prefers-reduced-motion: reduce) { tr.row-sweep > td { animation: none; } }
/* V10: dismissible "what this screen is for" helper — one calm line under a page title,
   remembered per-screen once dismissed. Brand-tinted, never shouts. */
.screenhelp { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px;
  border-radius: var(--r-md); font-size: 13px; color: var(--ink-2);
  background: color-mix(in srgb, var(--navy) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--navy) 14%, transparent); }
.screenhelp .sh-ic { display: inline-flex; flex: 0 0 auto; color: var(--navy); }
.screenhelp .sh-ic svg { width: 15px; height: 15px; }
.screenhelp .sh-t { flex: 1; min-width: 0; }
.screenhelp .sh-t strong { color: var(--ink); font-weight: 600; }
.screenhelp .sh-x { flex: 0 0 auto; border: 0; background: none; cursor: pointer; color: var(--ink-3);
  font-size: 17px; line-height: 1; padding: 2px 4px; border-radius: 6px; transition: color 0.18s var(--ease), background 0.18s var(--ease); }
.screenhelp .sh-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* ---------- Login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 70% -10%, #e9eef7, transparent), var(--bg); }
[data-theme="dark"] .login { background: radial-gradient(1200px 600px at 70% -10%, rgba(74, 104, 157, 0.28), transparent), var(--bg); }
.login-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 10px; }
.login-inner { padding: 30px 28px 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 30px; letter-spacing: -0.045em; text-transform: uppercase; color: #000; }
/* Pure DEAN wordmark — no accent dot; true black in light, true white in dark ("turk mode"). */
.brand .dot, .side-brand .dot { display: none; }
[data-theme="dark"] .brand, [data-theme="dark"] .side-brand, [data-theme="dark"] .mtop-title { color: #fff; }
.eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-2); font-weight: 600; }
.login h1 { font-size: 23px; font-weight: 700; margin: 18px 0 4px; letter-spacing: -0.03em; }
.login p.sub { color: var(--ink-2); font-size: 14px; margin-bottom: 22px; }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 14px 0 6px; }
input, select {
  width: 100%; font-family: var(--font); font-size: 14px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 13px; outline: none; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
input[type=checkbox], input[type=radio] { width: auto; padding: 0; flex: 0 0 auto; background-image: none; }
.rte:empty:before { content: attr(data-ph); color: var(--ink-3); }
.rte:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px var(--focus-ring); }
.rte h2 { color: var(--navy); font-size: 19px; font-weight: 700; margin: 14px 0 6px; line-height: 1.3; }
.rte h3 { color: var(--navy); font-size: 16px; font-weight: 700; margin: 12px 0 5px; line-height: 1.3; }
.rte p { margin: 0 0 10px; }
.rte ul { padding-left: 22px; margin: 0 0 10px; }
.rte a { color: var(--navy); text-decoration: underline; }
input:focus, select:focus { border-color: var(--navy); box-shadow: 0 0 0 4px var(--focus-ring); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-weight: 600; font-size: 14px; cursor: pointer; border: none;
  border-radius: 999px; padding: 11px 20px; transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:active { transform: scale(0.975); }
.btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.btn svg { width: 15px; height: 15px; flex: none; stroke-width: 1.8; margin-right: -2px; }
/* Keyboard focus rings (pointer clicks stay clean via :focus-visible) — macOS-style
   accent outline with an offset gap. Doesn't disturb glass shadows or layout. */
.btn:focus-visible, .nav-item:focus-visible, .seg button:focus-visible, .seg a:focus-visible,
.actioncard:focus-visible, .qlitem:focus-visible, .userchip:focus-visible,
.theme-toggle:focus-visible, tr.row-link:focus-visible, .row-link:focus-visible, .x:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px;
}
.btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 90%, white), var(--navy)); color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 8px 18px -10px color-mix(in srgb, var(--navy) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 82%, white), var(--navy-700)); }
.btn-primary .ic { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.16);
  display: grid; place-items: center; transition: transform 0.25s var(--ease); }
.btn-primary:hover .ic { transform: translate(2px, -1px); }
.btn-block { width: 100%; }
.err { color: var(--bad); font-size: 13px; margin-top: 12px; min-height: 18px; }
.hint { color: var(--ink-3); font-size: 12px; margin-top: 16px; text-align: center; }

/* ---------- App shell ---------- */
.shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100dvh; }
.sidebar { padding: 22px 16px; position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 6px;
  background: var(--material); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
  border-right: 1px solid var(--line); box-shadow: inset -1px 0 0 var(--glass-hi); z-index: 5; }
.side-brand { padding: 8px 12px 18px; display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -0.045em; font-size: 25px; text-transform: uppercase; color: #000; }
.nav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px 8px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.nav-scroll::-webkit-scrollbar { width: 6px; }
.nav-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.nav-group { font-size: 15px; letter-spacing: 0.01em; color: var(--brand); font-weight: 700; padding: 16px 12px 6px; }
.nav-section:first-child .nav-group { padding-top: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px;
  color: var(--ink-2); font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.nav-item:hover { background: rgba(120, 120, 128, 0.12); color: var(--ink); }
.nav-item.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 92%, white), var(--navy));
  color: #fff; font-weight: 600;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 16px -8px color-mix(in srgb, var(--navy) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.nav-item.active svg { color: #fff; }
.nav-item svg { width: 18px; height: 18px; flex: none; stroke-width: 1.6; }
.side-foot { margin-top: auto; padding: 12px 12px 6px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
.theme-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); color: var(--ink-2); font-family: var(--font); font-size: 13px;
  font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme-toggle:hover { background: var(--surface-hover); color: var(--ink); border-color: var(--navy); }
.theme-toggle svg { width: 17px; height: 17px; flex: none; stroke-width: 1.8; }

.main { padding: 26px 34px 60px; min-width: 0; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; }
.topbar h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.035em; }
.topbar .sub { color: var(--ink-2); font-size: 14px; margin-top: 3px; }
.userchip { display: flex; align-items: center; gap: 10px; background: var(--glass); border-radius: 999px; padding: 6px 8px 6px 14px;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-stroke); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
  font-size: 13px; font-weight: 500; color: var(--ink-2); }
.userchip .av { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; }

/* cards — the CONTENT layer stays opaque. Glass (blur) is reserved for layers that
   float ABOVE content: sidebar, sheets/scrims, toasts, popovers. Content blurring
   content reads muddy and costs GPU on dashboards that paint 30+ cards. */
.card { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); padding: 18px 20px;
  border: 1px solid var(--ring); }
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
/* Cross-fade the content area on each navigation — continuity between views.
   Opacity-only (no transform) so position:sticky headers stay intact. */
@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }
.main.view-anim { animation: view-in 0.24s var(--ease); }
/* Tactile press feedback on tappable surfaces — a satisfying, brief scale-down.
   (.lists-kcard excluded — it's drag-and-drop, a press-scale would fight the drag.) */
.actioncard:active, .qlitem:active, .seg button:active, .seg a:active { transform: scale(0.98); }
.nav-item:active { transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) {
  .actioncard:active, .qlitem:active, .seg button:active, .seg a:active, .nav-item:active { transform: none; }
}
.grid { display: grid; gap: 18px; }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.stat .label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.stat .value { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; margin-top: 10px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .meta { color: var(--ink-2); font-size: 13px; margin-top: 8px; }
.stat .accent { color: var(--navy); }
.card h3 { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.card h3 .tag { font-size: 10px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em; }

/* bars */
.bar-row { display: grid; grid-template-columns: 64px 1fr 44px; align-items: center; gap: 12px; margin: 9px 0; font-size: 13px; }
.bar-row .k { color: var(--ink-2); font-weight: 600; }
.bar-row .v { text-align: right; color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.bar { height: 9px; border-radius: 999px; background: var(--navy-50); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--navy); transition: width 0.9s var(--ease); }
.dualbar { display: flex; gap: 5px; align-items: flex-end; height: 120px; padding-top: 8px; }
.dualbar .month { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dualbar .pair { flex: 1; display: flex; gap: 3px; align-items: flex-end; width: 100%; justify-content: center; }
.dualbar .pair i { width: 38%; border-radius: 5px 5px 0 0; display: block; }
.dualbar .pair .e { background: #bcd0ee; }
.dualbar .pair .b { background: var(--navy); }
.dualbar .ml { font-size: 10px; color: var(--ink-3); font-weight: 600; }

/* ---------- dashboard hero pulse band ---------- */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  position: relative; overflow: hidden;
  background: var(--glass); -webkit-backdrop-filter: blur(34px) saturate(185%); backdrop-filter: blur(34px) saturate(185%);
  border: 1px solid var(--glass-stroke); border-radius: var(--r-lg); padding: 24px 28px; margin-bottom: 18px; color: var(--ink);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 250px at 0% 0%, rgba(49, 75, 118, 0.19), transparent 70%),
              radial-gradient(430px 210px at 100% 120%, rgba(245, 181, 23, 0.22), transparent 70%); }
.hero .hero-left, .hero .pulse { position: relative; z-index: 1; }
.hero .greet { font-size: 25px; font-weight: 700; letter-spacing: -0.022em; }
.hero .gsub { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
.hero .pulse { display: flex; gap: 0; flex-wrap: wrap; }
.hero .pulseitem { padding: 0 22px; position: relative; }
.hero .pulseitem + .pulseitem::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: var(--line); }
.hero .pulseitem .pv { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.hero .pulseitem .pl { font-size: 11px; color: var(--ink-2); font-weight: 600; margin-top: 6px; }

/* NEW marker on action tiles + warn count colour */
.actioncard { position: relative; }
.actioncard.warn .an { color: var(--warn); }
.actioncard .newdot { position: absolute; top: 10px; right: 11px; font-size: 8px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--navy); background: var(--navy-50); padding: 2px 6px; border-radius: 5px; }

/* ---------- "Jump back in" quick-launch ---------- */
.quicklaunch { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.qlitem { position: relative; display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--glass-stroke); background: color-mix(in srgb, var(--surface) 70%, transparent); text-decoration: none; color: var(--ink);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease); }
.qlitem:hover { background: color-mix(in srgb, var(--surface) 88%, transparent); transform: translateY(-1px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); }
.qlitem .ql-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--navy-50); color: var(--navy);
  display: grid; place-items: center; flex: none; }
.qlitem .ql-ic svg { width: 18px; height: 18px; stroke-width: 1.6; }
.qlitem .qll { font-size: 13px; font-weight: 700; }
.qlitem .ql-new { margin-left: auto; font-size: 8px; font-weight: 700; letter-spacing: 0.08em; color: var(--navy);
  background: var(--navy-50); padding: 2px 6px; border-radius: 5px; }

/* toolbar + table */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input, .toolbar select { width: auto; min-width: 200px; }
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; background: rgba(120, 120, 128, 0.12); border-radius: 10px; padding: 2px; gap: 2px; position: relative; }
.seg::-webkit-scrollbar { display: none; }
/* Sliding thumb — the iOS segmented glide. segThumbSync() keeps one white pill under the
   active button; buttons keep their own active style as the no-JS fallback and go
   transparent once a thumb is live. */
.seg > .seg-thumb { position: absolute; top: 2px; bottom: 2px; left: 0; width: 0; border-radius: 8px;
  background: var(--surface); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.14);
  transition: transform 0.28s var(--ease), width 0.28s var(--ease); pointer-events: none; }
.seg > button, .seg > a { position: relative; z-index: 1; }
.seg.has-thumb > button.active, .seg.has-thumb > a.active { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .seg > .seg-thumb { transition: none; } }
.seg button, .seg a { border: none; background: none; font-family: var(--font); font-weight: 500; font-size: 13px; color: var(--ink);
  padding: 6px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.seg a { text-decoration: none; display: inline-flex; align-items: center; }
.seg button.active, .seg a.active { background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.14); }
/* Record-drawer tab strip — a many-tab variant of .seg. The iOS segmented control
   (grey track + sliding thumb) is built for 2–5 single-row options; with 15 wrapping
   tabs the thumb spans both rows (covering two buttons at once) and the track reads as
   a heavy blob. This variant drops the track and thumb for a clean wrapping strip
   grounded on a hairline, with a tinted-brand active pill. segThumbSync() skips it. */
.seg.seg-tabs { display: flex; flex-wrap: wrap; width: 100%; gap: 4px; padding: 0 0 8px;
  background: transparent; border-radius: 0; border-bottom: 1px solid var(--line); }
.seg.seg-tabs > .seg-thumb { display: none; }
.seg.seg-tabs > button, .seg.seg-tabs > a { color: var(--ink-2); font-weight: 500; }
.seg.seg-tabs > button:hover, .seg.seg-tabs > a:hover { background: var(--surface-hover); color: var(--ink); }
.seg.seg-tabs > button.active, .seg.seg-tabs > a.active { color: var(--navy); font-weight: 600;
  background: color-mix(in srgb, var(--navy) 12%, transparent); box-shadow: none; }
.tablecard { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); border: 1px solid var(--ring); overflow: hidden; }

/* Payment follow-up — a visible Sales→Finance relay, not another finance table. */
.pc-safe { display: flex; gap: 7px; align-items: baseline; margin: -8px 0 18px; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 34%, var(--line)); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warn) 8%, var(--surface)); color: var(--ink-2); font-size: 12.5px; }
.pc-safe strong { color: var(--ink); }
.pc-relay { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center; margin: 16px 0 20px; padding: 18px 20px; border-radius: var(--r-lg);
  background: linear-gradient(125deg, color-mix(in srgb, var(--navy) 11%, var(--surface)), var(--surface) 58%, color-mix(in srgb, var(--yellow) 12%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--navy) 16%, var(--line)); box-shadow: var(--shadow); }
.pc-relay-step { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pc-relay-step > span { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; box-shadow: 0 7px 18px -10px color-mix(in srgb, var(--navy) 80%, transparent); }
[data-theme="dark"] .pc-relay-step > span { color: #0b1220; }
.pc-relay-step strong { display: block; font-size: 13.5px; }
.pc-relay-step small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-relay-line { height: 2px; margin: 0 10px; border-radius: 99px; background: color-mix(in srgb, var(--navy) 33%, var(--line)); position: relative; }
.pc-relay-line::after { content: ''; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 2px solid var(--navy); border-right: 2px solid var(--navy); transform: rotate(45deg); }
.pc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.pc-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pc-filters { margin: 0 0 14px; }
.pc-filters button span { margin-left: 4px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pc-list { display: grid; gap: 10px; }
.pc-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, auto); gap: 20px; align-items: center;
  padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--line); border-left: 4px solid color-mix(in srgb, var(--navy) 48%, var(--line));
  background: var(--surface); box-shadow: var(--shadow-sm); }
.pc-case.is-hold { border-left-color: var(--bad); background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 5%, var(--surface)), var(--surface) 25%); }
.pc-case-main { min-width: 0; }
.pc-case-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pc-ref { font-size: 12px; font-weight: 650; color: var(--navy); }
.pc-case h3 { margin: 2px 0 0; font-size: 16px; line-height: 1.25; }
.pc-amount { font-size: 19px; font-weight: 750; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.pc-pills .pill.warn { color: color-mix(in srgb, var(--warn) 50%, var(--ink)); }
.pc-pills .pill.ok { color: color-mix(in srgb, var(--ok) 48%, var(--ink)); }
.pc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.pc-facts div { min-width: 0; }
.pc-facts dt { color: var(--ink-2); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.pc-facts dd { margin-top: 2px; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.pc-note, .pc-done { margin-top: 11px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; }
.pc-note strong { color: var(--ink); margin-right: 4px; }
.pc-done { background: color-mix(in srgb, var(--ok) 9%, var(--surface)); color: var(--ink); }
.pc-case-actions { display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 160px; }
.pc-case-actions .btn { white-space: nowrap; }

@media (max-width: 1180px) {
  .pc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-relay { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .pc-relay-line { display: none; }
  .pc-relay-step small { white-space: normal; }
}
@media (max-width: 760px) {
  .pc-safe { display: block; }
  .pc-relay { grid-template-columns: 1fr; gap: 0; padding: 14px 16px; }
  .pc-relay-line { display: block; }
  .pc-relay-step { padding: 5px 0; }
  .pc-relay-line { width: 2px; height: 18px; margin: 0 0 0 16px; }
  .pc-relay-line::after { right: -3px; top: auto; bottom: -1px; transform: rotate(135deg); }
  .pc-head { align-items: flex-start; flex-direction: column; }
  .pc-head-actions { justify-content: flex-start; width: 100%; }
  .pc-case { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .pc-case-actions { min-width: 0; flex-direction: row; flex-wrap: wrap; }
  .pc-case-actions .btn { flex: 1 1 145px; }
}
@media (max-width: 480px) {
  .pc-case-top { display: block; }
  .pc-amount { margin-top: 8px; }
  .pc-facts { grid-template-columns: 1fr; gap: 9px; }
}

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { text-align: left; font-size: 12px; letter-spacing: 0; color: var(--ink-2);
  font-weight: 600; padding: 11px 18px; border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
  background: var(--surface); }
tbody td { padding: 11px 18px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
tbody tr { transition: background 0.12s var(--ease); }
tbody tr:hover { background: color-mix(in srgb, var(--navy) 5%, transparent); }
/* hover feedback also layers on cells so it shows over inline status-tinted rows */
tbody tr.row-link { cursor: pointer; }
tbody tr.row-link:hover > td { background: color-mix(in srgb, var(--navy) 6%, transparent); }
tbody tr:last-child td { border-bottom: none; }
td .muted { color: var(--ink-3); }
/* numeric columns align on the decimal — opt-in via class="num" on th/td */
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* any right-aligned cell (money/totals) gets tabular figures so columns line up */
td[align="right"], td[style*="text-align:right"], td[style*="text-align: right"],
th[align="right"], th[style*="text-align:right"], th[style*="text-align: right"] { font-variant-numeric: tabular-nums; }
/* Active-filter chips — removable pills naming every non-default filter on a list */
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.fchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--navy) 26%, transparent); background: color-mix(in srgb, var(--navy) 9%, var(--surface));
  color: var(--ink-2); font-family: var(--font); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease); }
.fchip strong { color: var(--ink); font-weight: 600; }
.fchip .fchip-x { color: var(--ink-3); font-size: 13px; line-height: 1; }
.fchip:hover { background: color-mix(in srgb, var(--navy) 16%, var(--surface)); border-color: color-mix(in srgb, var(--navy) 40%, transparent); }
.fchip:hover .fchip-x { color: var(--ink); }
.fchip-clear { background: transparent; border-style: dashed; color: var(--ink-3); }

/* Row overflow menu (⋯) — one quiet action target per row instead of a button strip */
.rowmenu-btn { padding: 4px 8px; }
.rowmenu-pop { position: fixed; z-index: 90; min-width: 176px; padding: 5px; border-radius: 12px;
  background: var(--material); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-stroke); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24); display: flex; flex-direction: column; gap: 1px; }
.rowmenu-item { text-align: left; border: none; background: transparent; padding: 8px 11px; border-radius: 8px;
  font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; }
.rowmenu-item:hover, .rowmenu-item:focus-visible { background: rgba(120, 120, 128, 0.12); outline: none; }
.rowmenu-item.danger { color: var(--bad); }

/* Compact density — opt-in via the sidebar toggle; tightens list rows for long-list scanning */
[data-density="compact"] tbody td { padding: 6px 14px; }
[data-density="compact"] thead th { padding: 8px 14px; }
[data-density="compact"] .tbl td { padding: 5px 8px; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; letter-spacing: 0; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
/* Pill text mixes toward --ink for WCAG-passing contrast on the tinted track
   (pure system green/orange at 11.5px on a tint sits near 2.2:1). */
.pill.ok { color: color-mix(in srgb, var(--ok) 60%, var(--ink)); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.pill.warn { color: color-mix(in srgb, var(--warn) 65%, var(--ink)); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.pill.bad { color: color-mix(in srgb, var(--bad) 70%, var(--ink)); background: color-mix(in srgb, var(--bad) 13%, transparent); }
.pill.neutral { color: var(--ink-2); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.pill.accent { color: var(--navy); background: color-mix(in srgb, var(--navy) 12%, transparent); }
.pill-btn { border: none; cursor: pointer; font: inherit; }
.pill-btn:hover { filter: brightness(1.05); }
/* ---------- list name cell + initials avatar (design-system) ---------- */
.cellname { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; min-width: 0; }
.cellname > .av-sm { flex: none; }
.av-sm { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0; line-height: 1;
  color: var(--navy); background: var(--navy-50);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--navy) 18%, transparent); }
/* record/detail summary band — key facts at a glance above the editable form */
.recsummary { display: flex; flex-wrap: wrap; gap: 0; margin: 4px 0 18px; padding: 14px 4px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-stroke); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi); }
.recsummary .rs-item { flex: 1 1 auto; min-width: 96px; padding: 2px 16px; position: relative; }
.recsummary .rs-item + .rs-item::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--line); }
.recsummary .rs-l { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.recsummary .rs-v { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-top: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recsummary .rs-v.rs-due { color: var(--bad); }
.recsummary .rs-v.rs-ok { color: var(--ok); }
/* record/detail header: large avatar inline with the name */
h2.rec-h2 { display: flex; align-items: center; gap: 13px; }
.av-lg { width: 46px; height: 46px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1; color: var(--navy);
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 12%, var(--surface)), var(--navy-50));
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--navy) 22%, transparent), 0 1px 2px rgba(0, 0, 0, 0.06); }
/* same circles, filled with the student's photo instead of their initials */
.av-sm.av-img, .av-lg.av-img { object-fit: cover; background: var(--navy-50); }
.empty { padding: 46px 24px; text-align: center; color: var(--ink-2); font-size: 14px; display: grid; place-items: center; gap: 13px; }
.empty::before { content: ""; width: 42px; height: 42px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line);
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238a8a8e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/22px no-repeat; }
/* Contextual empty state: a matching I{} glyph replaces the generic tray. */
.empty.has-ic::before { display: none; }
.empty .empty-ic { width: 42px; height: 42px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line);
  background: var(--surface-2); display: grid; place-items: center; color: var(--ink-3); }
.empty .empty-ic svg { width: 22px; height: 22px; }
.count { color: var(--ink-2); font-size: 13px; font-weight: 600; margin-left: auto; }

/* mini stat strip */
.mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.mini .card { padding: 16px 18px; }
.mini .label { font-size: 11px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.mini .value { font-size: 25px; font-weight: 700; letter-spacing: -0.022em; margin-top: 8px; line-height: 1; font-variant-numeric: tabular-nums; }
.mini .value.accent { color: var(--navy); }
.mini .value.good { color: var(--ok); }
.mini .value.alert { color: var(--bad); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
/* Filter/category chips (staff groups, document shelves, accreditation) — smooth, tactile switching. */
.st-grp, .st-dcat, .accr-cat, .st-arch { transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .12s var(--ease); }
.st-grp:not(.btn-primary):hover, .st-dcat:not(.btn-primary):hover, .accr-cat:not(.btn-primary):hover, .st-arch:not(.btn-primary):hover { background: color-mix(in srgb, var(--navy) 8%, var(--surface)); color: var(--ink); }
.st-grp:active, .st-dcat:active, .accr-cat:active, .st-arch:active { transform: scale(0.97); }
.st-grp.btn-primary, .st-dcat.btn-primary, .accr-cat.btn-primary { transition: background .28s var(--spring), color .28s var(--spring), box-shadow .28s var(--spring); }

/* ── Staff record drawer: clear card-style sections, subtle colour, tamed lists ── */
.rec-drawer .rec-head { margin: 2px 0 4px; }
.rec-drawer .rec-head h2 { margin: 0 0 2px; }
.rec-drawer .rec-stats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.rec-drawer .rec-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.rec-drawer .rec-stat .muted { font-size: 12px; }
.rec-drawer .rec-stat-pay { background: color-mix(in srgb, var(--yellow) 13%, var(--surface)); border-color: color-mix(in srgb, var(--yellow) 34%, var(--line)); }
.rec-drawer .rec-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.rec-drawer .rec-dot-ok { background: var(--ok); }
.rec-drawer .rec-dot-off { background: var(--warn); }
/* section header — a subtly navy-tinted band that clearly separates each area */
.rec-drawer .rec-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: .005em; margin: 20px 0 10px; padding: 9px 13px; border-radius: 11px; background: color-mix(in srgb, var(--navy) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--navy) 11%, var(--line)); }
.rec-drawer .rec-h-ic { font-size: 15px; line-height: 1; }
.rec-drawer .rec-h .pill { margin-left: 2px; }
/* collapsed admin sections (e.g. Identity) — the header band itself is the toggle */
.rec-drawer summary.rec-h { list-style: none; }
.rec-drawer summary.rec-h::-webkit-details-marker { display: none; }
.rec-drawer details[open] > summary.rec-h .rec-h-expand { display: none; }
/* tame long document / log lists — a comfortable scroll instead of an endless page */
.rec-drawer #st_docs .card, .rec-drawer #st_hrdocs .card { max-height: 360px; overflow-y: auto; }
.rec-drawer #st_logs { max-height: 320px; overflow-y: auto; }
.btn-ghost { background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { color: var(--ink); background: var(--surface-hover); }
.row-link { cursor: pointer; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--navy); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.linkbtn:hover { text-decoration: underline; }
.fu-over { color: var(--bad); font-weight: 700; }
th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sort:hover { color: var(--ink); }
th.th-sort-active { color: var(--ink); }
.sort-idle { opacity: 0.25; font-weight: 400; }

/* ---------------- form builder editor ---------------- */
.ftabs { display: flex; gap: 4px; margin: 18px 0 16px; border-bottom: 1px solid var(--line);
  max-width: 100%; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; overscroll-behavior-x: contain; }
.ftabs::-webkit-scrollbar { display: none; }
.ftabs .tab { appearance: none; background: none; border: none; cursor: pointer; font-family: var(--font);
  font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 9px 14px; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: 0 0 auto; }
.ftabs .tab:hover { color: var(--ink-2); }
.ftabs .tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.fgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .fgrid { grid-template-columns: 1fr; } }
#f_editor .card { margin-bottom: 14px; }
#fb_preview { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow);
  border: 1px solid var(--line); min-height: 200px; position: sticky; top: 12px; max-height: calc(100vh - 110px); overflow: auto; }
.prevbar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; font-size: 13px; font-weight: 600;
  color: var(--navy); border-bottom: 1px solid var(--line); background: var(--navy-50); border-radius: var(--r-md) var(--r-md) 0 0; }
.prevbar .hint { margin: 0; font-weight: 400; font-size: 12px; }
.prevbar select { margin-left: auto; padding: 4px 8px; font-size: 12px; }
#f_prevbody { padding: 16px; }
.prevstep { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.prevstep:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.prevstep h4 { font-size: 14px; color: var(--navy); margin: 0 0 12px; border-left: 3px solid var(--yellow); padding-left: 8px; }
.prevfield { margin-bottom: 12px; }
.prevfield label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 5px; }
.prevfield input, .prevfield select, .prevfield textarea { width: 100%; opacity: 0.65; cursor: not-allowed; background: var(--navy-50); }
.prevfield textarea { min-height: 60px; resize: none; }
.prevradio { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-2); margin-right: 12px; }
.prevradio input { width: auto; cursor: not-allowed; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-h strong { font-size: 14px; letter-spacing: -0.01em; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl td { padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.tbl code { font-size: 12px; background: var(--navy-50); color: var(--navy); padding: 2px 6px; border-radius: 5px; }
.btn.xs { padding: 4px 9px; font-size: 12px; box-shadow: var(--shadow-sm); background: var(--surface); color: var(--ink-2); }
.btn.xs:hover { color: var(--ink); }
.btn.xs.danger { color: var(--bad); }
.btn-primary.danger { background: var(--bad); border-color: var(--bad); }
.btn-primary.danger:hover { background: color-mix(in srgb, var(--bad) 88%, black); }
.fu-soon { color: var(--warn); font-weight: 600; }

/* modal + drawer */
.scrim { position: fixed; inset: 0; background: rgba(20, 28, 48, 0.34); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); z-index: 80;
  opacity: 0; transition: opacity 0.3s var(--ease); display: flex; }
.scrim.in { opacity: 1; }
.modal { margin: auto; width: 100%; max-width: 460px; background: var(--surface); border-radius: var(--r-lg);
  border: 1px solid var(--glass-stroke); box-shadow: var(--shadow-pop), inset 0 1px 0 var(--glass-hi); padding: 26px 28px; transform: translateY(16px) scale(0.97);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease); opacity: 0; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; }
.scrim.in .modal { transform: none; opacity: 1; transition: transform 0.45s var(--spring), opacity 0.3s var(--ease); }
.modal .x, .sheet .x { position: sticky; top: -6px; z-index: 2; }
.modal.wide { max-width: 720px; }
.modal.wwp-wide { max-width: 1120px; }
/* CV reader: the document IS the screen — near-fullscreen, tight chrome (wwp-wide precedent). */
.modal.cv-full { max-width: 97vw; width: 97vw; max-height: 97vh; padding: 16px 20px 20px; }
.wwp-daygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wwp-metagrid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-top: 10px; }
/* level-change log modal: optional student picker (authoritative Person link) */
.lc-picker-results { border: 1px solid var(--line); background: var(--surface); max-height: 200px; overflow-y: auto; }
.lc-picker-results button { display: block; width: 100%; text-align: left; padding: 6px 8px; background: none; border: 0; color: var(--ink); cursor: pointer; }
.lc-picker-results button:hover { background: var(--surface-2); }
.lc-picker-chosen { padding: 6px 8px; color: var(--ink); }
.wwp-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.wwp-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.wwp-filters select, .wwp-filters input { min-width: 150px; }
@media (max-width: 820px) {
  .wwp-daygrid, .wwp-metagrid { grid-template-columns: 1fr; }
  .wwp-dstate { margin-left: 0; width: 100%; white-space: normal; }
  .wwp-hdet .formgrid { grid-template-columns: 1fr 1fr !important; }
}

/* Weekly Work Plans — "This week" strip */
.wwp-thisweek { padding: 14px 16px; margin-bottom: 12px; }
.wwp-tw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wwp-tw-prog { display: inline-flex; align-items: center; gap: 10px; }
.wwp-progbar { width: 130px; height: 6px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; display: inline-block; }
.wwp-progbar i { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: width 0.3s var(--ease); }
/* One card per class this week: colour-edged by state, plain status words, one button. */
.wwp-cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 10px; }

/* WWP calm board (2026-07-17): one line per class, grouped by status; history collapsed. */
.wwp-bucket { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); margin-bottom: 8px; overflow: hidden; }
.wwp-bucket > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.wwp-bucket > summary::-webkit-details-marker { display: none; }
.wwp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.wwp-dot.bad { background: var(--bad); }
.wwp-dot.warn { background: var(--warn); }
.wwp-dot.ok { background: var(--ok); }
.wwp-board-rows { border-top: 1px solid var(--line); }
.wwp-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.wwp-row:last-child { border-bottom: none; }
.wwp-row:hover { background: var(--surface-2, rgba(127, 127, 127, 0.06)); }
.wwp-row-click { cursor: pointer; }
.wwp-row-name { min-width: 170px; }
.wwp-row-teacher { flex: 1; min-width: 130px; }
.wwp-row-m { display: inline-flex; gap: 5px; align-items: center; }
.wwp-row-act { margin-left: auto; flex: none; }
.wwp-history { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-top: 14px; overflow: hidden; }
.wwp-history > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wwp-history > summary::-webkit-details-marker { display: none; }
.wwp-history > summary:hover { background: var(--surface-2, rgba(127, 127, 127, 0.06)); }
.wwp-history-body { padding: 12px 16px 14px; border-top: 1px solid var(--line); }

/* Content search inside plans */
.wwp-csearch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wwp-csearch input { flex: 1; min-width: 240px; }
#wwp_csearch_out mark { background: var(--accent-soft, rgba(245,181,23,.35)); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Completion grid (matrix) — classes down, weeks across */
.wwp-mx-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.wwp-mx-key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.wwp-mx-key.ok { background: var(--ok); }
.wwp-mx-key.warn { background: var(--warn); }
.wwp-mx-key.draft { background: var(--line); border: 1px solid var(--warn); }
.wwp-mx-key.none { background: transparent; border: 1px dashed var(--line); }
.wwp-mx-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
/* width:auto so the table sits compact-left (no dead gap between the class column and the
   weeks); the scroll container handles overflow when there are many week columns. */
table.wwp-matrix { border-collapse: separate; border-spacing: 0; width: auto; font-size: 12px; }
table.wwp-matrix th, table.wwp-matrix td { border-bottom: 1px solid var(--line); }
.wwp-mx-col { width: 40px; padding: 8px 4px; text-align: center; white-space: nowrap; color: var(--ink-2); font-weight: 600; font-size: 11px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.wwp-mx-cnr { position: sticky; left: 0; top: 0; z-index: 3; background: var(--surface); text-align: left; padding: 8px 12px; width: 244px; }
.wwp-mx-sum { text-align: center; padding: 4px 10px; white-space: nowrap; }
.wwp-mx-row { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; padding: 7px 12px; width: 244px; box-sizing: border-box; display: flex; align-items: center; gap: 7px; }
.wwp-mx-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.wwp-mx-teacher { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; }
.wwp-mx-cell { width: 40px; height: 30px; text-align: center; vertical-align: middle; }
.wwp-mx-cell.ok { background: color-mix(in srgb, var(--ok) 26%, transparent); }
.wwp-mx-cell.warn { background: color-mix(in srgb, var(--warn) 30%, transparent); }
.wwp-mx-cell.draft { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.wwp-mx-cell.none { color: var(--line); }
.wwp-mx-cell[data-prev] { cursor: pointer; }
.wwp-mx-cell[data-prev]:hover { outline: 2px solid var(--accent, var(--warn)); outline-offset: -2px; }
tbody tr:hover .wwp-mx-row { background: var(--surface-2, rgba(127,127,127,.05)); }
.wwp-cc { border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; background: var(--surface); }
.wwp-cc.bad { border-left-color: var(--bad); }
.wwp-cc.warn { border-left-color: var(--warn); }
.wwp-cc.ok { border-left-color: var(--ok); }
.wwp-cc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wwp-cc-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.wwp-cc-meters { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.wwp-cc-foot { margin-top: auto; padding-top: 7px; }
/* Five little squares, one per teaching day — filled = done. */
.wwp-meter { display: inline-flex; gap: 2px; }
.wwp-meter i { width: 9px; height: 9px; border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.wwp-meter.plan i.on { background: var(--navy); box-shadow: none; }
.wwp-meter.rec i.on { background: var(--ok); box-shadow: none; }
/* Plain-words primer under the This-week card. */
.wwp-help { margin: 0 0 16px; }
.wwp-help summary { cursor: pointer; color: var(--ink-2); font-size: 12.5px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; list-style: none; }
.wwp-help summary::-webkit-details-marker { display: none; }
.wwp-help ol { margin: 8px 0 2px; padding-left: 20px; color: var(--ink-2); max-width: 68ch; line-height: 1.55; }
.wwp-help li { margin: 3px 0; }

/* Weekly Work Plans — grouped-by-class list */
.wwp-sec-h { text-transform: uppercase; letter-spacing: 0.12em; margin: 4px 0 10px; }
.wwp-group { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--surface); overflow: hidden; }
.wwp-group > summary { list-style: none; }
.wwp-group > summary::-webkit-details-marker { display: none; }
.wwp-group-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; }
.wwp-group-h:hover { background: var(--surface-hover); }
.wwp-group-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wwp-group-s { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wwp-caret { display: inline-block; color: var(--ink-3); font-size: 11px; transition: transform 0.15s ease; }
.wwp-group[open] .wwp-caret { transform: rotate(90deg); }
.wwp-group-body { padding: 2px 14px 10px; }
.wwp-week { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 12px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--line); }
.wwp-week-m { color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ── WWP editor (teacher-first, 2026-07-16): day jump strip, dated day headers,
      collapsed class-details section ── */
.wwp-daynav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 12px; }
.wwp-daybtn { font: inherit; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.wwp-daybtn:hover { background: var(--surface-hover); border-color: var(--ink-3); }
.wwp-daybtn.today { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.wwp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.wwp-dot.plan.on { background: var(--navy); box-shadow: none; }
.wwp-dot.rec.on { background: var(--ok); box-shadow: none; }
.wwp-daynav-leg { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
.wwp-dhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wwp-dstate { margin-left: auto; white-space: nowrap; }
.wwp-hdet { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); margin-top: 14px; }
.wwp-hdet > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; }
.wwp-hdet > summary::-webkit-details-marker { display: none; }
.wwp-hdet > summary:hover { background: var(--surface-hover); border-radius: var(--r-sm); }
.wwp-hdet-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.wwp-hdet .wwp-caret { margin-left: auto; }
.wwp-hdet[open] .wwp-caret { transform: rotate(90deg); }
@media (max-width: 680px) {
  .wwp-week { grid-template-columns: 1fr auto; row-gap: 6px; }
  .wwp-week-when { grid-column: 1 / -1; }
}
.impbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; justify-content: center;
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 16px; letter-spacing: -0.01em; }
.impbar button { background: rgba(255,255,255,0.18); color: #fff; border: none; border-radius: 8px; padding: 4px 12px; cursor: pointer; font: inherit; }
.permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; }
.permgrid label { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.searchtrigger { display: flex; align-items: center; gap: 8px; width: 100%; margin: 6px 0 14px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-3); cursor: pointer; font-family: var(--font); font-size: 13px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease); }
.searchtrigger:hover { background: var(--surface-hover); }
.searchtrigger:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand) 18%, transparent); }
.searchtrigger svg { width: 15px; height: 15px; } .searchtrigger span { flex: 1; text-align: left; }
.searchtrigger kbd { font-size: 10px; border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--ink-3); }
.searchres:hover { border-color: var(--brand) !important; }
.actiongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.actioncard { display: block; padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--glass-stroke); text-decoration: none;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
  transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease); border-left-width: 3px; }
.actioncard:hover { background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); transform: translateY(-1px); }
.actioncard .an { font-size: 23px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.actioncard .al { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.actioncard .as { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.actioncard.bad { border-left-color: var(--bad); } .actioncard.bad .an { color: var(--bad); }
.actioncard.warn { border-left-color: var(--yellow); }
.actioncard.ok { border-left-color: var(--ok); }
.actioncard.muted { border-left-color: var(--line); opacity: 0.66; }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
.formgrid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.formgrid input, .formgrid select, .formgrid textarea { font-family: var(--font); font-size: 14px; color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 11px; outline: none; background-color: var(--surface-2);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.formgrid textarea { resize: vertical; min-height: 42px; }
.formgrid input:focus, .formgrid select:focus, .formgrid textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand) 18%, transparent); }
.formgrid select { padding-right: 32px; }
@media (max-width: 680px) { .formgrid { grid-template-columns: 1fr; } .modal.wide, .modal.wwp-wide { max-width: 100%; } }
.drawer { margin-left: auto; width: 100%; max-width: 480px; height: 100%; background: var(--surface);
  border-left: 1px solid var(--glass-stroke); box-shadow: var(--shadow-pop), inset 1px 0 0 var(--glass-hi); padding: 28px 30px; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.42s var(--ease); }
.scrim.in .drawer { transform: none; }
/* full-screen detail panel — replaces the narrow side drawer for record/detail views.
   Centred, near-full viewport, its own scroll, so heavy-interaction views have room. */
.sheet { margin: auto; width: 94vw; max-width: 1100px; max-height: 94vh; background: var(--surface);
  border: 1px solid var(--glass-stroke); border-radius: var(--r-lg); box-shadow: var(--shadow-pop), inset 0 1px 0 var(--glass-hi); padding: 28px 34px;
  overflow-y: auto; overscroll-behavior: contain; transform: translateY(16px) scale(0.985); opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease); }
.scrim.in .sheet { transform: none; opacity: 1; transition: transform 0.45s var(--spring), opacity 0.3s var(--ease); }
.modal h2, .drawer h2, .sheet h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.024em; }
/* System circular close button — the native sheet affordance, not a bare glyph. */
.modal .x, .drawer .x, .sheet .x { float: right; cursor: pointer; color: var(--ink-2); font-size: 17px; line-height: 1;
  border: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 8%, transparent); transition: background 0.16s var(--ease), color 0.16s var(--ease); }
.modal .x:hover, .drawer .x:hover, .sheet .x:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv .k { color: var(--ink-3); font-weight: 600; }
.kv .v { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* Pack label/value pairs into responsive columns so wide detail panels (.sheet)
   don't render a sparse single column with a huge horizontal gulf between key
   and value. Each .kv stays a row inside its own cell. */
.kvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 32px; }
.drawer .section, .sheet .section { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin: 32px 0 8px; }
/* First section sits right under the header eyebrow — no extra gap needed there. */
.drawer .section:first-of-type, .sheet .section:first-of-type { margin-top: 18px; }
textarea { width: 100%; font-family: var(--font); font-size: 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 13px; resize: vertical; min-height: 70px; outline: none; }
textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 4px var(--focus-ring); }
.actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.toasthost { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; pointer-events: none; }
.toast { transform: translateY(20px);
  background: rgba(38, 38, 42, 0.82); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 600; opacity: 0; pointer-events: auto;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.toast.in { opacity: 1; transform: none; }
/* Errors must not look like success: red-tinted pill + system-red edge, longer dwell,
   click-to-dismiss (JS). Warn = amber variant. */
.toast-err { background: rgba(84, 26, 24, 0.92); cursor: pointer; box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 69, 58, 0.55); }
.toast-err::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); margin-right: 9px; vertical-align: baseline; }
.toast-warn { background: rgba(146, 100, 8, 0.92); box-shadow: 0 12px 34px -10px rgba(146, 100, 8, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.toast-warn::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-right: 9px; vertical-align: baseline; }
/* Success toasts lead with a checkmark that draws itself on. */
.toast .toast-ic { width: 14px; height: 14px; margin-right: 9px; vertical-align: -2px; color: var(--ok); }
.toast .toast-ic path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: toast-draw 0.45s var(--ease) 0.12s forwards; }
@keyframes toast-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .toast .toast-ic path { stroke-dashoffset: 0; animation: none; } }
/* Optional inline action (Undo) — destructive flows become reversible instead of scary. */
.toast .toast-act { margin-left: 12px; background: rgba(255, 255, 255, 0.14); border: 0; border-radius: 999px; color: #fff;
  font-family: var(--font); font-weight: 700; font-size: 12.5px; padding: 4px 12px; cursor: pointer; transition: background 0.2s var(--ease); }
.toast .toast-act:hover { background: rgba(255, 255, 255, 0.24); }
.error-state { display: flex; flex-direction: column; gap: 10px; align-items: center; }
/* Page behind an open sheet/modal must not scroll. */
body.has-overlay { overflow: hidden; }

/* ---------------- notification bell + badge (Task 11) ---------------- */
.notifbell { position: fixed; top: 20px; right: 30px; z-index: 60; width: 40px; height: 40px;
  display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px;
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi); }
.notifbell:hover { color: var(--navy, #314B76); border-color: var(--navy, #314B76); }
.notifbell svg { width: 20px; height: 20px; }
.notifbadge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--yellow, #F5B517); color: #1b1b1b; font-size: 11px; font-weight: 800; line-height: 18px;
  text-align: center; border-radius: 10px; }
.notifbadge.crit { background: #e5484d; color: #fff; }

/* ---------------- notification slide-over panel (Task 12) ---------------- */
.scrim > .drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: 360px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow-pop), inset 1px 0 0 var(--glass-hi); transform: translateX(100%);
  transition: transform .42s var(--ease); display: flex; flex-direction: column; }
.scrim.in > .drawer { transform: translateX(0); }
.nf-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.nf-actions { display: flex; gap: 10px; align-items: center; }
.nf-readall { font-size: 12px; color: var(--navy,#314B76); background: none; border: none; cursor: pointer; }
.nf-tabs { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.nf-tab { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.nf-tab.on { background: var(--navy,#314B76); color: #fff; border-color: var(--navy,#314B76); }
.nf-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.nf-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.nf-item.unread { background: color-mix(in srgb, var(--yellow) 9%, transparent); }
.nf-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; }
.nf-body { flex: 1; min-width: 0; }
.nf-title { font-weight: 700; font-size: 13.5px; }
.nf-text { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.nf-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
.nf-x { display: flex; flex-direction: column; gap: 4px; }
.nf-x button { width: 22px; height: 22px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; cursor: pointer; line-height: 1; }

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .formgrid input,
[data-theme="dark"] .formgrid select,
[data-theme="dark"] .ld-prop .v input:not([type=checkbox]):not([type=range]),
[data-theme="dark"] .ld-prop .v select,
[data-theme="dark"] .ld-prop .v textarea {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--ink-3); }
[data-theme="dark"] thead th,
[data-theme="dark"] .lists-table thead th { background: var(--surface-3); }
[data-theme="dark"] tbody tr:hover,
[data-theme="dark"] .lists-table tbody tr:hover,
[data-theme="dark"] .lists-pick:hover,
[data-theme="dark"] .ld-statusmenu button:hover { background: var(--surface-hover); }
[data-theme="dark"] .seg,
[data-theme="dark"] .lists-seg,
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .btn.xs,
[data-theme="dark"] .notifbell,
[data-theme="dark"] .nf-tab,
[data-theme="dark"] .nf-x button,
[data-theme="dark"] .ld-x,
[data-theme="dark"] .ld-statusmenu,
[data-theme="dark"] .ld-att,
[data-theme="dark"] .lists-search,
[data-theme="dark"] .lists-kcard {
  background: var(--surface);
  color: var(--ink-2);
  border-color: var(--line);
}
[data-theme="dark"] .tablecard,
[data-theme="dark"] .lists-tablewrap,
[data-theme="dark"] .lists-group-hd,
[data-theme="dark"] .lists-drawer,
[data-theme="dark"] .scrim > .drawer,
[data-theme="dark"] .modal,
[data-theme="dark"] .drawer,
[data-theme="dark"] .sheet,
[data-theme="dark"] .ld-att,
[data-theme="dark"] .nf-x button { background: var(--surface); }
[data-theme="dark"] .lists-seg { background: rgba(120, 120, 128, 0.24); }
[data-theme="dark"] .ld-field input,
[data-theme="dark"] .ld input { background: var(--surface-2); }
[data-theme="dark"] tbody tr:nth-child(even),
[data-theme="dark"] .lists-table tbody tr:nth-child(even),
[data-theme="dark"] .ab-node.ghost,
[data-theme="dark"] .ab-mod { background: var(--surface-2); }
[data-theme="dark"] .lists-kcol { background: #0f1727; }
[data-theme="dark"] .nf-item.unread { background: rgba(247, 200, 75, 0.08); }
[data-theme="dark"] .pill.neutral,
[data-theme="dark"] .lists-statuspill.bare,
[data-theme="dark"] .lists-tag { background: rgba(214, 226, 246, 0.1); }
[data-theme="dark"] .hero,
[data-theme="dark"] .ab-hero { box-shadow: 0 20px 54px -28px rgba(0, 0, 0, 0.9); }
[data-theme="dark"] .scrim { background: rgba(3, 6, 14, 0.7); }

/* ---- Mobile shell (≤980px): off-canvas sidebar + fixed glass top bar ----
   The sidebar keeps its desktop markup and styling; it parks off-screen and slides
   in over a scrim while body.nav-open is set. Above the breakpoint .mtop/.navscrim
   are display:none and the desktop grid shell is untouched. */
.mtop { display: none; }
.navscrim { display: none; }
@media (max-width: 980px) {
  .mini { grid-template-columns: repeat(2, 1fr); }
  .shell { display: block; }
  .mtop { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top));
    background: var(--material); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
    border-bottom: 1px solid var(--line); }
  .mtop-btn { display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: 10px;
    background: transparent; color: var(--ink); cursor: pointer; transition: background 0.18s var(--ease); }
  .mtop-btn:hover { background: rgba(120, 120, 128, 0.12); }
  .mtop-btn:active { transform: scale(0.94); }
  .mtop-btn svg { width: 21px; height: 21px; stroke-width: 1.8; }
  .mtop-title { flex: 1; text-align: center; font-weight: 800; font-size: 18px; letter-spacing: -0.03em; color: #000;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(310px, 86vw); height: 100dvh; z-index: 60;
    transform: translateX(-103%); transition: transform 0.28s var(--ease); }
  body.nav-open .sidebar { transform: none; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); }
  .navscrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15, 23, 42, 0.42);
    opacity: 0; pointer-events: none; transition: opacity 0.28s var(--ease); }
  body.nav-open .navscrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .main { padding: calc(66px + env(safe-area-inset-top)) 16px 50px; }
  .searchtrigger kbd { display: none; } /* keyboard hint is noise on touch screens */
}

/* Form editor — embed + translations */
.code {
  width: 100%;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--navy-50);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  resize: vertical;
}
.i18nwrap { overflow: auto; max-height: 60vh; border: 1px solid var(--line); border-radius: var(--r-sm); }
.tbl.i18n input {
  width: 140px;
  font-size: 12px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}
.tbl.i18n input.miss { background: color-mix(in srgb, var(--bad) 12%, transparent); }

/* Student views — visa expiry + feedback follow-up row highlights */
tr.row-danger > td { background: rgba(210, 72, 63, 0.08); }
tr.row-warn > td { background: rgba(201, 138, 18, 0.09); }
tr.row-unconfirmed > td { background: color-mix(in srgb, var(--navy) 8%, transparent); }
.stcell { cursor: pointer; }

/* ============================================================
   Lists module (ClickUp-style workspaces) — redesigned UI
   ============================================================ */
.lists-shell { display: flex; gap: 22px; align-items: flex-start; }

/* ---- Left rail ---- */
.lists-rail { flex: 0 0 232px; min-width: 210px; display: flex; flex-direction: column; gap: 6px; }
.lists-rail-new { width: 100%; margin-bottom: 6px; }
.lists-grp { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); font-weight: 700; padding: 16px 10px 4px; }
.lists-grp:first-of-type { padding-top: 4px; }
.lists-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--r-sm); border: none; background: none; cursor: pointer;
  font-family: var(--font); font-weight: 600; font-size: 13.5px; color: var(--ink-2);
  transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}
.lists-pick:hover { background: var(--surface-hover); color: var(--ink); }
.lists-pick.active { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
.lists-pick .ic { font-size: 15px; line-height: 1; flex: none; width: 18px; text-align: center; }
.lists-pick .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lists-pick-my { margin-bottom: 6px; }
.lists-pick:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---- Pane ---- */
.lists-pane { flex: 1; min-width: 0; }
.lists-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.lists-title { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
.lists-title .ic { font-size: 22px; line-height: 1; }
.lists-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lists-search {
  display: flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; box-shadow: var(--shadow-sm); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.lists-search:focus-within { border-color: var(--navy); box-shadow: 0 0 0 4px var(--focus-ring); }
.lists-search svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.lists-search input { border: none; background: none; padding: 0; min-width: 150px; width: 160px; font-size: 13px; box-shadow: none; }
.lists-search input:focus { box-shadow: none; }

/* segmented Table/Kanban toggle */
.lists-seg { display: inline-flex; background: rgba(120, 120, 128, 0.12); border-radius: 10px; padding: 2px; gap: 2px; }
.lists-seg button { border: none; background: none; font-family: var(--font); font-weight: 500; font-size: 13px; color: var(--ink);
  padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.lists-seg button.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.14); }
.lists-seg button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---- Table ---- */
.lists-tablewrap { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow); border: 1px solid var(--ring); overflow-x: auto; margin-bottom: 16px; }
.lists-table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
.lists-table thead th { text-align: left; font-size: 12px; letter-spacing: 0; color: var(--ink-2); font-weight: 600; padding: 11px 16px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lists-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
/* Clamp long text in table cells so a paragraph never becomes a tall tower — full text lives in the item drawer. */
.lists-clip { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.lists-table tbody td:first-child .lists-clip { -webkit-line-clamp: 2; font-weight: 600; color: var(--ink); }
.lists-table tbody tr { cursor: pointer; transition: background 0.14s var(--ease); }
.lists-table tbody tr:nth-child(even) { background: #fcfcfe; }
.lists-table tbody tr:hover { background: var(--navy-50); }
.lists-table tbody tr:last-child td { border-bottom: none; }
.lists-table .num { font-variant-numeric: tabular-nums; }
.lists-table tr:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }

/* status-grouped section headers */
.lists-group { margin-bottom: 14px; }
.lists-group-hd { display: flex; align-items: center; gap: 9px; padding: 10px 14px; cursor: pointer; user-select: none;
  background: var(--surface); border: 1px solid var(--ring); border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: var(--shadow-sm); }
.lists-group-hd .caret { font-size: 10px; width: 12px; color: var(--ink-3); transition: transform 0.18s var(--ease); }
.lists-group-hd.collapsed .caret { transform: rotate(-90deg); }
.lists-group-hd .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ink-3); }
.lists-group-hd strong { font-size: 14px; letter-spacing: -0.01em; }
.lists-group-hd .ct { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.lists-group .lists-tablewrap { border-radius: 0 0 var(--r-md) var(--r-md); margin-bottom: 0; border-top: none; }

/* cell chips */
.lists-statuspill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 11px;
  border-radius: 999px; color: #fff; letter-spacing: 0.01em; white-space: nowrap; }
.lists-statuspill.bare { background: rgba(20, 30, 60, 0.06); color: var(--ink-2); }
.lists-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: rgba(20, 30, 60, 0.06); color: var(--ink-2); margin: 1px 3px 1px 0; }
.lists-prog { display: flex; align-items: center; gap: 7px; min-width: 90px; }
.lists-prog .track { flex: 1; height: 7px; border-radius: 999px; background: var(--navy-50); overflow: hidden; min-width: 50px; }
.lists-prog .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy), #5e7cae); transition: width 0.6s var(--ease); }
.lists-prog .pct { font-size: 11.5px; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.lists-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 700; flex: none; }
.lists-assignee { display: inline-flex; align-items: center; gap: 7px; }
.lists-assignee .nm { font-size: 12.5px; color: var(--ink-2); }
.lists-due { font-variant-numeric: tabular-nums; }
.lists-due.overdue { color: var(--bad); font-weight: 700; }
.lists-due.soon { color: var(--warn); font-weight: 600; }
.lists-recur { font-size: 12px; }
.lists-cellmeta { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 11px; color: var(--ink-3); flex-wrap: wrap; }

/* ---- Kanban ---- */
.lists-kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.lists-kcol { flex: 0 0 270px; width: 270px; background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: var(--r-md); padding: 6px 8px 10px;
  display: flex; flex-direction: column; border-top: 3px solid var(--ink-3); }
.lists-kcol.drop-on { outline: 2px dashed var(--navy); outline-offset: -2px; background: var(--navy-50); }
.lists-khd { display: flex; align-items: center; gap: 8px; padding: 8px 6px 10px; }
.lists-khd .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink-3); }
.lists-khd strong { font-size: 13px; letter-spacing: -0.01em; }
.lists-khd .ct { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-left: auto; }
.lists-kdrop { flex: 1; min-height: 44px; display: flex; flex-direction: column; gap: 8px; }
.lists-kcard { background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-stroke); border-radius: var(--r-sm); padding: 11px 12px; cursor: grab;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi); transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease); }
.lists-kcard:hover { transform: translateY(-1px); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); }
.lists-kcard:active { cursor: grabbing; }
.lists-kcard:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.lists-kcard .ttl { font-size: 13px; font-weight: 600; color: var(--ink); word-break: break-word; line-height: 1.35; }
.lists-kcard .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 9px; }
.lists-kempty { color: var(--ink-3); font-size: 12px; padding: 8px 6px; }

/* ---- My items ---- */
.lists-mi-row { cursor: pointer; }

/* ============================================================
   Slide-over item detail drawer
   ============================================================ */
.lists-drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: 640px; max-width: 94vw;
  background: var(--surface); box-shadow: -30px 0 80px -30px rgba(20, 30, 60, 0.45);
  transform: translateX(100%); transition: transform 0.4s var(--ease);
  display: flex; flex-direction: column; margin: 0;
}
.scrim.in .lists-drawer { transform: none; }
.ld-head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 26px 16px; border-bottom: 1px solid var(--line); }
.ld-head-main { flex: 1; min-width: 0; }
.ld-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); font-weight: 700; margin-bottom: 6px; }
.ld-title {
  font-size: 21px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; color: var(--ink);
  border: 1px solid transparent; border-radius: var(--r-sm); padding: 3px 6px; margin: -3px -6px; cursor: text;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease); word-break: break-word;
}
.ld-title:hover { background: var(--surface-hover); }
.ld-title-edit { width: 100%; font-family: var(--font); font-size: 21px; font-weight: 700; letter-spacing: -0.03em;
  border: 1px solid var(--navy); border-radius: var(--r-sm); padding: 3px 6px; margin: -3px -6px; resize: vertical; min-height: 40px; line-height: 1.25; }
.ld-statusrow { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ld-statusbtn { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; padding: 6px 13px;
  border-radius: 999px; color: #fff; border: none; cursor: pointer; letter-spacing: 0.01em; transition: filter 0.18s var(--ease); }
.ld-statusbtn:hover { filter: brightness(0.94); }
.ld-statusbtn.bare { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.ld-statusbtn .car { font-size: 9px; opacity: 0.8; }
.ld-recur { font-size: 13px; color: var(--ink-3); }
.ld-headbtns { display: flex; align-items: center; gap: 6px; flex: none; }
.ld-x { width: 30px; height: 30px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2);
  font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background 0.16s var(--ease), color 0.16s var(--ease); }
.ld-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 14%, transparent); }

/* status menu popover */
.ld-statusmenu { position: fixed; z-index: 95; background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-stroke); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop), inset 0 1px 0 var(--glass-hi); padding: 6px; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.ld-statusmenu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none;
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ld-statusmenu button:hover { background: var(--navy-50); }
.ld-statusmenu .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.ld-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 26px 26px; }
.ld-section { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin: 22px 0 10px; }
.ld-section:first-child { margin-top: 4px; }

/* property rows */
.ld-props { display: flex; flex-direction: column; }
.ld-prop { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ld-prop > .k { font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding-top: 8px; }
.ld-prop.full { grid-template-columns: 1fr; gap: 6px; }
.ld-prop.full > .k { padding-top: 0; }
.ld-prop .v { min-width: 0; }
.ld-prop .v input:not([type=checkbox]):not([type=range]), .ld-prop .v select, .ld-prop .v textarea {
  width: 100%; font-family: var(--font); font-size: 13.5px; color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 11px; outline: none; background-color: var(--surface-2); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ld-prop .v input:focus, .ld-prop .v select:focus, .ld-prop .v textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px var(--focus-ring); }
.ld-prop .v textarea { resize: vertical; min-height: 64px; }
.ld-prog-wrap { display: flex; align-items: center; gap: 12px; }
.ld-prog-wrap input[type=range] { flex: 1; accent-color: var(--navy); width: auto; }
.ld-prog-wrap .pct { font-size: 13px; font-weight: 700; color: var(--navy); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

/* toggle switch (checkbox field) */
.ld-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.ld-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ld-toggle .tk { width: 42px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 15%, transparent); transition: background 0.22s var(--ease); position: relative; }
.ld-toggle .tk::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04); transition: transform 0.24s var(--ease); }
.ld-toggle input:checked + .tk { background: var(--ok); }
.ld-toggle input:checked + .tk::after { transform: translateX(18px); }
.ld-toggle input:focus-visible + .tk { outline: 2px solid var(--navy); outline-offset: 2px; }

.ld-recopts { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.ld-recopts label { font-size: 12px; font-weight: 600; color: var(--ink-3); margin: 0; }
.ld-recopts .hint { font-size: 11px; color: var(--ink-3); max-width: 240px; }

/* footer save bar */
.ld-foot { border-top: 1px solid var(--line); padding: 14px 26px; display: flex; align-items: center; gap: 12px; background: var(--surface); }
.ld-dirty { font-size: 12px; color: var(--warn); font-weight: 600; display: none; }
.ld-dirty.on { display: inline; }
.ld-foot-meta { font-size: 11.5px; color: var(--ink-3); }
.ld-foot-right { margin-left: auto; display: flex; gap: 8px; }

/* comments */
.ld-comment { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ld-comment:last-child { border-bottom: none; }
.ld-comment .lists-avatar { width: 30px; height: 30px; font-size: 11px; }
.ld-comment .c-main { flex: 1; min-width: 0; }
.ld-comment .c-head { display: flex; align-items: baseline; gap: 8px; }
.ld-comment .c-author { font-size: 13px; font-weight: 700; color: var(--ink); }
.ld-comment .c-date { font-size: 11px; color: var(--ink-3); }
.ld-comment .c-body { font-size: 13.5px; color: var(--ink); white-space: pre-wrap; margin-top: 3px; line-height: 1.5; }
.ld-composer { margin-top: 12px; }
.ld-composer textarea { width: 100%; }
.ld-composer .row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.ld-locknote { font-size: 11px; color: var(--ink-3); }

/* attachments */
.ld-attwrap { display: flex; flex-direction: column; gap: 8px; }
.ld-att { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.ld-att .thumb { width: 38px; height: 38px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--navy-50);
  font-size: 18px; overflow: hidden; }
.ld-att .thumb img { width: 100%; height: 100%; object-fit: cover; }
.ld-att .meta { flex: 1; min-width: 0; }
.ld-att .fn { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-att .sz { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.ld-att .acts { display: flex; gap: 6px; flex: none; }
.ld-dropzone { border: 2px dashed var(--line); border-radius: var(--r-md); padding: 18px; text-align: center; color: var(--ink-3);
  font-size: 13px; cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); margin-top: 4px; }
.ld-dropzone:hover, .ld-dropzone.drag { border-color: var(--navy); background: var(--navy-50); color: var(--navy); }
.ld-dropzone .pick { color: var(--navy); font-weight: 700; text-decoration: underline; }
.ld-upload-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ld-upload-row .fname { font-size: 12px; color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-attnote { font-size: 11px; color: var(--ink-3); margin-top: 6px; }

@media (max-width: 760px) {
  .lists-shell { flex-direction: column; }
  .lists-rail { flex: 1 1 auto; width: 100%; flex-direction: row; flex-wrap: wrap; }
  .ld-prop { grid-template-columns: 1fr; gap: 6px; }
  .ld-prop > .k { padding-top: 0; }
}

/* ---------- About / System ("geek's tour") ---------- */
.ab-hero { background: linear-gradient(135deg, #314b76 0%, #273c5f 100%); color: #fff;
  position: relative; overflow: hidden; box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.ab-hero::after { content: ""; position: absolute; right: -60px; top: -90px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 181, 23, 0.22), transparent 70%); pointer-events: none; }
.ab-hero > * { position: relative; z-index: 1; }
.ab-hero-head { display: flex; align-items: center; gap: 16px; }
.ab-status { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; position: relative; }
.ab-status.ok { background: #43d089; box-shadow: 0 0 0 0 rgba(67, 208, 137, 0.6); animation: ab-pulse 2.2s infinite; }
.ab-status.bad { background: #ff6b63; }
@keyframes ab-pulse { 0% { box-shadow: 0 0 0 0 rgba(67, 208, 137, 0.55); } 70% { box-shadow: 0 0 0 12px rgba(67, 208, 137, 0); } 100% { box-shadow: 0 0 0 0 rgba(67, 208, 137, 0); } }
.ab-hero-title { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; }
.ab-hero-sub { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); margin-top: 3px; }
.ab-hero-state { margin-left: auto; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #cfe9da; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ab-chip { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; display: flex; gap: 8px; align-items: center; }
.ab-chip span { color: rgba(255, 255, 255, 0.62); }
.ab-chip strong { font-weight: 700; }

.ab-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 18px 0; }
.ab-stat { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 16px 18px; border: 1px solid var(--line); }
.ab-stat.alt { background: var(--navy-50); }
.ab-stat .lab { font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.ab-stat .val { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; margin-top: 8px; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }

.ab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .ab-cols { grid-template-columns: 1fr; } }

.ab-kvlist { display: flex; flex-direction: column; }
.ab-kv { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ab-kv:last-child { border-bottom: 0; }
.ab-kv span { color: var(--ink-2); }
.ab-kv strong { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ab-deps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.ab-dep { font-size: 11px; background: var(--navy-50); border-radius: 7px; padding: 4px 8px; color: var(--ink-2); font-family: ui-monospace, monospace; }
.ab-dep i { color: var(--ink-3); font-style: normal; margin-left: 5px; }

/* pipeline */
.ab-pipe { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.ab-pipe.sub { margin-top: 14px; opacity: 0.92; }
.ab-node { flex: 1 1 0; min-width: 130px; background: var(--navy-50); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; }
.ab-node.accent { background: var(--navy); color: #fff; border-color: var(--navy); }
.ab-node.accent span { color: rgba(255, 255, 255, 0.7); }
.ab-node.ghost { background: var(--surface-2); border-style: dashed; }
.ab-node strong { display: block; font-size: 13.5px; font-weight: 700; }
.ab-node span { font-size: 11.5px; color: var(--ink-3); }
.ab-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-3); font-size: 18px; font-weight: 700; padding: 0 2px; }
.ab-arrow em { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; }

/* modules */
.ab-modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ab-mod { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 15px; background: var(--surface-2); transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.ab-mod:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ab-mod-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ab-mod-top strong { font-size: 13.5px; font-weight: 700; }
.ab-mod p { font-size: 12px; color: var(--ink-2); margin-top: 6px; line-height: 1.45; }
.ab-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); background: var(--navy-50); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }

/* integrations */
.ab-intgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ab-int { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; }
.ab-int.on { border-left: 3px solid var(--ok); }
.ab-int.off { border-left: 3px solid var(--line); opacity: 0.82; }
.ab-int-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ab-int-top strong { font-size: 13.5px; font-weight: 700; }
.ab-int p { font-size: 12px; color: var(--ink-2); margin-top: 7px; line-height: 1.45; }
.ab-dep-line { font-size: 11px; color: var(--ink-3); margin-top: 8px; font-family: ui-monospace, monospace; }

/* flags table */
.ab-flagtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ab-flagtable th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ab-flagtable td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.ab-flagtable td.mono { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--ink-2); }
.ab-flagtable tr:last-child td { border-bottom: 0; }

.ab-foot { text-align: center; color: var(--ink-3); font-size: 12px; padding: 22px 0 8px; }

/* spacing rhythm between the about cards */
#about-root > .card, #about-root > .ab-cols { margin-bottom: 18px; }

/* About — undocumented module flagging */
.ab-mod.undoc { border-style: dashed; border-color: var(--warn); background: rgba(201, 138, 18, 0.05); }
.ab-nodoc { color: var(--warn); font-style: italic; font-size: 11.5px; }

/* ── Accommodation timeline board (Legacy replacement) ── */
.acb-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.acb-legend { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); }
.acb-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.acb-legend .sw.st-assigned { background: rgba(245, 181, 23, 0.25); border-color: var(--yellow); }
.acb-legend .sw.st-confirmed { background: rgba(31, 157, 107, 0.22); border-color: var(--ok); }
.acb-legend .sw.st-pending { background: rgba(138, 151, 173, 0.22); border-color: var(--ink-3); }
.acb-legend .sw.g-f { background: #e0567d; border-color: #e0567d; }
.acb-legend .sw.g-m { background: #3b82f6; border-color: #3b82f6; }

.acb-frame { display: flex; gap: 14px; align-items: flex-start; }
.acb-wrap { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-md, 12px); overflow: hidden; background: var(--surface); }
.acb-scroll { overflow: auto; max-height: calc(100vh - 230px); }
.acb-grid { min-width: 100%; }

.acb-row { display: flex; align-items: stretch; height: 34px; border-bottom: 1px solid var(--line); }
.acb-row:last-child { border-bottom: 0; }
.acb-label { width: 210px; min-width: 210px; position: sticky; left: 0; z-index: 3; background: var(--surface-2);
  border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center;
  padding: 2px 12px; line-height: 1.15; }
.acb-label b { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acb-label i { font-size: 10.5px; font-style: normal; color: var(--ink-3); }
.acb-bedonly { padding-left: 8px; }
.acb-tag { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 4px; padding: 0 3px; }

.acb-head { height: 42px; position: sticky; top: 0; z-index: 5; }
.acb-head .acb-label, .acb-corner { background: var(--surface-3); z-index: 6; }
.acb-corner { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.acb-days { display: flex; background: var(--surface-3); }
.acb-day { width: 34px; min-width: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-left: 1px solid var(--line); }
.acb-day b { font-size: 12px; font-weight: 600; color: var(--ink); }
.acb-day i { font-size: 9px; font-style: normal; color: var(--ink-3); text-transform: uppercase; }
.acb-day.wknd { background: rgba(120, 130, 150, 0.07); }
.acb-day.today { background: rgba(245, 181, 23, 0.16); box-shadow: inset 0 -2px 0 var(--yellow); }
.acb-day.today b { color: var(--navy); }

.acb-track { position: relative; flex: 1;
  background-image: linear-gradient(90deg, var(--line) 0 1px, transparent 1px); background-repeat: repeat-x; }
.acb-track.hot { background-color: rgba(245, 181, 23, 0.10); box-shadow: inset 0 0 0 2px var(--yellow); }

.acb-prow { display: flex; align-items: center; height: 30px; border-bottom: 1px solid var(--line); }
.acb-plabel { position: sticky; left: 0; z-index: 4; width: 210px; min-width: 210px; background: var(--navy-50);
  font-size: 11.5px; font-weight: 700; color: var(--navy); letter-spacing: .01em; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--line); }
.acb-pfill { background: var(--navy-50); height: 100%; }

.acb-bar { position: absolute; top: 4px; height: 26px; border-radius: 7px; display: flex; align-items: center;
  font-size: 11.5px; font-weight: 500; color: var(--ink); cursor: grab; user-select: none; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.10); border: 1px solid; padding: 0 2px; touch-action: none; }
.acb-bar:hover { box-shadow: 0 2px 8px rgba(20, 30, 60, 0.18); z-index: 2; }
.acb-bar.dragging { opacity: .85; cursor: grabbing; z-index: 6; box-shadow: 0 6px 18px rgba(20, 30, 60, 0.28); }
.acb-bar .acb-lab { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.acb-bar .acb-g { font-weight: 700; }
.acb-bar.g-f { border-left-width: 3px; } .acb-bar.g-f .acb-g { color: #c63b63; }
.acb-bar.g-m { border-left-width: 3px; } .acb-bar.g-m .acb-g { color: #2563eb; }
.acb-bar.st-assigned { background: rgba(245, 181, 23, 0.22); border-color: rgba(245, 181, 23, 0.85); }
.acb-bar.st-confirmed { background: rgba(31, 157, 107, 0.18); border-color: rgba(31, 157, 107, 0.7); }
.acb-bar.st-pending { background: rgba(138, 151, 173, 0.18); border-color: rgba(138, 151, 173, 0.7); }
.acb-bar.g-f.st-assigned { border-left-color: #c63b63; } .acb-bar.g-m.st-assigned { border-left-color: #2563eb; }
.acb-bar.g-f.st-confirmed { border-left-color: #c63b63; } .acb-bar.g-m.st-confirmed { border-left-color: #2563eb; }

.acb-h { width: 7px; align-self: stretch; cursor: ew-resize; flex: 0 0 auto; }
.acb-h.acb-hl { border-radius: 7px 0 0 7px; } .acb-h.acb-hr { border-radius: 0 7px 7px 0; }
.acb-bar:hover .acb-h { background: rgba(20, 30, 60, 0.12); }

.acb-res { position: absolute; top: 4px; height: 26px; border-radius: 6px; display: flex; align-items: center; gap: 4px;
  padding: 0 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); z-index: 1;
  background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--surface-2, rgba(127,127,127,.12)) 5px, var(--surface-2, rgba(127,127,127,.12)) 10px);
  border: 1.5px dashed var(--ink-3, #9aa1ac); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.acb-res i { font-style: normal; opacity: .7; font-size: 10.5px; }
.acb-block { position: absolute; top: 4px; height: 26px; border-radius: 6px; display: flex; align-items: center;
  justify-content: center; font-size: 10px; font-weight: 600; color: #444; letter-spacing: .03em;
  background: repeating-linear-gradient(45deg, rgba(40,40,40,0.78) 0 7px, rgba(70,70,70,0.78) 7px 14px); color: #fff; }

.acb-railbox { width: 220px; min-width: 220px; border: 1px solid var(--line); border-radius: var(--r-md, 12px);
  background: var(--surface); overflow: hidden; align-self: stretch; }
.acb-railhead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3);
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.acb-rail { padding: 8px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 280px); overflow: auto; }
.acb-card { border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px; padding: 6px 9px; background: var(--surface-2);
  cursor: grab; font-size: 12px; font-weight: 500; color: var(--ink); touch-action: none; }
.acb-card:hover { border-color: var(--yellow); box-shadow: 0 2px 8px rgba(20, 30, 60, 0.10); }
.acb-card i { display: block; font-style: normal; font-size: 10px; color: var(--ink-3); margin-top: 1px; }
.acb-card.g-f { border-left-color: #c63b63; } .acb-card.g-m { border-left-color: #2563eb; } .acb-card.g-x { border-left-color: var(--ink-3); }
.acb-card .acb-g { color: inherit; }

/* Ask Dean — AI assistant widget, matched to the Liquid Glass design system (tokens, SF Pro, dark-mode + a11y aware) */
.ai-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 18px; border: none; border-radius: 999px;
  font-family: var(--font); font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 90%, white), var(--navy));
  color: #fff; cursor: pointer;
  box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.ai-fab::before { content: '✨'; font-size: 14px; line-height: 1; }
.ai-fab:hover { filter: brightness(1.06); }
.ai-fab:active { transform: scale(0.97); }
/* Panel keeps its .glass class (token-driven blur/border/bg, dark-mode + reduced-transparency aware);
   we only set layout + a floating-strength shadow + an entrance, no ad-hoc background overrides. */
.ai-panel {
  position: fixed; right: 22px; bottom: 86px; z-index: 901;
  width: 380px; max-width: calc(100vw - 44px); height: 520px; max-height: calc(100vh - 130px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop), inset 0 1px 0 var(--glass-hi);
  animation: ai-panel-in .32s var(--ease);
}
@keyframes ai-panel-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ai-panel { animation: none; } }
.ai-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  font-weight: 650; font-size: 15px; letter-spacing: -0.01em; color: var(--ink);
}
.ai-head strong { font-weight: 650; }
.ai-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; border-radius: 50%; padding: 0;
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2);
  font-size: 17px; line-height: 1; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.ai-close:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
.ai-thread { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.ai-msg {
  padding: 9px 13px; border-radius: var(--r-md); max-width: 86%; font-size: 13.5px; line-height: 1.45;
  white-space: pre-wrap; word-wrap: break-word; box-shadow: var(--shadow-sm);
}
.ai-user {
  align-self: flex-end; border-bottom-right-radius: 5px; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 92%, white), var(--navy));
}
.ai-assistant {
  align-self: flex-start; border-bottom-left-radius: 5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
}
.ai-thinking { opacity: .7; font-style: italic; }
.ai-empty { color: var(--ink-3); text-align: center; margin: auto; font-size: 13px; max-width: 80%; line-height: 1.5; }
.ai-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.ai-form input {
  flex: 1; padding: 9px 13px; font-family: var(--font); font-size: 13.5px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
}
.ai-form input:focus { border-color: var(--navy); box-shadow: 0 0 0 4px var(--focus-ring); outline: none; }
.ai-form button {
  padding: 9px 15px; border: none; border-radius: var(--r-sm); cursor: pointer; font-weight: 600; font-size: 13.5px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 90%, white), var(--navy)); color: #fff;
  transition: transform .15s var(--ease), filter .15s var(--ease);
}
.ai-form button:hover { filter: brightness(1.06); }
.ai-form button:active { transform: scale(0.97); }

/* ================= Communication (Plan 6: composer · thread · follow-up · triage) =================
   Liquid-Glass surfaces reuse the literal `.glass` class (already in the prefers-reduced-transparency
   collapse rule), so no a11y selector edit is needed. All blur is confined to `.glass`. */

/* two-pane conversation sheet */
.comm-conv-sheet { padding: 0; }
.comm-conv { display: grid; grid-template-columns: 1fr minmax(360px, 460px); gap: 0; height: min(80vh, 720px); }
.comm-thread-col { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
.comm-conv-head { display: flex; align-items: center; gap: 8px; padding: 16px 20px 10px; font-size: 15px; }
.comm-conv-head svg { width: 18px; height: 18px; color: var(--navy); }
.comm-compose-col { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; overflow: auto; }

/* thread bubbles */
.thread { flex: 1; overflow: auto; padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.thread-bubble { max-width: 82%; padding: 10px 13px; border-radius: var(--r-md); box-shadow: var(--shadow-sm); font-size: 13.5px; line-height: 1.45; }
.thread-bubble.in { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.thread-bubble.out { align-self: flex-end; background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 92%, white), var(--navy)); color: #fff; border-bottom-right-radius: 5px; }
.thread-meta { font-size: 11.5px; font-weight: 600; margin-bottom: 3px; opacity: .9; display: flex; gap: 8px; justify-content: space-between; }
.thread-bubble.out .thread-meta .muted { color: rgba(255,255,255,.72); }
.thread-body { word-wrap: break-word; overflow-wrap: anywhere; }
.thread-atts { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.thread-att { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.thread-bubble.out .thread-att { background: rgba(255,255,255,.18); }
.thread-tracking-slot:empty { display: none; }
/* U1 — AI-draft bubbles: never confusable with sent mail. Dashed border + muted brand tint
   built from theme vars (dark-mode safe: var(--surface)/var(--ink), never #fff); a lint-blocked
   draft is warning-toned — its body is the escalation stub, not a customer-ready reply. */
.thread-bubble.out.draft { background: color-mix(in srgb, var(--navy) 8%, var(--surface)); color: var(--ink); border: 1.5px dashed color-mix(in srgb, var(--navy) 45%, transparent); box-shadow: none; }
.thread-bubble.out.draft .thread-meta .muted { color: var(--ink-2); }
.thread-bubble.out.draft .thread-att { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.thread-bubble.out.draft.lint-blocked { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.thread-draft-chip { margin: 2px 0 6px; }

/* context rail + connection health */
.comm-context-rail { border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.comm-rail-head { font-weight: 600; font-size: 14px; }
.comm-rail-row { display: flex; justify-content: space-between; font-size: 12.5px; }
.comm-rail-actions { margin-top: 4px; display: flex; gap: 6px; }
.comm-health-card { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border-radius: var(--r-sm); font-size: 12.5px; }
.comm-health-card.ok { background: color-mix(in srgb, var(--ok) 10%, transparent); }
.comm-health-card.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); }

/* composer */
.comm-composer { display: flex; flex-direction: column; gap: 9px; }
.comm-sender { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; font-size: 12.5px; align-self: flex-start; }
.comm-sender-sel { border: none; background: none; font-weight: 600; padding: 0; height: auto; box-shadow: none; }
.comm-recip { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 8px; min-height: 38px; }
.comm-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 4px 2px 9px; border-radius: 999px; background: var(--navy-50); color: var(--navy-700); }
.comm-chip-x { border: none; background: none; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; padding: 0 4px; opacity: .6; }
.comm-chip-x:hover { opacity: 1; }
.comm-recip-input { flex: 1; min-width: 120px; border: none; box-shadow: none; padding: 4px; height: auto; background: none; }
.comm-recip-input:focus { box-shadow: none; }
.comm-subject { font-weight: 600; }
.comm-body-wrap { display: grid; grid-template-columns: 1fr; gap: 8px; }
.comm-body { min-height: 130px; resize: vertical; font-family: var(--font); font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); width: 100%; }
.comm-body:focus { border-color: var(--navy); box-shadow: 0 0 0 4px var(--focus-ring); outline: none; }
.comm-preview { background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 9px 12px; font-size: 13px; line-height: 1.5; position: relative; }
.comm-flag { position: absolute; top: 7px; right: 9px; font-size: 15px; }
.comm-preview-body { white-space: pre-wrap; word-wrap: break-word; padding-right: 22px; }
.comm-followup { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
#composerAiSlot:empty { display: none; }
.comm-sendbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 2px; }
.comm-status { font-size: 12.5px; font-weight: 600; margin-right: auto; }
.comm-status.sending { color: var(--ink-2); }
.comm-status.sent { color: var(--ok); background-image: linear-gradient(100deg, var(--ok) 40%, var(--glass-hi) 50%, var(--ok) 60%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: comm-shimmer 1.1s var(--ease) 1; }
.comm-status.failed { color: var(--bad); }
@keyframes comm-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .comm-status.sent { animation: none; } }

/* bespoke undo-send toast (toast() is text-only, so this is its own element) */
.comm-undo-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); opacity: 0; z-index: 9000; display: flex; align-items: center; gap: 14px; padding: 11px 14px 11px 18px; border-radius: 999px; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.comm-undo-toast.in { opacity: 1; transform: translate(-50%, 0); }
.comm-undo-msg { font-size: 13px; font-weight: 600; }
.comm-undo-count { font-variant-numeric: tabular-nums; }
.comm-undo-btn { background: var(--navy); color: #fff; border: none; }

/* triage list */
.triage-row .triage-sla { min-width: 44px; justify-content: center; }
/* U2 — brand-tint "draft ready" pill beside the SLA pill: agents triage manual-writes first. */
.triage-row .triage-draft-pill { margin-left: 6px; white-space: nowrap; }
/* U3 — per-mailbox AI-draft opt-in rows on the Inbox rail (theme vars only). */
.ib-draft-optin { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--ink); }
.ib-draft-optin:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ib-draft-optin input[disabled] { cursor: not-allowed; }
.ib-draft-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.triage-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.triage-badge.warn { background: var(--warn); }
.nav-item .triage-badge { margin-left: 8px; }

@media (max-width: 880px) {
  .comm-conv { grid-template-columns: 1fr; height: auto; }
  .comm-thread-col { border-right: none; border-bottom: 1px solid var(--line); max-height: 40vh; }
}

/* ===== Onboarding Intake Builder ===== */
.obb { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 1040px) { .obb { grid-template-columns: 1fr; } }
.obb-main { min-width: 0; }

.obb-tabs { display: inline-flex; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 2px; margin-bottom: 14px; }
.obb-tab { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; border-radius: 999px; padding: 8px 15px; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.obb-tab:hover { color: var(--ink); }
.obb-tab.on { background: var(--surface); color: var(--navy); box-shadow: var(--shadow-sm); }
.obb-tlock { display: inline-flex; opacity: .55; }
.obb-tlock svg { width: 12px; height: 12px; }
.obb-cnt { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-3); background: var(--surface-3); border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; }
.obb-tab.on .obb-cnt { color: #fff; background: var(--navy); }
.obb-cnt.sm { padding: 0 6px; min-width: 0; }

.obb-intro { font-size: 13px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; margin: 0 0 18px; }

.obb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px 12px; margin-bottom: 9px; box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), opacity .2s var(--ease), border-color .2s var(--ease); }
.obb-card:hover { box-shadow: var(--shadow); border-color: var(--ring); }
.obb-card.off { opacity: .5; }
.obb-card.slim { padding: 8px 10px; }
.obb-c1 { display: flex; align-items: center; gap: 8px; }
.obb-c1 .obb-label { flex: 1; min-width: 110px; font-weight: 500; }
.obb-c1 .obb-type { width: 132px; flex: none; }

.obb-move { display: inline-flex; flex-direction: column; gap: 2px; flex: none; }
.obb-move button { display: flex; align-items: center; justify-content: center; width: 22px; height: 15px; padding: 0; border: none; background: var(--surface-2); color: var(--ink-3); border-radius: 4px; cursor: pointer; transition: color .15s, background .15s; }
.obb-move button:first-child { border-radius: 6px 6px 3px 3px; }
.obb-move button:last-child { border-radius: 3px 3px 6px 6px; }
.obb-move button:hover:not(:disabled) { color: var(--navy); background: var(--navy-50); }
.obb-move button:disabled { opacity: .3; cursor: default; }

.obb-del { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--ink-3); border-radius: 8px; cursor: pointer; transition: color .15s, background .15s; }
.obb-del:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }

.obb-opts { margin-top: 8px; font-size: 13px; }
.obb-c2 { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.obb-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--ink-3); background: var(--surface-2); padding: 2px 6px; border-radius: 5px; margin-left: auto; }

.obb-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--ink-2); user-select: none; }
.obb-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.obb-switch .track { position: relative; width: 36px; height: 21px; border-radius: 999px; background: var(--ink-3); transition: background .25s var(--ease); flex: none; }
.obb-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .25s var(--ease); }
.obb-switch input:checked + .track { background: var(--navy); }
.obb-switch.is-active input:checked + .track { background: var(--ok); }
.obb-switch input:checked + .track::after { transform: translateX(15px); }
.obb-switch input:focus-visible + .track { box-shadow: 0 0 0 4px var(--focus-ring); }
.obb-switch:hover .lbl { color: var(--ink); }

.obb-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 4px; padding: 11px 16px; border: 1px dashed var(--ink-3); background: transparent; color: var(--ink-2); border-radius: var(--r-sm); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.obb-add:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-50); }
.obb-add svg { width: 15px; height: 15px; }

.obb-group { margin-bottom: 20px; }
.obb-group-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 0 2px 9px; }

.obb-callout { display: flex; gap: 11px; align-items: flex-start; background: var(--navy-50); border: 1px solid color-mix(in srgb, var(--navy) 18%, transparent); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 14px; }
.obb-callout > svg { width: 17px; height: 17px; color: var(--navy); flex: none; margin-top: 1px; }
.obb-callout b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 3px; }
.obb-callout p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

/* live preview */
.obb-side { position: sticky; top: 14px; }
.obb-preview-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 9px 4px; }
.obb-preview-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.obb-device { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 18px 18px 20px; max-height: calc(100dvh - 96px); overflow: auto; overscroll-behavior: contain; }
.pv-title { font-size: 15px; font-weight: 650; color: var(--ink); margin: 0 0 14px; letter-spacing: -.01em; }
.pv-field { margin-bottom: 13px; }
.pv-lbl { display: block; font-size: 12px; font-weight: 550; color: var(--ink-2); margin-bottom: 5px; }
.pv-lbl em, .pv-doc-l em { color: var(--bad); font-style: normal; font-weight: 700; }
.pv-in { height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); display: flex; align-items: center; padding: 0 10px; font-size: 12.5px; color: var(--ink-3); }
.pv-in.pv-area { height: 50px; align-items: flex-start; padding-top: 8px; }
.pv-in.pv-sel::after { content: ""; margin-left: auto; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ink-3); }
.pv-check { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink); margin-bottom: 9px; }
.pv-box { width: 17px; height: 17px; border: 1.5px solid var(--ink-3); border-radius: 5px; flex: none; }
.pv-grp { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 16px 0 9px; }
.pv-grp:first-of-type { margin-top: 0; }
.pv-doc { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink); padding: 9px 0; border-bottom: 1px solid var(--line); }
.pv-doc:last-child { border-bottom: none; }
.pv-doc-i { color: var(--ink-3); display: flex; }
.pv-doc-i svg { width: 15px; height: 15px; }
.pv-doc-l { min-width: 0; }
.pv-up { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--navy); background: var(--navy-50); padding: 2px 8px; border-radius: 999px; flex: none; }
.pv-empty { font-size: 12.5px; color: var(--ink-3); text-align: center; padding: 22px 0; }

/* sticky publish bar */
.obb-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 2px; background: linear-gradient(to top, var(--bg) 58%, transparent); z-index: 5; }
.obb-stat { font-size: 12.5px; color: var(--ink-3); margin-left: 2px; }
.obb-stat.warn { color: var(--warn); font-weight: 600; }
.btn.pulse { animation: obbpulse 2.4s ease-in-out infinite; }
@keyframes obbpulse { 0%, 100% { box-shadow: var(--shadow); } 50% { box-shadow: var(--shadow), 0 0 0 4px rgba(245, 181, 23, .28); } }

/* version history */
.obb-vers { margin-top: 14px; display: flex; flex-direction: column; }
.obb-ver { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.obb-ver:last-child { border-bottom: none; }
.obb-ver-tag { font-weight: 650; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); flex: none; }
.obb-ver-tag em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.obb-ver-meta { flex: 1; font-size: 12px; color: var(--ink-3); }

/* ============================================================================
 * Marketing dashboard — interactive glass engine (insight & delight rebuild)
 * ========================================================================== */
.mkt-dash { display: flex; flex-direction: column; gap: 16px; }
.mkt-dash > * { animation: mktUp .5s var(--ease, cubic-bezier(.22,.61,.36,1)) both; }
.mkt-dash > *:nth-child(2) { animation-delay: .04s; }
.mkt-dash > *:nth-child(3) { animation-delay: .08s; }
.mkt-dash > *:nth-child(4) { animation-delay: .12s; }
.mkt-dash > *:nth-child(5) { animation-delay: .16s; }
@keyframes mktUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* insight callouts */
.mkt-insights { display: flex; gap: 12px; flex-wrap: wrap; }
.mkt-insight { flex: 1; min-width: 240px; border-radius: var(--r-md); padding: 13px 16px; border: 1px solid var(--glass-stroke);
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi); border-left-width: 3px; }
.mkt-insight.good { border-left-color: var(--ok); }
.mkt-insight.bad { border-left-color: var(--bad); }
.mkt-insight.neutral { border-left-color: var(--navy); }
.mkt-insight-h { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 13.5px; color: var(--ink); }
.mkt-insight-ic { font-size: 11px; }
.mkt-insight.good .mkt-insight-ic { color: var(--ok); }
.mkt-insight.bad .mkt-insight-ic { color: var(--bad); }
.mkt-insight.neutral .mkt-insight-ic { color: var(--navy); }
.mkt-insight-chip { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); background: color-mix(in srgb, var(--navy) 8%, transparent); padding: 2px 8px; border-radius: 999px; }
.mkt-insight-b { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.45; }

/* KPI cards */
.mkt-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.mkt-kpi { position: relative; padding: 14px 16px 13px; border-radius: var(--r-md); overflow: hidden;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.mkt-kpi.mkt-clickable { cursor: pointer; }
.mkt-kpi.mkt-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop), inset 0 1px 0 var(--glass-hi); }
.mkt-kpi.mkt-clickable:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.mkt-kpi-top { display: flex; align-items: center; gap: 8px; }
.mkt-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); font-weight: 600; }
.mkt-kpi-val { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mkt-kpi-spark { height: 30px; margin-top: 6px; }
.mkt-spark { width: 100%; height: 30px; display: block; }
.mkt-kpi-go { font-size: 11px; font-weight: 600; color: var(--navy); margin-top: 7px; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.mkt-kpi.mkt-clickable:hover .mkt-kpi-go { opacity: 1; transform: none; }
.mkt-delta { margin-left: auto; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.mkt-delta.good { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.mkt-delta.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.mkt-delta.flat { color: var(--ink-2); background: color-mix(in srgb, var(--ink-2) 12%, transparent); }

/* charts */
.mkt-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.mkt-chartcard { padding: 16px 18px; }
.mkt-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.mkt-legend { display: flex; gap: 12px; flex-wrap: wrap; }
.mkt-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 6px; transition: opacity .15s; }
.mkt-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mkt-leg.off { opacity: .38; text-decoration: line-through; }
.mkt-chart-wrap { position: relative; }
.mkt-chart { width: 100%; height: auto; display: block; touch-action: pan-y; }
.mkt-grid { stroke: var(--line); stroke-width: 1; }
.mkt-ytick { fill: var(--ink-3); font-size: 10px; text-anchor: end; font-variant-numeric: tabular-nums; }
.mkt-xtick { fill: var(--ink-3); font-size: 10px; text-anchor: middle; }
.mkt-leglabel { fill: var(--ink-2); font-size: 12px; dominant-baseline: middle; }
.mkt-series { transition: opacity .2s; }
.mkt-series.off { opacity: 0; pointer-events: none; }
.mkt-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mktDraw 1s var(--ease) forwards; }
@keyframes mktDraw { to { stroke-dashoffset: 0; } }
.mkt-bar { transition: opacity .2s; transform-box: fill-box; transform-origin: bottom; animation: mktGrow .5s var(--ease) both; }
@keyframes mktGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.mkt-seg { transition: transform .2s var(--ease); transform-box: fill-box; transform-origin: center; cursor: default; }
.mkt-seg:hover { transform: scale(1.04); }
.mkt-cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.mkt-tip { position: absolute; top: 6px; pointer-events: none; min-width: 120px; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--glass-stroke); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 8px 10px; z-index: 3; }
.mkt-tip-x { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
.mkt-tip-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.mkt-tip-row i { width: 9px; height: 9px; border-radius: 2px; }
.mkt-tip-row b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

/* tables */
.mkt-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.mkt-tbl td.r, .mkt-tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
.mkt-tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.mkt-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.mkt-sortable:hover { color: var(--ink); }
.mkt-sort::after { content: '⇅'; opacity: .4; margin-left: 4px; font-size: 10px; }
.mkt-sortable.asc .mkt-sort::after { content: '↑'; opacity: 1; }
.mkt-sortable.desc .mkt-sort::after { content: '↓'; opacity: 1; }
.mkt-tbl tr.mkt-clickable { cursor: pointer; transition: background .15s; }
.mkt-tbl tr.mkt-clickable:hover { background: color-mix(in srgb, var(--navy) 5%, transparent); }
.mkt-cellbar { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mkt-cellbar span { position: absolute; left: 0; height: 6px; bottom: -2px; border-radius: 3px; background: color-mix(in srgb, var(--navy) 34%, transparent); }
.mkt-cellbar em { font-style: normal; position: relative; z-index: 1; font-variant-numeric: tabular-nums; }

/* cross-tab links */
.mkt-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mkt-link { font-size: 12.5px; font-weight: 600; color: var(--navy); background: color-mix(in srgb, var(--navy) 7%, transparent); border: 1px solid var(--glass-stroke); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background .15s, transform .15s; }
.mkt-link:hover { background: color-mix(in srgb, var(--navy) 13%, transparent); transform: translateY(-1px); }

/* drill slide-over */
.mkt-drill-head { margin-bottom: 16px; }
.mkt-drill-body .mkt-kpis { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.mkt-drill-body .mkt-charts, .mkt-drill-body .mkt-tables { grid-template-columns: 1fr; }
.mkt-err { border-left: 3px solid var(--warn); }

/* "Showing last known data" notice — honest, calm, brand-yellow glass. */
.mkt-stale {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 16px; margin-bottom: 4px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--glass-stroke));
  border-left: 3px solid var(--yellow);
  background: color-mix(in srgb, var(--yellow) 12%, var(--surface));
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
}
.mkt-stale-ic {
  flex: none; font-size: 15px; line-height: 1.4;
  color: color-mix(in srgb, var(--warn) 80%, var(--ink));
}
.mkt-stale-h { font-weight: 650; font-size: 13.5px; color: var(--ink); }
.mkt-stale-p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.mkt-stale-p strong { color: var(--ink); font-weight: 600; }
.mkt-stamp-stale { color: var(--warn); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .mkt-dash > *, .mkt-line, .mkt-bar { animation: none !important; }
  .mkt-line { stroke-dashoffset: 0; }
}
.mkt-back { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 12.5px; font-weight: 600; color: var(--navy); background: color-mix(in srgb, var(--navy) 7%, transparent); border: 1px solid var(--glass-stroke); border-radius: 999px; padding: 5px 13px; cursor: pointer; transition: background .15s, transform .15s; }
.mkt-back:hover { background: color-mix(in srgb, var(--navy) 13%, transparent); transform: translateX(-2px); }

.ai-confirm { align-self: flex-start; max-width: 90%; margin-top: 4px; padding: 12px; border-radius: 12px;
  background: rgba(245,181,23,.12); border: 1px solid rgba(245,181,23,.5); }
.ai-confirm-q { font-weight: 600; margin-bottom: 4px; }
.ai-confirm-sum { white-space: pre-wrap; margin-bottom: 10px; }
.ai-confirm-btns { display: flex; gap: 8px; }
.ai-confirm-yes { padding: 7px 14px; border: none; border-radius: 9px; background: var(--navy,#314B76); color: #fff; cursor: pointer; }
.ai-confirm-no { padding: 7px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; }
.ai-confirm button:disabled { opacity: .5; cursor: default; }

/* ---- Juniors hub (delightful, self-documenting) ---- */
.jr-intro{color:var(--ink-2);margin:2px 0 18px;max-width:64ch;line-height:1.55;font-size:14.5px}
.jr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:14px}
.jr-cap{cursor:pointer;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.jr-cap:hover{transform:translateY(-3px)}
.jr-cap-ic{width:42px;height:42px;border-radius:13px;background:var(--navy-50);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:10px}
.jr-cap h4{margin:0 0 3px;font-size:15px;font-weight:650;letter-spacing:-.01em}
.jr-cap p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.45}
.jr-row{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:12px;cursor:pointer;transition:background .15s var(--ease)}
.jr-row:hover{background:var(--navy-50)}
.jr-av{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;letter-spacing:.02em}
.jr-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.6}
.jr-chip.kid{background:#fbeec4;color:#8a6a12}
[data-theme="dark"] .jr-chip.kid{background:rgba(245,181,23,.18);color:#f5c542}
.jr-chip.teen{background:var(--navy-50);color:var(--navy)}
.jr-chip.warn{background:#fbe0de;color:#b23b34}
[data-theme="dark"] .jr-chip.warn{background:rgba(220,53,69,.20);color:#ff8a8a}
.jr-pick{max-height:330px;overflow:auto;margin-top:8px;display:flex;flex-direction:column;gap:2px}
.jr-empty{padding:26px 18px;text-align:center;color:var(--ink-3);font-size:14px}

/* ---- Role app (parent / leader / student faces) — mobile-first ---- */
.ra-wrap{max-width:600px;margin:0 auto;padding:0 18px 64px}
.ra-top{display:flex;align-items:center;justify-content:space-between;padding:22px 2px 6px}
.ra-brand{font-weight:800;letter-spacing:.05em;color:var(--navy);font-size:14px}
.ra-h{font-size:27px;font-weight:750;letter-spacing:-.025em;margin:14px 0 3px}
.ra-sub{color:var(--ink-2);margin:0 0 22px}
.ra-card{padding:18px;margin-bottom:14px}
.ra-childcard{display:flex;align-items:center;gap:14px;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.ra-childcard:hover{transform:translateY(-2px)}
.ra-av-lg{width:50px;height:50px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex-shrink:0;letter-spacing:.02em}
.ra-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:middle}
.ra-dot.in{background:#2e9d57}.ra-dot.out{background:#e0a008}.ra-dot.unk{background:#b8c0cc}
.ra-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--navy-50)}
.ra-row:last-child{border-bottom:0}
.ra-row .k{color:var(--ink-2)}
.ra-foot{display:flex;gap:10px;margin-top:26px}
.ra-back{background:none;border:0;color:var(--navy);font-weight:600;cursor:pointer;padding:8px 0;font-size:14px}

/* ---- App preview (staff sees the customer faces in a phone frame) ---- */
.pv-roles{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.pv-phone{width:392px;max-width:100%;margin:14px auto 0;border-radius:46px;padding:13px;background:var(--navy);box-shadow:0 34px 70px -24px rgba(20,30,50,.55)}
.pv-screen{background:#f5f5f7;border-radius:34px;overflow:auto;height:740px;max-height:70vh}
.pv-screen .ra-wrap{padding:16px 16px 40px}
[data-theme="dark"] .pv-screen{background:#0d0f14}
.pv-layout{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.pv-controls{flex:1;min-width:280px}

/* ---------- Sidebar: collapsible groups + nav motion polish ---------- */
.nav-section { display: flex; flex-direction: column; }
/* .nav-group is now a <button>; reset native button chrome and lay out the chevron. */
.nav-group { display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; cursor: pointer; font-family: var(--font); }
.nav-group:hover { color: var(--navy-700); }
.nav-chev { display: inline-flex; opacity: .5; transform: rotate(90deg);
  transition: transform .16s var(--ease); }
.nav-chev svg { width: 14px; height: 14px; stroke-width: 2; }
.nav-section.collapsed .nav-chev { transform: rotate(0deg); }
.nav-items { display: flex; flex-direction: column; gap: 2px;
  overflow: hidden; max-height: 1200px; opacity: 1;
  transition: max-height .24s var(--ease), opacity .18s var(--ease); }
.nav-section.collapsed .nav-items { max-height: 0; opacity: 0; }
.nav-item { transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease); }
.nav-item:hover { transform: translateX(2px); }
.searchres.kbsel { outline: 2px solid var(--yellow, #F5B517); outline-offset: 1px; border-color: var(--yellow) !important; }
.hub-bar a { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-chev, .nav-items, .nav-item { transition: none; }
  .nav-item:hover { transform: none; }
}

/* configurable dashboard widget chrome */
.dashw { position: relative; }
.dashw-bar { position: absolute; top: 10px; right: 12px; display: flex; gap: 6px; align-items: center; z-index: 2; }
.dashw .iconbtn { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); width: 22px; height: 22px;
  border-radius: 7px; font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.dashw .iconbtn:hover { color: var(--ink); border-color: var(--ink-3, #9aa1ac); }
.dashw[draggable="true"] { cursor: grab; outline: 1.5px dashed var(--line); outline-offset: 3px; }

/* Standalone Inbox page (mailbox switcher · list · read) */
.inbox-wrap { display: grid; grid-template-columns: 220px 340px 1fr; height: calc(100vh - 120px); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.inbox-rail { border-right: 1px solid var(--line); background: var(--surface-2); overflow-y: auto; padding: 8px; }
.inbox-list { border-right: 1px solid var(--line); overflow-y: auto; }
.inbox-read { overflow-y: auto; padding: 16px; color: var(--ink); }
.inbox-row { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--ink); }
.inbox-row:hover { background: var(--surface-hover); }
.inbox-row.unread { font-weight: 600; }
.inbox-row.active { background: var(--surface-hover); }
.inbox-mailbox { padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); display:flex; justify-content:space-between; gap:6px; }
.inbox-mailbox.active { background: var(--surface-hover); }

/* ── Inbox Core (Phase 1): folder rail, threaded list, reader, actions, attachments ── */
.inbox-folders { margin-top: 4px; }
.inbox-folder { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; cursor: pointer; color: var(--ink-2, var(--ink)); }
.inbox-folder:hover { background: var(--surface-hover); }
.inbox-folder.active { background: color-mix(in srgb, var(--navy) 14%, transparent); color: var(--ink); font-weight: 600; }
.inbox-folder .ibf-name { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-folder .ibf-count { font-size: 11px; font-weight: 700; color: #fff; background: var(--bad); border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center; }

.inbox-list-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.inbox-more { padding: 12px; text-align: center; }

/* Row → grid: unread dot + content. Overrides the base .inbox-row padding above. */
.inbox-list .inbox-row { display: grid; grid-template-columns: 10px 1fr; gap: 8px; align-items: start; padding: 10px 12px; }
.inbox-row .ib-udot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: transparent; }
.inbox-row.unread .ib-udot { background: var(--navy); }
.ib-udot.inline { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); vertical-align: middle; }
.ib-row-main { min-width: 0; }
.ib-row-top { display: flex; align-items: baseline; gap: 8px; }
.ib-from { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-date { flex: none; font-size: 11px; color: var(--ink-3); }
.ib-subj { font-size: 12.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-prev { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-thread { font-size: 10.5px; font-weight: 700; color: var(--navy); background: color-mix(in srgb, var(--navy) 14%, transparent); border-radius: 999px; padding: 0 6px; }
.ib-flag { color: var(--yellow); font-size: 12px; }

.inbox-subj { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 10px; }
.inbox-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.inbox-actions .ib-actsep { flex: 1; }
.ib-msg { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 12px; overflow: hidden; }
.ib-msg-head { padding: 12px 14px; }
.ib-msg-open .inbox-read-body { padding: 0 14px 14px; }
.ib-msg-older .ib-msg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.ib-msg-older .ib-msg-body { display: none; padding: 0 14px 14px; }
.ib-msg-older.open .ib-msg-body { display: block; }
.ib-msg-from { font-size: 13px; font-weight: 600; }

.ib-atts { display: flex; flex-wrap: wrap; gap: 9px; padding: 0 14px 14px; }
.ib-att { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 8px 11px; min-width: 180px; cursor: pointer; color: var(--ink); text-align: left; }
.ib-att:hover { border-color: var(--navy); }
.ib-att-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 7px; font-size: 11px; font-weight: 700; color: var(--navy); background: color-mix(in srgb, var(--navy) 16%, transparent); }
.ib-att-meta { min-width: 0; display: flex; flex-direction: column; }
.ib-att-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

.ib-move-menu { position: fixed; z-index: 60; min-width: 180px; max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md, 0 8px 30px rgba(0,0,0,.18)); padding: 6px; }
.ib-move-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.ib-move-item:hover { background: var(--surface-hover); }
.comm-ai-menu { position: fixed; z-index: 70; min-width: 190px; max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md, 0 8px 30px rgba(0,0,0,.18)); padding: 6px; }
.comm-ai-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.comm-ai-item:hover { background: var(--surface-hover); }

@media (max-width: 900px) { .inbox-wrap { grid-template-columns: 1fr; height: auto; } }

/* ── Visual form builder (Forms → Build tab) ─────────────────────────── */
.fb-grid { display: grid; grid-template-columns: 252px minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1280px) { .fb-grid { grid-template-columns: 232px 1fr; } .fb-grid .fpreview { display: none; } }
@media (max-width: 900px) { .fb-grid { grid-template-columns: 1fr; } }
.fb-palette { position: sticky; top: 12px; max-height: calc(100vh - 110px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; }
.fb-pgroup { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 14px 0 6px; }
.fb-pgroup:first-child { margin-top: 0; }
.fb-pitem { display: flex; align-items: flex-start; gap: 9px; padding: 8px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 6px; cursor: grab; background: var(--surface); transition: border-color .15s, box-shadow .15s, transform .15s; user-select: none; }
.fb-pitem:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.fb-pitem.is-added { opacity: .45; cursor: default; }
.fb-pitem.is-added:hover { border-color: var(--line); box-shadow: none; transform: none; }
.fb-pitem .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; }
.fb-pitem .nm { font-size: 13px; font-weight: 600; color: var(--ink); }
.fb-pitem .hint { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; margin: 1px 0 0; }
.fb-dot-contact { background: var(--ok); } .fb-dot-booking { background: var(--navy); }
.fb-dot-basic { background: #8e8e93; } .fb-dot-layout { background: var(--ink-3); }
.fb-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 14px; overflow: hidden; }
.fb-step-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.fb-step-n { font-size: 11px; font-weight: 800; color: var(--ink-3); flex: none; }
.fb-step-h input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink); padding: 2px 4px; border-radius: 6px; }
.fb-step-h input:hover { background: var(--surface-hover); }
.fb-step-h input:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--navy-50); }
.fb-step-acts { display: flex; gap: 2px; flex: none; }
.fb-step-acts button, .fb-field .acts button { border: 0; background: transparent; cursor: pointer; color: var(--ink-3); font-size: 13px; line-height: 1; padding: 4px 6px; border-radius: 6px; font-family: inherit; }
.fb-step-acts button:hover, .fb-field .acts button:hover { background: var(--surface-hover); color: var(--ink); }
.fb-fields { padding: 8px; min-height: 46px; }
.fb-field { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 6px; background: var(--surface); cursor: grab; }
.fb-field:last-child { margin-bottom: 0; }
.fb-field:hover { border-color: color-mix(in srgb, var(--navy) 45%, transparent); box-shadow: var(--shadow-sm); }
.fb-field.dragging { opacity: .35; }
.fb-field .grip { color: var(--ink-3); flex: none; font-size: 13px; letter-spacing: 1px; }
.fb-field .lbl { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.fb-field .lbl .req { color: var(--bad); }
.fb-field .typ { font-size: 11px; color: var(--ink-2); background: var(--surface-2); padding: 2px 7px; border-radius: 20px; flex: none; }
.fb-badge { font-size: 10.5px; font-weight: 700; padding: 2.5px 8px; border-radius: 20px; flex: none; margin-left: auto; white-space: nowrap; }
.fb-badge.person { color: #1e7f4f; background: rgba(52, 199, 89, .13); }
.fb-badge.lines { color: var(--navy); background: var(--navy-50); }
.fb-badge.submission { color: var(--ink-2); background: var(--surface-2); }
.fb-field .acts { display: flex; gap: 1px; flex: none; }
.fb-dropline { height: 3px; border-radius: 3px; background: var(--yellow); margin: 3px 4px; }
.fb-empty { border: 1.5px dashed var(--line); border-radius: var(--r-sm); color: var(--ink-3); font-size: 12.5px; text-align: center; padding: 15px 10px; }
.fb-fields.dragover .fb-empty, .fb-empty.dragover { border-color: var(--yellow); color: var(--navy); background: rgba(245, 181, 23, .07); }
.fb-addstep { width: 100%; border: 1.5px dashed var(--line); background: transparent; border-radius: var(--r-md); padding: 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color .15s, color .15s; }
.fb-addstep:hover { border-color: var(--navy); color: var(--navy); }
.fb-savechip { font-size: 12px; color: var(--ink-2); align-self: center; margin-right: 6px; white-space: nowrap; }
.fb-savechip.err { color: var(--bad); }
.fb-cat-order { display: flex; flex-direction: column; gap: 6px; }
.fb-cat-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 10px; font-size: 13px; background: var(--surface); }
.fb-cat-row .ord { font-size: 11px; font-weight: 800; color: var(--navy); background: var(--navy-50); border-radius: 20px; padding: 1px 7px; flex: none; }
.fb-cond { color: var(--warn); font-weight: 800; cursor: help; }

/* ── Dean — Language School Agent ─────────────────────────────────────────── */
.dean-mark { display: inline-flex; flex: none; }
.dean-mark .dm-ring { opacity: 0; transform-origin: center; }
.dean-mark.thinking .dm-ring { opacity: 1; animation: dean-spin 1.8s linear infinite; }
.dean-mark.speaking svg { animation: dean-breathe 1.4s ease-in-out infinite; }
@keyframes dean-spin { to { transform: rotate(360deg); } }
@keyframes dean-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .dean-mark.thinking .dm-ring, .dean-mark.speaking svg { animation: none; }
}
.dean-cmd { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; padding: 9px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.dean-cmd input { flex: 1; border: none; outline: none; background: transparent; color: var(--ink); font-size: 14px; min-width: 0; }
.dean-cmd input::placeholder { color: var(--ink-3); }
.dean-cmd:focus-within { border-color: var(--navy); }
/* Dean launcher shows his own emblem (rendered inline in the button), not a glyph. */
.ai-fab::before, .ai-fab.dean::before { content: none; }
.ai-fab .dean-mark { flex: none; margin: -3px 0; }
.ai-fab .dm-ring { opacity: .9; } /* dashed golden halo reads as a badge on the navy pill */
.dean-mark.listening svg { animation: dean-breathe 1.1s ease-in-out infinite; }
.dean-mark.listening .dm-ring { opacity: 1; }
.dean-mic[aria-pressed="true"] { background: var(--navy); color: var(--yellow); border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .dean-mark.listening svg { animation: none; } }
/* Dean avatar (face variant) — blink, look-up, talk, perk. All transform-box:
   fill-box so SVG transforms anchor on the element, not the canvas. */
.dean-mark .dm-lid, .dean-mark .dm-eyes, .dean-mark .dm-mouth-open { transform-box: fill-box; }
.dean-mark.has-face .dm-lid { transform: scaleY(0); transform-origin: center top; animation: dean-blink 4.6s infinite; }
.dean-mark.has-face .dm-lid:last-of-type { animation-delay: 0.05s; }
@keyframes dean-blink { 0%, 92%, 100% { transform: scaleY(0); } 94%, 97% { transform: scaleY(1); } }
.dean-mark .dm-mouth-open { opacity: 0; transform-origin: center; }
.dean-mark.speaking .dm-mouth { opacity: 0; }
.dean-mark.speaking .dm-mouth-open { opacity: 1; animation: dean-talk 0.26s ease-in-out infinite alternate; }
@keyframes dean-talk { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
.dean-mark .dm-eyes { transform-origin: center; transition: transform 0.25s ease; }
.dean-mark.thinking .dm-eyes { transform: translateY(-1.4px); }
.dean-mark.listening .dm-eyes { transform: scale(1.14); }
.dean-mark.thinking.has-face .dm-mouth { d: path('M18 28.5 Q22 27.5 26 28.5'); }
@media (prefers-reduced-motion: reduce) {
  .dean-mark.has-face .dm-lid, .dean-mark.speaking .dm-mouth-open { animation: none; }
  .dean-mark.speaking .dm-mouth { opacity: 1; }
  .dean-mark.speaking .dm-mouth-open { opacity: 0; }
}

/* ============================================================
   Timetable Alerts — compose wizard (Who → Message → Check & send) */
.tta-steps { display: flex; align-items: center; gap: 8px; margin: 12px 0 14px; flex-wrap: wrap; }
.tta-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.tta-step.on { color: var(--navy); }
.tta-step.done { color: color-mix(in srgb, var(--ok) 60%, var(--ink)); }
.tta-step-n { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; background: color-mix(in srgb, var(--ink) 8%, transparent); color: inherit; flex: none; }
.tta-step.on .tta-step-n { background: var(--navy); color: #fff; }
.tta-step.done .tta-step-n { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.tta-step-sep { flex: none; width: 16px; height: 1px; background: var(--line); }
.tta-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.tta-modecard { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font-family: var(--font); color: var(--ink); }
.tta-modecard:hover { border-color: color-mix(in srgb, var(--navy) 35%, var(--line)); }
.tta-modecard.on { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
.tta-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.tta-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.tta-row:last-child { border-bottom: 0; }
.tta-row:hover { background: var(--surface-hover); }
.tta-row.off { opacity: 0.55; cursor: default; }
.tta-row input { flex: none; }
.tta-row .pill { margin-left: auto; flex: none; }
.tta-row-m { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tta-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tta-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 7px 14px;
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; }
.tta-chip:hover { border-color: color-mix(in srgb, var(--navy) 35%, var(--line)); }
.tta-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.tta-chip-n { font-size: 11px; font-weight: 500; opacity: 0.75; }
.tta-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px;
  padding: 12px 0 4px; border-top: 1px solid var(--line); position: sticky; bottom: -26px; background: var(--surface); }
.tta-review { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.tta-review-row { display: flex; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tta-review-row:last-child { border-bottom: 0; }
.tta-review-k { flex: none; width: 38px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.tta-preview { border: 1px dashed var(--line); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface-2); }
.tta-preview-btn { display: inline-block; margin-top: 12px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 8px; pointer-events: none; }

/* ============================================================
   Utility layer — inline-style convergence (2026-07-07)
   Faithful class replacements for the inline styles they retire.
   !important intentionally mirrors inline-style precedence, so a
   style→class swap is behaviour-identical wherever compound
   selectors would otherwise outrank a single class.
   Scope: type scale + colour roles only. Layout stays in component
   CSS or inline. New code uses these — no new inline font-size or
   hex colours (PAGE-PATTERNS.md).
   ============================================================ */
.fs-9 { font-size: 9px !important; }
.fs-10 { font-size: 10px !important; }
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16 { font-size: 16px !important; }
.fs-17 { font-size: 17px !important; }
.fs-18 { font-size: 18px !important; }
.fs-19 { font-size: 19px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-23 { font-size: 23px !important; }
.fs-30 { font-size: 30px !important; }
.fw-4 { font-weight: 400 !important; }
.fw-5 { font-weight: 500 !important; }
.fw-6 { font-weight: 600 !important; }
.fw-7 { font-weight: 700 !important; }
.fw-8 { font-weight: 800 !important; }
.c-mut { color: var(--ink-3) !important; }
.c-ink { color: var(--ink) !important; }
.c-ink2 { color: var(--ink-2) !important; }
.c-navy { color: var(--navy) !important; }
.c-bad { color: var(--bad) !important; }
.c-ok { color: var(--ok) !important; }
.c-warn { color: var(--warn) !important; }
.bg-surface { background: var(--surface) !important; }

/* Transfers workspace on a phone: one card per transfer instead of an 8-column table.
   Labels come from data-label on the cells (opt-in per table — reuse the pattern for
   other phone-first lists as they're touched). */
@media (max-width: 640px) {
  #tw_body table, #tw_body tbody, #tw_body tr, #tw_body td { display: block; width: 100%; }
  #tw_body thead { display: none; }
  #tw_body tr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
  #tw_body td { border: 0; padding: 3px 0; white-space: normal !important; }
  #tw_body td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 84px;
    color: var(--ink-3); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
}

/* ── T2 wow layer: Dean Spotlight · spoken-line highlight · dashboard live pulse ── */
.dean-cmd { position: relative; }
.dean-sugg { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 45; border-radius: 14px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow-pop), inset 0 1px 0 var(--glass-hi); animation: ai-panel-in 0.18s var(--ease); }
.dean-sugg .ds-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 0; background: none;
  border-radius: 9px; font-family: var(--font); font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: left; }
.dean-sugg .ds-item svg { width: 16px; height: 16px; color: var(--ink-2); flex: none; }
.dean-sugg .ds-item .ds-l { font-weight: 600; flex: 1; }
.dean-sugg .ds-item .ds-g { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.dean-sugg .ds-item:hover, .dean-sugg .ds-item.sel { background: color-mix(in srgb, var(--navy) 10%, transparent); }
.dean-sugg .ds-item.sel .ds-l { color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .dean-sugg { animation: none; } }
/* the card Dean is reading aloud right now */
.dean-line.speaking-line { border-color: color-mix(in srgb, var(--yellow) 60%, var(--line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 22%, transparent), var(--shadow-sm); }
/* dashboard breathes visibly: pulsing live dot + celebratory all-clear hero */
.gsub .livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  margin: 0 3px 0 2px; vertical-align: 1px; animation: live-pulse 2.4s var(--ease) infinite; }
@keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(52, 199, 89, 0); } }
@media (prefers-reduced-motion: reduce) { .gsub .livedot { animation: none; } }
.gsub .clearcheck { color: var(--ok); font-weight: 700; }
.hero.hero-clear::after { background: radial-gradient(420px 200px at 0% 0%, rgba(52, 199, 89, 0.12), transparent 70%),
  radial-gradient(360px 180px at 100% 120%, rgba(245, 181, 23, 0.1), transparent 70%); }

/* ── Record Timeline (records.timeline BETA) ── */
.tl-card { padding: 14px 18px; }
.tl-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); position: relative; }
.tl-row:last-of-type { border-bottom: 0; }
.tl-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
  background: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); }
.tl-body { flex: 1; min-width: 0; }
.tl-meta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.tl-when { flex: none; white-space: nowrap; }

/* ── Case history as an activity feed (openComplaintDetail → #c_notes). Each note is
   typed by "kind" (rail + badge); who spoke is an avatar/name; system-written notes
   render as slim event rows, not cards. Presentation only — data is unchanged. ── */
.c-hist { display: flex; flex-direction: column; }
.c-day { display: flex; align-items: center; gap: 10px; margin: 12px 2px 4px; }
.c-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.c-day span { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.c-ev { display: flex; gap: 11px; padding: 10px 11px; border-radius: 12px; }
.c-ev:hover { background: var(--surface-2); }
.c-ev .c-rail { flex: none; width: 3px; border-radius: 2px; align-self: stretch; background: var(--k-log); }
.c-ev[data-k="incident"] .c-rail { background: var(--k-incident); }
.c-ev[data-k="damage"] .c-rail { background: var(--k-damage); }
.c-ev[data-k="agency"] .c-rail { background: var(--k-agency); }
.c-ev[data-k="reply"] .c-rail { background: var(--k-reply); }
.c-av { flex: none; width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: #fff; background: var(--navy); letter-spacing: 0.02em; }
.c-av[data-at="student"] { background: var(--yellow); color: #4a3a00; }
.c-av[data-at="agency"] { background: var(--k-agency); }
.c-av[data-at="provider"] { background: #7b8698; }
.c-ev .c-main { flex: 1; min-width: 0; }
.c-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.c-who { font-size: 13px; font-weight: 700; color: var(--ink); }
.c-role { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.c-when { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.c-kind::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.c-kind[data-k="incident"] { color: var(--k-incident); background: color-mix(in srgb, var(--k-incident) 13%, transparent); }
.c-kind[data-k="damage"] { color: var(--k-damage); background: color-mix(in srgb, var(--k-damage) 15%, transparent); }
.c-kind[data-k="agency"] { color: var(--k-agency); background: color-mix(in srgb, var(--k-agency) 13%, transparent); }
.c-kind[data-k="reply"] { color: var(--k-reply); background: color-mix(in srgb, var(--k-reply) 15%, transparent); }
.c-kind[data-k="log"] { color: var(--k-log); background: color-mix(in srgb, var(--k-log) 13%, transparent); }
.c-txt { font-size: 13px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.c-txt.c-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.c-more { margin-top: 4px; font-size: 11.5px; font-weight: 650; color: var(--navy); background: none; border: 0; padding: 0; cursor: pointer; }
.c-more:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.c-sys { display: flex; align-items: center; gap: 9px; margin: 5px 4px; padding: 7px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--k-log) 8%, transparent); font-size: 12px; color: var(--ink-2); }
.c-sys[data-k="incident"] { background: color-mix(in srgb, var(--k-incident) 9%, transparent); }
.c-sys[data-k="ok"] { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.c-sys .c-sys-ico { flex: none; color: var(--k-log); font-weight: 700; }
.c-sys[data-k="incident"] .c-sys-ico { color: var(--k-incident); }
.c-sys[data-k="ok"] .c-sys-ico { color: var(--ok); }
.c-sys b { color: var(--ink); font-weight: 700; }
.c-sys .c-when { margin-left: auto; }
/* comms channel chip on a history row */
.c-chan { font-size: 10.5px; font-weight: 600; color: var(--ink-3); background: color-mix(in srgb, var(--ink) 6%, transparent); padding: 1.5px 7px; border-radius: 999px; }
/* note-type composer selects */
.c-nt { font-family: var(--font); font-size: 12.5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
/* costs & recovery panel */
.c-costsum { font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.c-cost-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; font-size: 13px; }
.c-cost-fig { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.c-out { color: var(--bad); font-weight: 700; }
/* "was there an incident?" step at case closure */
.ic-choices { display: flex; flex-direction: column; gap: 8px; }
.ic-choice { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.ic-choice:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.ic-choice > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ic-ico { font-size: 17px; line-height: 1.3; flex: none; }
.ic-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 11px; margin-bottom: 6px; font-size: 13px; }
/* safeguarding panel */
.sg-card { border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--line)); }
.sg-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.sg-toggle input, .sg-check input { width: 16px; height: 16px; accent-color: var(--bad); }
.formgrid label.sg-check { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; font-size: 13px; color: var(--ink); }
.sg-check input { flex: none; }
.sg-stamps { display: flex; flex-direction: column; gap: 6px; }
.sg-stamp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.sg-stamp > .muted { min-width: 190px; }
/* Cases board triage + watchers (Cases-plus Batch 3) */
.cwcard { padding: 12px 14px; margin-bottom: 10px; cursor: pointer; }
.cwcard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cwcard.cw-dragging { opacity: 0.5; }
.cw-inner { display: flex; align-items: flex-start; gap: 8px; }
.cw-main { flex: 1; min-width: 0; }
.cw-sel { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--navy); }
.cw-av { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 9.5px; font-weight: 700; display: inline-grid; place-items: center; }
.cw-drop { min-height: 40px; border-radius: 12px; transition: background 0.12s; }
.cw-drop.cw-over { background: color-mix(in srgb, var(--navy) 10%, transparent); outline: 2px dashed color-mix(in srgb, var(--navy) 40%, transparent); outline-offset: -2px; }
.cw-empty { padding: 8px; }
.cw-bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.watchers { display: flex; flex-wrap: wrap; gap: 6px; }
.watcher-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 10%, transparent); color: var(--ink); }
.watcher-chip .wx { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 11px; padding: 0; line-height: 1; }
.watcher-chip .wx:hover { color: var(--bad); }
/* Cases reports trend bars (Cases-plus Batch 4) */
.tr-chart { display: flex; align-items: flex-end; gap: 10px; height: 120px; margin-top: 10px; padding-top: 14px; }
.tr-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 4px; }
.tr-bar { width: 100%; max-width: 46px; background: color-mix(in srgb, var(--navy) 70%, transparent); border-radius: 6px 6px 0 0; position: relative; min-height: 3px; transition: height 0.3s var(--ease); }
.tr-n { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tr-lbl { font-size: 11px; color: var(--ink-3); }

/* ── Pinned nav star (hover affordance; filled gold when pinned) ── */
.nav-item .pin-star { margin-left: auto; font-size: 12px; line-height: 1; opacity: 0; flex: none;
  padding: 2px 3px; border-radius: 5px; transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); }
.nav-item:hover .pin-star { opacity: 0.55; }
.nav-item .pin-star:hover { opacity: 1; transform: scale(1.2); }
.nav-item .pin-star.on { opacity: 0.9; color: var(--yellow); }
.nav-item.active .pin-star.on { color: var(--yellow); }
@media (pointer: coarse) { .nav-item .pin-star { opacity: 0.45; } } /* touch has no hover */

/* ── Course catalogue (grouped menu: search, family accents, price) ───────── */
.cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cat-search { width: 100%; max-width: 340px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 13px; }
.cat-search:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-50); }
.cat-group { margin-bottom: 22px; }
.cat-head { display: flex; align-items: center; gap: 9px; padding: 0 2px 6px; margin-bottom: 6px; border-bottom: 2px solid var(--navy); }
.cat-title { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy); }
.cat-count { font-size: 11px; font-weight: 600; color: var(--navy); background: var(--navy-50); border-radius: 20px; padding: 1px 9px; }
.cat-tbl tbody tr { transition: background 0.12s ease; }
.cat-tbl tbody tr:hover { background: var(--navy-50); }
.cat-tbl td.cat-price, .cat-tbl th.cat-price { text-align: right; white-space: nowrap; }
.cat-tbl td.cat-when { max-width: 240px; line-height: 1.45; }

/* ===== Org chart (moved from smOrgChart inline <style> — theme-aware via --oc-* tokens) ===== */
.oc-wrap { overflow-x: auto; padding: 10px 4px 18px; }
.oc-tree { display: flex; gap: 28px; justify-content: center; min-width: max-content; }
.oc-node { display: flex; flex-direction: column; align-items: center; }
.oc-card { background: var(--oc-card-bg); color: var(--oc-card-ink); border-radius: 10px; padding: 9px 14px; min-width: 150px; text-align: center; box-shadow: var(--shadow-sm); border-top: 3px solid var(--yellow); }
.oc-card.oc-team { background: var(--oc-team-bg); color: var(--oc-team-ink); border-top: 3px dashed var(--yellow); font-style: italic; }
.oc-avatar { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; margin: 0 auto 6px; border: 2px solid var(--yellow); background: #fff; } /* white avatar bg is a sanctioned exception */
.oc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-avatar-empty { display: flex; align-items: center; justify-content: center; color: #314b76; font-weight: 800; font-size: 20px; font-style: normal; }
.oc-name { font-weight: 700; font-size: 13px; line-height: 1.2; }
.oc-title { font-size: 11px; opacity: 0.85; margin-top: 2px; }
.oc-children { display: flex; gap: 18px; margin-top: 14px; position: relative; padding-top: 14px; }
.oc-children::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--oc-line); }
.oc-branch { display: flex; flex-direction: column; align-items: center; position: relative; }
.oc-branch::before { content: ''; position: absolute; top: -14px; height: 14px; width: 1px; background: var(--oc-line); }

/* Brand chip — navy badge that stays legible in dark mode (avatar initials, active tabs, section badges) */
.brandchip { background: var(--navy); color: #fff; }
[data-theme="dark"] .brandchip { color: #0b1220; }
/* Beta pill — dark amber text on brand yellow (legible both themes; was white-on-yellow) */
.pill.beta { background: var(--yellow); color: #3a2a00; }

/* Staff drawer document-category chips — clickable affordance (they filter on click) */
.st-dcat { cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
.st-dcat:not(.btn-primary):hover { background: color-mix(in srgb, var(--navy) 12%, var(--surface)); border-color: color-mix(in srgb, var(--navy) 35%, transparent); }
/* Salary-locked category (contract/payroll/personal) — amber tint so restricted docs read as restricted in the table too.
   !important: the .dc-cat select carries an inline background/border. */
.dc-locked { border-color: color-mix(in srgb, var(--yellow) 55%, var(--line)) !important; background: color-mix(in srgb, var(--yellow) 12%, var(--surface)) !important; }
[data-theme="dark"] .userchip .av { color: #0b1220; } /* --navy flips light in dark mode; keep initials legible */

/* Any data table on a phone: scroll inside its card, never clip (tablecard is overflow:hidden)
   or blow the page width. The Transfers card-per-row pattern above stays the opt-in upgrade. */
@media (max-width: 640px) {
  .tablecard { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tablecard table { min-width: max-content; }
}

/* ===== Staff file — per-person Staff Management [BETA staff.file] ===== */
.sf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.sf-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sf-metric { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.sf-metric .lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.sf-metric .val { font-size: 24px; font-weight: 800; color: var(--navy); margin-top: 4px; }
.sf-metric .det { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
[data-theme="dark"] .sf-metric .val { color: var(--ink); } /* --navy flips light in dark mode; keep values legible */
.sf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sf-bar { height: 10px; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--line); overflow: hidden; }
.sf-bar > span { display: block; height: 100%; border-radius: 6px; }
.sf-ladder { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.sf-ladder .step { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--surface); }
.sf-ladder .step.cur { border-color: color-mix(in srgb, var(--navy) 55%, var(--line)); background: color-mix(in srgb, var(--navy) 8%, var(--surface)); }
.sf-ladder > span { align-self: center; }

/* ── Class manager wizard: day chips (scheduling.classManager) ── */
.wz-day { min-width: 44px; }
.wz-day.active {
  background: var(--navy); color: #fff; font-weight: 600;
  border-color: var(--navy);
}

/* ─────────────────────────────────────────────────────────────────────────
   Visual polish pass — 2026-07-11 (CSS-only). Rationale + full audit:
   .ui-design/reviews/lsm-visual-design-audit-2026-07-11.md
   Scope: presentation only (no financial / personal-data / deletion / auth /
   migration surface → compliance-auditor gate N/A). Motion respects reduced-motion.
   NOTE: .seg is now horizontally scrollable on overflow + tab labels nowrap
   (fixes Admin clip / Scheduling+Prices 2-line wrap); stat/pulse/record labels
   moved --ink-3 → --ink-2 for WCAG-legible contrast — see edits above.
   ───────────────────────────────────────────────────────────────────────── */

/* V5 — quiet the sidebar footer toggles so they don't out-shout the nav. */
.side-foot .theme-toggle { background: color-mix(in srgb, var(--ink) 4%, transparent); border-color: transparent; box-shadow: none; }
.side-foot .theme-toggle:hover { background: var(--surface-hover); border-color: var(--line); color: var(--ink); }

/* Footer utility controls collapse to one icon strip — reclaims vertical space for the nav.
   Labels are kept for screen readers (sr-only) and shown on hover via each button's title. */
.foot-icons { display: flex; gap: 6px; margin-bottom: 8px; }
.foot-icons .theme-toggle { flex: 1 1 0; width: auto; min-width: 0; justify-content: center; gap: 0; padding: 9px 0; }
.foot-icons .theme-toggle svg { width: 18px; height: 18px; }
.foot-icons .theme-toggle span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.foot-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.foot-meta > span { font-size: 11px; color: var(--ink-3); }
.foot-meta #logout { padding: 7px 8px; margin-right: -8px; }
.foot-meta #logout span { font-size: 13px; }

/* V7 — native date/time fields: themed picker glyph + consistent height so they
   stop reading as raw browser chrome beside the crafted inputs. */
input[type=date], input[type=time], input[type=datetime-local] { min-height: 40px; }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: 0.55; transition: opacity 0.18s var(--ease); }
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover { opacity: 0.9; }
[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.5; }

/* V4 — the empty-state glyph breathes, so an empty list reads composed, not broken. */
@keyframes lsm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.empty::before, .empty .empty-ic { animation: lsm-float 5.5s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .empty::before, .empty .empty-ic { animation: none; } }

/* ════════════════════════════════════════════════════════════════════════
   Enquiry detail panel — colour-coded section cards + summary tiles
   (enquiry.salesWorkspace beta). Token-only; dark-mode paired. Each card
   carries a muted colour identity via --enq-c for wayfinding, not decoration.
   ════════════════════════════════════════════════════════════════════════ */
.sheet .enq-card, .drawer .enq-card {
  --enq-c: var(--navy);
  --enq-gold: #9a6b00; --enq-teal: #0f7b8a;   /* accessible ink on light */
  position: relative; background: var(--surface);
  border: 1px solid var(--ring); border-radius: var(--r-md);
  padding: 16px 18px 18px; margin-top: 14px; box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .sheet .enq-card, [data-theme="dark"] .drawer .enq-card {
  --enq-gold: var(--yellow); --enq-teal: #5ac8d8;
}
.enq-card::before {
  content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 3px;
  border-radius: 3px; background: var(--enq-c);
}
.enq-card.tint { background: linear-gradient(180deg,
  color-mix(in srgb, var(--enq-c) 6%, var(--surface)), var(--surface) 110px); }
.enq-card.navy  { --enq-c: var(--navy); }
.enq-card.amber { --enq-c: var(--enq-gold); }
.enq-card.green { --enq-c: var(--ok); }
.enq-card.slate { --enq-c: var(--ink-3); }
.enq-card.teal  { --enq-c: var(--enq-teal); }

.enq-chead { display: flex; align-items: center; gap: 11px; }
.enq-ctile {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid;
  place-items: center; color: var(--enq-c);
  background: color-mix(in srgb, var(--enq-c) 15%, transparent);
}
.enq-ctile svg { width: 19px; height: 19px; }
.enq-htext { min-width: 0; }
.enq-ctitle { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.enq-cmeta { font-size: 12px; color: var(--ink-2); font-weight: 500; margin-top: 1px; }
.enq-spacer { flex: 1; }
.enq-card > .kvgrid, .enq-card > .enq-body { margin-top: 12px; }

/* summary tiles: the five things read at a glance */
.enq-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 14px 0 4px;
}
.enq-tile {
  --tc: var(--navy);
  background: var(--surface-2); border: 1px solid var(--ring); border-radius: var(--r-sm);
  padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; min-height: 80px;
}
.enq-tile .tt { display: flex; align-items: center; gap: 6px; }
.enq-tile .ti {
  width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid;
  place-items: center; color: var(--tc);
  background: color-mix(in srgb, var(--tc) 15%, transparent);
}
.enq-tile .ti svg { width: 14px; height: 14px; }
.enq-tile .tl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
}
.enq-tile .tv { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
.enq-tile .ts {
  font-size: 12px; color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums;
}
.enq-tile.off { background: transparent; border-style: dashed; }
.enq-tile.off .tv { color: var(--ink-3); font-weight: 600; }
.enq-tile.off .ti { --tc: var(--ink-3); }

/* deal-journey rail */
.enq-journey {
  display: flex; align-items: flex-start; gap: 0; margin: 16px 0 2px;
  padding: 13px 14px; background: var(--surface-2);
  border-radius: var(--r-md); border: 1px solid var(--ring);
}
.enq-jstep {
  display: flex; flex-direction: column; gap: 5px; align-items: center; flex: 1;
  text-align: center; position: relative;
}
.enq-jstep .jd {
  width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
  flex: none; background: var(--surface); border: 2px solid var(--ink-3);
  color: var(--ink-3); z-index: 1;
}
.enq-jstep .jd svg { width: 12px; height: 12px; }
.enq-jstep.done .jd { background: var(--ok); border-color: var(--ok); color: #fff; }
.enq-jstep.now .jd {
  background: var(--navy); border-color: var(--navy); color: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--navy) 18%, transparent);
}
.enq-jstep .jl { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.enq-jstep.done .jl, .enq-jstep.now .jl { color: var(--ink); }
.enq-jstep .jline {
  position: absolute; top: 11px; left: 50%; width: 100%; height: 2px;
  background: var(--ink-3); opacity: 0.4; z-index: 0;
}
.enq-jstep.done .jline { background: var(--ok); opacity: 1; }
.enq-jstep:last-child .jline { display: none; }

/* auto-draft outcome banner */
.enq-autoband {
  display: flex; gap: 11px; align-items: center; margin-top: 13px; padding: 11px 13px;
  border-radius: 11px; background: color-mix(in srgb, var(--ok) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent);
}
.enq-autoband .b {
  width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid;
  place-items: center; background: var(--ok); color: #fff;
}
.enq-autoband .b svg { width: 16px; height: 16px; }
.enq-autoband .t { font-size: 12.5px; line-height: 1.4; }
.enq-autoband .t b { font-weight: 700; }
.enq-autoband .t span { color: var(--ink-2); }

/* collapsible raw answers inside a card */
.enq-card details.enq-ans { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.enq-card details.enq-ans > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.enq-card details.enq-ans > summary::-webkit-details-marker { display: none; }
.enq-card details.enq-ans > summary .chev { transition: transform 0.2s var(--ease); }
.enq-card details.enq-ans[open] > summary .chev { transform: rotate(90deg); }
.enq-rawgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 26px; margin-top: 10px;
}
.enq-raw {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.enq-raw .rk { color: var(--ink-3); font-weight: 600; }
.enq-raw .rv { color: var(--ink); font-weight: 600; text-align: right; word-break: break-word; }

@media (max-width: 560px) {
  .enq-journey { padding: 12px 6px; }
  .enq-tiles { grid-template-columns: 1fr 1fr; }
}

/* Collapsed "Request" once a quote exists — stops the panel reading double. */
.enq-reqfold { border: 1px solid var(--ring); border-radius: var(--r-sm); background: var(--surface-2); padding: 9px 12px; }
.enq-reqfold > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.enq-reqfold > summary::-webkit-details-marker { display: none; }
.enq-reqfold > summary::before {
  content: "\25B8"; color: var(--ink-3); transition: transform 0.2s var(--ease);
}
.enq-reqfold[open] > summary::before { transform: rotate(90deg); }
.enq-reqfold[open] { background: var(--surface); }
.enq-reqfold-body { margin-top: 10px; }

/* Dashboard sales-funnel widget */
.fnl-cap { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.fnl-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; padding: 4px 0; font-size: 13px; }
.fnl-l { color: var(--ink-2); font-weight: 600; }
.fnl-bar { height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.fnl-bar > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--navy), var(--navy-700)); }
.fnl-v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 96px; }

/* ── Living stat card — KPI strips (Bookings #bstats, Enquiries #stats), 2026-07-11 ──
   icon chip + brand-tinted hero + count-up (statCard()/countUp() in app.js).
   Deliberately NO sparkline/delta: those need a real per-KPI trend series the API
   doesn't expose yet — a fabricated trend in a live ops tool would mislead. */
.mstat { display: flex; flex-direction: column; align-items: flex-start; }
.mstat .mstat-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 12px; }
.mstat .mstat-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--navy-50); color: var(--navy); display: grid; place-items: center; }
.mstat .mstat-ic svg { width: 17px; height: 17px; stroke-width: 1.7; }
.mstat .value { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.mstat .value.good { color: color-mix(in srgb, var(--ok) 60%, var(--ink)); }
.mstat .value.accent { color: var(--navy); }
.mstat .value.alert { color: var(--bad); }
.mstat .label { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 7px; }
.mstat .mstat-sub { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 6px; }
.mstat.mstat-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 6%, var(--surface)), var(--surface));
  border-color: color-mix(in srgb, var(--navy) 20%, var(--ring)); }
.mini .card.mstat { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.mini .card.mstat:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
@media (prefers-reduced-motion: reduce) { .mini .card.mstat:hover { transform: none; } }
/* sparkline + delta on flow-KPI cards (rendered only when real trend data is present) */
.mstat .mstat-top .mkt-delta { margin-left: auto; }
.mstat .mstat-spark { margin-top: 12px; height: 30px; }

/* ── Automations engine view (flag `automations`) ───────────────────────────── */
.am-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 16px; }
.am-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.am-stat .am-n { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.am-stat .am-l { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); font-weight: 600; margin-top: 3px; }
.am-cathead { display: flex; align-items: center; gap: 9px; margin: 18px 2px 8px; }
.am-cathead .am-c { font-size: 11px; color: var(--ink-3); background: var(--surface-2); border-radius: 20px; padding: 1px 9px; font-weight: 600; }
.am-rule { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 12px; margin-bottom: 8px; }
.am-rule.paused { border-left-color: var(--ink-3); opacity: .78; }
.am-rule.dead { border-left-color: var(--bad); }
.am-rule-in { display: flex; gap: 13px; align-items: flex-start; padding: 12px 14px; }
.am-toggle { flex-shrink: 0; width: 38px; height: 22px; border-radius: 20px; background: var(--ok); position: relative; cursor: pointer; border: 0; margin-top: 2px; }
.am-toggle::after { content: ""; position: absolute; top: 2px; left: 18px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.am-toggle.off { background: var(--ink-3); } .am-toggle.off::after { left: 2px; }
.am-rbody { flex: 1; min-width: 0; }
.am-chips { display: flex; gap: 6px 11px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.am-chip { font-size: 11.5px; color: var(--ink-2); } .am-chip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.am-ch { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
.am-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--surface-2); color: var(--ink-3); }
.am-badge.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.am-badge.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.am-build { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.am-ai { background: color-mix(in srgb, var(--navy) 7%, var(--surface)); border: 1px solid var(--line); border-radius: 12px; padding: 15px; }
.am-ai-in { display: flex; gap: 9px; margin-top: 10px; }
.am-ai-in input { flex: 1; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.am-eg { font: inherit; font-size: 11.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; color: var(--ink-2); cursor: pointer; margin: 3px 2px 0 0; }
.am-eg:hover { border-color: var(--navy); color: var(--navy); }
.am-step { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.am-step .am-k { width: 60px; flex-shrink: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); font-weight: 700; }
.am-pill { font-size: 12.5px; border-radius: 8px; padding: 5px 10px; }
.am-pill.trig { background: color-mix(in srgb, var(--navy) 14%, transparent); color: var(--navy); font-weight: 600; }
.am-pill.cond { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); font-weight: 600; }
.am-pill.act { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); font-weight: 600; }
.am-explain { background: var(--surface-2); border-radius: 10px; padding: 11px 13px; margin-top: 14px; color: var(--ink-2); }
.am-fired { background: var(--surface-2); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; }

/* ── AI Behaviour Studio (Phase 1, flag ai.promptStudio) — theme vars only ── */
.ais-wrap { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.ais-rail { position: sticky; top: 12px; max-height: calc(100vh - 90px); overflow-y: auto; padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.ais-group-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 12px 4px 4px; }
.ais-item { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.ais-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ais-item.active { background: color-mix(in srgb, var(--navy) 12%, transparent); }
.ais-item-title { font-size: 13px; font-weight: 600; }
.ais-item-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.ais-item-pills .pill { font-size: 10px; padding: 1px 7px; }
.ais-head { margin-bottom: 12px; }
.ais-locked-banner { border: 1.5px dashed color-mix(in srgb, var(--navy) 45%, transparent); background: color-mix(in srgb, var(--navy) 7%, var(--surface)); color: var(--ink); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.ais-card { margin-bottom: 12px; }
.ais-card-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ais-body { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; color: var(--ink); background: color-mix(in srgb, var(--ink) 3%, transparent); border-radius: 10px; padding: 12px 14px; overflow-x: auto; }
.ais-editor { width: 100%; min-height: 220px; resize: vertical; font: inherit; font-size: 13.5px; line-height: 1.55; color: var(--ink); background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 10px; padding: 10px 12px; }
.ais-lab { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.ais-lab input, .ais-lab select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 8px; padding: 6px 9px; }
.ais-fieldrow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px; gap: 10px; margin-top: 10px; }
.ais-history { margin-top: 4px; }
.ais-history summary { cursor: pointer; color: var(--ink-2); font-size: 13px; padding: 6px 2px; }
.ais-hist-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ais-hist-table th { text-align: left; color: var(--ink-2); font-weight: 600; padding: 6px 8px; }
.ais-hist-table td { padding: 6px 8px; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.ais-hist-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ais-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.ais-pkg-parts { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 980px) {
  .ais-wrap { grid-template-columns: 1fr; }
  .ais-rail { position: static; max-height: none; }
  .ais-fieldrow { grid-template-columns: 1fr; }
  .ais-compare { grid-template-columns: 1fr; }
}

/* ── AI activity (Phase 3 execution receipts) ── */
.ais-timeline { list-style: none; margin: 14px 0 0; padding: 0; }
.ais-step { display: flex; align-items: baseline; gap: 10px; padding: 7px 0 7px 18px; position: relative; border-left: 2px solid color-mix(in srgb, var(--ink) 14%, transparent); margin-left: 6px; }
.ais-step::before { content: ''; position: absolute; left: -5px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 35%, transparent); }
.ais-step.warn::before { background: var(--warn); }
.ais-step.bad::before { background: var(--bad); }
.ais-step-label { font-size: 13px; font-weight: 600; color: var(--ink); min-width: 150px; }

/* ── Test Lab (Phase 6, flag ai.testLab) ── */
.ais-tl-banner { border: 1.5px dashed color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.ais-tl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }

/* ── Communications workspace (Phase 5, flag communication.workspace) ── */
.cw-row { cursor: pointer; }
.cw-cand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); margin-top: 6px; }

/* ── i18n / RTL baseline (P0, flag i18n.core) ─────────────────────────────
   The multilingual programme ships Arabic (dir="rtl"). Convention for ALL new
   or edited rules: use CSS *logical* properties so RTL mirrors for free —
     margin-inline / padding-inline  (not margin-left / margin-right)
     inset-inline-start / -end       (not left / right)
     text-align: start / end         (not left / right)
     border-inline-start / -end      (not border-left / border-right)
   Physical left/right only for direction-invariant cases (e.g. an icon that
   must never flip). Dark-mode still applies: use var(--surface)/var(--ink),
   never a hardcoded #fff. The runtime (i18n-runtime.js) sets <html dir> from
   the active locale; this block only takes effect when that dir is "rtl", so
   it is inert for the 20 LTR locales and cannot affect the current LTR UI.
   The full physical→logical sweep of legacy rules lands in P3 (public pages)
   and P6 (staff console); this establishes the convention + the essentials. */
[dir="rtl"] body { text-align: start; }
/* Directional glyphs must point the other way when the document flips. */
[dir="rtl"] .chev,
[dir="rtl"] .caret,
[dir="rtl"] .i-chevron-right,
[dir="rtl"] .i-arrow-left,
[dir="rtl"] .i-arrow-right { transform: scaleX(-1); }

/* ── Links & QR (flag links.qr) ───────────────────────────────────────────
   Dynamic short links + branded QR codes. Screen surfaces run on theme tokens
   (var(--surface)/var(--ink) — dark-mode rule); the ONLY hardcoded white is
   inside the QR <img> itself, which is inherently white (like signature
   canvases). Print rules flatten to paper white by definition of the medium. */
.lk-bars { display: flex; gap: 1px; align-items: flex-end; height: 40px; margin-top: 8px; }
.lk-bars span { flex: 1 1 auto; min-width: 1px; background: var(--navy); border-radius: 1px 1px 0 0; }
.lk-print-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.lk-print-card { margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 18px; text-align: center;
  background: var(--surface); break-inside: avoid; page-break-inside: avoid; }
.lk-print-card img { width: 100%; max-width: 300px; aspect-ratio: 1 / 1; background: #fff; /* QR quiet zone is white by spec */
  border-radius: 8px; }
.lk-print-card figcaption { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.lk-print-card figcaption strong { font-size: 15px; color: var(--ink); }
.lk-print-card figcaption span { font-size: 12px; color: var(--ink-2); word-break: break-all; }
/* Migration Preview hub — QR thumbnail strip */
.mp-qr-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.mp-qr-thumb { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 108px; }
.mp-qr-thumb img { width: 96px; height: 96px; background: #fff; /* QR quiet zone is white by spec */
  border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.mp-qr-thumb figcaption { max-width: 104px; text-align: center; word-break: break-all; }
/* Level Changes → QR & forms tab: inline QR preview cards */
.lc-qr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.lc-qr-card { margin: 0; }
.lc-qr-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; /* QR quiet zone is white by spec — scans in either theme */
  display: grid; place-items: center; aspect-ratio: 1 / 1; }
.lc-qr-box img { width: 100%; height: auto; display: block; }
@media print {
  /* Only while the print-sheet view is up (body.lk-printing set by viewLinksPrint):
     strip the app shell so File→Print yields clean A4 QR cards, two per row. */
  body.lk-printing .sidebar, body.lk-printing .mtop, body.lk-printing .navscrim,
  body.lk-printing .grain, body.lk-printing .toasthost, body.lk-printing #notifbell,
  body.lk-printing #aiFab, body.lk-printing #aiPanel,
  body.lk-printing #lk_back, body.lk-printing #lk_doprint { display: none !important; }
  body.lk-printing .shell { display: block; }
  body.lk-printing .main { padding: 0; }
  body.lk-printing .lk-print-grid { grid-template-columns: repeat(2, 1fr); gap: 10mm; }
  body.lk-printing .lk-print-card { border-color: #ddd; background: #fff; }
  body.lk-printing .lk-print-card figcaption strong,
  body.lk-printing .lk-print-card figcaption span { color: #000; }
}

/* ===== School Calendar (calx) — wall-planner month grid, year overview, list polish ===== */
.calx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.calx-title { font-size: 19px; font-weight: 700; color: var(--ink); }
.calx-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calx-dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-2); padding: 2px 0 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.calx-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); min-height: 96px; padding: 6px 6px 4px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; overflow: hidden; transition: background 0.15s var(--ease); }
.calx-day:hover { background: var(--surface-hover); }
.calx-day:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.calx-day.wknd { background: var(--surface-2); }
.calx-day.wknd:hover { background: var(--surface-hover); }
.calx-day.out { opacity: 0.45; }
.calx-day.today { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.calx-dnum { font-size: 12px; font-weight: 600; color: var(--ink-2); line-height: 1; padding: 2px 0; }
.calx-day.today .calx-dnum { color: var(--oc-card-ink); background: var(--navy); border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.calx-chip { --cc: var(--navy); font-size: 11px; line-height: 1.3; padding: 2px 6px 2px 5px; border-radius: 5px; background: color-mix(in srgb, var(--cc) 16%, transparent); border-left: 3px solid var(--cc); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; flex: none; }
.calx-chip:hover { background: color-mix(in srgb, var(--cc) 30%, transparent); }
.calx-chip.cont { height: 7px; padding: 0; border-left: none; border-radius: 3px; background: color-mix(in srgb, var(--cc) 45%, transparent); }
.calx-chip.prov { border: 1px dashed var(--cc); border-left: 3px solid var(--cc); background: color-mix(in srgb, var(--cc) 8%, transparent); }
.calx-chip.prov.cont { border: none; opacity: 0.6; }
.calx-chip.arch { text-decoration: line-through; opacity: 0.5; }
.calx-more { font-size: 11px; font-weight: 600; color: var(--ink-2); background: none; border: none; padding: 0 0 2px 5px; cursor: pointer; text-align: left; font-family: var(--font); }
.calx-more:hover { color: var(--ink); }
.calx-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; }
.calx-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); background: none; border: none; padding: 2px 0; cursor: pointer; font-family: var(--font); }
.calx-lg i { width: 10px; height: 10px; border-radius: 3px; background: var(--cc); flex: none; }
.calx-lg:hover { color: var(--ink); }
.calx-lg.on { color: var(--ink); font-weight: 700; }
.calx-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--cc, var(--navy)); display: inline-block; flex: none; }
.calx-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.calx-mini { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px 12px; }
.calx-mini h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.calx-mini h4:hover { color: var(--navy); text-decoration: underline; }
.calx-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.calx-mini-dow { font-size: 9px; text-align: center; color: var(--ink-3); font-weight: 600; padding-bottom: 2px; }
.calx-mini-day { font-size: 10px; text-align: center; padding: 2px 0; border-radius: 4px; color: var(--ink-2); }
.calx-mini-day.has { --cc: var(--navy); background: color-mix(in srgb, var(--cc) 24%, transparent); color: var(--ink); font-weight: 700; cursor: pointer; }
.calx-mini-day.today { box-shadow: inset 0 0 0 1px var(--navy); }
.calx-dayrow { --cc: var(--navy); display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; margin-bottom: 6px; font-family: var(--font); font-size: 13px; text-align: left; }
.calx-dayrow:hover { background: var(--surface-hover); }
.calx-rowname { cursor: pointer; }
.calx-rowname:hover { text-decoration: underline; }
.calx-sep td { padding: 12px 10px 4px; font-size: 11px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; background: transparent; border-bottom: none; }
@media (max-width: 720px) {
  .calx-grid { gap: 3px; }
  .calx-day { min-height: 62px; padding: 4px 3px 3px; border-radius: 7px; }
  .calx-chip { font-size: 9px; padding: 1px 3px 1px 3px; border-left-width: 2px; }
  .calx-title { font-size: 16px; }
  .calx-head { gap: 6px; }
}

@media print {
  /* Only while body.calx-printing (set by the School Calendar Print button): strip the app
     shell + screen chrome so File→Print yields a clean A4-landscape wall calendar. Print is
     always on white paper, so colours are forced light here regardless of theme. */
  body.calx-printing .sidebar, body.calx-printing .mtop, body.calx-printing .navscrim,
  body.calx-printing .grain, body.calx-printing .toasthost, body.calx-printing #notifbell,
  body.calx-printing #aiFab, body.calx-printing #aiPanel,
  body.calx-printing .topbar .userchip, body.calx-printing .topbar .sub,
  body.calx-printing #cal_add, body.calx-printing #cal_sub,
  body.calx-printing .seg, body.calx-printing .fchips, body.calx-printing .card,
  body.calx-printing #cal_type, body.calx-printing #cal_aud, body.calx-printing .hint,
  body.calx-printing #calx_csv, body.calx-printing #calx_prev, body.calx-printing #calx_next,
  body.calx-printing #calx_today, body.calx-printing #calx_print,
  body.calx-printing .calx-head .c-mut { display: none !important; }
  body.calx-printing .shell { display: block; }
  body.calx-printing .main { padding: 0; }
  body.calx-printing { background: #fff; }
  body.calx-printing .topbar { margin-bottom: 8px; }
  body.calx-printing .topbar h1 { color: #000; font-size: 20px; }
  body.calx-printing .calx-title { color: #000; }
  body.calx-printing .calx-dow { color: #555; }
  body.calx-printing .calx-day { background: #fff; border-color: #ccc; min-height: 74px; break-inside: avoid; }
  body.calx-printing .calx-day.wknd { background: #f4f4f5; }
  body.calx-printing .calx-day.today { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
  body.calx-printing .calx-dnum { color: #333; }
  body.calx-printing .calx-day.today .calx-dnum { background: #000; color: #fff; }
  body.calx-printing .calx-chip { color: #111; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body.calx-printing .calx-more { color: #555; }
  body.calx-printing .calx-legend { margin-top: 16px; }
  body.calx-printing .calx-lg { color: #333; }
  body.calx-printing .calx-lg i, body.calx-printing .calx-mini-day.has, body.calx-printing .calx-dot { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body.calx-printing .calx-mini { background: #fff; border-color: #ccc; break-inside: avoid; }
  body.calx-printing .calx-mini h4 { color: #000; }
  body.calx-printing .calx-mini-day { color: #444; }
  body.calx-printing .calx-mini-day.has { color: #000; }
}

/* ════════════════════════════════════════════════════════════════════════
   Planning Calendar (calendar.planner BETA) — READ-ONLY overlay (Task 11a).
   Week time-grid + month grid + filter bar. Token colours only (dark-safe);
   each item's accent rides the inline --cc set from planColor().
   ════════════════════════════════════════════════════════════════════════ */
.plan-toolbar { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; }
.plan-tbrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.plan-spacer { flex: 1 1 auto; }
.plan-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: var(--font); }
.plan-chip:hover { background: var(--surface-hover); color: var(--ink); }
.plan-chip .sw { --cc: var(--navy); width: 10px; height: 10px; border-radius: 3px; background: var(--cc); flex: none; }
.plan-chip.on { border-color: color-mix(in srgb, var(--navy) 45%, transparent); background: color-mix(in srgb, var(--navy) 12%, var(--surface)); color: var(--ink); }
.plan-chip.off { opacity: 0.7; }
.plan-chip.off .sw { opacity: 0.3; }
.plan-filter { padding: 7px 11px; font-size: 13px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px; outline: none; min-width: 190px; font-family: var(--font); }
.plan-filter:focus { border-color: var(--navy); box-shadow: 0 0 0 3px var(--focus-ring); }
.plan-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.plan-lg { --cc: var(--navy); display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.plan-lg i { width: 10px; height: 10px; border-radius: 3px; background: var(--cc); flex: none; }

/* Interactive week view: "to schedule" rail beside the grid (scheduling:write only). */
.plan-sched { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; align-items: start; }
.plan-rail { padding: 12px; }
@media (max-width: 720px) { .plan-sched { grid-template-columns: 1fr; } }

.plan-week { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.plan-wk-head, .plan-allday { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.plan-wk-head { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.plan-dhead { text-align: center; padding: 7px 2px; border-left: 1px solid var(--line); }
.plan-dhead .dow { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); font-weight: 600; }
.plan-dhead .dnum { display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--ink); min-width: 24px; height: 24px; border-radius: 50%; }
.plan-dhead.today .dnum { background: var(--navy); color: var(--oc-card-ink); }
.plan-gutter { font-size: 10px; color: var(--ink-3); }
.plan-allday { border-bottom: 1px solid var(--line); background: var(--surface-3); }
.plan-allday-lbl { display: flex; align-items: center; justify-content: flex-end; padding: 0 6px 0 0; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; }
.plan-ad-cell { border-left: 1px solid var(--line); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-band { --cc: var(--navy); font-size: 10.5px; line-height: 1.3; padding: 1px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--cc) 20%, var(--surface)); border-left: 3px solid var(--cc); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.plan-band.noclick { cursor: default; }
.plan-band.cancelled { text-decoration: line-through; opacity: 0.5; }
.plan-body { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.plan-hours { position: relative; }
.plan-hr { position: absolute; right: 6px; transform: translateY(-50%); font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.plan-gcol { position: relative; border-left: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--line) 47px, var(--line) 48px); }
.plan-gcol.wknd { background-color: var(--surface-2); }
.plan-ev { position: absolute; --cc: var(--navy); border-radius: 5px; padding: 2px 5px 1px; overflow: hidden; cursor: pointer;
  background: color-mix(in srgb, var(--cc) 26%, var(--surface)); color: var(--ink); border-left: 3px solid var(--cc);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); box-sizing: border-box; }
.plan-ev:hover { background: color-mix(in srgb, var(--cc) 38%, var(--surface)); }
.plan-ev:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.plan-ev .ev-t { font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-ev .ev-m { font-size: 10px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-ev.cancelled { text-decoration: line-through; opacity: 0.55; }
.plan-ev.noclick { cursor: default; }
@media (max-width: 720px) {
  .plan-wk-head, .plan-allday, .plan-body { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); }
  .plan-ev .ev-m { display: none; }
  .plan-dhead .dnum { font-size: 12px; }
}

/* Planning 11b — create/detail/cancel/attendance modals (token-only, dark-mode paired). */
.fw-n { font-weight: 400; }
.plan-clash { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13px;
  color: color-mix(in srgb, var(--warn, #b7791f) 78%, var(--ink));
  background: color-mix(in srgb, var(--warn, #b7791f) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #b7791f) 34%, transparent); }
.plan-clash-list { margin: 4px 0 0; padding-left: 18px; }
.plan-clash-list li { margin-top: 2px; }
.plan-clash-note { margin-top: 4px; font-size: 12px; opacity: 0.85; }
.psd-row { display: flex; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 14px; }
.psd-row:first-child { border-top: 0; }
.psd-k { flex: 0 0 92px; color: var(--ink-2); font-weight: 600; font-size: 12px; padding-top: 1px; }
.psd-v { flex: 1; color: var(--ink); min-width: 0; word-break: break-word; }
.psd-reg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 2px; border-top: 1px solid var(--line); }
.psd-reg-row:first-child { border-top: 0; }
.psd-reg-name { font-size: 14px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psd-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: 0 0 auto; background: var(--surface); }
.psd-seg[data-ro] .psd-seg-b { pointer-events: none; }
.psd-seg-b { border: 0; background: transparent; color: var(--ink-2); font-family: var(--font);
  font-size: 12px; font-weight: 600; padding: 5px 10px; cursor: pointer; border-left: 1px solid var(--line); }
.psd-seg-b:first-child { border-left: 0; }
.psd-seg-b:hover { background: var(--surface-hover); color: var(--ink); }
.psd-seg-b.on.present { background: color-mix(in srgb, var(--ok) 20%, transparent); color: color-mix(in srgb, var(--ok) 60%, var(--ink)); }
.psd-seg-b.on.absent { background: color-mix(in srgb, var(--bad) 18%, transparent); color: color-mix(in srgb, var(--bad) 70%, var(--ink)); }
.psd-seg-b.on.expected { background: var(--surface-2); color: var(--ink); }
#psd_addres .vch_bpick { cursor: pointer; }

/* ════════════════════════════════════════════════════════════════════════
   Tutorials hub — categorized grid + filter bar + video lightbox
   (help.tutorials beta). Token-only; dark-mode paired via existing vars.
   ════════════════════════════════════════════════════════════════════════ */
.tut-controls { display: flex; flex-direction: column; gap: 10px; max-width: 1080px; margin: 0 auto 16px; }
.tut-search { width: 100%; max-width: 340px; padding: 9px 13px; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; outline: none; }
.tut-search:focus { border-color: color-mix(in srgb, var(--navy) 45%, transparent);
  box-shadow: 0 0 0 3px var(--focus-ring); }
.tut-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tut-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px;
  border: 0; background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; }
.tut-tab:hover { background: var(--surface-hover); color: var(--ink); }
.tut-tab.active { color: var(--navy); font-weight: 600; background: color-mix(in srgb, var(--navy) 12%, transparent); }
.tut-count { font-size: 11px; font-weight: 700; opacity: 0.75; }

.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px;
  max-width: 1080px; margin: 0 auto; }
.tut-card { display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi); transition: transform .14s var(--ease), box-shadow .14s var(--ease); }
.tut-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop), inset 0 1px 0 var(--glass-hi); }
.tut-card:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.tut-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/9;
  background: #0e1726 center/cover no-repeat; }
.tut-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; display: grid;
  place-items: center; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 16px;
  padding-left: 3px; }
.tut-dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #fff; font-size: 11px; font-weight: 600; }
.tut-meta { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 15px; }
.tut-cat { align-self: flex-start; letter-spacing: .4px; padding: 3px 9px; border-radius: 999px; }
.tut-title { color: var(--ink); line-height: 1.3; }
.tut-desc { color: var(--ink-3); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }

/* Video lightbox — full-bleed player inside a wide modal */
.modal.tut-video-modal { position: relative; max-width: 860px; padding: 0; overflow: hidden; }
.modal.tut-video-modal .x { position: absolute; top: 8px; right: 10px; float: none; z-index: 3;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  background: rgba(0,0,0,.5); color: #fff; }
.modal.tut-video-modal .x:hover { background: rgba(0,0,0,.72); color: #fff; }
.tut-video { width: 100%; display: block; aspect-ratio: 16/9; background: #0e1726; }
.tut-modal-body { padding: 16px 22px 20px; }

/* ── Admin settings hub (non-technical-first admin, 2026-07-21) ──────────────── */
/* Plain-language landing hub for #/admin: search + Common tasks + grouped list
   cards + an Advanced drawer. All token-based, so light/dark come for free. */
.sh-searchwrap { position: relative; max-width: 920px; margin: 4px 0 24px; }
.sh-searchic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.sh-search { width: 100%; height: 46px; border: none; border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); font: inherit; font-size: 15px; padding: 0 16px 0 44px; outline: none; transition: box-shadow 0.2s var(--ease); }
.sh-search::placeholder { color: var(--ink-3); }
.sh-search:focus { box-shadow: var(--shadow-sm), 0 0 0 4px color-mix(in srgb, var(--navy) 16%, transparent); }

.sh-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 11px 4px; }

#admCommonSec { max-width: 920px; }
.sh-tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 32px; }
.sh-task { display: flex; flex-direction: column; gap: 11px; text-align: left; border: none; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 16px; cursor: pointer; color: inherit; font: inherit; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.sh-task:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sh-task:active { transform: translateY(-1px) scale(0.995); }
.sh-taskchip { width: 38px; height: 38px; border-radius: 11px; background: var(--navy); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--navy) 55%, transparent); }
.sh-taskchip svg { width: 20px; height: 20px; stroke-width: 1.7; }
.sh-tl { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }

.sh-group { max-width: 920px; margin-bottom: 24px; }
.sh-list { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.sh-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: none; background: none; color: inherit; font: inherit; padding: 14px 16px; cursor: pointer; transition: background 0.15s var(--ease); }
.sh-item + .sh-item { box-shadow: inset 0 0.5px 0 var(--line); }
.sh-item:hover { background: var(--surface-2); }
.sh-chip { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--navy-50); color: var(--navy); display: grid; place-items: center; }
.sh-chip svg { width: 20px; height: 20px; stroke-width: 1.7; }
.sh-chip-adv { background: var(--surface-2); color: var(--ink-2); }
.sh-itxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sh-il { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.sh-id { font-size: 13px; color: var(--ink-2); }
.sh-chev { width: 17px; height: 17px; flex-shrink: 0; color: var(--ink-3); }

.sh-adv { max-width: 920px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; margin-top: 4px; }
.sh-summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 15px 16px; cursor: pointer; }
.sh-summary::-webkit-details-marker { display: none; }
.sh-summary:hover { background: var(--surface-2); }
.sh-adv[open] .sh-summary .sh-chev { transform: rotate(90deg); }
.sh-summary .sh-chev { transition: transform 0.25s var(--ease); }
.sh-advbody { box-shadow: inset 0 0.5px 0 var(--line); }
.sh-advnote { font-size: 12.5px; color: var(--ink-2); padding: 12px 16px 4px; line-height: 1.5; }
.sh-advbody .sh-list { box-shadow: none; border-radius: 0; background: none; }

.sh-back { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: var(--navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 2px; margin-bottom: 6px; }
.sh-back svg { width: 16px; height: 16px; }
.sh-back:hover { opacity: 0.7; }
.sh-note { display: flex; gap: 11px; align-items: flex-start; background: var(--navy-50); border-radius: var(--r-sm, 10px); padding: 13px 15px; font-size: 13.5px; line-height: 1.5; color: var(--ink); margin: 4px 0 18px; max-width: 920px; }
.sh-note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--navy); margin-top: 1px; }

@media (max-width: 720px) {
  .sh-tasks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .sh-tasks { grid-template-columns: 1fr; }
}

/* My Workplace: the link / inspector / section tiles drop a bare icon() (no width/height)
   straight into a .card flex row. With no scoped icon rule they expand to fill the card —
   catastrophically so in the full-width inspector card (~1600px). Size them like any other
   inline tile icon. */
#wp-inspector > .card > svg,
#wp-links > .card > svg,
#wp-secs > .card > svg { width: 20px; height: 20px; flex: none; stroke-width: 1.7; }

/* ─────────── Dean by LinguaGo identity (flag: dean.identity — admin beta preview) ───────────
   Flips the brand tokens to the blue→violet gradient world; everything themed off
   --navy/--yellow recolours automatically. Reverts cleanly when the class is absent. */
html.dean-id {
  --navy: #4a5de8; --brand: #4a5de8; --navy-700: #3a49c9; --navy-50: #eceefe;
  --yellow: #7c39ec;
  --grad: linear-gradient(122deg, #1ea7f0 0%, #4a72f2 52%, #7c39ec 100%);
  --oc-card-bg: #4a5de8; --oc-team-ink: #4a5de8;
}
html.dean-id[data-theme="dark"] {
  --navy: #8b9bf5; --brand: #8b9bf5; --navy-700: #a6b2f8; --yellow: #a074ff;
  --bg: #0a1230;
}
html.dean-id .btn-primary { background: var(--grad); }
html.dean-id .btn-primary:hover { background: var(--grad); filter: brightness(1.06); }

/* Dean identity — the D-face mark in the brand lockup (login + sidebar). Theme-swapped;
   mobile .mtop-title is left as the wordmark (it doubles as the section-title bar). */
html.dean-id { --dean-mark: url(/app/brand/dean-mark-light.png); }
html.dean-id[data-theme="dark"] { --dean-mark: url(/app/brand/dean-mark-dark.png); }
html.dean-id .brand::before, html.dean-id .side-brand::before {
  content: ""; flex: none; display: inline-block;
  background: var(--dean-mark) center / contain no-repeat;
}
html.dean-id .brand::before { width: 1.05em; height: 1.05em; margin-right: 0.06em; }
html.dean-id .side-brand::before { width: 1.15em; height: 1.15em; }

/* Dean identity — arrival hero: breathing D-face mark + larger greeting + staggered compose.
   Gated on .dean-id so the standard dashboard hero is untouched for everyone else. */
.hero-dean { display: none; }
html.dean-id .hero-left { display: flex; align-items: center; gap: 18px; }
html.dean-id .hero-dean {
  display: block; width: 64px; height: 64px; flex: none;
  background: var(--dean-mark) center / contain no-repeat;
  filter: drop-shadow(0 8px 20px rgba(90, 110, 240, 0.35));
  animation: dean-hero-breathe 5.2s ease-in-out infinite;
}
html.dean-id .hero .greet { font-size: clamp(26px, 3.1vw, 38px); font-weight: 800; letter-spacing: -0.03em;
  animation: dean-rise 0.7s cubic-bezier(0.34, 1.4, 0.5, 1) 0.06s both; }
html.dean-id .hero .gsub { animation: dean-rise 0.7s cubic-bezier(0.34, 1.4, 0.5, 1) 0.14s both; }
html.dean-id .hero .pulseitem { animation: dean-rise 0.6s cubic-bezier(0.34, 1.4, 0.5, 1) both; }
html.dean-id .hero .pulseitem:nth-child(1) { animation-delay: 0.20s; }
html.dean-id .hero .pulseitem:nth-child(2) { animation-delay: 0.27s; }
html.dean-id .hero .pulseitem:nth-child(3) { animation-delay: 0.34s; }
html.dean-id .hero .pulseitem:nth-child(4) { animation-delay: 0.41s; }
@keyframes dean-hero-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes dean-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.dean-id .hero-dean, html.dean-id .hero .greet, html.dean-id .hero .gsub, html.dean-id .hero .pulseitem { animation: none; }
}

/* Dean identity — the mark+wordmark lockup replaces the redundant brand eyebrow on login. */
html.dean-id .login .eyebrow { display: none; }