/* CRM dashboard — grounded in the Ahead design system tokens.
   Palette: aubergine (brand) + neutral. Radii 12/16. Type: Aeonik. */

@font-face { font-family: Aeonik; src: url('/public/fonts/Aeonik-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Aeonik; src: url('/public/fonts/Aeonik-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Aeonik; src: url('/public/fonts/Aeonik-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Aeonik; src: url('/public/fonts/Aeonik-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }

:root {
  --aubergine-50:#FBF7FC; --aubergine-100:#F6EFF8; --aubergine-200:#EDDDF1; --aubergine-300:#E0C2E5;
  --aubergine-400:#CD9ED4; --aubergine-500:#9958A1; --aubergine-600:#7F4685; --aubergine-700:#613862;
  --aubergine-800:#48214A; --aubergine-900:#371938;
  --neutral-00:#FFFFFF; --neutral-50:#F6F6F6; --neutral-100:#EDEDED; --neutral-200:#D5D5D5;
  --neutral-300:#B5B5B5; --neutral-400:#919191; --neutral-500:#757575; --neutral-600:#5E5E5E;
  --neutral-700:#4A4A4A; --neutral-800:#3D3D3D; --neutral-900:#2D2D2D;
  --navy-600:#182D56; --navy-700:#1E3468;
  --green-50:#f0fdf4; --green-100:#dcfce7; --green-200:#bbf7d0; --green-500:#22c55e; --green-600:#16a34a; --green-700:#15803d; --green-800:#166534;
  --amber-50:#fffbeb; --amber-200:#fde68a; --amber-700:#b45309;
  --error-50:#FFFBF9; --error-100:#FCEEEE; --error-200:#F9DEDC; --error-300:#F2B8B5; --error-700:#B3261E;
  --r:12px; --r-lg:16px; --r-pill:999px;
  /* design-system tokens (tokens/shadows.ts, motion.ts, colors.semantic) */
  --shadow-sm:0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 25px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
  --ring-focus:rgba(153,88,161,.12);
  --transition:.25s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
/* The [hidden] attribute must always win — class-level `display` rules (e.g. .kcard{display:block})
   otherwise outrank the UA [hidden]{display:none}, so filtered-out cards/rows stay visible. */
[hidden] { display: none !important; }
html, body { margin:0; padding:0; }
body {
  font-family: Aeonik, system-ui, -apple-system, sans-serif;
  color: var(--neutral-900); background: var(--neutral-50);
  font-size: 14px; line-height: 1.5;
}
a { color: var(--aubergine-700); text-decoration: none; }
a:hover { text-decoration: underline; }

/* layout */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side {
  background: var(--neutral-00); border-right: 1px solid var(--neutral-100);
  padding: 24px 16px; position: sticky; top: 0; height: 100vh;
}
.brand { display:flex; align-items:center; gap:10px; margin-bottom: 24px; }
.brand-home { display:inline-flex; align-items:center; gap:10px; text-decoration:none; border-radius:8px; }
.brand-home:hover { text-decoration:none; opacity:.85; }
.brand img { height: 22px; }
.brand .s0 {
  font-weight:700; font-size:13px; color: var(--aubergine-700);
  background: var(--aubergine-100); padding:2px 8px; border-radius: var(--r-pill);
}
.nav a {
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius: var(--r); color: var(--neutral-700);
  font-weight:500; margin-bottom:2px; transition:background var(--transition), color var(--transition);
}
.nav a:hover { background: var(--neutral-50); text-decoration:none; }
.nav a.active { background: var(--aubergine-100); color: var(--aubergine-800); }
.nav a .ic { opacity:.65; }
.nav a.active .ic { opacity:1; }

/* two-level nav: primary group, an Admin group, and a footer group */
.nav-group { display:flex; flex-direction:column; }
.nav-group + .nav-group { margin-top:16px; }
.nav-label {
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color: var(--neutral-400); padding:2px 12px 4px;
}

/* Admin disclosure (native <details>): summary looks like a nav item + a chevron; children indent. */
.nav-admin { margin-top:16px; }
.nav-admin summary { list-style:none; }
.nav-admin summary::-webkit-details-marker { display:none; }
.nav-admin-summary {
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r); cursor:pointer;
  color:var(--neutral-500); font-weight:600; font-size:13px; transition:background var(--transition), color var(--transition);
}
.nav-admin-summary:hover { background:var(--neutral-50); color:var(--neutral-700); }
.nav-admin-summary .ic { opacity:.6; }
.nav-admin-summary::after { content:"▾"; margin-left:auto; font-size:10px; color:var(--neutral-400); transition:transform .15s; }
.nav-admin[open] .nav-admin-summary::after { transform:rotate(180deg); }
.nav-admin-items { display:flex; flex-direction:column; }

/* icons (inline SVG, inherit color via currentColor) */
.ic { width:18px; height:18px; flex:none; display:inline-block; vertical-align:middle; }

/* sidebar collapse toggle + collapsed icon-rail */
.brand { position:relative; }
.nav-toggle { margin-left:auto; background:none; border:none; cursor:pointer; color:var(--neutral-400);
  padding:4px; border-radius:var(--r); display:inline-flex; align-items:center; transition:background var(--transition), color var(--transition); }
.nav-toggle:hover { background:var(--neutral-100); color:var(--neutral-700); }
.nav a { position:relative; }   /* anchor for the collapsed hover pill */

/* State class lives on <html> (Turbo never replaces it) so collapse survives navigation. */
.nav-collapsed .shell { grid-template-columns: 68px 1fr; }
.nav-collapsed .side { padding:18px 12px; }
.nav-collapsed .search, .nav-collapsed .src, .nav-collapsed .brand img, .nav-collapsed .brand .s0 { display:none; }
.nav-collapsed .brand { justify-content:center; margin-bottom:14px; }
.nav-collapsed .nav-toggle { margin:0; }
.nav-collapsed .nav-toggle svg { transform:rotate(180deg); }   /* chevron points right (expand) when collapsed */
.nav-collapsed .nav a { justify-content:center; padding:10px; }
.nav-collapsed .nav a span { display:none; }
/* collapsed rail: section label becomes a thin divider line */
.nav-collapsed .nav-label {
  height:1px; padding:0; margin:8px 8px; overflow:hidden; text-indent:-9999px;
  background: var(--neutral-100);
}
/* hover pill: shows the label of the icon you're pointing at */
.nav-collapsed .nav a::after {
  content: attr(data-label); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:var(--neutral-900); color:#fff; font-size:12px; font-weight:500; white-space:nowrap;
  padding:5px 10px; border-radius:var(--r); box-shadow:var(--shadow-md);
  opacity:0; pointer-events:none; transition:opacity .12s; z-index:60;
}
.nav-collapsed .nav a:hover::after { opacity:1; }

/* global search */
.search { position:relative; margin:8px 0 14px; }
.search input { width:100%; box-sizing:border-box; font-family:inherit; font-size:13px; padding:8px 11px;
  border:1px solid var(--neutral-200); border-radius:var(--r); background:var(--neutral-50); }
.search input:focus { outline:none; border-color:var(--aubergine-500); box-shadow:0 0 0 3px var(--ring-focus); background:var(--neutral-00); }
.search-results { position:absolute; top:100%; left:0; min-width:300px; margin-top:4px; z-index:40;
  background:var(--neutral-00); border:1px solid var(--neutral-200); border-radius:var(--r); box-shadow:var(--shadow-lg);
  max-height:60vh; overflow:auto; }
.sr { display:flex; align-items:baseline; gap:8px; padding:8px 11px; border-bottom:1px solid var(--neutral-100); color:var(--neutral-800); }
.sr:last-child { border-bottom:none; }
.sr:hover, .sr.active { background:var(--aubergine-50); text-decoration:none; }
.sr-type { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--neutral-400); flex:none; width:56px; }
.sr-main { display:flex; flex-direction:column; min-width:0; }
.sr-label { font-weight:500; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-sub { font-size:11px; color:var(--neutral-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-empty { padding:10px 11px; font-size:13px; color:var(--neutral-500); }

/* list membership: add-a-person typeahead (list detail) */
.member-add { position:relative; max-width:340px; margin:0 0 16px; }
.member-add-ic { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--neutral-400); pointer-events:none; }
.member-add-input { width:100%; box-sizing:border-box; font-family:inherit; font-size:13px; padding:8px 11px 8px 33px;
  border:1px solid var(--neutral-200); border-radius:var(--r); background:var(--neutral-50); }
.member-add-input:focus { outline:none; border-color:var(--aubergine-500); box-shadow:0 0 0 3px var(--ring-focus); background:var(--neutral-00); }
.member-add:focus-within .member-add-ic { color:var(--aubergine-500); }
td.act { text-align:right; white-space:nowrap; width:1%; }
/* Quieten the table: reveal Remove on row hover/focus (devices with hover only; always shown on touch). */
@media (hover:hover) {
  [data-member-table] tbody tr td.act .btn { opacity:0; transition:opacity var(--transition); }
  [data-member-table] tbody tr:hover td.act .btn,
  [data-member-table] tbody tr:focus-within td.act .btn { opacity:1; }
}

/* list membership: chips + add-to-list picker (person detail) */
.list-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 10px; border-radius:var(--r-pill);
  font-size:12px; font-weight:500; color:var(--neutral-700); background:var(--neutral-100); }
.chip .chip-x { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; padding:0;
  border:none; border-radius:50%; background:transparent; color:var(--neutral-500); font-size:14px; line-height:1; cursor:pointer;
  transition:background var(--transition), color var(--transition); }
.chip .chip-x:hover { background:var(--neutral-300); color:var(--neutral-900); }
.add-to-list { display:flex; gap:8px; align-items:center; margin-top:12px; }
.add-to-list-select { font-family:inherit; font-size:13px; padding:7px 11px; border:1px solid var(--neutral-200);
  border-radius:var(--r); background:var(--neutral-00); max-width:220px; }
.add-to-list-select:focus { outline:none; border-color:var(--aubergine-500); box-shadow:0 0 0 3px var(--ring-focus); }

.rowlink { cursor:pointer; }

/* per-table instant filter */
.tfilter { width:100%; max-width:340px; box-sizing:border-box; font-family:inherit; font-size:13px;
  padding:8px 11px; margin:0 0 12px; border:1px solid var(--neutral-200); border-radius:var(--r); background:var(--neutral-00); }
.tfilter:focus { outline:none; border-color:var(--aubergine-500); box-shadow:0 0 0 3px var(--ring-focus); }

/* Turbo navigation progress bar — on-brand */
.turbo-progress-bar { background: var(--aubergine-500); height: 3px; }

/* hero stat — Open pipeline is the page's anchor (critique: give Overview a hero metric) */
.card.hero { grid-column: span 2; background: var(--aubergine-50); border-color: var(--aubergine-200); color: inherit; transition: box-shadow var(--transition), transform var(--transition); }
.card.hero:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; }
.card.hero .v { font-size: 38px; color: var(--aubergine-800); }
.hero-sub { font-size: 12px; color: var(--aubergine-700); margin-top: 6px; }

/* styled native selects (critique: unstyled <select> on Admin) */
select { font-family: inherit; font-size: 13px; color: var(--neutral-900); background: var(--neutral-00);
  border: 1px solid var(--neutral-200); border-radius: var(--r); padding: 7px 30px 7px 11px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  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='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
select:focus { outline: none; border-color: var(--aubergine-500); box-shadow: 0 0 0 3px var(--ring-focus); }

/* editable email on Admin — an obvious input, not plain text */
.email-input { font-family:'DM Mono',ui-monospace,monospace; font-size:13px; color:var(--neutral-900);
  background:var(--neutral-00); border:1px solid var(--neutral-200); border-radius:var(--r); padding:7px 9px; min-width:212px; }
.email-input:focus { outline:none; border-color:var(--aubergine-500); box-shadow:0 0 0 3px var(--ring-focus); }

/* country-scope picker — flag-chip checkboxes (Admin table + add-user form). Checked = in scope;
   none checked = unrestricted (all markets). The native checkbox is hidden; the pill is the control. */
.scope-picker { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.flag-chip { display:inline-flex; align-items:center; gap:5px; position:relative; cursor:pointer; user-select:none;
  font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--neutral-700);
  padding:4px 10px; border:1px solid var(--neutral-200); border-radius:var(--r-pill); background:var(--neutral-00); }
.flag-chip input { position:absolute; opacity:0; width:0; height:0; margin:0; }
.flag-chip:hover { border-color:var(--neutral-300); }
.flag-chip:has(input:checked) { border-color:var(--aubergine-500); background:var(--aubergine-50); color:var(--aubergine-700); }
.flag-chip:has(input:focus-visible) { box-shadow:0 0 0 3px var(--ring-focus); }
.flag-chip .flag { font-size:14px; line-height:1; }
.scope-all { font-size:11px; }
fieldset.scope-fieldset { border:1px solid var(--neutral-200); border-radius:var(--r); padding:12px 14px; margin:0;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
fieldset.scope-fieldset legend { font-size:12px; font-weight:600; color:var(--neutral-600); padding:0 6px; }

.empty { color: var(--neutral-500); padding: 16px 14px; }
.side .src { margin-top: 24px; font-size:12px; color: var(--neutral-500); }
.side .src b { color: var(--neutral-800); }

/* min-width:0 lets a wide child (the horizontal kanban) scroll INSIDE this grid cell instead
   of stretching the cell and pushing the sidebar off-screen — grid items default to min-width:auto. */
.main { padding: 32px 40px; min-width: 0; }   /* full width so the topbar always spans the column */
.main-content { max-width: 1180px; min-width: 0; }   /* content is capped; the topbar above it is not */
.main.wide .main-content { max-width: none; }   /* bookings board uses the full width — lanes shouldn't be capped */
/* type scale from design-system tokens/typography.ts (headline-md, title, body, label).
   Aeonik tops out at weight 500 (medium) for headings in the DS — no 700 on headings. */
h1 { font-size: 28px; line-height:36px; font-weight:500; letter-spacing:0; margin:0 0 4px; }
h2 { font-size: 18px; line-height:24px; font-weight:500; letter-spacing:0; margin: 28px 0 12px; }
.sub { color: var(--neutral-500); font-size:14px; line-height:20px; margin: 0 0 24px; }

/* cards / stats */
.cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.card {
  background: var(--neutral-00); border:1px solid var(--neutral-100);
  border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.card .k { color: var(--neutral-500); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.1px; display:flex; align-items:center; gap:6px; }
.card .v { font-size: 30px; font-weight:600; margin-top:6px; }
.card .v small { font-size:14px; font-weight:500; color: var(--neutral-500); }

/* funnel kanban */
.funnel { display:grid; grid-template-columns: repeat(6,1fr); gap:12px; }
.col { background: var(--neutral-00); border:1px solid var(--neutral-100); border-radius: var(--r-lg); padding:14px; }
.col .name { font-weight:600; font-size:13px; text-transform:capitalize; }
.col .count { font-size:26px; font-weight:700; margin:6px 0 2px; color: var(--aubergine-700); }
.col .val { font-size:12px; color: var(--neutral-500); }
.col .bar { height:4px; border-radius:var(--r-pill); background:var(--aubergine-500); margin-top:10px; }

/* table */
table { width:100%; border-collapse: collapse; background:var(--neutral-00);
  border:1px solid var(--neutral-100); border-radius: var(--r-lg); overflow:hidden; }
th, td { text-align:left; padding:11px 14px; font-size:13px; border-bottom:1px solid var(--neutral-100); }
th { background: var(--neutral-50); color:var(--neutral-600); font-weight:600;
  text-transform:uppercase; font-size:11px; letter-spacing:.04em; }
tr:last-child td { border-bottom:none; }
tr:hover td { background: var(--aubergine-50); }
td.num { text-align:right; font-variant-numeric: tabular-nums; }

/* badges */
.b { display:inline-block; padding:2px 9px; border-radius:var(--r-pill); font-size:11px; font-weight:600; }
/* commercial stage ramp (1:1 with Attio) — aubergine through the active pipeline, green at the
   money end, amber while a payment is pending, error for lost. All from DS tokens. */
.b.requested{background:var(--neutral-100);color:var(--neutral-700);}
.b.scheduling{background:var(--aubergine-100);color:var(--aubergine-800);}
.b.rescheduling{background:var(--aubergine-100);color:var(--aubergine-700);}
.b.planned{background:var(--aubergine-200);color:var(--aubergine-900);}
.b.done{background:var(--green-50);color:var(--green-700);}
.b.invoiced{background:var(--amber-50);color:var(--amber-700);}
.b.paid{background:var(--green-100);color:var(--green-700);}
.b.lost{background:var(--error-100);color:var(--error-700);}
.b.scheduled{background:var(--aubergine-200);color:var(--aubergine-900);}   /* legacy, retained */
.b.delivered{background:var(--green-100);color:var(--green-800);}           /* legacy, retained */
.b.clinical{background:var(--navy-600);color:#fff;}
.b.warn{background:var(--amber-200);color:var(--amber-700);}
.b.ok{background:var(--green-100);color:var(--green-800);}
.b.muted{background:var(--neutral-100);color:var(--neutral-500);}
.b.live{background:var(--green-100);color:var(--green-800);}
.b.snapshot{background:var(--aubergine-100);color:var(--aubergine-800);}

/* SLA badges — small pills matching .b chips: amber = at risk, red = breached. */
.sla-badge { display:inline-block; padding:2px 9px; border-radius:var(--r-pill); font-size:11px; font-weight:600; }
.sla-badge.at_risk { background:var(--amber-200); color:var(--amber-700); }
.sla-badge.breached { background:var(--error-100); color:var(--error-700); }
.sla-badge.on_track { background:var(--aubergine-100); color:var(--aubergine-700); }
/* /sla: clickable sort headers + indicator; filter row select sizing. */
.th-sort { cursor:pointer; user-select:none; white-space:nowrap; }
.th-sort:hover { color:var(--aubergine-700); }
.sort-ind { font-size:10px; color:var(--aubergine-500); }
.sla-filters .sla-status, .sla-filters .sla-clinic { flex:0 0 auto; }
/* SLA badge on a list row, trailing the name. */
.sla-row-badge { margin-left:6px; vertical-align:middle; }
/* People list: text filter + SLA select side by side. */
.row-filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row-filters .tfilter { flex:1 1 240px; }
.row-filters .tfilter-sla { flex:0 0 auto; }
/* Overview SLA card — left accent reflects the worst bucket. */
.card.sla-card .sla-card-sub { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.card.sla-card.breached { border-color:var(--error-100); }
.card.sla-card.at_risk { border-color:var(--amber-200); }

/* callout — even 1px border all round (no left-edge accent) */
.callout { background: var(--neutral-00); border:1px solid var(--neutral-200);
  border-radius: var(--r); padding:16px 18px; margin:18px 0; }
.callout.warn { border-color: var(--amber-200); background: var(--amber-50); }
.callout h3 { margin:0 0 6px; font-size:14px; }
.callout p { margin:0; color: var(--neutral-600); font-size:13px; }

/* buttons — cta tokens (colors.semantic: cta-default navy-600, cta-hover navy-700) */
.btn { display:inline-flex; align-items:center; gap:7px; background:var(--navy-600); color:#fff; border:none; cursor:pointer;
  padding:10px 18px; border-radius:var(--r); font-family:inherit; font-size:13px; font-weight:500; letter-spacing:.1px; transition:background var(--transition); }
.btn:hover { background:var(--navy-700); }
.btn.ghost { background:var(--neutral-00); color:var(--neutral-800); border:1px solid var(--neutral-200); }
.btn.ghost:hover { background:var(--neutral-50); border-color:var(--neutral-300); }
.btn .ic { width:16px; height:16px; }
.row { display:flex; gap:10px; align-items:center; }
.row.wrap { flex-wrap:wrap; row-gap:6px; }
.spacer { flex:1; }
.btn.sm { padding:6px 12px; font-size:12px; }
/* destructive button — solid only for the final confirm; ghost-danger for the trigger */
.btn.danger { background:var(--error-700); color:#fff; }
.btn.danger:hover { background:#8f1d17; }
.btn.ghost.danger { background:var(--neutral-00); color:var(--error-700); border-color:var(--error-200); }
.btn.ghost.danger:hover { background:var(--error-50); border-color:var(--error-300); }

/* confirm modal */
.confirm-dialog { border:none; border-radius:var(--r-lg); padding:0; width:460px; max-width:94vw; box-shadow:var(--shadow-lg); color:var(--neutral-900); }
.confirm-dialog::backdrop { background:rgba(45,30,50,.34); backdrop-filter:blur(2px); }
.confirm-form { padding:22px 24px 18px; }
.confirm-title { margin:0 0 10px; font-size:17px; }
.confirm-body { font-size:13px; color:var(--neutral-700); line-height:1.5; }
.confirm-body p { margin:0 0 10px; }
.confirm-field { display:flex; flex-direction:column; gap:5px; margin-top:12px; font-size:12px; font-weight:500; color:var(--neutral-600); }
.confirm-field textarea { font-family:inherit; font-size:13px; padding:9px 11px; border:1px solid var(--neutral-200); border-radius:var(--r); resize:vertical; }
.confirm-field textarea:focus { outline:none; border-color:var(--aubergine-500); box-shadow:0 0 0 3px var(--ring-focus); }
.confirm-typed { display:flex; flex-direction:column; gap:5px; margin-top:14px; font-size:12px; color:var(--neutral-600); }
.confirm-typed input { font-family:inherit; font-size:13px; padding:9px 11px; border:1px solid var(--neutral-200); border-radius:var(--r); }
.confirm-typed input:focus { outline:none; border-color:var(--error-700); box-shadow:0 0 0 3px var(--error-100); }
.confirm-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* email reveal modal — full-fidelity render of a live-revealed email in a locked, sandboxed iframe.
   The .rv-banner / .rv-body styling lives INSIDE the rendered doc's own <style> (served by the route);
   here we only style the chrome around the iframe. */
.email-modal { border:0; border-radius:var(--r-lg); padding:0; width:760px; max-width:94vw; height:82vh;
  box-shadow:var(--shadow-lg); color:var(--neutral-900); overflow:hidden; }
.email-modal::backdrop { background:rgba(45,30,50,.34); backdrop-filter:blur(2px); }
.email-modal-head { display:flex; align-items:center; justify-content:space-between; height:48px;
  padding:0 14px; border-bottom:1px solid var(--neutral-100); background:var(--neutral-00); }
.email-modal-title { font-size:14px; font-weight:600; color:var(--neutral-800); }
.email-frame { border:0; width:100%; height:calc(82vh - 48px); background:#fff; display:block; }

/* booking detail — products chip multi-select (brand token = --aubergine-*) */
.chipselect { display:flex; flex-wrap:wrap; gap:6px; }
.chipselect .opt { display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border:1px solid var(--neutral-300); border-radius:var(--r-pill); cursor:pointer; font-size:13px; user-select:none; }
.chipselect .opt input { position:absolute; opacity:0; width:0; height:0; }
.chipselect .opt:has(input:checked) { background:var(--aubergine-100); border-color:var(--aubergine-400); color:var(--aubergine-700); }
.chipselect .opt:has(input:focus-visible) { outline:2px solid var(--aubergine-400); outline-offset:1px; }
.chipselect .opt:has(input:disabled) { opacity:.55; cursor:default; }

/* booking detail — customer summary header */
.customer-card { margin:0 0 22px; }
.customer-card .cc-main { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.customer-card .cc-name { font-size:18px; font-weight:600; color:var(--neutral-900); }
.customer-card .cc-meta { font-size:13px; color:var(--neutral-500); margin-top:3px; }
.customer-card .cc-counts { display:flex; gap:28px; margin-top:16px; padding-top:14px; border-top:1px solid var(--neutral-100); }
.customer-card .cc-count { display:flex; flex-direction:column; gap:2px; }
.customer-card .cc-count .cc-n { font-size:20px; font-weight:600; color:var(--neutral-900); line-height:1.1; }
.customer-card .cc-count .cc-k { font-size:12px; color:var(--neutral-500); }

/* person detail — manage / danger section */
.manage { margin-top:32px; border-top:1px solid var(--neutral-100); padding-top:18px; }
.manage h2 { margin:0 0 14px; }
.manage-row { display:flex; flex-direction:column; gap:10px; max-width:680px; }
.manage-item { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 16px; border:1px solid var(--neutral-200); border-radius:var(--r); }
.manage-item.danger { border-color:var(--error-200); background:var(--error-50); }
.manage-item b { font-size:13px; }
.manage-item .sub { margin:3px 0 0; max-width:46ch; }
.manage-item > div:first-child { min-width:0; }

/* audit log — expandable detail + before/after diff */
.audit-d > summary { cursor:pointer; list-style:none; color:var(--neutral-700); }
.audit-d > summary::-webkit-details-marker { display:none; }
.audit-d > summary:hover { color:var(--aubergine-700); }
.audit-d[open] > summary { color:var(--neutral-900); font-weight:500; margin-bottom:8px; }
.audit-full { padding:2px 0 6px; }
table.diff { width:100%; border-collapse:collapse; margin:0; }
table.diff th { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--neutral-400); text-align:left; padding:2px 8px 4px 0; }
table.diff td { padding:3px 8px 3px 0; vertical-align:top; border:none; }
table.diff td.was { color:var(--neutral-500); text-decoration:line-through; }
table.diff td.now { color:var(--success-700, var(--navy-700)); }
.mono { font-family: 'DM Mono', monospace; font-size:12px; color:var(--neutral-600); }
.foot { color:var(--neutral-400); font-size:12px; margin-top:40px; }
.back { font-size:13px; font-weight:500; }

/* top bar: sticky header, identity pinned to the right (no longer floating in the content) */
/* Floating account cluster: notification bell + avatar, pinned to the top-right corner above all
   content. Replaces the old full-width topbar — the logo lives in the sidebar. */
.userbar { position:fixed; top:14px; right:20px; z-index:200; display:flex; align-items:center; gap:2px;
  background:var(--neutral-00); border:1px solid var(--neutral-100); border-radius:999px;
  padding:4px; box-shadow:0 6px 22px rgba(40,20,50,.16); }
.userbar select {
  font-family:inherit; font-size:13px; font-weight:500; color:var(--neutral-800);
  border:1px solid var(--neutral-200); border-radius:var(--r); padding:6px 10px; background:var(--neutral-00); cursor:pointer;
}
/* user menu (native <details> dropdown) — the bar shows the avatar only */
.usermenu { position:relative; display:flex; }
.usermenu > summary { list-style:none; cursor:pointer; display:flex; align-items:center; border-radius:50%; }
.usermenu > summary::-webkit-details-marker { display:none; }
.usermenu > summary .avatar { transition:box-shadow var(--transition); }
.usermenu > summary:hover .avatar { box-shadow:0 0 0 2px var(--aubergine-200); }
.usermenu > summary:focus-visible { outline:none; }
.usermenu > summary:focus-visible .avatar { box-shadow:0 0 0 3px var(--ring-focus); }
.usermenu[open] > summary .avatar { box-shadow:0 0 0 2px var(--aubergine-400); }
.usermenu-pop { position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:224px; display:flex; flex-direction:column;
  background:var(--neutral-00); border:1px solid var(--neutral-100); border-radius:12px; padding:6px; box-shadow:0 12px 32px rgba(40,20,50,.14); }
.um-head { padding:8px 10px 8px; display:flex; flex-direction:column; gap:3px; border-bottom:1px solid var(--neutral-100); margin-bottom:4px; }
.um-id { display:flex; align-items:center; gap:6px; }
.um-head .sub { font-size:11px; }
.um-item { padding:8px 10px; border-radius:8px; color:var(--neutral-700); font-size:13px; }
.um-item:hover { background:var(--neutral-50); text-decoration:none; }
.um-roleswitch { padding:6px 10px 8px; font-size:12px; color:var(--neutral-500); display:flex; align-items:center; gap:6px; }
.um-roleswitch select { flex:1; }
.tabbar { display:none; }                          /* desktop: no bottom tab bar */
.b.role-admin{background:var(--aubergine-700);color:#fff;}
.b.role-ops{background:var(--aubergine-200);color:var(--aubergine-900);}
.b.role-clinician_liaison{background:var(--navy-600);color:#fff;}
.b.role-viewer{background:var(--neutral-100);color:var(--neutral-600);}

/* saved-view switcher */
.viewbar { display:flex; align-items:center; gap:12px; margin:4px 0 18px; flex-wrap:wrap; }
.vtabs { display:flex; gap:6px; flex-wrap:wrap; }
.vtab {
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--r);
  border:1px solid var(--neutral-200); color:var(--neutral-700); font-weight:500; font-size:13px; background:var(--neutral-00);
}
.vtab:hover { text-decoration:none; border-color:var(--aubergine-300); }
.vtab.active { background:var(--aubergine-100); border-color:var(--aubergine-300); color:var(--aubergine-800); }
.vtab .vt { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--neutral-400); }
.vactions { display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }

/* kanban — horizontal scroll with fixed-width lanes (more stages than fit → scroll, not wrap) */
.kanban { display:flex; gap:12px; align-items:flex-start; overflow-x:auto; padding-bottom:10px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.lane { background:var(--neutral-100); border-radius:var(--r-lg); padding:10px; min-height:120px;
  flex:0 0 272px; width:272px; display:flex; flex-direction:column; scroll-snap-align:start; }
.lane-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding:2px 4px; }
.lane-meta { font-size:11px; color:var(--neutral-500); }
.lane-grouped { font-size:11px; opacity:.6; cursor:help; }
/* lane scrolls within itself once it's taller than the viewport allows; cards beyond the
   limit are lazily revealed on scroll (kc-lazy starts hidden via the [hidden] attribute) */
.lane-cards { display:flex; flex-direction:column; gap:8px; min-height:40px;
  max-height:calc(100vh - 280px); overflow-y:auto; padding-right:2px; }
.lane-cards .kcard { content-visibility:auto; contain-intrinsic-size:auto 64px; }
.lane.lane-more .lane-cards { box-shadow: inset 0 -10px 8px -8px rgba(45,30,50,.16); }
.kcard {
  display:block; background:var(--neutral-00); border:1px solid var(--neutral-100); border-radius:var(--r);
  padding:11px 12px; box-shadow:var(--shadow-sm);
  color:inherit; transition:box-shadow var(--transition), transform var(--transition); cursor:grab;
}
.kanban.editable .kcard:active { cursor:grabbing; }
.kcard:hover { text-decoration:none; box-shadow:var(--shadow-md); transform:translateY(-1px); }
.kc-name { font-weight:600; font-size:13px; margin-bottom:3px; }
.kc-meta { font-size:12px; color:var(--neutral-500); margin-bottom:8px; }
.kc-foot { display:flex; align-items:center; gap:6px; justify-content:space-between; }
.kc-val { font-variant-numeric:tabular-nums; font-weight:600; font-size:12px; color:var(--aubergine-700); }
.kc-ghost { opacity:.4; background:var(--aubergine-50); border:1px dashed var(--aubergine-400); }
.kc-chosen { box-shadow:0 8px 24px rgba(45,30,50,.18); }
.kc-drag { transform:rotate(1.5deg); }
.kanban.locked .kcard { cursor:pointer; }

/* filter bar (bookings) */
.filterbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; }
.fb-input { font-family:inherit; font-size:13px; color:var(--neutral-900); background:var(--neutral-00);
  border:1px solid var(--neutral-200); border-radius:var(--r); padding:8px 10px; box-sizing:border-box; }
.fb-input[type=search] { min-width:200px; flex:1 1 200px; max-width:320px; }
.fb-input:focus { outline:none; border-color:var(--aubergine-500); box-shadow:0 0 0 3px var(--ring-focus); }
.fb-dash { color:var(--neutral-400); }

/* table pager */
.pager { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:14px; }
.pager-info { font-size:12px; color:var(--neutral-500); font-variant-numeric:tabular-nums; }
.pager .btn[disabled] { opacity:.4; pointer-events:none; }

/* view builder dialog */
.vb-dialog { border:none; border-radius:var(--r-lg); padding:0; width:640px; max-width:94vw;
  box-shadow:var(--shadow-lg); color:var(--neutral-900); }
.vb-dialog::backdrop { background:rgba(45,30,50,.34); backdrop-filter:blur(2px); }
.vb-form { display:flex; flex-direction:column; gap:16px; padding:22px 24px 20px; max-height:88vh; overflow-y:auto; }
.vb-head { display:flex; align-items:center; justify-content:space-between; }
.vb-title { margin:0; font-size:18px; }
.vb-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.vb-field { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:500; color:var(--neutral-600); }
.vb-label { font-size:12px; }
.vb-fs { border:1px solid var(--neutral-200); border-radius:var(--r); padding:12px 14px; margin:0; }
.vb-fs legend { font-size:12px; font-weight:600; color:var(--neutral-600); padding:0 6px; }
.vb-hint { font-size:11px; color:var(--neutral-500); margin:4px 0 0; }
.vb-checks { display:flex; flex-wrap:wrap; gap:6px 16px; }
.vb-check { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--neutral-700); }
.vb-ta { width:100%; resize:vertical; font-family:'DM Mono',monospace; font-size:12px; }
.vb-foot { display:flex; align-items:center; gap:10px; padding-top:4px; border-top:1px solid var(--neutral-100); margin-top:2px; padding-top:14px; }
.vb-default { margin-right:auto; }

/* keyboard shortcuts: <kbd> keycaps, help dialog, sidebar hint, roving row selection */
kbd { font-family:'DM Mono',monospace; font-size:11px; line-height:1.4; background:var(--neutral-100);
  color:var(--neutral-700); border:1px solid var(--neutral-200); border-bottom-width:2px; border-radius:6px;
  padding:1px 6px; min-width:16px; display:inline-block; text-align:center; }
.kbd-hint { display:flex; align-items:center; gap:6px; margin-top:14px; padding:6px 8px; width:100%;
  background:none; border:none; cursor:pointer; font-family:inherit; font-size:12px; color:var(--neutral-500);
  border-radius:var(--r); transition:background var(--transition), color var(--transition); }
.kbd-hint:hover { background:var(--neutral-50); color:var(--neutral-700); }
.nav-collapsed .kbd-hint { display:none; }

.kbd-dialog { border:none; border-radius:var(--r-lg); padding:0; width:680px; max-width:94vw; box-shadow:var(--shadow-lg); color:var(--neutral-900); }
.kbd-dialog::backdrop { background:rgba(45,30,50,.34); backdrop-filter:blur(2px); }
.kbd-wrap { padding:22px 24px; }
.kbd-cols { display:grid; grid-template-columns:1fr 1fr; gap:10px 36px; margin-top:10px; }
.kbd-h { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--neutral-500); margin:6px 0 6px; }
.kbd-row { display:flex; align-items:center; gap:12px; padding:4px 0; }
.kbd-keys { display:flex; align-items:center; gap:4px; flex:0 0 116px; }
.kbd-desc { font-size:13px; color:var(--neutral-700); }
.kbd-or { font-size:11px; color:var(--neutral-400); margin:0 2px; }

tr.kbd-active td { background:var(--aubergine-50); }
tr.kbd-active td:first-child { box-shadow: inset 3px 0 0 var(--aubergine-500); }

/* detail panels + forms */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.panel { background:var(--neutral-00); border:1px solid var(--neutral-100); border-radius:var(--r-lg); padding:20px 22px; }
.panel h2:first-child { margin-top:0; }
form.edit { display:flex; flex-direction:column; gap:12px; }
form.edit label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:500; color:var(--neutral-600); }
form.edit label.chk { flex-direction:row; align-items:center; gap:8px; }
form.edit input, form.edit select {
  font-family:inherit; font-size:13px; color:var(--neutral-900); background:var(--neutral-00);
  border:1px solid var(--neutral-200); border-radius:var(--r); padding:9px 11px;
}
form.edit input:focus, form.edit select:focus { outline:none; border-color:var(--aubergine-500); box-shadow:0 0 0 3px var(--ring-focus); }
form.edit input:disabled, form.edit select:disabled { background:var(--neutral-50); color:var(--neutral-500); }
.saved { font-size:12px; color:var(--green-700); font-weight:600; align-self:center; }

dl.kv { display:grid; grid-template-columns:140px 1fr; gap:8px 12px; margin:0 0 8px; font-size:13px; }
dl.kv dt { color:var(--neutral-500); }
dl.kv dd { margin:0; }

/* collapsible activity trail (person detail) */
details.activity { margin-top:28px; border-top:1px solid var(--neutral-100); padding-top:14px; }
details.activity > summary {
  cursor:pointer; font-weight:600; font-size:14px; color:var(--neutral-700);
  list-style:none; display:flex; align-items:center; gap:8px; user-select:none;
}
details.activity > summary::-webkit-details-marker { display:none; }
details.activity > summary::before {
  content:""; width:6px; height:6px; border-right:2px solid var(--neutral-400);
  border-bottom:2px solid var(--neutral-400); transform:rotate(-45deg); transition:transform var(--transition);
}
details.activity[open] > summary::before { transform:rotate(45deg); }
details.activity > summary:hover { color:var(--neutral-900); }
details.activity ul.timeline { margin-top:10px; }

ul.timeline { list-style:none; padding:0; margin:0; }
ul.timeline li { padding:9px 0; border-bottom:1px solid var(--neutral-100); display:flex; align-items:center; gap:8px; }
ul.timeline li:last-child { border-bottom:none; }
.tl-meta { font-size:12px; color:var(--neutral-500); }
.reveal-target { margin-top:10px; padding:10px; background:var(--neutral-00); border:1px solid var(--amber-200); border-radius:var(--r); }

/* activity stream — workspace "what happened recently" feed (Overview panel + /activity page) */
.feed-filter { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.feed-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pill);
  font-size:12px; font-weight:500; color:var(--neutral-700); background:var(--neutral-100);
  transition:background var(--transition), color var(--transition); }
.feed-chip:hover { background:var(--neutral-200); text-decoration:none; }
.feed-chip.active { background:var(--accent-fill); color:#fff; }
.feed-chip.active:hover { background:var(--accent-fill-strong); }
.feed-chip .ic { width:14px; height:14px; }
.feed-group { margin-bottom:20px; }
.feed-day { font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--neutral-400); margin:0 0 6px; }
ul.feed { list-style:none; padding:0; margin:0; }
.feed-item { display:flex; gap:12px; padding:11px 8px; margin:0 -8px; border-bottom:1px solid var(--neutral-100);
  align-items:flex-start; border-radius:var(--r); transition:background var(--transition); }
.feed-item:last-child { border-bottom:none; }
.feed-item.rowlink { cursor:pointer; }
.feed-item.rowlink:hover { background:var(--neutral-50); }
/* collapsed-burst disclosure: "and N more <plural>" — native <details>, no JS (CSP-safe) */
.feed-more { padding:2px 0; }
details.feed-run > summary { cursor:pointer; list-style:none; user-select:none; display:inline-flex; align-items:center;
  gap:8px; padding:7px 10px 7px 42px; font-size:13px; font-weight:500; color:var(--neutral-500);
  transition:color var(--transition); }
details.feed-run > summary::-webkit-details-marker { display:none; }
details.feed-run > summary::before {
  content:""; width:6px; height:6px; border-right:2px solid var(--neutral-400); border-bottom:2px solid var(--neutral-400);
  transform:rotate(-45deg); transition:transform var(--transition); }
details.feed-run[open] > summary::before { transform:rotate(45deg); }
details.feed-run > summary:hover { color:var(--neutral-800); }
ul.feed-nested { margin:0 0 4px; padding-left:14px; border-left:2px solid var(--neutral-100); }
.feed-ic { flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; background:var(--aubergine-100); color:var(--aubergine-600); margin-top:1px; }
.feed-ic .ic { width:16px; height:16px; }
.feed-body { min-width:0; flex:1; }
.feed-line { font-size:14px; color:var(--neutral-800); line-height:1.4; }
.feed-action { font-weight:600; color:var(--neutral-900); }
.feed-subject { color:var(--aubergine-600); font-weight:500; }
.feed-detail { color:var(--neutral-500); }
.feed-meta { font-size:12px; color:var(--neutral-500); margin-top:2px; }
.feed-actor { font-weight:500; color:var(--neutral-600); }

table.clickable tbody tr { cursor:pointer; }

/* toast */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--neutral-900); color:#fff; padding:11px 20px; border-radius:var(--r-pill);
  font-size:13px; font-weight:500; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err { background:var(--error-700); }
.toast.warn { background:var(--amber-700); }

/* dedup stewardship */
.dstewardship { display:flex; flex-direction:column; gap:14px; margin-bottom:8px; }
.dcard { background:var(--neutral-00); border:1px solid var(--neutral-100); border-radius:var(--r-lg); padding:16px 18px; }
.dscore { font-size:12px; color:var(--neutral-500); margin-bottom:12px; }
.dpair { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:start; }
.dperson { background:var(--neutral-50); border:1px solid var(--neutral-100); border-radius:var(--r); padding:12px 14px; }
.dp-name { font-weight:600; font-size:14px; margin-bottom:8px; }
.dvs { align-self:center; color:var(--neutral-400); font-size:12px; font-weight:600; }
dl.kv.sm { grid-template-columns:84px 1fr; gap:4px 10px; font-size:12px; margin-bottom:10px; }
.dperson .btn.sm { margin-top:10px; width:100%; }

/* login */
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--neutral-50); }
.login-card { background:var(--neutral-00); border:1px solid var(--neutral-100); border-radius:var(--r-lg); padding:36px 40px; width:380px; max-width:92vw; box-shadow:0 8px 30px rgba(45,30,50,.06); }
.login-card h1 { margin:18px 0 4px; }
.login-card .btn { margin-top:14px; display:inline-block; }

/* admin: token scopes */
fieldset.scopes { border:1px solid var(--neutral-200); border-radius:var(--r); padding:12px 14px; margin:0; }
fieldset.scopes legend { font-size:12px; font-weight:600; color:var(--neutral-600); padding:0 6px; }
fieldset.scopes label.chk { display:inline-flex; align-items:center; gap:6px; margin:4px 14px 4px 0; font-size:12px; font-weight:500; }
.token-secret { display:inline-block; background:var(--neutral-900); color:#fff; padding:8px 12px; border-radius:var(--r); font-family:'DM Mono',monospace; font-size:12px; word-break:break-all; margin:6px 0; }

@media (max-width:1100px){ .grid2{grid-template-columns:1fr;} .dpair{grid-template-columns:1fr;} .dvs{display:none;} }

/* mobile / tablet — collapse the fixed sidebar into a top icon-nav, stack content */
@media (max-width:820px){
  .shell { grid-template-columns: 1fr; }
  /* Nav is a slide-in drawer (the full sidebar, vertical list) opened from the bottom tab bar's "More".
     It keeps the desktop nav styling — labelled rows — so everything is legible. */
  .side { position:fixed; top:0; bottom:0; left:0; width:min(85vw, 320px); height:100vh; z-index:80;
    transform:translateX(-100%); transition:transform .22s ease; overflow-y:auto;
    border-right:1px solid var(--neutral-100); border-bottom:none; background:var(--neutral-00);
    padding:16px 14px; display:flex; flex-direction:column; gap:8px; }
  .shell.nav-open .side { transform:translateX(0); box-shadow:0 0 44px rgba(20,10,25,.28); }
  .nav-scrim[hidden] { display:none; }
  .shell.nav-open .nav-scrim { display:block; position:fixed; inset:0; z-index:75; background:rgba(20,10,25,.42); }
  /* Bottom tab bar: the 4 key destinations + More (opens the drawer). */
  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--neutral-00);
    border-top:1px solid var(--neutral-100); padding-top:4px; justify-content:space-around;
    padding-bottom:max(4px, env(safe-area-inset-bottom)); }
  .tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 2px; font-size:10.5px;
    font-weight:500; color:var(--neutral-500); border-radius:8px; }
  .tab:hover { text-decoration:none; }
  .tab .ic { width:21px; height:21px; opacity:.85; }
  .tab.active { color:var(--aubergine-700); }
  .tab.active .ic { opacity:1; }
  .tab-more { background:none; border:none; cursor:pointer; font:inherit; }
  .userbar { top:10px; right:12px; }     /* floating account cluster tucks into the corner */
  .main { padding:16px 16px 84px; max-width:100%; overflow-x:hidden; }   /* bottom room for the tab bar */
  h1 { font-size:24px; line-height:32px; }
  .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lane { flex-basis:84vw; width:84vw; }     /* near-full-width lanes, swipe between them */
  .lane-cards { max-height:none; }            /* let the page scroll on mobile, not each lane */
  .filterbar .fb-input[type=search] { flex-basis:100%; max-width:none; }
  .vb-grid { grid-template-columns:1fr; }
  .kbd-cols { grid-template-columns:1fr; }
  .viewbar { flex-direction:column; align-items:flex-start; }
  .vactions { margin-left:0; }
  /* wide tables scroll horizontally instead of overflowing the page; the inset shadow on the
     right edge hints there's more to scroll to (critique: no scroll affordance on mobile) */
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;
    box-shadow: inset -10px 0 8px -8px rgba(45,30,50,.18); }
  fieldset.scopes label.chk { display:flex; }
  .hide-mobile { display:none; }
  /* keep the first column visible while scrolling wide tables sideways (dogfood: lost row identity) */
  table.clickable th:first-child, table.clickable td:first-child { position:sticky; left:0; z-index:1; }
  table.clickable td:first-child { background:var(--neutral-00); }
  table.clickable th:first-child { background:var(--neutral-50); }
}

