/* Dean — premium admin UI. Default palette is DEAN'S OWN (src/config/dean-brand.ts).
   A tenant's real palette arrives from provisioning; never put a customer colour here. */
:root {
  color-scheme: light;
  --brand: #4a5de8;
  --navy: #4a5de8;
  --navy-700: #3a49c9;
  --navy-50: #eceefe;
  --yellow: #d9ad58;
  --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);
  /* Reception tag palette — token NAMES are stored in ReceptionTag.colour, so a
     school's vocabulary never carries a hex value and dark mode can re-point
     every chip in one place. Backgrounds are colour-mixed at paint time so the
     chip stays legible on --surface in both themes. */
  --rcpw-tag-slate: #64748b; --rcpw-tag-navy: var(--navy); --rcpw-tag-amber: #d9820b;
  --rcpw-tag-green: #1a8f4c; --rcpw-tag-red: #c0392b;
  --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: #4a5de8;               /* org chart person card */
  --oc-card-ink: #ffffff;
  --oc-team-bg: #eef1f7;               /* org chart team/group card */
  --oc-team-ink: #4a5de8;
  --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);
  --rcpw-tag-slate: #94a3b8; --rcpw-tag-navy: var(--navy); --rcpw-tag-amber: #ffb340;
  --rcpw-tag-green: #45d17e; --rcpw-tag-red: #ff6b5e;
  --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, .rh-door-main, .rh-chip {
    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; }
/* Quiet link-styled button — the login screens' install shortcut. Inherits the hint's
   muted colour; the icon rides the text baseline. */
.linklike { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
  font: inherit; color: var(--navy); cursor: pointer; text-decoration: none; }
.linklike:hover { text-decoration: underline; }
.linklike:disabled { opacity: .55; cursor: default; text-decoration: none; }


/* ---------- 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.32s 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; }
/* Mascot empty state: superhero Dean replaces the tray (guard on no-access, hero on all-clear). */
.empty.has-dean::before { display: none; }
.empty .empty-dean { height: 190px; width: auto; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.18));
  animation: lsm-float 5.5s var(--ease) infinite; }
.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; }

/* ---------------- top-right dock ----------------
   The bell, the account chip and the Conference-mode button were three independent
   `position: fixed` elements, each hard-coding its own `right` offset and z-index.
   The newest arrival (Conference mode, top-right on 26 Aug) landed straight on top of
   the bell. They now share one flex row, so their order is declared rather than
   arithmetic and no future addition can cover an existing one — append and pick an
   `order`. Deliberately BELOW .scrim (80): an open dialog covers the whole dock, which
   also retires .conf-fab's old habit of floating over modals at z-900. */
.topdock { position: fixed; top: 20px; right: 30px; z-index: 60;   /* the bell's historic offsets — it does not move; the newer items queue to its left */
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px;
  max-width: calc(100vw - 40px);     /* a narrow phone wraps the row instead of pushing items off-screen */
  pointer-events: none; }            /* the gaps between the items stay click-through */
.topdock > * { pointer-events: auto; }
@media (max-width: 980px) { .topdock { top: 64px; } }  /* clear the mobile top bar (.mtop) */

/* ---------------- notification bell + badge (Task 11) ---------------- */
/* position: relative anchors .notifbadge, which used to hang off the fixed positioning. */
.notifbell { position: relative; order: 3; flex: none; 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, #4A5DE8); border-color: var(--navy, #4A5DE8); }
.notifbell svg { width: 20px; height: 20px; }
.notifbadge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--yellow, #D9AD58); 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,#4A5DE8); 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,#4A5DE8); color: #fff; border-color: var(--navy,#4A5DE8); }
.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, #4a5de8 0%, #3a49c9 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; }

/* ============================================================================
   Agent Dean — the character.
   Dean is a person, not a chat bubble with a glyph on it. The launcher shows
   him, the panel shows him reacting, and he changes pose with what he is doing.
   Poses are the shipped mascot renders in /app/img; `.dean-face` frames the
   head out of a full-body render so one asset serves avatar and figure.
   ============================================================================ */

/* --- the face: a head-and-shoulders crop out of a full-body render ---
   The mascot renders are full figures, so the avatar is a framed crop rather
   than a second asset set. `background-size` sets how tightly, and the Y in
   `background-position` sets where the crop sits: percentage positioning is
   resolution-independent, so one pair of numbers serves every avatar size.
   The standing poses share a frame; the crouching one sits lower and larger in
   its own render and needs its own, which is why these are per-pose. */
.dean-face {
  display: inline-block; flex: none; border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 317% auto; background-position: 50% 2%;
  background-color: color-mix(in srgb, var(--navy) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
}
.dean-face.st-idle     { background-image: url('/app/img/dean-hover.webp'); }
.dean-face.st-greet    { background-image: url('/app/img/dean-guard.webp'); }
.dean-face.st-thinking { background-image: url('/app/img/dean-globe.webp'); }
.dean-face.st-answer   { background-image: url('/app/img/dean-book.webp'); }
.dean-face.st-steps    { background-image: url('/app/img/dean-timetable.webp'); }
/* Crouched "let me dig for that" render — head lower and larger in frame. */
.dean-face.st-stumped  { background-image: url('/app/img/dean-hero.webp'); background-size: 250% auto; background-position: 50% 15%; }

/* --- the launcher: he stands in it and breaks the frame at the top --- */
.ai-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 8px; border: none; border-radius: 999px;
  font-family: var(--font); font-weight: 650; 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 .24s var(--spring), filter .2s var(--ease), box-shadow .2s var(--ease);
}
.ai-fab .dean-face {
  width: 40px; height: 40px;
  background-color: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  animation: dean-bob 4.5s var(--ease) infinite;
}
.ai-fab:hover { filter: brightness(1.06); transform: translateY(-2px); }
.ai-fab:hover .dean-face { animation-duration: 1.6s; }
.ai-fab:active { transform: scale(0.97); }
/* Something waiting: he leans out rather than wearing a red dot. */
.ai-fab.has-news .dean-face { animation: dean-peek 2.6s var(--ease) infinite; }
@keyframes dean-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes dean-peek {
  0%, 70%, 100% { transform: translateY(0) rotate(0); }
  78% { transform: translateY(-3px) rotate(-5deg); }
  86% { transform: translateY(-3px) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-fab .dean-face, .ai-fab.has-news .dean-face { animation: none; }
  .ai-fab:hover { transform: none; }
}
/* 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); }

/* ============================================================================
   Agent Dean panel — the character-led chat.
   Wider than the old widget because answers are structured cards (summary,
   steps, cautions, a jump-to link), not one-line replies.
   ============================================================================ */
.ai-panel.dean-panel { width: 428px; height: 600px; }
@media (max-width: 520px) {
  .ai-panel.dean-panel { width: calc(100vw - 20px); right: 10px; bottom: 78px; height: calc(100vh - 100px); }
}

/* --- header: him, his name, and what he is doing right now --- */
.dean-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.dean-head .dean-face { width: 42px; height: 42px; transition: background-image .2s var(--ease); }
.dean-head-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dean-head-n { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; }
.dean-head-s { font-size: 11.5px; color: var(--ink-3); line-height: 1.25; }
.dean-head-s.busy::after { content: '…'; animation: dean-ellipsis 1.2s steps(4) infinite; }
@keyframes dean-ellipsis { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.dean-head .ai-close { margin-left: auto; }
.dean-mode {
  margin-left: auto; margin-right: 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}

/* --- empty state: he greets you and offers somewhere to start --- */
.dean-welcome { margin: auto; text-align: center; padding: 8px 10px 14px; }
.dean-welcome .dean-face { width: 96px; height: 96px; margin: 0 auto 12px; display: block; animation: dean-bob 5s var(--ease) infinite; }
.dean-welcome-t { font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 30ch; margin: 0 auto 14px; }
.dean-starters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dean-chip {
  font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  border-radius: 999px; padding: 6px 12px; transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.dean-chip:hover { border-color: var(--navy); color: var(--navy); background: var(--surface-hover); }

/* --- his turn: the answer card --- */
.dean-turn { display: flex; gap: 9px; align-items: flex-start; }
.dean-turn .dean-face { width: 30px; height: 30px; margin-top: 2px; }
.dean-say {
  flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); border-top-left-radius: 5px; padding: 10px 13px;
  box-shadow: var(--shadow-sm);
}
.dean-card { margin-top: 9px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.dean-card + .dean-card { margin-top: 7px; }
.dean-card-h { padding: 11px 13px 0; font-weight: 650; font-size: 13.5px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.35; }
.dean-card-s { padding: 5px 13px 11px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.dean-steps { margin: 0; padding: 0 13px 11px 30px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.dean-steps li { margin-bottom: 3px; }
.dean-steps li::marker { color: var(--navy); font-weight: 700; }
.dean-note, .dean-warn {
  margin: 0 13px 9px; padding: 8px 11px; border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.5; border-left: 3px solid;
}
.dean-note { background: color-mix(in srgb, var(--ink) 4%, transparent); border-left-color: var(--line); color: var(--ink-2); }
.dean-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); border-left-color: var(--warn); color: var(--ink); }
.dean-card-f {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 13px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.dean-src { font-size: 11.5px; color: var(--ink-3); }
.dean-goto {
  margin-left: auto; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  border: none; border-radius: var(--r-sm); padding: 6px 12px; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 90%, white), var(--navy));
  transition: filter .15s var(--ease), transform .15s var(--ease);
}
.dean-goto:hover { filter: brightness(1.07); }
.dean-goto:active { transform: scale(.97); }
/* Honest badges: a capability you cannot reach, or one switched off entirely. */
.dean-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; }
.dean-badge.gated { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--ink); }
.dean-badge.dark { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-3); }
/* Staff-written answers are visibly not product documentation. */
.dean-card.from-faq { border-style: dashed; }
.dean-card.from-faq .dean-src::before { content: '✎ '; }

/* --- follow-ups --- */
.dean-more { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.dean-more-l { width: 100%; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1px; }

@media (prefers-reduced-motion: reduce) {
  .dean-welcome .dean-face { animation: none; }
  .dean-head-s.busy::after { animation: none; content: '…'; }
}

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

/* Reception — the staff side of a live visitor chat (Customer Service ▸ Conversations).
   Reuses .thread / .thread-bubble from the mail thread above; a chat needs two
   speakers that mail never had, and the visitor's own words must never be
   confusable with either of them:
     .in   (inherited) — the VISITOR: plain surface, left.
     .dean             — an AI turn: brand-yellow tint, left, unmistakably not
                         a person and unmistakably not the visitor.
     .out  (inherited) — the TEAM: navy, right. Us.
     .sys              — a system note or one of Dean's action records: centred,
                         dashed, quiet. Not speech.
   Colours are theme tokens only (no literal #fff) so dark mode follows. */
.thread-bubble.dean { align-self: flex-start; background: color-mix(in srgb, var(--yellow) 15%, var(--surface)); border: 1px solid color-mix(in srgb, var(--yellow) 50%, transparent); border-bottom-left-radius: 5px; color: var(--ink); }
.thread-bubble.sys { align-self: center; max-width: 94%; background: transparent; border: 1px dashed var(--line); box-shadow: none; color: var(--ink-2); font-size: 12.5px; }
/* The transcript ground is recessed, so the VISITOR's own bubble can be the
   plain surface card sitting on it. Scoped to .rcp-log rather than editing
   .thread-bubble.in, which the mail thread above also uses. */
.rcp-log { padding: 12px 14px; background: var(--surface-2); }
.rcp-log .thread-bubble.in { background: var(--surface); }
/* The list row for someone who is actually waiting — same selector form as the
   `tr.row-danger` precedent above, so it wins over the table's own td rules. */
tr.rcp-row-waiting > td { background: color-mix(in srgb, var(--warn) 9%, transparent); }
/* No `display` is set on the composer: an author rule that set one would beat
   the UA's [hidden] rule and the closed-conversation branch would silently do
   nothing (a bug this codebase has shipped before). This makes it explicit. */
.rcp-composer { margin-top: 12px; }
.rcp-composer[hidden] { display: none; }
.rcp-composer textarea { width: 100%; resize: vertical; min-height: 54px; }
.rcp-composer textarea[readonly] { opacity: .65; }

/* 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,#4A5DE8); 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, #D9AD58); 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 ─────────────────────────────────────────── */
/* The SVG roundel mark was retired on 2026-08-03 in favour of the character.
   `.dean-mark` is now just a sizing hook that also carries `.dean-face`, so the
   briefing and command bar keep driving Dean by state without knowing how he is
   drawn. The old `.dm-*` rules (ring, lids, mouth, eyes) went with the SVG. */
.dean-mark { flex: none; }
.dean-mark.thinking { animation: dean-bob 1.6s var(--ease) infinite; }
.dean-mark.speaking { animation: dean-breathe 1.4s ease-in-out infinite; }
.dean-mark.listening { animation: dean-breathe 1.1s ease-in-out infinite; }
@keyframes dean-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .dean-mark.thinking, .dean-mark.speaking, .dean-mark.listening { 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); }
/* The launcher shows Dean himself, never a glyph. */
.ai-fab::before, .ai-fab.dean::before { content: none; }
.dean-mic[aria-pressed="true"] { background: var(--navy); color: var(--yellow); border-radius: 10px; }

/* ============================================================
   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: #4a5de8; 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 layer. 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;
  /* --navy-50 was MISSING here (fixed 2026-07-29): the light block sets it to #eceefe, so
     without a dark counterpart every consumer — .bar, .qlitem .ql-ic, avatar fills, table
     headers — painted a near-white slab on a dark page. Matched to this theme's --bg. */
  --navy-50: #1c2450;
  --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; }

/* Commercial Dean organisation spine — the memorable element on Licence & modules.
   It makes the control hierarchy visible: a site can narrow a school, while the school
   remains inside its chain licence ceiling. */
.cc-overview { overflow: hidden; }
.cc-eyebrow, .cc-node-kicker { display: block; font-size: 10px; line-height: 1.25; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
.cc-spine { display: grid; grid-template-columns: minmax(170px, .9fr) 30px minmax(210px, 1.15fr) 30px minmax(260px, 1.55fr); align-items: stretch; margin-top: 18px; }
.cc-node { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 84px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.cc-node strong { font-size: 14px; line-height: 1.25; letter-spacing: -0.01em; }
.cc-node > span:last-child { font-size: 11.5px; color: var(--ink-2); }
.cc-node-chain { background: color-mix(in srgb, var(--navy) 9%, var(--surface)); border-color: color-mix(in srgb, var(--navy) 25%, var(--line)); }
.cc-node-school { background: var(--surface); box-shadow: inset 3px 0 0 var(--navy); }
.cc-link { align-self: center; height: 1px; background: color-mix(in srgb, var(--navy) 45%, var(--line)); }
.cc-sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cc-node-site { min-height: 84px; padding: 12px 14px; }
.cc-node-site.is-current { border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 10%, transparent); }
@media (max-width: 980px) {
  .cc-spine { grid-template-columns: 1fr; gap: 9px; }
  .cc-link { width: 1px; height: 16px; justify-self: center; }
}
@media (max-width: 580px) { .cc-sites { grid-template-columns: 1fr; } }

/* Chain headquarters — a quiet control plane with a single memorable network rail. */
.chq-hero { --chq-primary:var(--navy); --chq-accent:var(--brand); position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; min-height:172px; padding:28px 30px; margin-bottom:14px; border-radius:20px; color:#fff; background:linear-gradient(118deg,var(--chq-primary),color-mix(in srgb,var(--chq-primary) 78%,#091f33)); }
.chq-hero::after { content:""; position:absolute; right:-54px; top:-86px; width:280px; height:280px; border:1px solid color-mix(in srgb,var(--chq-accent) 70%,transparent); border-radius:50%; box-shadow:0 0 0 34px color-mix(in srgb,var(--chq-accent) 9%,transparent),0 0 0 70px color-mix(in srgb,var(--chq-accent) 6%,transparent); }
.chq-hero > * { position:relative; z-index:1; }
.chq-hero h1 { margin:6px 0 7px; font-size:clamp(25px,4vw,42px); line-height:1; letter-spacing:-.035em; }
.chq-hero p { margin:0; color:rgba(255,255,255,.75); }
.chq-label { display:block; font-size:10px; line-height:1.3; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.chq-hero .chq-label { color:color-mix(in srgb,var(--chq-accent) 85%,white); }
.chq-trust { display:flex; flex-direction:column; align-items:flex-end; gap:7px; font-size:11px; }
.chq-trust span { padding:6px 9px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(255,255,255,.08); backdrop-filter:blur(8px); }
.chq-tabs { width:max-content; margin:0 0 14px; }
.chq-network { display:grid; grid-template-columns:minmax(190px,.72fr) 64px minmax(0,2.3fr); align-items:center; margin-bottom:14px; }
.chq-group-node { display:flex; flex-direction:column; gap:4px; padding:16px 18px; border-radius:16px; color:#fff; background:var(--navy); box-shadow:0 10px 24px rgba(15,45,72,.14); }
.chq-group-node span { font-size:9px; letter-spacing:.14em; opacity:.66; }
.chq-group-node small { opacity:.7; }
.chq-rail-line { height:2px; background:linear-gradient(90deg,var(--navy),color-mix(in srgb,var(--brand) 75%,var(--line))); }
.chq-school-list { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.chq-school-list::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line); z-index:0; }
.chq-school-node { position:relative; z-index:1; display:grid; grid-template-columns:28px minmax(0,1fr) 10px; gap:8px; align-items:center; min-height:78px; padding:12px; border:1px solid var(--line); border-radius:15px; text-align:left; color:var(--ink); background:var(--surface); cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.chq-school-node:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--brand) 55%,var(--line)); }
.chq-school-node.is-current { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent); }
.chq-node-index { display:grid; place-items:center; width:27px; height:27px; border-radius:9px; font-size:10px; font-weight:800; color:var(--navy); background:color-mix(in srgb,var(--brand) 12%,var(--surface-2)); }
.chq-node-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.chq-node-copy strong,.chq-node-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chq-node-copy small { color:var(--ink-3); }
.chq-health { width:8px; height:8px; border-radius:50%; background:var(--ink-3); box-shadow:0 0 0 4px color-mix(in srgb,var(--ink-3) 12%,transparent); }
.chq-health.healthy { background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 14%,transparent); }
.chq-health.attention { background:var(--warn); }
.chq-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr); gap:14px; margin-bottom:14px; }
.chq-school-focus,.chq-pulse-card,.chq-schools-table,.chq-modules,.chq-brand-form,.chq-brand-preview { padding:20px; }
.chq-focus-head,.chq-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.chq-focus-head h2,.chq-section-head h3,.chq-brand-form h3 { margin:5px 0 4px; }
.chq-focus-head p,.chq-pulse-card p { margin:0; color:var(--ink-3); }
.chq-local-rule { display:flex; gap:12px; align-items:center; margin:18px 0; padding:11px 13px; border-radius:12px; background:var(--surface-2); }
.chq-local-rule > span { flex:0 0 4px; align-self:stretch; border-radius:99px; background:var(--brand); }
.chq-local-rule p { margin:0; font-size:12px; color:var(--ink-2); }
.chq-school-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.chq-school-metrics > div { padding:12px; border:1px solid var(--line); border-radius:12px; }
.chq-school-metrics span { display:block; min-height:28px; font-size:10px; line-height:1.25; color:var(--ink-3); }
.chq-school-metrics strong { font-size:22px; letter-spacing:-.03em; }
.chq-pulse-card { color:#fff; background:linear-gradient(145deg,var(--navy),color-mix(in srgb,var(--navy) 84%,#071727)); border-color:transparent; }
.chq-pulse-card .chq-label { color:rgba(255,255,255,.54); }
.chq-pulse-card p { color:rgba(255,255,255,.62); }
.chq-pulse-number { margin-top:12px; font-size:52px; line-height:.95; font-weight:820; letter-spacing:-.055em; }
.chq-pulse-row { display:flex; justify-content:space-between; gap:10px; padding-top:12px; margin-top:12px; border-top:1px solid rgba(255,255,255,.12); font-size:11px; color:rgba(255,255,255,.78); }
.chq-privacy-note { margin-top:15px; padding:10px; border-radius:10px; font-size:10.5px; line-height:1.4; color:rgba(255,255,255,.6); background:rgba(255,255,255,.06); }
.chq-schools-table tbody tr { cursor:pointer; }
.chq-schools-table tbody tr:hover { background:var(--surface-2); }
.chq-modules .tablewrap { margin-top:14px; }
.chq-modules select { min-width:112px; }
.chq-brand-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.chq-brand-form { display:flex; flex-direction:column; gap:12px; }
.chq-brand-form p { margin:0; }
.chq-brand-form label { display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:700; color:var(--ink-2); }
.chq-brand-form input,.chq-brand-form select { width:100%; }
.chq-colour-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.chq-colour-fields input[type=color] { height:42px; padding:3px; }
.chq-brand-preview { --chq-primary:var(--navy);--chq-accent:var(--brand); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; min-height:310px; color:#fff; background:linear-gradient(145deg,var(--chq-primary),color-mix(in srgb,var(--chq-primary) 78%,#061a28)); }
.chq-brand-preview::before { content:""; position:absolute; right:-50px; top:-50px; width:190px; height:190px; border:28px solid color-mix(in srgb,var(--chq-accent) 18%,transparent); border-radius:50%; }
.chq-brand-preview > * { position:relative; z-index:1; }
.chq-brand-preview .chq-label { color:rgba(255,255,255,.56); }
.chq-preview-mark { display:grid; place-items:center; width:48px; height:48px; margin:18px 0; border-radius:15px; font-size:24px; font-weight:850; color:var(--chq-primary); background:var(--chq-accent); }
.chq-brand-preview h2 { margin:0; font-size:28px; letter-spacing:-.035em; }
.chq-brand-preview p { margin:5px 0 20px; color:rgba(255,255,255,.68); }
.chq-brand-preview button { align-self:flex-start; padding:9px 13px; border:0; border-radius:10px; font-weight:750; color:var(--chq-primary); background:var(--chq-accent); }
/* Chain HQ drill-down layer — every panel, line and school opens detail (2026-08-03). */
/* Buttons do not inherit typography by default — reset first, sizes re-assert below. */
button.chq-group-node, .chq-trust button, .chq-metric-tile, .chq-dossier-tile, .chq-bar-row,
button.chq-local-rule-link, button.chq-privacy-note-link, button.chq-defrow-link,
.chq-module-name, .chq-inline-link, .chq-pulse-link { font:inherit; }
.chq-trust button { padding:6px 9px; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:#fff; background:rgba(255,255,255,.08); backdrop-filter:blur(8px); font-size:11px; cursor:pointer; transition:background .16s ease; }
.chq-trust button:hover { background:rgba(255,255,255,.18); }
button.chq-group-node { border:0; text-align:left; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease; }
button.chq-group-node:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(15,45,72,.2); }
.chq-focus-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.chq-metric-tile { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px; border:1px solid var(--line); border-radius:12px; text-align:left; color:var(--ink); background:var(--surface); cursor:pointer; transition:transform .16s ease,border-color .16s ease; }
.chq-metric-tile:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--brand) 55%,var(--line)); }
.chq-metric-tile > span { display:block; min-height:28px; font-size:10px; line-height:1.25; color:var(--ink-3); }
.chq-metric-tile > strong { font-size:22px; letter-spacing:-.03em; }
button.chq-local-rule-link { width:100%; border:0; text-align:left; cursor:pointer; }
button.chq-local-rule-link:hover { background:color-mix(in srgb,var(--brand) 8%,var(--surface-2)); }
.chq-pulse-link { border:0; padding:0; font:inherit; color:inherit; background:none; text-align:left; cursor:pointer; text-decoration-line:underline; text-decoration-color:rgba(255,255,255,.28); text-underline-offset:3px; }
.chq-pulse-link:hover { text-decoration-color:rgba(255,255,255,.75); }
button.chq-pulse-number { display:block; font-size:52px; line-height:.95; font-weight:820; letter-spacing:-.055em; }
button.chq-privacy-note-link { display:block; width:100%; border:0; font-size:10.5px; line-height:1.4; text-align:left; cursor:pointer; }
button.chq-privacy-note-link:hover { background:rgba(255,255,255,.12); }
.chq-inline-link { border:0; padding:0; font-size:12px; font-weight:600; color:var(--navy); background:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-align:left; }
.chq-module-name { border:0; padding:0; font:inherit; color:inherit; background:none; cursor:pointer; }
.chq-module-name:hover strong { text-decoration:underline; text-underline-offset:3px; }
.chq-def-list { display:flex; flex-direction:column; margin-top:6px; }
.chq-defrow { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); }
.chq-defrow:last-child { border-bottom:0; }
.chq-defrow > span { text-align:right; }
button.chq-defrow-link { width:100%; border-left:0; border-right:0; border-top:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
button.chq-defrow-link:hover { background:var(--surface-2); }
.chq-swatch { display:inline-block; width:11px; height:11px; margin-left:5px; border-radius:4px; border:1px solid var(--line); vertical-align:middle; }
.chq-spark path { stroke:var(--brand); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.chq-spark-dot { fill:var(--brand); }
.chq-spark-gap { fill:var(--ink-3); opacity:.55; }
.chq-pulse-card .chq-spark path { stroke:#fff; }
.chq-metric-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:16px; }
.chq-metric-big { font-size:34px; font-weight:800; letter-spacing:-.04em; margin-top:6px; }
.chq-metric-hero .chq-spark path { stroke-width:2.2; }
.chq-bar-list { display:flex; flex-direction:column; margin-top:8px; }
.chq-bar-row { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(60px,1fr) auto auto; gap:10px; align-items:center; padding:8px 6px; border:0; border-bottom:1px solid var(--line); background:none; color:inherit; text-align:left; cursor:pointer; }
.chq-bar-row:last-child { border-bottom:0; }
.chq-bar-row:hover { background:var(--surface-2); }
.chq-bar-row.is-focus { background:color-mix(in srgb,var(--brand) 7%,var(--surface)); border-radius:8px; }
.chq-bar-name { min-width:0; display:flex; flex-direction:column; gap:1px; }
.chq-bar-name strong,.chq-bar-name small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chq-bar-track { height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.chq-bar-fill { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 75%,var(--navy)),var(--brand)); }
.chq-bar-value { white-space:nowrap; font-weight:700; }
.chq-dossier-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px; border-radius:14px; color:#fff; background:linear-gradient(130deg,var(--chq-primary,var(--navy)),color-mix(in srgb,var(--chq-primary,var(--navy)) 78%,#091f33)); }
.chq-dossier-head .chq-label { color:color-mix(in srgb,var(--chq-accent,var(--brand)) 85%,white); }
.chq-dossier-head p { color:rgba(255,255,255,.72); }
.chq-dossier-head-pills { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.chq-dossier-tiles { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.chq-dossier-tile { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:11px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); text-align:left; cursor:pointer; transition:transform .16s ease,border-color .16s ease; }
.chq-dossier-tile:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--brand) 55%,var(--line)); }
.chq-dossier-cols { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.chq-audit-list { display:flex; flex-direction:column; margin-top:10px; max-height:52vh; overflow:auto; }
.chq-audit-row { border-bottom:1px solid var(--line); }
.chq-audit-row summary { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 4px; cursor:pointer; list-style:none; }
.chq-audit-row summary::-webkit-details-marker { display:none; }
.chq-audit-row summary:hover { background:var(--surface-2); }
.chq-audit-meta { padding:2px 4px 10px; }
.chq-module-facts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0 4px; }
.chq-site-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:9px; margin-top:10px; }
.chq-site-card { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px; border:1px solid var(--line); border-radius:12px; font:inherit; color:var(--ink); background:var(--surface); text-align:left; cursor:pointer; transition:transform .16s ease,border-color .16s ease; }
.chq-site-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--brand) 55%,var(--line)); }
.chq-site-features { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.chq-site-features em { font-style:normal; font-size:10px; padding:2px 7px; border-radius:99px; color:var(--ink-2); background:var(--surface-2); }
.chq-brand-net-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:9px; margin-top:12px; }
.chq-brand-net-card { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px; border:1px solid var(--line); border-radius:13px; font:inherit; color:var(--ink); background:var(--surface); text-align:left; cursor:pointer; transition:transform .16s ease,border-color .16s ease; }
.chq-brand-net-card::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,var(--chq-primary),var(--chq-accent)); }
.chq-brand-net-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--brand) 55%,var(--line)); }
.chq-brand-net-mark { display:grid; place-items:center; width:30px; height:30px; margin:4px 0 3px; border-radius:9px; font-size:15px; font-weight:850; color:#fff; background:var(--chq-primary); }
.chq-access-register { margin-top:14px; padding:20px; }
@media (prefers-reduced-motion:reduce) { .chq-school-node,.chq-metric-tile,.chq-dossier-tile,button.chq-group-node { transition:none; } }
@media (max-width:1000px) { .chq-network { grid-template-columns:1fr; gap:8px; } .chq-rail-line { width:2px; height:18px; justify-self:center; } .chq-grid,.chq-brand-grid { grid-template-columns:1fr; } }
@media (max-width:720px) { .chq-hero { align-items:flex-start; flex-direction:column; padding:22px; } .chq-trust { align-items:flex-start; } .chq-school-list { grid-template-columns:1fr; } .chq-school-list::before { display:none; } .chq-school-metrics { grid-template-columns:1fr 1fr; } .chq-dossier-tiles { grid-template-columns:1fr 1fr; } .chq-dossier-cols { grid-template-columns:1fr; } .chq-bar-row { grid-template-columns:minmax(0,1fr) auto; } .chq-bar-track,.chq-bar-row .chq-spark { display:none; } }

/* ================= Ask Dean — the team's answer book =================
   Redesigned 2026-07-29. Goal is warmth and calm: a non-technical colleague opens this
   in a hurry and must not meet a wall of text. Category tiles first, answers collapsed
   until wanted. Every colour is a token so both themes come out right — no hardcoded
   #fff (see the dark-mode rule in CLAUDE.md). */

.ask-hero {
  /* Derived from --brand mixed INTO --surface rather than a fixed tint token: --surface is
     theme-aware, so this follows the theme automatically and cannot strand a light slab on
     a dark page if a brand token drifts (which is exactly what --navy-50 did). */
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 24px 22px;
  margin-bottom: 22px;
  text-align: center;
}
.ask-hero-title { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.ask-hero-hint { font-size: 12px; color: var(--ink-3); margin-top: 10px; max-width: 62ch; margin-inline: auto; line-height: 1.5; }
.ask-hero-hint kbd {
  font: inherit; border: 1px solid var(--line); border-radius: 4px;
  padding: 0 5px; background: var(--surface); color: var(--ink-2);
}

.ask-search { display: flex; align-items: center; gap: 8px; max-width: 620px; margin: 16px auto 0; position: relative; }
.ask-search-icon { position: absolute; left: 14px; font-size: 15px; pointer-events: none; opacity: .65; }
.ask-search input {
  flex: 1; padding-left: 40px !important; height: 46px;
  border-radius: var(--r-md); font-size: 15px;
}
.ask-search .btn { height: 46px; padding-inline: 22px; }

.ask-sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 15px; font-weight: 700; color: var(--ink); margin: 4px 0 12px;
}

/* --- Category tiles --- */
.ask-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ask-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; padding: 18px 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); font: inherit; color: var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.ask-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand); }
.ask-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ask-tile-icon { font-size: 26px; line-height: 1.1; margin-bottom: 4px; }
.ask-tile-name { font-size: 15px; font-weight: 600; }
.ask-tile-count { font-size: 12px; color: var(--ink-3); }