/* ── Stats tab: chart cards (uPlot canvas hosts) ─────────────────────────────── */
.chart-card { background:var(--neutral-00); border:1px solid var(--neutral-100); border-radius:var(--r-lg);
  padding:18px 20px; margin:0 0 18px; box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition), transform var(--transition); }
.chart-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.chart-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
.chart-head h3 { margin:0; font-size:14px; font-weight:700; color:var(--neutral-900); letter-spacing:-.1px; }
.chart-host { min-height:120px; }
.chart-host.chart-error { color:var(--error-700); font-size:13px; padding:24px 0; }
.chart-stat { font-size:44px; font-weight:700; color:var(--aubergine-700); line-height:1.05;
  padding:16px 0 8px; letter-spacing:-1px; font-variant-numeric:tabular-nums; }

/* uPlot chrome aligned to the Ahead DS: Aeonik, brand legend pills, light grid */
.uplot { font-family:Aeonik, system-ui, -apple-system, sans-serif; }
.chart-host .u-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px;
  margin-top:14px; font-size:12px; color:var(--neutral-700); border:0; }
.chart-host .u-legend tr { display:inline-flex; align-items:center; gap:7px; cursor:default; }
.chart-host .u-legend th { font-weight:500; }
.chart-host .u-legend .u-value { display:none; }
.chart-host .u-legend .u-marker { width:11px; height:11px; border-radius:3px; }