/* --- Most asked / Recently added --- */
.ask-strips { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 22px; }
.ask-strip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.ask-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ask-strip-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: 0; border-top: 1px solid var(--line);
  padding: 9px 0; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
}
.ask-strip-row:first-of-type { border-top: 0; }
.ask-strip-row:hover .ask-strip-q { color: var(--brand); }
.ask-strip-q { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-strip-meta { font-size: 11px; color: var(--ink-3); flex: none; }

/* --- Drill-in list --- */
.ask-back {
  background: none; border: 0; padding: 4px 0; margin-bottom: 6px;
  font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.ask-back:hover { color: var(--brand); }
.ask-catfilter { width: 100%; margin-bottom: 12px; }
.ask-list { padding: 4px 16px; }
.ask-item { border-top: 1px solid var(--line); }
.ask-item:first-child { border-top: 0; }
.ask-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: none; border: 0; padding: 14px 0; text-align: left;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.ask-q:hover { color: var(--brand); }
.ask-q:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 4px; }
.ask-q-meta { display: flex; align-items: center; gap: 8px; flex: none; color: var(--ink-3); font-size: 12px; }
.ask-chev { display: inline-block; transition: transform .18s var(--ease); font-size: 16px; }
.ask-item.is-open .ask-chev { transform: rotate(90deg); }
.ask-item.is-open .ask-q { color: var(--brand); }
.ask-a { padding: 0 0 16px; }

/* --- Empty / no-result states --- */
.ask-blank { padding: 34px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ask-blank-icon { font-size: 34px; margin-bottom: 10px; }

.ask-result { padding: 14px 16px; margin-bottom: 10px; }
.ask-result-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }

@media (max-width: 560px) {
  .ask-hero { padding: 20px 16px 18px; }
  .ask-hero-title { font-size: 19px; }
  .ask-search { flex-wrap: wrap; }
  .ask-search input { min-width: 100%; }
  .ask-search .btn { width: 100%; }
  /* The magnifier is absolutely positioned against .ask-search. Once the row wraps it is
     no longer beside the input — it centres across BOTH rows and floats between the field
     and the button. Drop it and restore the normal padding; the placeholder carries the
     affordance on its own at this width. */
  .ask-search-icon { display: none; }
  .ask-search input { padding-left: 13px !important; }
  .ask-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ask-tile, .ask-chev { transition: none; }
  .ask-tile:hover { transform: none; }
}

/* --- Attachment thumbnails + lightbox ---
   A phone photo is several thousand pixels wide. Rendered at container width it buries the
   answer it exists to illustrate (Ashley, 2026-07-29). Thumbnails keep the answer readable;
   the lightbox is where you actually look at the picture. */
.ask-media { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.ask-media-item { max-width: 200px; }
.ask-media-cap { font-size: 11px; color: var(--ink-3); margin-top: 4px; line-height: 1.35; word-break: break-word; }

.ask-thumb {
  position: relative; display: block; padding: 0; cursor: zoom-in;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-2); line-height: 0;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.ask-thumb img { width: 168px; height: 118px; object-fit: cover; display: block; }
.ask-thumb:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.ask-thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ask-thumb-zoom {
  position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 12px; line-height: 1;
  background: rgba(0, 0, 0, 0.55); color: #fff;   /* overlay chip on a photo — not a themed surface */
}
.ask-video { width: 100%; max-width: 340px; border-radius: var(--r-sm); display: block; }

body.ask-lightbox-open { overflow: hidden; }
.ask-lightbox {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 40px 24px;
  background: rgba(0, 0, 0, 0.86);   /* deliberately dark in BOTH themes — it is a photo ground */
  backdrop-filter: blur(3px);
}
.ask-lightbox img {
  max-width: min(1200px, 92vw); max-height: 82vh;
  object-fit: contain; border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
}
.ask-lightbox-cap {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  font-size: 13px; color: rgba(255, 255, 255, 0.86); max-width: 92vw; text-align: center;
}
.ask-lightbox-dl { color: #fff; text-decoration: underline; }
.ask-lightbox-x {
  position: absolute; top: 16px; right: 20px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1;
  background: rgba(255, 255, 255, 0.14); color: #fff;
}
.ask-lightbox-x:hover { background: rgba(255, 255, 255, 0.24); }
.ask-lightbox-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 560px) {
  .ask-media-item { max-width: 47%; }
  .ask-thumb img { width: 100%; height: 96px; }
}
@media (prefers-reduced-motion: reduce) { .ask-thumb { transition: none; } .ask-thumb:hover { transform: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
   The Desk — the type-led rail (flag `nav.desk`, class `.sidebar.rail-desk`)

   Answers the feedback that the menu read as a competitor's. Everything that
   carries the identity here is achromatic on purpose — weight contrast, hairline
   rules, monospace counts, a flat edge-bar for the current page. Dean is
   white-labelled, so a tenant repaints --navy on day one; anything whose
   character depends on a hue is that tenant's character, not Dean's. The brand
   colour is used only to mark position, never to establish the look.

   Scoped entirely under .rail-desk so the classic rail is untouched and the
   per-user switch back is a genuine revert.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Flat, opaque, edge-ruled: no glass, no floating card. The rail is part of the
   page furniture rather than a panel hovering over it. */
.sidebar.rail-desk {
  background: var(--surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
  border-right: 1px solid var(--line);
  padding: 20px 0 0;
  gap: 0;
}
.rail-desk .side-brand {
  padding: 2px 18px 2px; font-size: 25px; font-weight: 900;
  letter-spacing: -0.05em; text-transform: uppercase; color: var(--ink);
}
.rail-desk .searchtrigger {
  margin: 14px 18px 4px; width: calc(100% - 36px);
  border: 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line);
  border-radius: 0; background: none; box-shadow: none; padding: 9px 0;
}
.rail-desk .nav-scroll { margin: 0; padding: 0 0 8px; }

/* ── area headings: type, a rule and a count. No icon, no chevron. ── */
.rail-desk .nav-section { border-bottom: 1px solid var(--line); }
.rail-desk .nav-group {
  padding: 12px 18px; font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
}
.rail-desk .nav-section.collapsed .nav-group { color: var(--ink-2); font-weight: 600; }
.rail-desk .nav-group:hover { background: var(--surface-2); color: var(--ink); }
.rail-desk .nav-chev { display: none; }
.rail-desk .nav-count {
  margin-left: auto; font-size: 10.5px; font-weight: 500; letter-spacing: 0;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

/* ── items: indented plain text; the current page gets an edge-bar, not a pill ── */
.rail-desk .nav-items { padding-bottom: 8px; }
.rail-desk .nav-item {
  border-radius: 0; margin: 0; padding: 7px 18px 7px 28px;
  font-size: 13.5px; font-weight: 500; box-shadow: none; background: none;
}
.rail-desk .nav-item svg { display: none; }
.rail-desk .nav-item:hover { background: var(--surface-2); color: var(--ink); transform: none; }
.rail-desk .nav-item.active {
  background: none; color: var(--ink); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--brand);
}
.rail-desk .nav-item.active svg { display: none; }
/* Touch: 44px rows so the phone shell stops being a compromise. */
@media (pointer: coarse) {
  .rail-desk .nav-item { padding-top: 12px; padding-bottom: 12px; }
  .rail-desk .nav-group { padding-top: 15px; padding-bottom: 15px; }
}

/* ── "Right now" — the state block above the areas ── */
.desk-now { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.desk-head {
  padding: 14px 18px 4px; font-size: 10px; font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink);
}
.desk-clear { padding: 2px 18px 12px; font-size: 12.5px; color: var(--ink-2); }
/* All-clear: a small hovering Dean above "Nothing needs you." — the calm on-duty pose. */
.desk-dean { display: block; height: 67px; width: auto; margin: 6px auto 4px; opacity: 0.92;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.2)); animation: lsm-float 5.5s var(--ease) infinite; }
/* Dean's briefing card: the mascot flying in at the right edge; hidden when space is tight. */
.dean-brief-fig { align-self: center; height: 160px; width: auto; margin: -26px 2px -18px 6px;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.22)); animation: lsm-float 5.5s var(--ease) infinite; }
@media (max-width: 1000px) { .dean-brief-fig { display: none; } }
.desk-stat {
  display: flex; align-items: baseline; gap: 11px; padding: 8px 18px;
  text-decoration: none; color: var(--ink); border-top: 1px solid var(--line);
}
.desk-list li:first-child .desk-stat { border-top: 0; }
.desk-stat:hover { background: var(--surface-2); }
.desk-stat .v {
  font-size: 21px; font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  min-width: 30px; font-variant-numeric: tabular-nums; color: var(--ink);
}
.desk-stat .l { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.desk-list { list-style: none; margin: 0; padding: 0; }
/* The rail's other controls get the app accent ring; this one must match, not fall back
   to the UA default (WCAG 2.4.7 — it is primary navigation). */
.desk-stat:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: -2px;
}
/* Severity is carried by the numeral alone. Semantic colour, separate from the
   brand accent, and never the only signal — the ordering says the same thing. */