/* ── pro forma actions ── */
.stack { display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.stack form { display:flex; flex-direction:column; gap:6px; margin:0; }
.stack form .btn { width:100%; }
.stack input[type=text] { padding:7px 10px; border:1px solid var(--neutral-200); border-radius:var(--r); font:inherit; }
.inline-act { display:flex; gap:6px; align-items:center; margin:0; }
.inline-act input[type=text] { padding:4px 8px; border:1px solid var(--neutral-200); border-radius:8px; font:inherit; font-size:12px; max-width:170px; }

/* date picker — on-brand calendar popover for [data-datepicker] inputs (app-datepicker.js).
   The real <input> holds the canonical ISO value and submits; a label overlay shows de-CH text. */
.dp-wrap { position:relative; display:inline-flex; }
form.edit .dp-wrap { display:flex; } /* edit-form fields are full-width block inputs */
form.edit .dp-input { width:100%; box-sizing:border-box; }
.dp-input, form.edit .dp-input, .fb-input.dp-input { color:transparent; caret-color:transparent; cursor:pointer; }
.dp-input::selection { background:transparent; }
.dp-input::placeholder { color:transparent; } /* label overlay renders the placeholder instead */
.dp-input:disabled, form.edit .dp-input:disabled, .fb-input.dp-input:disabled { color:transparent; cursor:not-allowed; }
.dp-label { position:absolute; left:0; top:0; right:0; bottom:0; display:flex; align-items:center;
  padding:0 11px; font-size:13px; color:var(--neutral-900); pointer-events:none; white-space:nowrap; overflow:hidden; }
.dp-label.dp-placeholder { color:var(--neutral-400); }
.dp-input:disabled + .dp-label { color:var(--neutral-500); }
form.edit .dp-input:disabled + .dp-label.dp-placeholder { color:var(--neutral-400); }

.dp-pop { position:absolute; top:100%; left:0; margin-top:4px; z-index:45; width:268px; max-width:calc(100vw - 16px);
  background:var(--neutral-00); border:1px solid var(--neutral-200); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:12px; box-sizing:border-box; }
.dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dp-title { font-size:13px; font-weight:500; color:var(--neutral-900); }
.dp-nav { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; font-size:17px; line-height:1;
  background:none; border:1px solid transparent; border-radius:var(--r); color:var(--neutral-600); cursor:pointer; }
.dp-nav:hover { background:var(--neutral-50); border-color:var(--neutral-200); color:var(--neutral-900); }
.dp-nav:focus-visible { outline:none; border-color:var(--aubergine-500); box-shadow:0 0 0 3px var(--ring-focus); }
.dp-week { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:2px; }
.dp-wd { text-align:center; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--neutral-400); padding:4px 0; }
.dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.dp-cell { aspect-ratio:1; }
.dp-day { width:100%; height:100%; display:inline-flex; align-items:center; justify-content:center; font-family:inherit;
  font-size:13px; color:var(--neutral-800); background:none; border:1px solid transparent; border-radius:var(--r); cursor:pointer; }