/* --warn (#f08300) is only 2.64:1 on --surface, below the 3:1 large-text floor, so the
   numeral gets its own darkened token rather than reusing the chip colour. Dark mode keeps
   the brighter system orange, which already clears 8:1 on the dark surface. */
.desk-stat.sev-critical .v { color: var(--bad); }
.desk-stat.sev-warning  .v { color: var(--desk-warn); }

/* Dark theme: the rail sits ON the page rather than floating, so it takes the
   raised surface and keeps its own right edge. Tokens only — no literal colours. */
[data-theme="dark"] .sidebar.rail-desk { background: var(--surface); border-right-color: var(--line); }

/* Accessible severity token for the Desk numeral (see the note above). */
:root { --desk-warn: #8a5200; }               /* 6.1:1 on #ffffff */
[data-theme="dark"] { --desk-warn: var(--warn); } /* #ff9f0a on #1c1c1e ≈ 8.3:1 */

/* Reduced transparency / increased contrast already forces .sidebar to a solid
   surface; make sure that override does not undo the Desk's own ground. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sidebar.rail-desk { background: var(--surface) !important; }
}

/* ── Colourful quote CTAs (Product Owner 2026-07-31) ──────────────────────────────
   Every quote action pops in light AND dark mode — no blacked-out ghost buttons.
   Colour = meaning: sky view · green send · amber duplicate · violet convert. */
.btn-act { color: #fff; border: 0; }
.btn-act:hover { filter: brightness(1.1); color: #fff; }
.btn-act.view { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.btn-act.send { background: linear-gradient(135deg, #22c55e, #059669); }
.btn-act.dup { background: linear-gradient(135deg, #f59e0b, #d97706); }
.btn-act.convert { background: linear-gradient(135deg, #ef4444, #b91c1c); }
/* Near-fullscreen quote-PDF preview (Product Owner: the preview window needs to be bigger). */
.modal.quote-pdf { max-width: min(1200px, 96vw); }
.btn-act.person { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.btn-act.edit { background: linear-gradient(135deg, #ec4899, #db2777); }
.btn-act.alt { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
/* Completed billing steps read as status, not dead buttons (2026-07-31). */
.btn-done { background: color-mix(in srgb, #22c55e 14%, var(--surface)); color: #15803d;
  border: 1px solid color-mix(in srgb, #22c55e 45%, var(--line)); cursor: default; }
.btn-done:disabled { opacity: 1; }
[data-theme="dark"] .btn-done { color: #4ade80; }

/* ---------- Login V2 — the hero split (flag `login.v2`) ---------- */
/* Everything is scoped under .lg2 so the classic .login card is untouched. Colour comes
   only from tokens (--brand/--yellow/--bg/--surface/--ink*) so a white-label tenant
   repaint reaches this page with no further work. */
.lg2 { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: clip; }
.lg2-panel { position: relative; overflow: clip; display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 52px; color: #fff;
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--yellow) 24%, transparent), transparent 55%),
    radial-gradient(100% 100% at -10% 110%, color-mix(in srgb, black 35%, transparent), transparent 60%),
    linear-gradient(155deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 74%, black) 100%); }
.lg2-word { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.lg2-word .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14); }
.lg2-dean-spot { position: absolute; right: 5%; bottom: 0; height: min(74%, 580px); z-index: 1; pointer-events: none; transition: margin 0.8s var(--ease); }
.lg2-dean { height: 100%; width: auto; display: block; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.42));
  opacity: 0; transform: translateY(46px);
  animation: lg2-dean-in 1.1s var(--ease) 0.35s forwards, lg2-dean-hover 6.5s ease-in-out 2.2s infinite; }
@keyframes lg2-dean-in { to { opacity: 1; transform: translateY(0); } }
@keyframes lg2-dean-hover { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-9px); } }
/* A good sign-in: a beat of anticipation, then straight up and out of the panel. */
.lg2-dean-spot.launch { animation: lg2-dean-launch 0.85s cubic-bezier(0.5, -0.3, 0.8, 0.5) forwards; }
@keyframes lg2-dean-launch { 22% { transform: translateY(14px); } 100% { transform: translateY(-165%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lg2-dean-spot.launch { animation: none; } }
.lg2-foot { position: relative; z-index: 2; max-width: min(480px, 60%); }
.lg2-eyebrow { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.lg2-rotator { margin-top: 18px; min-height: 96px; position: relative; }
.lg2-rotator p { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.18; font-weight: 750; letter-spacing: -0.03em; text-wrap: balance;
  opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); position: absolute; inset: 0 auto auto 0; max-width: 480px; }
.lg2-rotator p.cur { opacity: 1; transform: none; }
.lg2-formside { display: grid; place-items: center; padding: 48px 24px; background: var(--bg); }
.lg2-formbox { width: min(400px, 92vw); }
.lg2-formbox > * { opacity: 0; transform: translateY(18px); animation: lg2-rise 0.8s var(--ease) forwards; }
.lg2-formbox > *:nth-child(1) { animation-delay: 0.05s; } .lg2-formbox > *:nth-child(2) { animation-delay: 0.16s; }
.lg2-formbox > *:nth-child(3) { animation-delay: 0.28s; }
@keyframes lg2-rise { to { opacity: 1; transform: none; } }
.lg2-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }

.lg2-head h1 { margin: 0 0 4px; font-size: 29px; letter-spacing: -0.035em; font-weight: 800; color: var(--ink); }
.lg2-sub { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.lg2-field { margin-top: 14px; }
.lg2-field label { display: block; font-size: 11px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 7px 2px; }
.lg2-field input { width: 100%; box-sizing: border-box; font-family: var(--font, inherit); font-size: 15.5px; color: var(--ink);
  padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); outline: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease); }
.lg2-field input:focus { border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 28%, transparent), 0 10px 30px -18px var(--brand); transform: translateY(-1px); }
.lg2-aux { display: flex; justify-content: flex-end; margin: 12px 2px 16px; }
.lg2-aux a { font-size: 13px; color: var(--brand); text-decoration: none; font-weight: 600; }
.lg2-aux a:hover { text-decoration: underline; }
.lg2-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer;
  font-family: inherit; font-size: 15.5px; font-weight: 700; color: #fff; border: 0; padding: 8px 8px 8px 22px; min-height: 54px;
  border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, white), var(--brand));
  box-shadow: 0 14px 30px -14px var(--brand), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.lg2-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -16px var(--brand), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.lg2-cta:active { transform: scale(0.975); }
.lg2-cta .orb { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.16); transition: transform 0.35s var(--ease); }
.lg2-cta:hover .orb { transform: translate(3px, -1px) scale(1.06); }
.lg2-cta.loading .orb svg { display: none; }
.lg2-cta .orb::after { content: ''; display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.9); animation: lg2-spin 1s linear infinite; }
.lg2-cta.loading .orb::after { display: block; }
@keyframes lg2-spin { to { transform: rotate(360deg); } }
.lg2-err { min-height: 20px; margin-top: 12px; text-align: center; }
.lg2 .hint { margin: 26px 0 0; color: var(--ink-3); font-size: 12px; }
@keyframes lg2-headshake { 20% { transform: translateX(-7px) rotate(-3deg); } 45% { transform: translateX(6px) rotate(2.5deg); } 70% { transform: translateX(-4px) rotate(-1.5deg); } }
.lg2-confetti { position: absolute; inset: -20px; pointer-events: none; }
.lg2-confetti i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 2px; background: var(--yellow); opacity: 0; }
.lg2-confetti i:nth-child(even) { background: var(--brand); border-radius: 50%; }
.lg2-confetti.go i { animation: lg2-pop 1s var(--ease) forwards; }
@keyframes lg2-pop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1); } }
@media (max-width: 900px) {
  .lg2 { grid-template-columns: 1fr; }
  .lg2-panel { min-height: 280px; padding: 28px; }
  .lg2-rotator { min-height: 72px; }
  .lg2-rotator p { font-size: 22px; }
  .lg2-dean-spot { height: 82%; right: 2%; }
  .lg2-foot { max-width: 100%; }
  .lg2-formside { padding: 36px 20px 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg2-dean { animation: none; opacity: 1; transform: none; }
  .lg2-dean-spot.launch { animation: none; }
  .lg2-formbox > * { animation: none; opacity: 1; transform: none; }
  .lg2-rotator p { transition: none; }
  .lg2-confetti.go i { animation: none; }
  .lg2-cta, .lg2-cta .orb, .lg2-field input { transition: none; }
}

/* Login V2 dark theme: dark remaps --brand to a light tint for text contrast, which would
   wash the brand panel out and put white text on a pale CTA. Re-deepen via color-mix so a
   white-label tenant's brand still carries through with no hardcoded colour. */
[data-theme="dark"] .lg2-panel {
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 55%),
    radial-gradient(100% 100% at -10% 110%, color-mix(in srgb, black 45%, transparent), transparent 60%),
    linear-gradient(155deg, color-mix(in srgb, var(--brand) 50%, black) 0%, color-mix(in srgb, var(--brand) 30%, black) 100%);
}
[data-theme="dark"] .lg2-cta { color: #0b1220; }
[data-theme="dark"] .lg2-cta .orb { background: rgba(0, 0, 0, 0.12); }
[data-theme="dark"] .lg2-cta .orb::after { border-color: rgba(11, 18, 32, 0.85); }
@media (max-width: 900px) {
  .lg2-foot { padding-right: 96px; }
}

/* Login V2 — the feature ticker: every module name drifting across the WHOLE page as an
   almost-transparent watermark. One neutral slate tone reads faintly on both the brand
   panel and the light form side; content sits above it via z-index. Transform-only. */
.lg2 { position: relative; }
.lg2-marquee { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: clip;
  display: flex; flex-direction: column; justify-content: space-evenly; }
.lg2-mq-row { white-space: nowrap; font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(28px, 4.6vw, 54px); line-height: 1;
  color: #8494ac; opacity: 0.055; width: max-content;
  animation: lg2-mq-l 90s linear infinite; will-change: transform; }
.lg2-mq-row span { padding-right: 0.6em; }
.lg2-mq-row.rev { animation-name: lg2-mq-r; }
@keyframes lg2-mq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lg2-mq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
[data-theme="dark"] .lg2-mq-row { color: #93a5c0; opacity: 0.07; }
.lg2-panel { z-index: auto; }
.lg2-word, .lg2-foot { position: relative; z-index: 2; }
.lg2-dean-spot { z-index: 2; }
.lg2-formbox { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .lg2-mq-row { animation: none; }
}

/* Login V2 — superhero Dean's face as the greeting avatar. The photo is a CSS crop of the
   hover pose webp (no second asset); he ducks below the rim of his dashed ring while the
   password is typed, bounces on success, shakes on a bad password. */
.lg2-face { position: relative; flex: none; width: 62px; height: 62px; }
.lg2-face::before { content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px dashed var(--yellow); opacity: 0.9; animation: lg2-ringslow 26s linear infinite; }
@keyframes lg2-ringslow { to { transform: rotate(360deg); } }
.lg2-face.thinking::before { animation: lg2-ringslow 1.2s linear infinite; }
.lg2-face-img { position: absolute; inset: 0; border-radius: 50%; overflow: clip;
  background: color-mix(in srgb, var(--brand) 16%, var(--surface)); }
.lg2-face-photo { position: absolute; inset: 0; border-radius: 50%;
  background: url('/app/img/dean-hover.webp') no-repeat;
  background-size: 420%; background-position: 47% 2%;
  transition: transform 0.4s var(--spring); }
.lg2-face.covering .lg2-face-photo { transform: translateY(72%); }
.lg2-face.joy { animation: lg2-facejoy 0.9s var(--spring); }
@keyframes lg2-facejoy { 30% { transform: translateY(-8px) scale(1.08); } 60% { transform: translateY(0) scale(1); } }
.lg2-face.shake { animation: lg2-headshake 0.5s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .lg2-face::before, .lg2-face.thinking::before { animation: none; }
  .lg2-face-photo { transition: none; }
  .lg2-face.joy, .lg2-face.shake { animation: none; }
}

/* ── Conference Mode (kiosk) — BETA conference.mode ─────────────────────────
   Attract loop, tour cards, spotlight and stand admin. Tokens only, so light and
   dark both work; the attract screen deliberately commits to the deep-navy look. */
/* Top-right per Ashley 26 Aug (was bottom-left next to the sidebar) — now first in .topdock,
   left of the account chip and the bell, rather than fixed on top of them. */
.conf-fab { order: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-pop); }
.conf-fab:hover { filter: brightness(1.05); }
.conf-fab-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); flex: none; animation: confPulse 2.4s infinite; }
@keyframes confPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 181, 23, .45); } 55% { box-shadow: 0 0 0 7px rgba(245, 181, 23, 0); } }
/* Armed stand devices hide ONLY the account chip (it hosts logout — a visitor must not be able
   to sign the iPad out mid-event). The sidebar footer (theme/density/snag) stays visible —
   Ashley 26 Aug: kiosk and admin logins must look identical; a visitor flipping dark mode is
   harmless per-device cosmetics. */