.dp-day:hover { background:var(--aubergine-50); }
.dp-day:focus-visible { outline:none; border-color:var(--aubergine-500); box-shadow:0 0 0 3px var(--ring-focus); }
.dp-today { font-weight:700; color:var(--aubergine-700); }
.dp-sel, .dp-sel:hover { background:var(--aubergine-600); color:#fff; }
.dp-sel.dp-today { color:#fff; }
.dp-foot { display:flex; justify-content:space-between; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid var(--neutral-100); }
.dp-action { font-family:inherit; font-size:12px; font-weight:500; color:var(--aubergine-700); background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:8px; }
.dp-action:hover { background:var(--aubergine-50); }
.dp-action:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring-focus); }

/* ════════════════════════════════════════════════════════════════════════════
   Tasks — "My work" inbox (/tasks), per-record task panels, notifications.
   Grounded in the Ahead DS: aubergine + neutral, even 1px borders (no accent
   stripes), sentence case. Reuses .btn/.fb-input/.chip/.callout idioms.
   ════════════════════════════════════════════════════════════════════════════ */

/* app-tasks.js toggles .hidden on filtered-out rows. [hidden] already wins via
   the rule near the top; mirror it for the class so client filtering hides rows. */
.hidden { display:none !important; }

/* ── inbox: buckets, quick-add, segmented filter ─────────────────────────────── */
.task-section { margin:0 0 6px; }
.task-section h2 { display:flex; align-items:center; gap:8px; margin:24px 0 6px; }