body.conf-kiosk #accountchip { display: none !important; }

.conf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; max-width: 1100px; margin-bottom: 16px; }
.conf-section-h { max-width: 1100px; margin: 18px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2, var(--muted, #6b7280)); }
/* Hero deliberately keeps the fixed attract-navy — it is the brand surface in both themes. */
.conf-hero { display: block; width: 100%; max-width: 1100px; text-align: left; cursor: pointer; font: inherit; border: 0; border-radius: 18px; padding: 26px 28px; color: #fff; background: linear-gradient(150deg, #16223d 0%, #24365e 55%, #101a30 100%); box-shadow: 0 10px 30px rgba(16, 26, 48, 0.35); margin-bottom: 6px; }
.conf-hero:hover .conf-hero-cta { transform: translateX(4px); }
.conf-hero-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7fd6a4; margin-bottom: 8px; }
.conf-hero-h { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; letter-spacing: -0.02em; }
.conf-hero-sub { margin-top: 8px; max-width: 640px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.conf-hero-cta { display: inline-block; margin-top: 14px; font-weight: 800; font-size: 14px; color: #f5c04a; transition: transform 0.15s ease; }
.conf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; max-width: 1100px; margin-bottom: 16px; }
.conf-gal-tile { display: flex; gap: 10px; align-items: flex-start; text-align: left; font: inherit; cursor: pointer; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
.conf-gal-tile:hover { border-color: var(--ring); }
.conf-gal-tile svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--navy); }
.conf-gal-tile > span { display: flex; flex-direction: column; gap: 2px; }
/* ── conference v7: home-page story rails, bands and the tour row ──────────────────
   Every colour is a theme token (this page renders light AND dark on the stand iPads),
   and every tappable thing clears 44px: the flow cards run ~96px tall, the tour chips
   are pinned to 44px. Bands are <button>s, so their children are spans, not <p>/<li>. */
.conf-rail-sub { max-width: 1100px; margin: -4px 0 12px; font-size: 13px; line-height: 1.5; color: var(--ink-2, var(--muted, #6b7280)); }
.conf-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; max-width: 1100px; margin-bottom: 20px; }
.conf-flow { display: flex; gap: 14px; align-items: flex-start; text-align: left; font: inherit; cursor: pointer; min-height: 44px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); }
.conf-flow:hover { border-color: var(--ring); }
.conf-flow:active { transform: scale(.99); }
.conf-flow-ico { font-size: 26px; line-height: 1.1; flex: 0 0 auto; }
.conf-flow-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.conf-flow-t { font-size: 15.5px; font-weight: 750; }
.conf-flow-p { font-size: 13px; line-height: 1.45; color: var(--ink-2, var(--muted, #6b7280)); }
.conf-flow-m { display: flex; gap: 10px; align-items: center; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.conf-flow-secs { color: var(--ink-3, var(--muted, #9aa6bb)); }
.conf-flow-go { color: var(--navy); }
.conf-band { display: flex; flex-direction: column; width: 100%; max-width: 1100px; text-align: left; font: inherit; cursor: pointer; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; background: var(--surface); color: var(--ink); margin: 0 0 16px; }
.conf-band:hover { border-color: var(--ring); }
.conf-band-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--yellow, #f5b517); }
.conf-band-h { margin-top: 5px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.conf-band-sub { margin-top: 6px; max-width: 70ch; font-size: 13.5px; line-height: 1.55; color: var(--ink-2, var(--muted, #6b7280)); }
.conf-band-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 7px 20px; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-2, var(--muted, #6b7280)); }
.conf-band-list > span { padding-left: 15px; text-indent: -15px; }
.conf-band-list > span::before { content: '▸ '; color: var(--yellow, #f5b517); font-weight: 800; }
.conf-band-cta { margin-top: 15px; font-size: 13.5px; font-weight: 800; color: var(--navy); }
.conf-tourrow { display: flex; flex-wrap: wrap; gap: 9px; max-width: 1100px; margin-bottom: 18px; }
.conf-tour-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.conf-tour-chip:hover { border-color: var(--ring); }
.conf-tour-mins { font-size: 11.5px; font-weight: 700; color: var(--ink-3, var(--muted, #9aa6bb)); }
@media (prefers-reduced-motion: reduce) { .conf-flow:active { transform: none; } }

.conf-chat-frame { width: 100%; height: min(78vh, 760px); border: 0; border-radius: 14px; background: var(--surface); display: block; }
.conf-hero-langs { margin-top: 10px; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }

/* Personalised-skin ribbon — bottom-centre pill, clear of the FAB (left) and Ask Dean (right) */
.conf-skinbar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 1100; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(16, 26, 48, 0.18); max-width: min(92vw, 560px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conf-skinbar-mut { color: var(--ink-2, #6b7280); }
.conf-skin-powered { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3, #9aa6bb); margin-top: 2px; }
.conf-skinbar-x { border: 0; background: none; font: inherit; font-size: 15px; cursor: pointer; color: var(--ink-2, #6b7280); padding: 0 2px; }
.conf-form select { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }

/* Living attract loop — "a day with Dean" */
.conf-attract-stage { min-height: 320px; display: flex; flex-direction: column; justify-content: center; } /* v6: display type needs the taller reserve */
/* v6: mascot gets a keynote entrance (lg2-dean-in technique — rise+fade, .4s beat),
   then hands over to the float once it has landed. Entrance fill holds opacity .9. */
.conf-attract-dean { position: absolute; right: clamp(8px, 4vw, 60px); bottom: 0; width: clamp(110px, 14vw, 200px); z-index: 1; pointer-events: none;
  opacity: 0; transform: translateY(30px);
  animation: conf-dean-in 0.9s var(--k-ease) 0.4s forwards, conf-dean-float 5s ease-in-out 1.6s infinite; }
@keyframes conf-dean-in { to { opacity: 0.9; transform: translateY(0); } }
@keyframes conf-dean-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* Pre-v6 opt-out kept (predates the global nuke): with animation:none the entrance's
   opacity-0 start state must be undone here or RM hides the mascot entirely. */
@media (prefers-reduced-motion: reduce) { .conf-attract-dean { animation: none; opacity: 0.9; transform: none; } }
.conf-day { text-align: left; max-width: 620px; margin: 0 auto; }
.conf-day-h { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; text-align: center; }
.conf-day-feed { display: flex; flex-direction: column; gap: 10px; min-height: 246px; justify-content: flex-start; }
.conf-day-card { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.14); opacity: 0; transform: translateY(18px); transition: opacity var(--k-med) var(--k-spring), transform var(--k-med) var(--k-spring); }
.conf-day-card.in { opacity: 1; transform: translateY(0); }
.conf-day-t { font-variant-numeric: tabular-nums; font-weight: 700; color: #f5c04a; font-size: 13px; margin-top: 2px; }
.conf-day-ico { font-size: 18px; }
.conf-day-txt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.conf-day-sub { color: rgba(255, 255, 255, 0.72); font-size: 12.5px; line-height: 1.45; }
.conf-day-counters { display: flex; gap: 22px; justify-content: center; margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.conf-day-counters strong { color: #7fd6a4; font-size: 16px; font-variant-numeric: tabular-nums; }
.conf-day-note { text-align: center; margin-top: 12px; font-size: 11.5px; color: rgba(255, 255, 255, 0.45); }

/* Lead-capture confetti (clone of the login burst, scoped to conference) */
.conf-form-done { position: relative; }
.conf-confetti { position: absolute; inset: -26px; pointer-events: none; }
.conf-confetti i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 2px; background: var(--yellow, #f5b517); opacity: 0; }
.conf-confetti i:nth-child(even) { background: var(--navy); border-radius: 50%; }
.conf-confetti.go i { animation: conf-pop 1s ease-out forwards; }
.conf-confetti i:nth-child(1) { --cx: -70px; --cy: -46px; } .conf-confetti i:nth-child(2) { --cx: 62px; --cy: -58px; }
.conf-confetti i:nth-child(3) { --cx: -34px; --cy: -70px; } .conf-confetti i:nth-child(4) { --cx: 84px; --cy: -22px; }
.conf-confetti i:nth-child(5) { --cx: -88px; --cy: -8px; } .conf-confetti i:nth-child(6) { --cx: 30px; --cy: -76px; }
.conf-confetti i:nth-child(7) { --cx: -52px; --cy: -30px; } .conf-confetti i:nth-child(8) { --cx: 48px; --cy: -40px; }
.conf-confetti i:nth-child(9) { --cx: -16px; --cy: -84px; } .conf-confetti i:nth-child(10) { --cx: 72px; --cy: -66px; }
.conf-confetti i:nth-child(11) { --cx: -78px; --cy: -54px; } .conf-confetti i:nth-child(12) { --cx: 14px; --cy: -60px; }
.conf-confetti i:nth-child(13) { --cx: -42px; --cy: -14px; } .conf-confetti i:nth-child(14) { --cx: 92px; --cy: -44px; }
@keyframes conf-pop { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(260deg); } }
@media (prefers-reduced-motion: reduce) { .conf-confetti.go i { animation: none; } }

.conf-stats-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.conf-stats-table td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.conf-card { text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.conf-card:hover { border-color: var(--ring); }
.conf-card-ico { font-size: 26px; margin-bottom: 8px; }
.conf-card-cta { margin-top: 10px; font-weight: 700; color: var(--navy); font-size: 13px; }

/* v6 attract — keynote rebuild. The takeover keeps the fixed attract-navy (accepted
   token exception, see the .conf-hero note above): it is the brand surface in both
   themes, and the explicit #fff ink below is what the display type renders in. */
.conf-attract { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; text-align: center; color: #fff; cursor: pointer; overflow: clip; background: linear-gradient(150deg, #16223d 0%, #24365e 55%, #101a30 100%); }
/* The living backdrop: an oversized layer (inset -8% so k-drift's 6% scale-pan never
   shows an edge) carrying the navy gradient plus a brand- and yellow-tinted glow.
   Transform-only drift, GPU-safe; content stacks above it via z-index 1. */
.conf-attract-scene { position: absolute; inset: -8%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(56% 46% at 80% 8%, color-mix(in srgb, var(--brand, #314b76) 36%, transparent), transparent 68%),
    radial-gradient(64% 58% at 8% 92%, color-mix(in srgb, #101a30 78%, transparent), transparent 74%),
    radial-gradient(40% 34% at 52% 58%, color-mix(in srgb, var(--yellow, #f5b517) 8%, transparent), transparent 76%),
    linear-gradient(150deg, #16223d 0%, #24365e 55%, #101a30 100%); }
.conf-attract-inner { position: relative; z-index: 1; max-width: 900px; padding: 32px; }
.conf-attract-brand { font-size: 20px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .65; margin-bottom: 34px; }
/* Claims are set in .k-display/.k-display-sub (type) + .k-rise/.k-in (motion, rAF-staged
   from JS) — these rules keep only layout and the scene's ink. */
.conf-attract-claim { min-height: 2.3em; text-wrap: balance; }
.conf-attract-sub { margin-top: 16px; color: rgba(255, 255, 255, .72); max-width: 46ch; margin-left: auto; margin-right: auto; }
.conf-attract-touch { display: inline-flex; align-items: center; gap: 10px; margin-top: 50px; padding: 15px 30px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); font-size: 16px; font-weight: 700; }
.conf-attract-live { margin-top: 26px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.conf-attract-live strong { color: #7fd6a4; font-variant-numeric: tabular-nums; }

/* TV signage mode — the 55" panel gets cinema type, not iPad type. Taps are inert
   (handled in JS); the touch pill hides because nobody should touch the TV. */
.conf-attract.conf-tv { cursor: default; }
.conf-attract.conf-tv .conf-attract-inner { max-width: 1400px; padding: 60px; }
.conf-attract.conf-tv .conf-attract-brand { font-size: 28px; margin-bottom: 48px; }
/* v6 bump: cinema clamps sized against 1920×1080 — a 3-line worst-case claim
   (~325px at 104px/1.04) still clears the 420px stage with brand + sub + live. */
.conf-attract.conf-tv .conf-attract-claim { font-size: clamp(56px, 5.4vw, 104px); }
.conf-attract.conf-tv .conf-attract-sub { font-size: clamp(22px, 2vw, 32px); margin-top: 24px; max-width: 60ch; }
.conf-attract.conf-tv .conf-attract-touch { display: none; }
.conf-attract.conf-tv .conf-attract-stage { min-height: 420px; }
.conf-attract.conf-tv .conf-day { max-width: 900px; }
.conf-attract.conf-tv .conf-day-h { font-size: clamp(30px, 2.6vw, 44px); }
.conf-attract.conf-tv .conf-day-txt { font-size: 19px; }
.conf-attract.conf-tv .conf-day-sub { font-size: 15.5px; }
.conf-attract.conf-tv .conf-day-feed { min-height: 300px; }
.conf-attract.conf-tv .conf-attract-live { font-size: 19px; margin-top: 40px; }
.conf-attract.conf-tv .conf-attract-dean { width: clamp(160px, 11vw, 280px); right: auto; left: clamp(12px, 4vw, 70px); } /* QR owns the bottom-right corner on TV — the mascot floats bottom-left */
.conf-attract-qr { position: absolute; right: 28px; bottom: 24px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.conf-attract-qr img { width: 132px; height: 132px; border-radius: 12px; } /* the QR SVG carries its own white quiet zone — no hardcoded light bg (dark-mode gate) */
.conf-attract.conf-tv .conf-attract-qr { right: 44px; bottom: 40px; font-size: 16px; }
.conf-attract.conf-tv .conf-attract-qr img { width: 190px; height: 190px; }

.conf-tour-card { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 1100; width: min(560px, calc(100vw - 28px)); padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.conf-tour-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.conf-tour-body { margin: 7px 0 12px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.conf-tour-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.conf-tour-btns { display: flex; gap: 8px; }
.conf-dots { display: flex; gap: 5px; }
.conf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.conf-dot.on { background: var(--yellow); }
/* Deep-dive tour card (tours v5.5): kicker + progress bar + detail points + live chip +
   try-it affordance + chapter jump. Everything token-driven (dark-mode gate). */
.conf-tour-kicker { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); align-self: center; }
.conf-tour-bar { height: 3px; border-radius: 2px; background: var(--line); margin: 8px 0 10px; overflow: hidden; }
.conf-tour-bar span { display: block; height: 100%; border-radius: 2px; background: var(--yellow); transition: width .4s var(--ease); }
.conf-tour-points { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 5px; }
.conf-tour-points li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.conf-tour-points li::before { content: '✓'; position: absolute; left: 2px; top: 0; font-weight: 700; color: var(--yellow); }
.conf-tour-why { margin: 0 0 10px; font-size: 12.5px; font-style: italic; color: var(--ink-3); border-left: 3px solid var(--yellow); padding-left: 10px; }
.conf-tour-live { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.conf-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: confLivePulse 1.6s ease-in-out infinite; }
@keyframes confLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .conf-live-dot { animation: none; } }
.conf-try { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink); padding: 9px 12px; border: 1px dashed var(--yellow); border-radius: var(--r-sm); }
.conf-try-hand { font-size: 16px; animation: confTryNudge 1.2s ease-in-out infinite; }
@keyframes confTryNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .conf-try-hand { animation: none; } }
.conf-try-done { font-weight: 800; color: var(--ok); }
.conf-try-target { outline: 3px solid var(--yellow); outline-offset: -1px; border-radius: 8px; animation: confTargetPulse 1.4s ease-in-out infinite; }
@keyframes confTargetPulse { 0%, 100% { outline-color: var(--yellow); } 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .conf-try-target { animation: none; } }
.conf-dots { border: 0; background: none; padding: 10px 8px; margin: -10px -8px; cursor: pointer; min-height: 44px; align-items: center; }
.conf-dot.done { background: var(--ink-3); }
.conf-chap { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px); max-height: min(52vh, 440px); overflow: auto; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line); display: grid; gap: 4px; }
.conf-chap-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding: 2px 4px 6px; }
.conf-chap-item { display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); padding: 10px 8px; border-radius: var(--r-sm); cursor: pointer; min-height: 44px; }
.conf-chap-item:hover, .conf-chap-item.on { background: var(--surface-2, var(--surface)); }
.conf-chap-item.on { font-weight: 700; }
.conf-chap-n { flex: 0 0 22px; height: 22px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; border-radius: 50%; background: var(--line); color: var(--ink-2); }
.conf-chap-item.on .conf-chap-n { background: var(--yellow); color: #1c2233; }
.conf-close-next { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: -8px 0 20px; }
.conf-next-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; padding: 11px 16px; border-radius: 999px; cursor: pointer; min-height: 44px; }
.conf-next-chip:hover { border-color: var(--yellow); }

/* Touch targets (v4): Next/Back are the most-tapped controls at the show — 44px+ per
   the iOS guideline; the exit × gets a real hit area too. */
.conf-tour-card .btn { padding: 13px 22px; font-size: 15px; } /* ≥44px tall — live-measured 42px at 12px padding */
.conf-x { border: 0; background: none; color: var(--ink-3); font-size: 24px; line-height: 1; cursor: pointer; padding: 10px 14px; min-width: 44px; min-height: 44px; }
.conf-spot { position: fixed; z-index: 1050; border: 3px solid var(--yellow); border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(10, 16, 30, .42); pointer-events: none; transition: all .35s var(--ease); }

.conf-close { position: fixed; inset: 0; z-index: 1150; overflow: auto; background: var(--bg); display: grid; place-items: center; }
.conf-close-inner { position: relative; width: min(880px, calc(100vw - 32px)); padding: 34px 26px; }
.conf-close-x { position: absolute; top: 8px; right: 8px; font-size: 30px; }
.conf-close-h { margin: 0 0 6px; font-size: clamp(24px, 4vw, 34px); }
.conf-close-sub { margin: 0 0 22px; font-size: 15px; }
.conf-close-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 760px) { .conf-close-cols { grid-template-columns: 1fr; } }
.conf-form { display: grid; gap: 10px; }
.conf-form input[type="text"], .conf-form input[type="email"] { padding: 13px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; }
.conf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.conf-consent { display: flex; gap: 9px; align-items: start; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.conf-consent input { margin-top: 2px; }
.conf-form-done { font-weight: 700; color: var(--ok); font-size: 15px; }
.conf-close-alt { display: grid; gap: 14px; }
.conf-qr-wrap { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.conf-qr { width: min(200px, 48vw); height: auto; border-radius: 8px; } /* the QR SVG carries its own white quiet zone — no hardcoded light bg (dark-mode gate) */
.conf-presenter { text-align: center; }

.conf-admin { max-width: 1100px; }
.conf-admin-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.conf-admin-row select, .conf-admin-row input { padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.conf-admin-state { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.conf-admin-state.on { color: var(--ok); }

/* ── conference v6: keynote motion foundation ──────────────────────────────
   Shared spring/ease aliases, timing scale, display type and animation
   primitives used by every v6 surface (attract v2, touch-in choice, hero
   flows, nav pill). Transform/opacity only — GPU-safe, no layout animation.
   Reduced motion: rely on the global nuke (line ~288) for FINITE transitions
   and animations — it zeroes durations, so they complete instantly. It does
   NOT touch iteration-count, though, so near-zero-duration INFINITE
   animations (.k-drift, .k-breathe) would shimmer/jitter instead of holding
   still — those carry explicit `animation: none` RM opt-outs below, the same
   per-block convention as the attract mascot float. */
:root {
  --k-ease: var(--ease);                             /* keynote-local alias of --ease */
  --k-spring: var(--spring);                         /* keynote-local alias of --spring */
  --k-slow: 1100ms; --k-med: 640ms; --k-fast: 320ms; /* keynote timing scale */
  --k-display: clamp(34px, 6.4vw, 96px);             /* hero/moment display type */
  --k-display-sub: clamp(17px, 2.2vw, 28px);         /* display sub/caption type */
}
/* Entrance: starts faded/lowered, rises + fades in once .k-in is added.
   Transition lives on .k-rise itself so removing .k-in animates back out. */
.k-rise { opacity: 0; transform: translateY(28px); transition: opacity var(--k-med) var(--k-spring), transform var(--k-med) var(--k-spring); }
.k-rise.k-in { opacity: 1; transform: none; }
/* Exit helper: quick fade-out for a layer/element being dismissed. */
.k-out { opacity: 0; transition: opacity var(--k-fast) var(--k-ease); transition-delay: 0ms; }
/* Staggered entrance ladder for direct children (cards, list rows) — 60ms
   steps applied as transition-delay on the .k-in transition, capped at 8. */
.k-stagger > *:nth-child(1) { transition-delay: 0ms; }
.k-stagger > *:nth-child(2) { transition-delay: 60ms; }
.k-stagger > *:nth-child(3) { transition-delay: 120ms; }
.k-stagger > *:nth-child(4) { transition-delay: 180ms; }
.k-stagger > *:nth-child(5) { transition-delay: 240ms; }
.k-stagger > *:nth-child(6) { transition-delay: 300ms; }
.k-stagger > *:nth-child(7) { transition-delay: 360ms; }
.k-stagger > *:nth-child(n+8) { transition-delay: 420ms; }
/* The ladder delays ALL transitions on the children, not just the entrance —
   an exit must never inherit an entrance stagger (up to 420ms of lag). The
   :nth-child(n) no-op bumps this above the ladder's specificity so .k-out
   always wins its delay back. JS that drops .k-stagger post-entrance (the
   choice layer does) still benefits: this is the safety net for exits fired
   while the ladder is live. */
.k-stagger > .k-out:nth-child(n) { transition-delay: 0ms; }
/* Very slow scene drift — the Ken-Burns substitute for attract backgrounds. */
@keyframes k-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.5%, -1%); } }
.k-drift { animation: k-drift 24s var(--k-ease) alternate infinite; }
/* Gentle opacity+scale pulse for touch CTAs ("Touch to explore" etc.). */
@keyframes k-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.03); } }
.k-breathe { animation: k-breathe 3.2s ease-in-out infinite; }
/* RM: the global nuke zeroes durations but not iteration-count, so these two
   INFINITE animations would restart every ~0.001ms — a visible shimmer, worse
   than motion. Hold them still explicitly (see the section banner above). */
@media (prefers-reduced-motion: reduce) { .k-drift, .k-breathe { animation: none; } }
/* Display type for keynote moments — colour is intentionally NOT set here;
   each scene supplies its own ink so this works over any light/dark scene. */
.k-display { font-size: var(--k-display); font-weight: 750; letter-spacing: -0.02em; line-height: 1.04; }
.k-display-sub { font-size: var(--k-display-sub); font-weight: 500; letter-spacing: normal; line-height: 1.35; }

/* ── conference v6: touch-in choice ("What would you like to see?") ────────
   One rung under the attract in the z-ladder (attract 1200 → choice 1190) and the same
   navy scene family — it reuses .conf-attract-scene inside its own clipping box. */
.conf-choice { position: fixed; inset: 0; z-index: 1190; display: grid; place-items: center; text-align: center; color: #fff; overflow: clip; background: linear-gradient(150deg, #16223d 0%, #24365e 55%, #101a30 100%); }
.conf-choice-inner { position: relative; z-index: 1; width: min(1100px, calc(100vw - 40px)); padding: 32px 0; }
.conf-choice-head { margin-bottom: 42px; text-wrap: balance; }
.conf-choice-pane { min-height: 240px; }
.conf-choice-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.conf-choice-strip { grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* One line of framing above the strip (v8). It pulls 20px back out of .conf-choice-head's
   42px so that head + lede + TWO rows of cards + the back pill still clear the bottom of a
   768px-tall stand screen — the vertical budget here is genuinely tight, not notional. */
.conf-choice-lede { margin: -20px auto 24px; max-width: 62ch; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .78); text-wrap: balance; }
/* v8: the strip carries EIGHT hero flows (four at v6, seven at v7), so it fills two rows of
   four on an iPad. Compact the cards there — 44px targets are still cleared many times over
   by the 140px min-height — or the second row falls off the bottom of the stand screen. */
.conf-choice-strip .conf-choice-card { min-height: 140px; padding: 16px 14px; gap: 6px; }
.conf-choice-strip .conf-choice-ico { font-size: 26px; }
.conf-choice-strip .conf-choice-t { font-size: 16px; }
.conf-choice-strip .conf-choice-sub { font-size: 12.5px; }
@media (max-width: 900px) { .conf-choice-cards { grid-template-columns: 1fr; } .conf-choice-strip { grid-template-columns: repeat(2, 1fr); } }
/* Glass over navy: .glass's token background is tuned for app surfaces, so the scene
   supplies an explicit dark-glass tint + white ink on top of the blur. Hover/active are
   transform-scale ONLY (GPU-safe; no colour shifts on the brand scene). All targets
   comfortably clear 44px (min-height 180px cards; the back pill is pinned to 44px). */
.conf-choice-card { display: grid; gap: 8px; justify-items: center; align-content: center; min-height: 180px; padding: 26px 20px; border-radius: var(--r-lg, 16px); background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font: inherit; cursor: pointer; }
.conf-choice-card:hover { transform: scale(1.03); }
.conf-choice-card:active { transform: scale(.97); }
.conf-choice-ico { font-size: 34px; }
.conf-choice-t { font-size: 19px; font-weight: 750; }
.conf-choice-sub { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .72); max-width: 30ch; }
.conf-choice-secs { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--yellow, #f5b517); }
.conf-choice-back { margin-top: 22px; min-width: 44px; min-height: 44px; padding: 10px 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: none; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.conf-choice-back:hover { transform: scale(1.04); }
.conf-choice-back:active { transform: scale(.96); }
/* The reduced-transparency / increase-contrast collapse forces --surface onto .glass
   (accepted accessibility mode) — flip the card ink back to theme tokens so text stays
   readable on the solid surface. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .conf-choice-card { color: var(--ink); background: var(--surface); }
  .conf-choice-card .conf-choice-sub { color: var(--ink-2); }
  .conf-choice-card .conf-choice-secs { color: var(--ink-2); }
  /* NOT .conf-choice-lede: only .glass CARDS collapse to --surface in these modes. The
     .conf-choice scene keeps its hard-coded navy gradient, so the lede must stay white —
     flipping it to --ink-2 would paint dark text on navy in the light theme. */
}

/* ── conference v6: hero-flow keynote runner ───────────────────────────────
   Caption bar + tap catcher live on <body> (NOT .main) so the camera transform
   never moves them. Z-ladder: catcher 1200 over everything (overlay scrims are
   z-80, spotlight 1050), caption bar 1201 above the catcher so ✕ keeps its tap. */
.conf-hero-tap { position: fixed; inset: 0; z-index: 1200; background: transparent; cursor: default; }
/* Bottom-centre narration, white-on-glass over any screen (.glass supplies the blur;
   the explicit dark tint keeps ink readable whatever is underneath — same technique
   as .conf-choice-card). Large type; every control clears 44px. */
.conf-hero-cap { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 1201;
  width: min(720px, calc(100vw - 28px)); padding: 16px 20px 8px; border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(16, 26, 48, .58); color: #fff; text-align: center; }
.conf-hcap-label { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 5px; }
.conf-hcap-txt { font-size: clamp(18px, 2.6vw, 26px); font-weight: 650; line-height: 1.3; text-wrap: balance; }
.conf-hcap-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.conf-hcap-n { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .65); min-width: 44px; text-align: left; }
.conf-hero-cap .conf-dot { background: rgba(255, 255, 255, .32); }
.conf-hero-cap .conf-dot.on { background: var(--yellow); }
.conf-hero-cap .conf-x { color: #fff; }
/* v7 hands-on: the tours' "Try it" affordance reused inside the caption bar. .conf-try
   pins color to var(--ink), which is DARK in light theme and unreadable on the bar's dark
   tint — inherit the bar's ink instead (this also follows the contrast fallback below). */
.conf-hero-cap .conf-try { color: inherit; justify-content: center; margin: 8px 0 2px; }
/* Reduced-transparency / increase-contrast collapse (parity with .conf-choice-card):
   .glass falls back to --surface, so flip the ink back to theme tokens. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .conf-hero-cap { background: var(--surface); color: var(--ink); }
  .conf-hcap-label, .conf-hcap-n { color: var(--ink-2); }
  .conf-hero-cap .conf-x { color: var(--ink); }
  .conf-hero-cap .conf-dot { background: var(--line); }
  .conf-hero-cap .conf-dot.on { background: var(--yellow); }
}

/* ── conference v6: free-play navigation pill ──────────────────────────────
   Unlike the attract/choice/hero-cap layers above, this floats over NORMAL app
   screens in whatever theme the visitor is in — so it borrows .conf-fab's technique
   (plain --surface/--ink/--line/--shadow-pop) rather than the navy-scene/.glass
   family. Static presence by design: no k-breathe here — pulsing over live content
   reads as a distraction, not an invitation, the way it does on an empty attract screen. */
.conf-pill {
  /* Bottom-center (Ashley 26 Aug: keep here; the Conference-mode FAB moved top-right instead). */
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 940;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 20px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-pop);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), bottom 0.2s var(--ease);
}
.conf-pill:hover { transform: translateX(-50%) scale(1.03); }
.conf-pill:active { transform: translateX(-50%) scale(0.97); }
/* Stacks above .conf-skinbar (bottom:14px, ~1100) instead of overlapping it when both render. */
.conf-pill-raised { bottom: 74px; }
.conf-pill-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px); }
.conf-pill-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.conf-pill-item { min-height: 44px; }
.conf-pill-ico { font-size: 20px; flex: none; margin-top: 1px; }

/* ── Colourful quote CTAs (Ashley 2026-07-31) ──────────────────────────────
   Every quote action pops in light AND dark mode — no blacked-out ghost buttons.
   Colour = meaning: sky view · green send · amber duplicate · violet convert. */
.btn-act { color: #fff; border: 0; }
.btn-act:hover { filter: brightness(1.1); color: #fff; }
.btn-act.view { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.btn-act.send { background: linear-gradient(135deg, #22c55e, #059669); }
.btn-act.dup { background: linear-gradient(135deg, #f59e0b, #d97706); }
.btn-act.convert { background: linear-gradient(135deg, #ef4444, #b91c1c); }
/* Near-fullscreen quote-PDF preview (Ashley: the preview window needs to be bigger). */
.modal.quote-pdf { max-width: min(1200px, 96vw); }
.btn-act.person { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.btn-act.edit { background: linear-gradient(135deg, #ec4899, #db2777); }
.btn-act.alt { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
/* Completed billing steps read as status, not dead buttons (2026-07-31). */
.btn-done { background: color-mix(in srgb, #22c55e 14%, var(--surface)); color: #15803d;
  border: 1px solid color-mix(in srgb, #22c55e 45%, var(--line)); cursor: default; }
.btn-done:disabled { opacity: 1; }
[data-theme="dark"] .btn-done { color: #4ade80; }

/* ── Front door (Home) — the warm first screen (Ashley, 2026-08-03) ──────────
   A person and a decision before any counters. Tokens only, so light/dark both
   work; the mascot hides on narrow screens where the greeting matters more. */
.rh-door-main { background: var(--surface); position: relative; overflow: hidden; }
.rh-door-main::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 88% 0%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 60%); }
.rh-door-row { display: flex; gap: 20px; align-items: flex-start; position: relative; z-index: 1; }
.rh-door-dean { flex: none; width: 96px; height: auto; align-self: flex-end; margin-bottom: -20px; }
.rh-door-say { line-height: 1.45; max-width: 62ch; margin-bottom: 14px; }
.rh-door-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-chip { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  border-radius: 999px; padding: 8px 15px; font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: border-color .18s var(--ease), transform .18s var(--ease); }
.rh-chip:hover { border-color: var(--ring); transform: translateY(-1px); }
.rh-door-ask { display: flex; gap: 8px; align-items: center; margin-top: 16px; position: relative; z-index: 1; }
@media (max-width: 620px) {
  .rh-door-dean { display: none; }
  .rh-door-say { font-size: 15px; }
}

/* Customer Service bench — voice controls. Recording must be unmistakable and
   must not rely on motion alone (widget parity). */
.cs-voice-mic.listening { background: #c62828; border-color: #8e1f1f; color: #fff; box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.25); animation: cs-voice-pulse 1.2s infinite; }
.cs-voice-mic.installing { border-color: var(--accent, #6d28d9); }
@keyframes cs-voice-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .cs-voice-mic.listening { animation: none; } }

/* ============================================================
   Reception workspace — three-pane inbox (Task 17)
   list │ thread │ context, rendered inside #csbody on
   Customer Service ▸ Conversations. Documented exception to the
   page-scaffold pattern (see PAGE-PATTERNS.md "Conventions" and
   docs/specs/2026-08-23-reception-workspace-design.md) — an inbox
   worked in for hours needs all three panes visible at once, which
   tableCard()+overlay() can't express. Still tokens-only, still
   dark-mode-aware, still collapses to one column on the existing
   ≤980px mobile breakpoint (see "Mobile shell" above).
   ============================================================ */

.rcpw {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 280px;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  height: calc(100vh - 220px);
  min-height: 480px;
}
.rcpw.rcpw-nocontext { grid-template-columns: 320px minmax(0, 1fr); }
.rcpw.rcpw-nocontext .rcpw-context { display: none; }

.rcpw-list, .rcpw-thread, .rcpw-context {
  min-width: 0;
  background: var(--surface);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ---- Service level (sub-project 3) ---- */
/* Deliberately NOT sticky: .rcpw-views sticks at top:0 and .rcpw-search at
   top:44px, and both offsets were reasoned from neighbouring panels rather
   than measured in a browser. A third sticky layer would move them again. */
.rcpw-sla {
  padding: 8px 12px 6px;
  font-size: 12px; line-height: 1.4; color: var(--ink-2);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.rcpw-sla.is-risk { box-shadow: inset 3px 0 0 var(--warn); }
.rcpw-sla.is-breached { box-shadow: inset 3px 0 0 var(--bad); color: color-mix(in srgb, var(--bad) 60%, var(--ink)); }
.rcpw-sla.is-closed { color: var(--ink-3); font-style: italic; }
/* The wait time is the thing that changes meaning, so the wait time is what
   changes colour — never the whole row, which already carries the waiting
   treatment and the selection state. */
.rcpw-when.is-risk { color: color-mix(in srgb, var(--warn) 70%, var(--ink)); font-weight: 700; }
.rcpw-when.is-breached { color: color-mix(in srgb, var(--bad) 70%, var(--ink)); font-weight: 700; }
.rcpw-past { font-size: 10px; }

/* The report screen's own stat-card row. Declared here rather than reusing a
   `.stats`/`.mstats` class: neither is actually DEFINED in this stylesheet —
   app.js uses `class="stats"` in one place and gets an unstyled block. */
.cs-sup-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin: 0 0 6px;
}

/* ---- List pane ---- */
.rcpw-views {
  position: sticky; top: 0; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 10px 12px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.rcpw-view {
  appearance: none; border: 1px solid transparent; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.rcpw-view:hover { background: var(--surface-hover); color: var(--ink); }
.rcpw-view:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.rcpw-view.is-on { background: color-mix(in srgb, var(--navy) 14%, transparent); color: var(--navy); }
.rcpw-view b { font-weight: 700; }
.rcpw-search {
  position: sticky; top: 44px; z-index: 2;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.rcpw-search input {
  width: 100%; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 7px 10px;
}
.rcpw-search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px var(--focus-ring); }
.rcpw-rows { display: flex; flex-direction: column; }

.rcpw-row {
  appearance: none; border: none; background: none; font: inherit; color: inherit;
  width: 100%; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  box-shadow: inset 0 0 0 transparent;
  transition: background .15s var(--ease);
}
.rcpw-row:hover { background: var(--surface-hover); }
.rcpw-row-waiting { box-shadow: inset 3px 0 0 var(--warn); }
.rcpw-row.is-sel { background: color-mix(in srgb, var(--navy) 9%, transparent); box-shadow: inset 3px 0 0 var(--navy); }
.rcpw-row.is-sel:hover { background: color-mix(in srgb, var(--navy) 12%, transparent); }
.rcpw-row.is-cursor { outline: 2px solid var(--navy); outline-offset: -2px; }
.rcpw-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rcpw-who { font-size: 13.5px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcpw-row.rcpw-unread .rcpw-who { font-weight: 700; }
.rcpw-row.rcpw-unread .rcpw-who::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--navy); margin-right: 6px; vertical-align: middle;
}
.rcpw-when { flex: none; font-size: 11px; color: var(--ink-3); }
.rcpw-snip { display: block; font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcpw-row-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 1px; }
.rcpw-badge, .rcpw-lang {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2);
}
.rcpw-asg {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy);
}

/* ---- Thread pane ---- */
.rcpw-thead {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.rcpw-thead-who {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.rcpw-thead-acts { flex: none; display: flex; align-items: center; gap: 8px; }

.rcpw-log { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }

/* Internal note bubble — dashed + warning-tinted, deliberately unlike any
   bubble a visitor could ever see (never confuse with .thread-bubble.out). */
.rcpw-note {
  align-self: flex-end; max-width: 82%;
  padding: 10px 13px; border-radius: var(--r-md); border-bottom-right-radius: 5px;
  font-size: 13px; line-height: 1.45; color: var(--ink);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  border: 1.5px dashed color-mix(in srgb, var(--warn) 55%, transparent);
  box-shadow: none;
}

.rcpw-nowrite {
  padding: 16px 18px; text-align: center; font-size: 13px; color: var(--ink-2);
  background: var(--surface-2); border-top: 1px solid var(--line);
}

.rcpw-composer {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
/* Note mode reads as unmistakably different from reply mode — a staff member
   must never mistake one for the other. */
.rcpw-composer.is-note {
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  border-top-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.rcpw-composer textarea { min-height: 64px; resize: vertical; }
.rcpw-composer.is-note textarea {
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.rcpw-comptools { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rcpw-mode, .rcpw-canned {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2);
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.rcpw-mode:hover, .rcpw-canned:hover { background: var(--surface-hover); color: var(--ink); }
.rcpw-mode.is-on { background: color-mix(in srgb, var(--navy) 14%, transparent); color: var(--navy); border-color: color-mix(in srgb, var(--navy) 35%, transparent); }
.rcpw-composer.is-note .rcpw-mode.is-on {
  background: color-mix(in srgb, var(--warn) 20%, transparent);
  color: color-mix(in srgb, var(--warn) 60%, var(--ink));
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.rcpw-canned-menu {
  position: absolute; left: 0; bottom: 100%; margin-bottom: 6px;
  min-width: 240px; max-width: 320px; max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); padding: 6px; z-index: 10;
}
.rcpw-canned-item {
  display: block; width: 100%; text-align: left; appearance: none; border: none;
  background: transparent; font: inherit; font-size: 13px; color: var(--ink);
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
}
.rcpw-canned-item:hover, .rcpw-canned-item:focus-visible { background: var(--surface-hover); outline: none; }
.rcpw-compfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---- Context pane ---- */
.rcpw-ctx-toggle {
  position: sticky; top: 0; z-index: 2;
  appearance: none; border: none; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--line);
  font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-2); cursor: pointer;
}
.rcpw-ctx-toggle:hover { color: var(--ink); }
.rcpw-ctx-sec { padding: 14px; border-bottom: 1px solid var(--line); }
.rcpw-ctx-sec:last-child { border-bottom: none; }
.rcpw-ctx-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 8px; }
.rcpw-ctx-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; color: var(--ink); }
.rcpw-ctx-act {
  appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--navy);
  font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: var(--r-sm);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
}
.rcpw-ctx-act:hover { background: var(--surface-hover); border-color: var(--ring); }
.rcpw-ctx-blank { font-size: 12.5px; color: var(--ink-3); font-style: italic; }

/* ── AI assist (sub-project 4) ──────────────────────────────────────────
   Deliberately quieter than .rcpw-canned: the FREE path is the prominent
   one and the metered path is the afterthought (spec D7). Same pill shape
   so the row still reads as one control group. */
.rcpw-assist {
  appearance: none; border: 1px dashed var(--line); background: transparent;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-3);
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.rcpw-assist:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink-2); border-color: var(--ring); }
.rcpw-assist:disabled { opacity: .45; cursor: not-allowed; }
/* Translate is the LAST affordance and the least prominent one. */
.rcpw-assist-last { margin-left: auto; }

/* "AI draft — check it before you send." An OVERSIGHT artefact, not a
   compliance one: Art. 50 does not require telling someone who just pressed
   a button labelled "Draft a reply" that a model was involved. It is here to
   keep the human review real. */
.rcpw-assist-marker {
  margin: 8px 0 0; padding: 6px 10px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600;
  color: color-mix(in srgb, var(--warn) 62%, var(--ink));
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, var(--line));
}

/* Inbound translation: BENEATH the original, never instead of it. A staff
   member must always be able to see what was actually written. */
.rcpw-tx-row { margin: -4px 0 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rcpw-tx-btn {
  appearance: none; border: none; background: none; padding: 0;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--ink-3);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.rcpw-tx-btn:hover:not(:disabled) { color: var(--ink-2); }
.rcpw-tx-btn:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; }
.rcpw-tx {
  width: 100%; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 13px;
}
.rcpw-tx .rcpw-tx-body { margin-top: 3px; white-space: pre-wrap; color: var(--ink); }

/* The summary block. white-space: pre-wrap because the model returns bullet
   lines and they are escaped, never parsed as markup. */
.rcpw-summary {
  padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink); font-size: 13px; white-space: pre-wrap;
}

/* ---- Tags ---- */
.rcpw-tagbar {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 18px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.rcpw-tagchip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 999px;
  color: var(--rcpw-tag-slate);
  background: color-mix(in srgb, var(--rcpw-tag-slate) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rcpw-tag-slate) 30%, transparent);
}
.rcpw-tagchip-x { cursor: pointer; opacity: .65; font-size: 13px; line-height: 1; }
.rcpw-tagchip-x:hover, .rcpw-tagchip-x:focus-visible { opacity: 1; outline: none; }
.rcpw-tagadd {
  appearance: none; border: 1px dashed var(--line); background: transparent;
  color: var(--ink-2); font: inherit; font-size: 13px; line-height: 1;
  width: 24px; height: 24px; border-radius: 999px; cursor: pointer;
}
.rcpw-tagadd:hover { background: var(--surface-hover); color: var(--ink); }
.rcpw-tag-menu {
  position: absolute; left: 18px; top: 100%; margin-top: 6px; z-index: 10;
  min-width: 220px; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); padding: 6px;
}
.rcpw-tag-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  appearance: none; border: none; background: transparent; font: inherit; font-size: 13px;
  color: var(--ink); padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer;
}
.rcpw-tag-item:hover, .rcpw-tag-item:focus-visible { background: var(--surface-hover); outline: none; }
.rcpw-tagdot {
  flex: none; width: 8px; height: 8px; border-radius: 999px;
  background: var(--rcpw-tag-slate); display: inline-block;
}
.rcpw-tagmore { font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.rcpw-tagfilter {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 10px;
  border-bottom: 1px solid var(--line);
}
.rcpw-tagfchip {
  appearance: none; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  padding: 3px 8px; border-radius: 999px;
  color: var(--ink-2); background: transparent;
  border: 1px solid color-mix(in srgb, var(--rcpw-tag-slate) 35%, transparent);
}
.rcpw-tagfchip:hover { background: var(--surface-hover); color: var(--ink); }
.rcpw-tagfchip.is-on {
  color: var(--rcpw-tag-slate);
  background: color-mix(in srgb, var(--rcpw-tag-slate) 16%, transparent);
  border-color: color-mix(in srgb, var(--rcpw-tag-slate) 45%, transparent);
}
/* One rule per palette token, re-pointing the local variable the four
   components above already read. Adding a colour is one line here. */
.rcpw-tag-slate { --rcpw-tag-slate: var(--rcpw-tag-slate); }
.rcpw-tag-navy  { --rcpw-tag-slate: var(--rcpw-tag-navy); }
.rcpw-tag-amber { --rcpw-tag-slate: var(--rcpw-tag-amber); }
.rcpw-tag-green { --rcpw-tag-slate: var(--rcpw-tag-green); }
.rcpw-tag-red   { --rcpw-tag-slate: var(--rcpw-tag-red); }

/* ---- Snooze ---- */
.rcpw-row-snoozed { opacity: .68; }
.rcpw-row-snoozed:hover { opacity: 1; }
.rcpw-snoozed-mark {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-3); margin-top: 2px;
}
.rcpw-snoozed-banner {
  padding: 8px 18px; font-size: 12px; color: var(--ink-2);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.rcpw-snooze-menu {
  position: absolute; right: 0; top: 100%; margin-top: 6px; z-index: 10; min-width: 180px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); padding: 6px;
}
.rcpw-snooze-item {
  display: block; width: 100%; text-align: left; appearance: none; border: none;
  background: transparent; font: inherit; font-size: 13px; color: var(--ink);
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
}
.rcpw-snooze-item:hover, .rcpw-snooze-item:focus-visible { background: var(--surface-hover); outline: none; }

/* ---- Saved views ---- */
.rcpw-view-saved { font-style: normal; }
.rcpw-view-add { border-style: dashed; color: var(--ink-3); }
.rcpw-view-add:hover { color: var(--ink); }

/* ---- Single-column collapse (existing ≤980px mobile breakpoint) ----
   The mobile shell's fixed .mtop bar reserves its own space via .main's
   padding, not normal flow — so the sticky headers/footers above (anchored
   to each pane's own scroll box) would fight that fixed bar once the page
   itself starts scrolling. Simplest safe fix: drop them to static and let
   content flow like every other mobile screen. Nav stays the mobile shell's
   job — nothing here re-implements it. */
@media (max-width: 980px) {
  .rcpw {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    border-radius: var(--r-md);
  }
  .rcpw-context { display: none; }
  .rcpw.has-sel .rcpw-list { display: none; }
  .rcpw:not(.has-sel) .rcpw-thread { display: none; }
  .rcpw-list, .rcpw-thread { overflow-y: visible; }
  .rcpw-views, .rcpw-search, .rcpw-thead, .rcpw-composer, .rcpw-ctx-toggle { position: static; }
}

/* ── Feature flags console ───────────────────────────────────────────────────
   Three hundred switches need finding, not just listing. Built on the app's own
   tokens so it follows [data-theme="dark"] with the rest of the shell.        */
.fl-card { padding-bottom: 8px; }
.fl-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.fl-search { flex: 1 1 260px; position: relative; display: flex; align-items: center; }
.fl-search svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.fl-search input { width: 100%; padding: 9px 12px 9px 34px; font-size: 14px; }
.fl-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.fl-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.fl-lbl-gap { margin-left: 8px; }
.fl-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: 12px; font-weight: 500; cursor: pointer; }
.fl-chip .fl-n { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fl-chip:hover:not([aria-pressed="true"]) { border-color: var(--brand); color: var(--brand); }
.fl-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.fl-chip[aria-pressed="true"] .fl-n { color: rgba(255, 255, 255, 0.78); }
.fl-result { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.fl-result strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.fl-link { background: none; border: 0; color: var(--brand); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 2px 3px; }
.fl-list { max-height: 68vh; overflow-y: auto; overscroll-behavior: contain; margin: 0 -20px; border-top: 1px solid var(--line); }
.fl-grp { border-bottom: 1px solid var(--line); }
.fl-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 20px; background: var(--navy-50); border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.fl-caret { width: 9px; height: 9px; flex: 0 0 9px; color: var(--ink-3); transition: transform 0.15s var(--ease, ease); }
.fl-grp[data-open="false"] .fl-caret { transform: rotate(-90deg); }
.fl-grp[data-open="false"] .fl-rows { display: none; }
.fl-gname { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }
.fl-tally { display: flex; gap: 4px; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.fl-tally i { font-style: normal; padding: 1px 6px; border-radius: 4px; background: var(--navy-50); color: var(--ink-3); }
.fl-tally i.ok { background: rgba(16, 128, 92, 0.12); color: #0e7c5a; }
.fl-tally i.beta { background: rgba(180, 112, 10, 0.14); color: #9a5b08; }
.fl-row { display: grid; grid-template-columns: 3px 1fr auto; border-bottom: 1px solid var(--line); }
.fl-grp .fl-row:last-child { border-bottom: 0; }
.fl-row:hover { background: var(--navy-50); }
.fl-stripe { background: var(--ink-3); opacity: 0.45; }
.fl-row[data-state="on"] .fl-stripe { background: #0e7c5a; opacity: 1; }
.fl-row[data-state="beta"] .fl-stripe { background: #c9871a; opacity: 1; }
.fl-main { padding: 11px 14px 11px 20px; min-width: 0; }
.fl-row[data-child="1"] .fl-main { padding-left: 40px; position: relative; }
.fl-row[data-child="1"] .fl-main::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.fl-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fl-top strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fl-top code { font-size: 11.5px; color: var(--ink-3); font-family: ui-monospace, "SFMono-Regular", monospace; }
.fl-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.fl-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
  background: var(--navy-50); color: var(--ink-3); }
.fl-tag.fl-legal { background: rgba(91, 61, 245, 0.12); color: #5b3df5; }
.fl-tag.fl-sends { background: rgba(180, 112, 10, 0.14); color: #9a5b08; }
.fl-tag.fl-customer { background: rgba(16, 128, 92, 0.12); color: #0e7c5a; }
.fl-tag.fl-minors { background: rgba(176, 54, 44, 0.12); color: #b0362c; }
.fl-tag.fl-dep { text-transform: none; letter-spacing: 0; font-weight: 500; background: transparent; border: 1px dashed var(--line); color: var(--ink-3); }
.fl-tag.fl-dep-off { border-color: #b0362c; color: #b0362c; }
.fl-desc { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fl-row[data-exp="1"] .fl-desc { display: block; -webkit-line-clamp: unset; }
.fl-desc.fl-undoc { font-style: italic; color: var(--ink-3); }
.fl-more { display: block; padding: 3px 0 0; font-size: 11.5px; }
.fl-meta { margin-top: 6px; font-size: 11px; color: var(--ink-3); }
.fl-stale { color: #9a5b08; font-weight: 600; }
.fl-act { display: flex; align-items: center; padding: 11px 20px 11px 14px; }
.fl-sw button { font-size: 11px; padding: 5px 10px; }
[data-theme="dark"] .fl-tally i.ok, [data-theme="dark"] .fl-tag.fl-customer { background: rgba(95, 209, 165, 0.16); color: #5fd1a5; }
[data-theme="dark"] .fl-tally i.beta, [data-theme="dark"] .fl-tag.fl-sends, [data-theme="dark"] .fl-stale { background: rgba(232, 176, 99, 0.16); color: #e8b063; }
[data-theme="dark"] .fl-stale { background: none; }
[data-theme="dark"] .fl-tag.fl-legal { background: rgba(160, 140, 255, 0.16); color: #a08cff; }
[data-theme="dark"] .fl-tag.fl-minors, [data-theme="dark"] .fl-tag.fl-dep-off { background: rgba(240, 146, 135, 0.14); color: #f09287; }
[data-theme="dark"] .fl-tag.fl-dep-off { background: transparent; }
[data-theme="dark"] .fl-row[data-state="on"] .fl-stripe { background: #5fd1a5; }
[data-theme="dark"] .fl-row[data-state="beta"] .fl-stripe { background: #e8b063; }
@media (max-width: 720px) {
  .fl-row { grid-template-columns: 3px 1fr; }
  .fl-act { grid-column: 2; padding: 0 20px 11px 20px; }
}