/* quick-add: one tidy flex row, wraps on narrow screens */
.task-add { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; }
.task-add .task-add-title { flex:1 1 220px; min-width:0; }
.task-add .task-add-type { flex:0 0 auto; }
.task-add .task-add-due { flex:0 0 auto; min-width:150px; }
.task-add .btn { flex:0 0 auto; }

/* segmented control — the active scope chip reads as filled/selected */
.task-filter { display:inline-flex; flex-wrap:wrap; gap:4px; padding:3px;
  background:var(--neutral-100); border-radius:var(--r); margin:0 0 18px; }
.task-filter .btn.ghost.sm { background:transparent; border-color:transparent; color:var(--neutral-600); }
.task-filter .btn.ghost.sm:hover { background:var(--neutral-00); border-color:transparent; color:var(--neutral-800); }
.task-filter .btn.ghost.sm.active { background:var(--aubergine-600); color:#fff;
  border-color:transparent; box-shadow:var(--shadow-sm); }
.task-filter .btn.ghost.sm.active:hover { background:var(--aubergine-700); color:#fff; }
/* Divider between the scope chips (mine/team/…) and the optional-section toggles (completed/snoozed). */
.task-filter-sep { align-self:stretch; width:1px; background:var(--neutral-200); margin:2px 4px; }
.task-section.task-optional[hidden] { display:none; }

/* ── task rows ───────────────────────────────────────────────────────────────── */
.task-list { list-style:none; margin:0; padding:0; }
.task-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:8px 4px;
  border-bottom:1px solid var(--neutral-100); transition:background var(--transition); }
.task-row:last-child { border-bottom:none; }
.task-row:hover { background:var(--aubergine-50); }

.task-check { width:16px; height:16px; flex:none; accent-color:var(--aubergine-600); cursor:pointer; margin:0; }
.task-check:disabled { cursor:not-allowed; }
.task-check:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring-focus); border-radius:4px; }

.task-title { flex:1 1 180px; min-width:0; font-size:13px; color:var(--neutral-900);
  overflow:hidden; text-overflow:ellipsis; }
.task-title.done { text-decoration:line-through; color:var(--neutral-400); }
/* click-to-edit affordance: cursor + a soft underline on hover/focus so it reads as editable */
.task-title.editable { cursor:text; border-radius:4px; }
.task-title.editable:hover { text-decoration:underline; text-decoration-color:var(--neutral-300); text-underline-offset:2px; }
.task-title.editable:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring-focus); }
.task-title-input { width:100%; font:inherit; color:var(--neutral-900); background:var(--neutral-00);
  border:1px solid var(--aubergine-500); border-radius:var(--r); padding:3px 7px; box-shadow:0 0 0 3px var(--ring-focus); }
.task-title-input:focus { outline:none; }

.task-due { font-size:12px; color:var(--neutral-500); flex:none; font-variant-numeric:tabular-nums; }
.task-due.overdue { color:var(--error-700); font-weight:600; }

/* compact inline editors — narrower than the full filter-bar inputs */
.task-due-edit.fb-input, .task-row .task-due-edit { font-size:12px; padding:6px 9px; width:120px; flex:none; }
.task-row .dp-wrap { flex:none; }

/* overdue flag on the editable due input (managers). The input text is transparent —
   the date is drawn by the overlaid .dp-label — so flag via red border + the overlay
   label going red (keeps the date legible) rather than the input's own color. */
.task-due-edit.overdue { border-color:var(--error-300); }
.task-due-edit.overdue:hover { border-color:var(--error-700); }
.task-due-edit.overdue + .dp-label { color:var(--error-700); font-weight:600; }
.task-assign { font-size:12px; padding:6px 28px 6px 9px; width:140px; flex:none;
  font-family:inherit; color:var(--neutral-900); }
.task-assignee { font-size:12px; color:var(--neutral-600); flex:none; }

/* Quiet inline editors — the task title should lead, not the controls. Date + assignee read
   as plain text until you engage the row (hover / keyboard focus), then they become inputs.
   Border-color (not width) toggles, so nothing reflows. Overdue keeps its red border always
   via higher specificity (.task-due-edit.overdue below). */
.task-row .task-due-edit,
.task-row .task-assign { border-color:transparent; background:transparent; }
.task-row:hover .task-due-edit,
.task-row:focus-within .task-due-edit,
.task-row .task-due-edit:focus,
.task-row:hover .task-assign,
.task-row:focus-within .task-assign,
.task-row .task-assign:focus { border-color:var(--neutral-200); background:var(--neutral-00); }

/* hover-reveal action cluster (priority star · snooze · delete) */
.task-actions { display:inline-flex; align-items:center; gap:2px; flex:none; margin-left:auto;
  opacity:0; transition:opacity var(--transition); }
.task-row:hover .task-actions,
.task-row:focus-within .task-actions { opacity:1; }
.task-actions .btn.ghost.sm { padding:4px 8px; min-width:30px; justify-content:center;
  color:var(--neutral-500); border-color:transparent; background:transparent; }
.task-actions .btn.ghost.sm:hover { background:var(--neutral-100); color:var(--neutral-800); border-color:transparent; }
.task-actions .btn.ghost.sm .ic { width:15px; height:15px; }
/* delete reads as destructive only on hover — quiet until intended */
.task-actions .btn.ghost.sm.danger:hover { background:var(--error-50, #fef2f2); color:var(--error-700); }
/* touch devices have no hover — keep actions visible */
@media (hover:none) {
  .task-actions { opacity:1; }
}

/* snooze preset menu — a small popover anchored to the snooze button */
.task-snooze { position:relative; display:inline-flex; }
.snooze-menu { position:absolute; top:calc(100% + 4px); right:0; z-index:30; min-width:150px;
  display:flex; flex-direction:column; padding:4px; gap:1px;
  background:var(--neutral-00); border:1px solid var(--neutral-200); border-radius:var(--r);
  box-shadow:var(--shadow-lg); }
.snooze-menu[hidden] { display:none; }
.snooze-menu button { text-align:left; font:inherit; font-size:12px; color:var(--neutral-800);
  padding:7px 10px; border:none; background:transparent; border-radius:6px; cursor:pointer; }
.snooze-menu button:hover { background:var(--aubergine-50); color:var(--aubergine-700); }
.snooze-menu .snooze-clear { color:var(--neutral-500); border-top:1px solid var(--neutral-100);
  border-radius:0; margin-top:2px; padding-top:8px; }
.snooze-menu .snooze-clear:hover { background:var(--neutral-50); color:var(--neutral-700); }

/* inbox zero-state — one confident line, not a column of "Nothing here." */
.task-zero { display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:48px 20px; color:var(--neutral-500); text-align:center; }
.task-zero[hidden] { display:none; }
.task-zero .ic { width:30px; height:30px; color:var(--aubergine-400); stroke-width:1.6; }
.task-zero p { margin:0; font-size:14px; }
.task-section.hidden { display:none; }

/* ── per-record task panel (person/company/booking detail) ───────────────────── */
.rec-tasks { margin:32px 0 0; padding-top:18px; border-top:1px solid var(--neutral-100); }
.rec-tasks > h2:first-child { margin-top:0; }
.rec-tasks .task-add { margin-bottom:14px; }
/* compact rows in a record panel — you're already on the record, so carry less chrome:
   tighter rhythm and a quieter type badge. The quiet inline-editor treatment applies too. */
.task-row.compact { padding:6px 2px; gap:8px; }
.task-row.compact .task-title { font-size:12px; }
.task-row.compact .b.muted { background:transparent; padding-left:0; padding-right:0; color:var(--neutral-400); }

/* comment thread — a quiet <details> per task. The thread lives inside the
   flex .task-row; force it onto its own full-width line beneath the row. */
.task-comments { flex:1 1 100%; margin:2px 0 2px 26px; }
.task-comments > summary { cursor:pointer; list-style:none; font-size:12px; color:var(--neutral-500);
  padding:3px 0; user-select:none; transition:color var(--transition); }
.task-comments > summary::-webkit-details-marker { display:none; }
.task-comments > summary:hover { color:var(--aubergine-700); }
.task-comments[open] > summary { color:var(--neutral-700); font-weight:500; }

.tcomment { padding:8px 10px; margin:6px 0; font-size:12px; color:var(--neutral-700);
  background:var(--neutral-50); border:1px solid var(--neutral-100); border-radius:var(--r); }
.tcomment .tcomment-body { display:block; }
.tcomment .tl-meta { display:block; margin-top:4px; font-size:11px; color:var(--neutral-500); }
.tcomment .btn.ghost.sm { margin-top:8px; }
/* sensitive comment — lighter amber tint than .callout.warn, no border stripe */
.tcomment.sensitive { background:var(--amber-50); border-color:var(--amber-200); color:var(--neutral-700); }

/* add-comment form: textarea matches .confirm-field textarea, then a checkbox + submit */
.task-comment-add { display:flex; flex-direction:column; gap:8px; margin:8px 0 4px; }
.task-comment-add textarea { width:100%; box-sizing:border-box; font-family:inherit; font-size:13px;
  padding:9px 11px; border:1px solid var(--neutral-200); border-radius:var(--r); resize:vertical; }
.task-comment-add textarea:focus { outline:none; border-color:var(--aubergine-500); box-shadow:0 0 0 3px var(--ring-focus); }
.task-comment-add label.chk { display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500; color:var(--neutral-600); }
.task-comment-add .btn { align-self:flex-start; }
.tcomment-warn { font-size:12px; color:var(--amber-700); }

/* ── notifications (topbar bell + dropdown panel) ────────────────────────────── */
.notif { position:relative; flex:none; display:flex; }
.notif-bell { position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; background:transparent; color:var(--neutral-600);
  border:1px solid transparent; border-radius:50%; cursor:pointer;
  transition:background var(--transition), color var(--transition), border-color var(--transition); }
.notif-bell:hover { background:var(--neutral-50); color:var(--neutral-900); border-color:transparent; }
.notif-bell:focus-visible { outline:none; border-color:var(--aubergine-500); box-shadow:0 0 0 3px var(--ring-focus); }
.notif-bell .ic { width:18px; height:18px; }
.notif-badge { position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  background:var(--error-700); color:#fff; font-size:10px; font-weight:600; line-height:1;
  border-radius:var(--r-pill); border:2px solid var(--neutral-00); font-variant-numeric:tabular-nums; }

.notif-panel { position:absolute; top:calc(100% + 8px); right:0; width:320px; max-width:calc(100vw - 32px);
  background:var(--neutral-00); border:1px solid var(--neutral-200); border-radius:var(--r);
  box-shadow:var(--shadow-lg); z-index:55; max-height:60vh; overflow:auto; }
.notif-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-bottom:1px solid var(--neutral-100); }
.notif-head b { font-size:13px; }
.notif-list { list-style:none; margin:0; padding:0; }
.notif-item { border-bottom:1px solid var(--neutral-100); transition:background var(--transition); }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--aubergine-50); }
.notif-link { display:block; padding:11px 14px; color:inherit; }
.notif-link:hover { text-decoration:none; }
.notif-title { display:block; font-size:13px; font-weight:500; color:var(--neutral-900); }
.notif-meta { display:block; margin-top:3px; font-size:11px; color:var(--neutral-500); }
.notif-empty { padding:16px 14px; margin:0; font-size:13px; color:var(--neutral-500); }

/* ── mobile: keep inbox + detail within 390px, wrap gracefully ───────────────── */
@media (max-width:820px){
  .task-filter { display:flex; width:100%; }
  .task-filter .btn.ghost.sm { flex:1 1 auto; justify-content:center; }
  .task-add .task-add-title { flex-basis:100%; }
  .task-add .task-add-type, .task-add .task-add-due { flex:1 1 auto; min-width:0; }
  .task-assign, .task-due-edit.fb-input, .task-row .task-due-edit { width:auto; flex:1 1 120px; min-width:0; }
  .task-comments { margin-left:0; }
  .notif-panel { right:0; }
}

/* ── navigation: fast cross-fade (Turbo view transitions) ─────────────────────
   The browser default root transition is ~250ms, which reads as per-click lag —
   you sit through the fade even when Turbo already prefetched the page. Cut it to
   ~110ms with an ease-out curve, and skip the animation entirely under
   reduced-motion (which also drops the snapshot-capture cost on heavy pages). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 110ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* User avatars (Google Workspace photo; initials fallback). The <img> and its sibling fallback
   span are interchangeable round chips; app.js swaps to the span on image load error (CSP forbids
   inline onerror). */
.avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  vertical-align:middle; object-fit:cover; flex:none; }
.avatar-fallback { background:var(--aubergine-100); color:var(--aubergine-800);
  font-size:.62rem; font-weight:600; letter-spacing:.02em; }
.who .avatar { margin-right:.4rem; }
.task-assignee .avatar { margin-right:.3rem; }

/* View-bar overflow menu (native <details> dropdown — CSP-safe, no JS). */
.vmenu { position:relative; display:inline-block; }
.vmenu > summary { list-style:none; cursor:pointer; }
.vmenu > summary::-webkit-details-marker { display:none; }
.vmenu-pop { position:absolute; right:0; top:calc(100% + 4px); z-index:40; display:flex; flex-direction:column; gap:2px;
  background:var(--neutral-00, #fff); border:1px solid var(--neutral-100); border-radius:var(--r-md, 10px); padding:6px; min-width:172px;
  box-shadow:0 10px 28px rgba(40,20,50,.12); }
.vmenu-pop .btn { justify-content:flex-start; width:100%; }

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE
   ────────────────────────────────────────────────────────────────────────────
   The whole UI is token-driven, so dark mode is (almost) a pure palette swap: the
   activation blocks at the bottom re-point the design-system ramps at dark values.

   Resolution (CSP-safe, no JS, no flash — the server renders <html data-theme>):
     • data-theme="light"           → always light
     • data-theme="dark"            → always dark
     • data-theme="system" / absent → follow the OS via prefers-color-scheme
   That's two distinct selectors (an explicit one + a media-gated one), so the
   variable remap is intentionally duplicated — but every COLOUR lives once, in the
   --d-* set below, so the two blocks can't drift. Keep them in sync.

   A handful of chips/buttons paint white text on a SATURATED fill (toasts, danger
   buttons, the notification badge, selected calendar day, active filter chip). A
   plain ramp swap would turn those fills pale and break the white text, so they go
   through semantic fill tokens (--accent-fill / --danger-fill / --warn-fill /
   --chip-bg) that we swap independently. Their light defaults below are identical
   to the values they replace, so light mode is byte-for-byte unchanged.
   ════════════════════════════════════════════════════════════════════════════ */

/* Semantic fills — LIGHT defaults (same values as before → no visual change). */
:root {
  --accent-fill: var(--aubergine-600);        /* white-text accent fill (calendar/filter selected) */
  --accent-fill-strong: var(--aubergine-700); /* stronger accent fill (admin badge, hover) */
  --danger-fill: var(--error-700);            /* solid danger fill (danger btn, toast.err, badge) */
  --danger-fill-hover: #8f1d17;
  --warn-fill: var(--amber-700);              /* solid warn fill (toast.warn) */
  --chip-bg: var(--neutral-900);              /* dark floating chip (toast, code, nav tooltip, bulk pill) */
  --chip-hover: var(--neutral-700);           /* hover/divider fill INSIDE a dark chip (bulk pill) */
  --logo-filter: none;                        /* the Ahead wordmark is a dark monochrome SVG… */
}
/* …so in dark mode we flip it to white via filter (no second asset needed). */
.brand img { filter: var(--logo-filter); }
/* Additive overrides: route the saturated-fill rules through the tokens above. These come after the
   originals in the cascade and carry identical light values, so they're inert until a theme flips a
   token — that's how the same rules re-colour correctly in dark without a dark-specific selector. */
.toast, .token-secret { background: var(--chip-bg); }
.nav-collapsed .nav a::after { background: var(--chip-bg); }
.toast.err { background: var(--danger-fill); }
.toast.warn { background: var(--warn-fill); }
.btn.danger { background: var(--danger-fill); }
.btn.danger:hover { background: var(--danger-fill-hover); }
.notif-badge { background: var(--danger-fill); }
.b.role-admin { background: var(--accent-fill-strong); }
.dp-sel, .dp-sel:hover { background: var(--accent-fill); }
.task-filter .btn.ghost.sm.active { background: var(--accent-fill); }
.task-filter .btn.ghost.sm.active:hover { background: var(--accent-fill-strong); }

/* Dark palette — the single source of truth for every dark colour. The aubergine ramp is the
   brand's own ramp MIRRORED (50↔900): light tints become dark plums, dark shades become light
   lavender, so active-nav backgrounds go dark and links/accents go legibly light — all on-brand. */
:root {
  --d-neutral-00:#1e2024;  --d-neutral-50:#16181b;  --d-neutral-100:#2a2d33; --d-neutral-200:#3a3e45;
  --d-neutral-300:#4e535b; --d-neutral-400:#727883; --d-neutral-500:#969ca6; --d-neutral-600:#b0b6bf;
  --d-neutral-700:#c8cdd4; --d-neutral-800:#dde1e6; --d-neutral-900:#eef0f3;
  --d-aubergine-50:#2a1430;  --d-aubergine-100:#371938; --d-aubergine-200:#48214A; --d-aubergine-300:#613862;
  --d-aubergine-400:#7F4685; --d-aubergine-500:#9958A1; --d-aubergine-600:#CD9ED4; --d-aubergine-700:#E0C2E5;
  --d-aubergine-800:#EDDDF1; --d-aubergine-900:#F6EFF8;
  --d-navy-600:#3c5b98; --d-navy-700:#496bac;
  --d-green-50:#10271a; --d-green-100:#14331f; --d-green-200:#1c4a2c; --d-green-500:#3ecf80;
  --d-green-600:#34ba70; --d-green-700:#62d992; --d-green-800:#86e3aa;
  --d-amber-50:#2a2107; --d-amber-200:#4a3a12; --d-amber-700:#e3b95f;
  --d-error-50:#2b1513; --d-error-100:#3a1a18; --d-error-200:#522623; --d-error-300:#6e302c; --d-error-700:#f0897f;
  --d-shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --d-shadow-md:0 4px 6px -1px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.4);
  --d-shadow-lg:0 10px 25px -3px rgba(0,0,0,.6), 0 4px 6px -4px rgba(0,0,0,.5);
  --d-ring-focus:rgba(205,158,212,.28);
}

/* The remap, factored so both activation selectors share one definition list. NOTE: native CSS can't
   union a plain selector with a media-gated one, so the block is written twice below — identical, and
   pointing only at --d-* / semantic tokens, never raw hexes. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --neutral-00:var(--d-neutral-00); --neutral-50:var(--d-neutral-50); --neutral-100:var(--d-neutral-100);
  --neutral-200:var(--d-neutral-200); --neutral-300:var(--d-neutral-300); --neutral-400:var(--d-neutral-400);
  --neutral-500:var(--d-neutral-500); --neutral-600:var(--d-neutral-600); --neutral-700:var(--d-neutral-700);
  --neutral-800:var(--d-neutral-800); --neutral-900:var(--d-neutral-900);
  --aubergine-50:var(--d-aubergine-50); --aubergine-100:var(--d-aubergine-100); --aubergine-200:var(--d-aubergine-200);
  --aubergine-300:var(--d-aubergine-300); --aubergine-400:var(--d-aubergine-400); --aubergine-500:var(--d-aubergine-500);
  --aubergine-600:var(--d-aubergine-600); --aubergine-700:var(--d-aubergine-700); --aubergine-800:var(--d-aubergine-800);
  --aubergine-900:var(--d-aubergine-900);
  --navy-600:var(--d-navy-600); --navy-700:var(--d-navy-700);
  --green-50:var(--d-green-50); --green-100:var(--d-green-100); --green-200:var(--d-green-200);
  --green-500:var(--d-green-500); --green-600:var(--d-green-600); --green-700:var(--d-green-700); --green-800:var(--d-green-800);
  --amber-50:var(--d-amber-50); --amber-200:var(--d-amber-200); --amber-700:var(--d-amber-700);
  --error-50:var(--d-error-50); --error-100:var(--d-error-100); --error-200:var(--d-error-200);
  --error-300:var(--d-error-300); --error-700:var(--d-error-700);
  --shadow-sm:var(--d-shadow-sm); --shadow-md:var(--d-shadow-md); --shadow-lg:var(--d-shadow-lg);
  --ring-focus:var(--d-ring-focus);
  /* keep the saturated fills saturated (white text stays legible) */
  --accent-fill:#7F4685; --accent-fill-strong:#613862;
  --danger-fill:#c2362e; --danger-fill-hover:#a82a22; --warn-fill:#9a6a12;
  --chip-bg:#34383f; --chip-hover:#454a52;
  --logo-filter:brightness(0) invert(1); /* dark monochrome wordmark → white */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --neutral-00:var(--d-neutral-00); --neutral-50:var(--d-neutral-50); --neutral-100:var(--d-neutral-100);
    --neutral-200:var(--d-neutral-200); --neutral-300:var(--d-neutral-300); --neutral-400:var(--d-neutral-400);
    --neutral-500:var(--d-neutral-500); --neutral-600:var(--d-neutral-600); --neutral-700:var(--d-neutral-700);
    --neutral-800:var(--d-neutral-800); --neutral-900:var(--d-neutral-900);
    --aubergine-50:var(--d-aubergine-50); --aubergine-100:var(--d-aubergine-100); --aubergine-200:var(--d-aubergine-200);
    --aubergine-300:var(--d-aubergine-300); --aubergine-400:var(--d-aubergine-400); --aubergine-500:var(--d-aubergine-500);
    --aubergine-600:var(--d-aubergine-600); --aubergine-700:var(--d-aubergine-700); --aubergine-800:var(--d-aubergine-800);
    --aubergine-900:var(--d-aubergine-900);
    --navy-600:var(--d-navy-600); --navy-700:var(--d-navy-700);
    --green-50:var(--d-green-50); --green-100:var(--d-green-100); --green-200:var(--d-green-200);
    --green-500:var(--d-green-500); --green-600:var(--d-green-600); --green-700:var(--d-green-700); --green-800:var(--d-green-800);
    --amber-50:var(--d-amber-50); --amber-200:var(--d-amber-200); --amber-700:var(--d-amber-700);
    --error-50:var(--d-error-50); --error-100:var(--d-error-100); --error-200:var(--d-error-200);
    --error-300:var(--d-error-300); --error-700:var(--d-error-700);
    --shadow-sm:var(--d-shadow-sm); --shadow-md:var(--d-shadow-md); --shadow-lg:var(--d-shadow-lg);
    --ring-focus:var(--d-ring-focus);
    --accent-fill:#7F4685; --accent-fill-strong:#613862;
    --danger-fill:#c2362e; --danger-fill-hover:#a82a22; --warn-fill:#9a6a12;
    --chip-bg:#34383f; --chip-hover:#454a52;
    --logo-filter:brightness(0) invert(1);
  }
}

/* ── profile: appearance / theme toggle (icon-based segmented control) ─────────── */
.theme-toggle { display:inline-flex; gap:4px; padding:4px; margin:2px 0 8px;
  background:var(--neutral-100); border-radius:var(--r); }
.theme-opt { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid transparent;
  background:transparent; border-radius:9px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:500;
  color:var(--neutral-600); transition:background var(--transition), color var(--transition), box-shadow var(--transition); }
.theme-opt .ic { width:17px; height:17px; opacity:.85; }
.theme-opt:hover { color:var(--neutral-900); background:var(--neutral-00); }
.theme-opt.active { background:var(--neutral-00); color:var(--aubergine-700);
  box-shadow:var(--shadow-sm); border-color:var(--neutral-200); }
.theme-opt.active .ic { opacity:1; }
.theme-opt:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring-focus); }
@media (max-width:520px){ .theme-toggle { display:flex; } .theme-opt { flex:1; justify-content:center; } }

/* ── bulk selection: checkbox column + floating action pill (Attio/Linear-style) ── */
th.bsel, td.bsel { width:34px; padding-right:0; }
.bsel input { width:15px; height:15px; margin:0; accent-color:var(--aubergine-600); cursor:pointer; display:block; }
.bsel input:disabled { cursor:not-allowed; }
/* Quiet table: row checkboxes appear on hover / keyboard focus, or while a selection is active.
   Hover-capable devices only — on touch they're always visible. The header box always shows. */
@media (hover:hover) {
  table[data-bulk] tbody .bsel input { opacity:0; transition:opacity var(--transition); }
  table[data-bulk] tbody tr:hover .bsel input,
  table[data-bulk] tbody tr.kbd-active .bsel input,
  table[data-bulk] tbody .bsel input:checked,
  table[data-bulk].bulk-some tbody .bsel input { opacity:1; }
  table[data-bulk] tbody tr:hover .bsel input:disabled { opacity:.35; }
}
tr.bulk-on td { background:var(--aubergine-50); }
tr.bulk-on td:first-child { box-shadow: inset 3px 0 0 var(--aubergine-500); }

/* the pill — a dark floating chip in BOTH themes (same family as the toast), so it rides the
   --chip-bg/--chip-hover semantic tokens, and the text/divider colours INSIDE it are on-chip
   constants (white-based), not ramp values — a ramp swap would invert them off the dark fill. */
.bulk-pill { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(10px); z-index:55;
  display:flex; align-items:center; gap:2px; background:var(--chip-bg); color:#fff;
  border-radius:var(--r-pill); padding:6px 8px 6px 16px; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; }
.bulk-pill.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.bp-count { font-size:13px; font-weight:500; white-space:nowrap; }
.bp-count b { font-weight:700; font-variant-numeric:tabular-nums; }
.bp-sep { width:1px; height:18px; background:var(--chip-hover); margin:0 8px; flex:none; }
.bp-btn { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:#fff;
  font-family:inherit; font-size:13px; font-weight:500; padding:7px 12px; border-radius:var(--r-pill);
  cursor:pointer; white-space:nowrap; transition:background var(--transition); }
.bp-btn:hover { background:var(--chip-hover); }
.bp-btn.danger { color:#F2B8B5; } /* on-chip danger text (error-300's light value, constant) */
.bp-caret { font-size:10px; opacity:.7; }
.bp-clear { background:none; border:none; color:rgba(255,255,255,.66); font-size:13px; line-height:1; cursor:pointer;
  width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--transition), color var(--transition); }
.bp-clear:hover { background:var(--chip-hover); color:#fff; }
/* dropup menu (native <details>, opens above the pill) — a normal light/dark surface, so it
   stays on the ramp tokens and re-skins with the theme like .vmenu-pop / .search-results. */
.bp-menu { position:relative; }
.bp-menu > summary { list-style:none; }
.bp-menu > summary::-webkit-details-marker { display:none; }
.bp-menu[open] > summary.bp-btn { background:var(--chip-hover); }
.bp-pop { position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; min-width:190px; max-height:42vh; overflow-y:auto;
  background:var(--neutral-00); border:1px solid var(--neutral-100); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:6px; }
.bp-item { text-align:left; background:none; border:none; padding:7px 10px; border-radius:8px;
  font-family:inherit; font-size:13px; color:var(--neutral-800); cursor:pointer; white-space:nowrap; }
.bp-item:hover { background:var(--aubergine-50); }
/* while the pill is up, toasts slide above it instead of underneath */
body.bulk-active .toast { bottom:88px; }
@media (max-width:820px){
  .bulk-pill { bottom:76px; max-width:94vw; flex-wrap:wrap; row-gap:4px; justify-content:center; }
  body.bulk-active .toast { bottom:140px; }
  /* the sticky first column on mobile is the bsel cell — keep its background opaque while selected */
  table[data-bulk] tbody tr.bulk-on td:first-child { background:var(--aubergine-50); }
}

/* ── undo pill (Linear-style) — bottom RIGHT, same dark-chip family as .bulk-pill ──
   Created by app.js after every undoable mutation: confirmation text, an Undo button (⌘Z/Ctrl+Z),
   a dismiss ✕, and a timer bar that drains over the pill's lifetime (pausing on hover). Reuses the
   bulk pill's .bp-btn / .bp-sep / .bp-clear internals so the two pills read as one system; rides
   the --chip-bg/--chip-hover semantic tokens, so on-chip text stays white-based in both themes. */
.undo-pill { position:fixed; bottom:28px; right:24px; z-index:56;
  display:flex; align-items:center; gap:2px; background:var(--chip-bg); color:#fff;
  border-radius:var(--r-pill); padding:6px 8px 6px 16px; box-shadow:var(--shadow-lg);
  max-width:min(480px, calc(100vw - 32px)); overflow:hidden;
  opacity:0; transform:translateY(10px); transition:opacity .18s, transform .18s; }
.undo-pill.show { opacity:1; transform:translateY(0); }
.undo-msg { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.undo-kbd { font-family:inherit; font-size:10.5px; font-weight:600; line-height:1; color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.35); border-radius:5px; padding:2px 5px 1px; }
.undo-timer { position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  border-radius:var(--r-pill); background:var(--chip-hover); overflow:hidden; }
.undo-timer-fill { display:block; height:100%; width:100%; background:var(--aubergine-300); }
/* when both pills are up (a bulk selection + a fresh undo), keep the undo pill clear of the toast */
@media (max-width:820px){
  .undo-pill { bottom:76px; right:12px; } /* above the mobile tab bar, like the bulk pill */
}

/* ── inline cell editing (Twenty/Attio-style click-to-edit table cells) ── */
td.ecell { cursor:text; }
/* hover affordance: a quiet inset ring says "this cell is editable" (hover devices only) */
@media (hover:hover) {
  td.ecell:hover { box-shadow:inset 0 0 0 1px var(--aubergine-400); border-radius:6px; }
}
td.ecell.editing { padding:5px 8px; cursor:default; }
td.ecell.editing:hover { box-shadow:none; }
.ecell-input { width:100%; min-width:90px; box-sizing:border-box; font:inherit; font-size:13px;
  color:var(--neutral-900); background:var(--neutral-00); border:1px solid var(--aubergine-500);
  border-radius:8px; padding:5px 8px; box-shadow:0 0 0 3px var(--ring-focus); }
.ecell-input:focus { outline:none; }
select.ecell-input { padding:5px 26px 5px 8px; cursor:pointer; }
td.num .ecell-input { text-align:right; }