/* ============================================================
   LAMP Console — pixel port of the Aditus design reference.
   Tokens, type, and component shapes match the reference 1:1;
   every number rendered is real (no fabricated deltas/trends).
   ============================================================ */

@font-face { font-family: "Cabinet Grotesk"; src: url("./fonts/CabinetGrotesk-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("./fonts/CabinetGrotesk-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("./fonts/CabinetGrotesk-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("./fonts/Satoshi-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("./fonts/Satoshi-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("./fonts/Satoshi-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --ad-canvas: #f1f0ee;
  --ad-surface: #ffffff;
  --ad-inset: #f7f7f6;
  --ad-ink: #1c1c1c;
  --ad-ink2: rgba(28, 28, 28, 0.64);
  --ad-ink3: rgba(28, 28, 28, 0.46);
  --ad-ink4: rgba(28, 28, 28, 0.3);
  --ad-line: rgba(28, 28, 28, 0.08);
  --ad-line2: rgba(28, 28, 28, 0.13);
  --ad-line3: rgba(28, 28, 28, 0.22);
  --ad-rail: #1c1c1c;
  --ad-rail-line: rgba(244, 244, 244, 0.09);
  --ad-accent: #1396e6;
  --ad-accent-ink: color-mix(in srgb, var(--ad-accent) 84%, #0b0b0b);
  --ad-accent-tint: color-mix(in srgb, var(--ad-accent) 11%, transparent);
  --ad-accent-line: color-mix(in srgb, var(--ad-accent) 34%, transparent);
  --ad-pos: #1cbe78;
  --ad-pos-ink: #0c7f4f;
  --ad-pos-tint: rgba(28, 190, 120, 0.13);
  --ad-attn: #f97316;
  --ad-attn-ink: #b4460b;
  --ad-attn-tint: rgba(249, 115, 22, 0.13);
  --ad-crit: #dc2626;
  --ad-crit-ink: #a81919;
  --ad-crit-tint: rgba(220, 38, 38, 0.12);
  /* Amber, for the `medium` priority band. Distinct from `--ad-attn` orange so
     High and Medium are told apart by hue and not only by their label. */
  --ad-warn: #d9a406;
  --ad-warn-ink: #8a6500;
  --ad-warn-tint: rgba(217, 164, 6, 0.15);
  --ad-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;
  --ad-disp: "Cabinet Grotesk", "Satoshi", system-ui, sans-serif;
  --ad-body: "Satoshi", system-ui, sans-serif;
  --rail-w: 228px;
  /* Height of the rail once it becomes a bottom bar under 720px. Measured, not
     guessed: the utility rows make it taller than the nav alone. */
  --rail-mobile-h: 78px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100vh; }
body {
  background: var(--ad-canvas);
  color: var(--ad-ink);
  font-family: var(--ad-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--ad-accent-ink); text-decoration: none; }
a:hover { color: var(--ad-ink); text-decoration: underline; text-decoration-thickness: 1px; }
button, input, select, textarea { font-family: inherit; color: inherit; font-size: inherit; }
.num { font-family: var(--ad-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
h1, h2, h3 { font-family: var(--ad-disp); font-weight: 700; margin: 0; }
p { margin: 0; }

@keyframes adIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes adDrawer { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes adScrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes adPop { from { opacity: 0; transform: translateY(4px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(28, 28, 28, 0.16); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }

/* ============================================================
   SHELL
   ============================================================ */

.app { display: flex; min-height: 100vh; background: var(--ad-canvas); }
/* `display: flex` would otherwise beat the `hidden` attribute, leaving the signed-out
   shell reachable by Tab and screen readers behind the login overlay. */
.app[hidden] { display: none; }

.rail {
  width: var(--rail-w);
  flex: none;
  background: var(--ad-rail);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  color: rgba(244, 244, 244, 0.82);
}

.rail-brand {
  padding: 16px 14px 14px;
  border-bottom: 1px solid var(--ad-rail-line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.rail-brand .mark {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  background: var(--ad-accent);
  display: flex; align-items: center; justify-content: center;
}
.rail-brand .name { font-family: var(--ad-disp); font-weight: 700; font-size: 15.5px; letter-spacing: -0.02em; color: #f4f4f4; }
.rail-brand .sub { font-size: 11.5px; color: rgba(244, 244, 244, 0.5); margin-top: 1px; }

.rail-tenant {
  margin: 8px 8px 0;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: #f4f4f4;
}
.rail-tenant:hover { background: rgba(244, 244, 244, 0.06); }
.rail-tenant select {
  appearance: none;
  background: transparent;
  border: none;
  color: #f4f4f4;
  font-size: 12.5px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
}
.rail-tenant select option { color: #111; }

.rail-nav { flex: 1; overflow: auto; padding: 12px 8px; }

.rail-link {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 2px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(244, 244, 244, 0.66);
  transition: background 120ms ease;
}
.rail-link:hover { background: rgba(244, 244, 244, 0.06); }
.rail-link.active { background: rgba(244, 244, 244, 0.09); color: #f4f4f4; font-weight: 600; }
.rail-link .icon { width: 17px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: rgba(244, 244, 244, 0.42); }
.rail-link.active .icon { color: var(--ad-accent); }
.rail-badge {
  margin-left: auto;
  font-family: var(--ad-mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(244, 244, 244, 0.07);
  color: rgba(244, 244, 244, 0.5);
}
.rail-link.active .rail-badge { background: rgba(244, 244, 244, 0.12); color: #f4f4f4; }

.rail-divider { height: 1px; background: var(--ad-rail-line); margin: 14px 10px; }

/*
 * Utilities sit below the divider, quieter than navigation: they are things you
 * reach for, not places you are. Smaller type and a dimmer ink keep the six
 * primary destinations dominant.
 */
.rail-util {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 1px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(244, 244, 244, 0.6);
  transition: background 120ms ease, color 120ms ease;
}
.rail-util:hover { background: rgba(244, 244, 244, 0.06); color: rgba(244, 244, 244, 0.82); }
.rail-util.active { background: rgba(244, 244, 244, 0.09); color: #f4f4f4; font-weight: 600; }
.rail-util .icon { width: 17px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: rgba(244, 244, 244, 0.42); }
.rail-util.active .icon { color: var(--ad-accent); }
.rail-util > span:nth-child(2) { flex: 1; }
.rail-hint {
  font-family: var(--ad-mono);
  font-size: 10px;
  color: rgba(244, 244, 244, 0.32);
}
/* A pending count is information, not decoration — brighten it above the ⌘K hint. */
.rail-util .rail-hint.count { color: rgba(244, 244, 244, 0.62); }

.rail-foot {
  padding: 10px;
  border-top: 1px solid var(--ad-rail-line);
  display: flex; align-items: center; gap: 9px;
}
.rail-foot .avatar {
  width: 29px; height: 29px; flex: none; border-radius: 9px;
  background: linear-gradient(140deg, var(--ad-accent), color-mix(in srgb, var(--ad-accent) 40%, #0b2e52));
  color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.rail-foot .who { flex: 1; min-width: 0; }
.rail-foot .who .name { font-size: 12.5px; font-weight: 600; color: #f4f4f4; }
.rail-foot .who .role { font-size: 11px; color: rgba(244, 244, 244, 0.46); }

/* ---- Main column ---- */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topstrip {
  display: flex; align-items: center; gap: 12px;
  padding: 0 28px;
  height: 56px;
  border-bottom: 1px solid var(--ad-line);
  background: color-mix(in srgb, var(--ad-canvas) 82%, #fff);
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(12px);
}
.crumb { font-family: var(--ad-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ad-ink3); }
.crumb strong { color: var(--ad-ink); }
.topstrip-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ts-btn {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px;
  background: var(--ad-surface);
  border: 1px solid var(--ad-line2);
  border-radius: 9px;
  cursor: pointer;
  color: var(--ad-ink3);
  font-size: 12.5px;
}
.ts-btn:hover { color: var(--ad-ink); }
.ts-btn .kbd { font-family: var(--ad-mono); font-size: 10.5px; padding: 1px 5px; border-radius: 5px; background: var(--ad-inset); border: 1px solid var(--ad-line); color: var(--ad-ink4); }
.ts-icon {
  position: relative; width: 32px; height: 32px;
  background: var(--ad-surface); border: 1px solid var(--ad-line2); border-radius: 9px;
  cursor: pointer; color: var(--ad-ink2);
  display: flex; align-items: center; justify-content: center;
}
.ts-icon .dot { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 99px; background: var(--ad-attn); border: 1.5px solid var(--ad-surface); }
#status { color: var(--ad-ink3); font-size: 12px; }

.view { padding: 0 28px 72px; max-width: 1420px; }

/* ============================================================
   HERO + TABS
   ============================================================ */

.hero { padding: 30px 0 12px; }
.hero-row { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.hero h1 { font-size: 32px; line-height: 1.08; letter-spacing: -0.035em; color: var(--ad-ink); max-width: 760px; }
.hero .brief { margin: 9px 0 0; font-size: 15px; line-height: 1.5; color: var(--ad-ink2); max-width: 760px; }
.hero .asof { font-family: var(--ad-mono); font-size: 11px; color: var(--ad-ink4); padding-bottom: 4px; }

.tabstrip {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--ad-line);
  position: sticky; top: 56px; z-index: 4;
  background: color-mix(in srgb, var(--ad-canvas) 82%, #fff);
  backdrop-filter: blur(12px);
}
.tabstrip button {
  padding: 11px 13px 12px;
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ad-ink3);
}
.tabstrip button.active { font-weight: 700; color: var(--ad-ink); border-color: var(--ad-ink); }

.tabpanel { padding: 24px 0 0; animation: adIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ============================================================
   PRIMITIVES
   ============================================================ */

.card {
  background: var(--ad-surface);
  border: 1px solid var(--ad-line2);
  border-radius: 14px;
}
.card-head { display: flex; align-items: baseline; gap: 10px; padding: 20px 22px 0; }
.card-head h2 { font-size: 19px; letter-spacing: -0.02em; }
.card-head .note { font-family: var(--ad-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ad-ink4); }
.card-body { padding: 18px 22px 20px; }

.btn {
  padding: 8px 13px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12.5px; font-weight: 600;
}
.btn.dark { background: var(--ad-ink); color: #f4f4f4; }
.btn.dark:hover { background: #000; }
.btn.outline { background: var(--ad-surface); border-color: var(--ad-line3); color: var(--ad-ink); }
.btn.outline:hover { border-color: var(--ad-ink4); }
.btn.accent { background: var(--ad-accent); color: #fff; }
/* Outlined rather than filled: removing a record is reversible here, so it should
   read as deliberate without shouting like a permanent delete. */
.btn.danger {
  background: var(--ad-surface);
  border-color: var(--ad-crit);
  color: var(--ad-crit-ink);
}
.btn.danger:hover { background: var(--ad-crit-tint); }
/* Replying in WhatsApp. Green because that is what the destination is, and the
   one button here that leaves the console for another app. */
.btn.go { background: var(--ad-pos); color: #fff; }
.btn.go:hover { background: var(--ad-pos-ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-size: 11.5px; font-weight: 600; color: var(--ad-ink3); }
.field input, .field select, .field textarea, .toolbar-input {
  background: var(--ad-surface);
  border: 1px solid var(--ad-line2);
  border-radius: 9px;
  padding: 8px 10px;
  color: var(--ad-ink);
}
.field input:focus, .field select:focus, .field textarea:focus, .toolbar-input:focus { border-color: var(--ad-accent); }

.pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.pill.pos { color: var(--ad-pos-ink); background: var(--ad-pos-tint); }
.pill.accent { color: var(--ad-accent-ink); background: var(--ad-accent-tint); }
.pill.attn { color: var(--ad-attn-ink); background: var(--ad-attn-tint); }
.pill.crit { color: var(--ad-crit-ink); background: var(--ad-crit-tint); }
.pill.neutral { color: var(--ad-ink3); background: var(--ad-inset); }

.empty { color: var(--ad-ink3); font-size: 13px; padding: 16px 2px; }

table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: 9px 4px; border-bottom: 1px solid var(--ad-line); font-size: 13px; }
th { font-size: 11px; color: var(--ad-ink3); font-weight: 600; }

/* ============================================================
   PULSE (KPI grid, 1px hairline seams)
   ============================================================ */

.pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--ad-line);
  border: 1px solid var(--ad-line2);
  border-radius: 14px;
  overflow: hidden;
}
.pulse-cell {
  min-width: 0; padding: 18px 20px 17px;
  background: var(--ad-surface);
  border: none; cursor: pointer; text-align: left;
}
.pulse-cell .label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ad-ink3); }
.pulse-cell .value { font-family: var(--ad-disp); font-size: 33px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 9px; color: var(--ad-ink); }
.pulse-cell .value.crit { color: var(--ad-crit-ink); }
.pulse-cell .sub { font-size: 12px; color: var(--ad-ink3); margin-top: 7px; }

/* ============================================================
   NEEDS ATTENTION (signal cards)
   ============================================================ */

.signal-toggle {
  display: flex; align-items: center; gap: 5px; margin-top: 9px;
  padding: 0; background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ad-accent-ink);
}
.signal-toggle svg { transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.funnel-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 9px 10px;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; text-align: left;
}
.funnel-row.leak { background: var(--ad-accent-tint); border-color: var(--ad-accent-line); }
.funnel-row .fname { width: 104px; flex: none; font-size: 12.5px; font-weight: 600; color: var(--ad-ink); }
.funnel-row .fcount { width: 52px; flex: none; font-family: var(--ad-disp); font-size: 19px; font-weight: 700; letter-spacing: -0.025em; color: var(--ad-ink); }
.funnel-row .ftrack { flex: 1; min-width: 0; height: 8px; background: var(--ad-inset); border-radius: 99px; overflow: hidden; }
.funnel-row .ffill { display: block; height: 100%; background: rgba(28, 28, 28, 0.3); border-radius: 99px; transition: width 400ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.funnel-row.leak .ffill { background: var(--ad-accent); }
.funnel-row .fdrop { width: 96px; flex: none; text-align: right; font-size: 11.5px; color: var(--ad-ink3); }

/* Where a lead stops being a lead. The rule is the point of the unified funnel:
   one journey with a threshold in it, rather than two separate charts. */
/* Each half of the funnel is named, so a bar is never ambiguous about whether
   it counts leads or paying members. */
.funnel-half { margin-top: 14px; }
.funnel-half-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ad-ink3);
  margin-bottom: 7px;
}

.funnel-divide {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 10px;
}
.funnel-divide-line { flex: 1; height: 1px; background: var(--ad-line); }
.funnel-divide-label {
  flex: none;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ad-pos-ink);
  background: var(--ad-pos-tint);
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.funnel-row.leak .fdrop { color: var(--ad-accent-ink); }

.insight-box { margin-top: 16px; padding: 14px 15px; background: var(--ad-accent-tint); border: 1px solid var(--ad-accent-line); border-radius: 11px; }
.insight-box p { font-size: 13.5px; line-height: 1.5; color: var(--ad-ink); }
.insight-box .btn { margin-top: 10px; }

/* ============================================================
   TODAY / OUTCOMES (right column)
   ============================================================ */

.outcome-row { display: flex; gap: 11px; }
.outcome-row .dot { width: 7px; height: 7px; flex: none; margin-top: 5px; border-radius: 99px; }
.outcome-row .text { font-size: 13px; line-height: 1.45; color: var(--ad-ink); }
.outcome-row .when { font-family: var(--ad-mono); font-size: 10.5px; color: var(--ad-ink4); margin-top: 3px; }

/* ============================================================
   ROW LIST (People: Leads / Clients)
   ============================================================ */

.list-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 4px;
  background: transparent; border: none; border-top: 1px solid var(--ad-line);
  cursor: pointer; text-align: left;
}
.list-row:first-child { border-top: none; }
.list-row .avatar {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: var(--ad-inset); border: 1px solid var(--ad-line);
  color: var(--ad-ink2); font-family: var(--ad-mono); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.list-row .id-col { flex: 1; min-width: 0; }
.list-row .name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ad-ink); }
.list-row .meta { display: block; font-size: 11.5px; color: var(--ad-ink3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .side { flex: none; display: flex; align-items: center; gap: 14px; }
.list-row .owner { width: 84px; flex: none; text-align: right; font-size: 11.5px; color: var(--ad-ink3); }
.list-row .owner.unassigned { color: var(--ad-attn-ink); }
.list-row .overdue { color: var(--ad-crit-ink); font-weight: 600; font-size: 11.5px; }

/* A ticket is worked in place, so the row carries its own controls. */
.ticket-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 4px;
  border-top: 1px solid var(--ad-line);
}
.ticket-row:first-of-type { border-top: none; }
.ticket-row .id-col { flex: 1; min-width: 0; }
.ticket-row .name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ad-ink); }
.ticket-row .meta {
  display: block; font-size: 11.5px; color: var(--ad-ink3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticket-row select {
  flex: none;
  background: var(--ad-surface);
  border: 1px solid var(--ad-line2);
  border-radius: 9px;
  padding: 6px 8px;
  font-size: 11.5px;
  color: var(--ad-ink);
  cursor: pointer;
}
.ticket-row select:focus { border-color: var(--ad-accent); outline: none; }
.ticket-row .ticket-assignee { width: 128px; }
.ticket-row .ticket-status { width: 112px; }
/* Who raised it — dimmer than the complaint itself, which is the thing to read. */
.ticket-row .meta.who { color: var(--ad-ink4); font-family: var(--ad-mono); font-size: 11px; }
.ticket-row .ticket-reply { flex: none; }

@media (max-width: 720px) {
  .ticket-row { flex-wrap: wrap; }
  .ticket-row .id-col { flex-basis: 100%; }
}

.toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar-input { flex: 1; min-width: 220px; }
.chip {
  border-radius: 999px; border: 1px solid var(--ad-line2); background: var(--ad-surface);
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--ad-ink2); cursor: pointer;
}
.chip.active { background: var(--ad-ink); border-color: var(--ad-ink); color: #fff; }

/* ============================================================
   DRAWER
   ============================================================ */

/* Above the assistant sidebar (z-index 50), which is pinned to the same edge.
   A drawer is a modal answer to a click: docked furniture must not cover it, or
   the click reads as doing nothing at all. */
.scrim { position: fixed; inset: 0; background: rgba(8, 8, 8, 0.4); z-index: 60; animation: adScrim 160ms ease; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--ad-surface);
  border-left: 1px solid var(--ad-line2);
  z-index: 61;
  display: flex; flex-direction: column;
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.18);
  animation: adDrawer 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--ad-line); }
.drawer-head h2 { font-size: 17px; }
.drawer-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.close-x { background: none; border: none; color: var(--ad-ink3); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

.split-2 { display: flex; gap: 20px; margin-top: 34px; flex-wrap: wrap; }
.split-2 > .lead-col { flex: 1.55; min-width: 420px; }
.split-2 > .side-col { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 20px; }

@media (max-width: 860px) {
  .split-2 > .lead-col, .split-2 > .side-col { min-width: 0; flex: 1 1 100%; }
}

@media (max-width: 720px) {
  .app { flex-direction: column; }
  .rail {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    width: 100%; height: auto; flex-direction: row; z-index: 10;
    border-top: 1px solid var(--ad-rail-line);
  }
  .rail-brand, .rail-tenant, .rail-foot { display: none; }
  .rail-nav { display: flex; padding: 4px; overflow-x: auto; }
  .rail-link, .rail-util { flex-direction: column; gap: 3px; font-size: 10px; text-align: center; padding: 8px 9px; white-space: nowrap; }
  .rail-util > span:nth-child(2) { flex: none; }
  .rail-divider { display: none; }
  /* In the bottom bar there is no room for a shortcut hint beside a label; the
     count badges stay, since they are the reason to tap. */
  .rail-util .rail-hint:not(.count) { display: none; }
  /* Clears the bottom bar so the last row of any list stays reachable. The old
     60px predates the utility rows and now leaves content under the bar. */
  .main { padding-bottom: calc(var(--rail-mobile-h) + 8px); }
  .topstrip, .view { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: 26px; }
  .pulse-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SIGN IN
   ============================================================ */

.login-scrim {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 24px;
  background: var(--ad-paper);
}
.login-card { width: min(380px, 100%); }
.login-card .card-body { padding: 28px 26px 26px; }
.login-error {
  margin-top: 12px; padding: 9px 11px;
  font-size: 12.5px; color: var(--ad-crit);
  background: color-mix(in srgb, var(--ad-crit) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ad-crit) 26%, transparent);
  border-radius: 8px;
}
.login-card .field input {
  width: 100%;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Assistant dock
   --------------------------------------------------------------------------- */

.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;
}


/* Docked, not floating: the sidebar is furniture an owner works alongside, so it
   takes its own column rather than covering the board it acts on. */
.assistant-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: var(--assistant-w, 380px); max-width: 92vw;
  display: flex; flex-direction: column;
  background: var(--ad-rail);
  border-left: 1px solid rgba(244, 244, 244, 0.14);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.26);
  overflow: hidden;
  animation: adSlideIn 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* `display:flex` above outranks the hidden attribute on its own. */
.assistant-panel[hidden] { display: none; }

/* Collapsed, the panel becomes a rail: still present, still holding the
   conversation, just narrow. The assistant is pinned — it never disappears, so
   there is no state in which an owner has to go and find it again. */
.assistant-panel.collapsed { width: var(--assistant-rail-w, 48px); }
.assistant-panel.collapsed > *:not(.assistant-rail) { display: none; }

.assistant-rail {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 16px 0;
  border: 0;
  background: transparent;
  color: var(--ad-rail-ink, #f4f4f4);
  cursor: pointer;
}
.assistant-panel.collapsed .assistant-rail { display: flex; }
.assistant-rail:hover { background: rgba(244, 244, 244, 0.06); }
.assistant-rail:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: -3px; }
.assistant-rail .dot {
  width: 8px; height: 8px; flex: none;
  border-radius: 99px; background: var(--ad-accent);
}
/* Sideways, so the rail stays narrow enough to be worth collapsing to. */
.assistant-rail .rail-mark {
  writing-mode: vertical-rl;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  opacity: 0.75;
}

/* The shell yields the column rather than sliding under the panel, so nothing an
   owner is reading ends up behind it. Eased so the board does not jump sideways
   when the panel opens. */
.app { transition: margin-right 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
body.assistant-docked .app { margin-right: var(--assistant-w, 380px); }
body.assistant-railed .app { margin-right: var(--assistant-rail-w, 48px); }

@media (prefers-reduced-motion: reduce) {
  .app { transition: none; }
  .assistant-panel { animation: none; }
}

@keyframes adSlideIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

.assistant-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 13px 16px;
  border-bottom: 1px solid var(--ad-rail-line);
}
.assistant-head .dot { width: 8px; height: 8px; flex: none; border-radius: 99px; background: var(--ad-accent); }
.assistant-head .titles { flex: 1; min-width: 0; }
.assistant-head .eyebrow {
  font-family: var(--ad-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #f4f4f4;
}
.assistant-head .sub { font-size: 11.5px; color: rgba(244, 244, 244, 0.46); margin-top: 2px; }
.assistant-icon {
  width: 26px; height: 26px; flex: none;
  background: transparent;
  border: 1px solid rgba(244, 244, 244, 0.14);
  border-radius: 7px;
  cursor: pointer;
  color: rgba(244, 244, 244, 0.62);
  display: flex; align-items: center; justify-content: center;
}
.assistant-icon:hover { color: #f4f4f4; background: rgba(244, 244, 244, 0.07); }

.assistant-log {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.assistant-empty { font-size: 12.5px; color: rgba(244, 244, 244, 0.44); line-height: 1.55; }
.assistant-msg { font-size: 13px; line-height: 1.55; }
.assistant-msg .who {
  font-family: var(--ad-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(244, 244, 244, 0.38);
  margin-bottom: 4px;
}
.assistant-msg.you .body {
  color: #f4f4f4;
  background: rgba(244, 244, 244, 0.08);
  padding: 8px 11px; border-radius: 10px;
}
.assistant-msg.lamp .body { color: rgba(244, 244, 244, 0.86); white-space: pre-wrap; }
.assistant-msg .meta {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(244, 244, 244, 0.08);
  font-family: var(--ad-mono); font-size: 10px; line-height: 1.5;
  /* 0.34 alpha on this ground is below 4.5:1; provenance an operator may need to
     quote in an incident has to stay legible. */
  color: rgba(244, 244, 244, 0.52);
  overflow-wrap: anywhere;
}
.assistant-msg .meta a { color: rgba(244, 244, 244, 0.58); }
.assistant-msg.error .body { color: var(--ad-crit); }

.assistant-compose {
  display: flex; gap: 8px;
  padding: 12px 12px 12px 14px;
  border-top: 1px solid var(--ad-rail-line);
}
.assistant-compose input {
  flex: 1; min-width: 0;
  background: rgba(244, 244, 244, 0.06);
  border: 1px solid rgba(244, 244, 244, 0.13);
  border-radius: 9px;
  padding: 8px 11px;
  font: inherit; font-size: 13px;
  color: #f4f4f4;
}
.assistant-compose input::placeholder { color: rgba(244, 244, 244, 0.36); }
.assistant-compose input:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 1px; }
.assistant-compose .btn { flex: none; }

/* What the owner confirms before anything is written. Sits inside a LAMP turn,
   so it inherits the panel's dark surface rather than the page's. */
.assistant-card {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(244, 244, 244, 0.16);
  border-radius: 10px;
  background: rgba(244, 244, 244, 0.05);
}
/* The one card that is a question needing an answer, so it is the one that draws
   the eye. */
.assistant-card.confirm { border-color: rgba(233, 178, 63, 0.5); }
.assistant-card .card-summary { font-size: 13px; line-height: 1.45; }
.assistant-card .card-actions { display: flex; gap: 8px; margin-top: 10px; }
.assistant-card .card-candidates,
.assistant-card .card-changes {
  margin: 8px 0 0; padding-left: 16px;
  font-size: 12.5px; line-height: 1.6;
}
/* Every change is listed rather than counted: approving a batch means seeing what
   is in it. */
.assistant-card .card-changes li { padding: 1px 0; }
.assistant-card .card-candidates .muted { color: var(--ad-rail-ink3, rgba(244, 244, 244, 0.5)); }
.assistant-card.note { font-size: 12.5px; }

.btn.sm { padding: 5px 11px; font-size: 12px; }

@media (max-width: 720px) {
  /*
   * The rail becomes a bottom bar below 720px. It measures 78px tall with the
   * utility rows, so the dock is offset past that plus a gutter — a smaller guess
   * left the pill overlapping the bar by 6px.
   */

  /* No room for a column beside the board at this width, so the panel covers it
     and the shell keeps its full width — the margin would only push content
     off-screen. */
  .assistant-panel { left: 0; width: auto; max-width: none; }
  body.assistant-docked .app { margin-right: 0; }
}

/* Between phone and desktop the board is too narrow to share the row. */
@media (max-width: 1100px) {
  body.assistant-docked .app { margin-right: 0; }
}

/* ---------------------------------------------------------------------------
   Notifications drawer
   --------------------------------------------------------------------------- */

.notif-actions {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--ad-line);
}
.notif-summary { flex: 1; font-size: 12.5px; color: var(--ad-ink3); }

.notif-list { display: flex; flex-direction: column; }

.notif {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ad-line);
}
.notif:last-child { border-bottom: 0; }
/* Read notifications stay legible but recede, so unread ones carry the eye. */
.notif.read { opacity: 0.58; }

.notif-sev {
  width: 7px; height: 7px; flex: none; margin-top: 6px;
  border-radius: 99px; background: var(--ad-ink4);
}
.notif-sev.crit { background: var(--ad-crit); }
.notif-sev.warn { background: var(--ad-attn); }
.notif-sev.info { background: var(--ad-accent); }

.notif-main { flex: 1; min-width: 0; }
.notif-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.notif.read .notif-title { font-weight: 500; }
.notif-body { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ad-ink2); }
.notif-meta {
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--ad-mono); font-size: 10.5px; color: var(--ad-ink4);
}
.notif-run {
  all: unset;
  cursor: pointer;
  color: var(--ad-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.notif-run:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; border-radius: 3px; }

.notif-read {
  all: unset;
  flex: none;
  cursor: pointer;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--ad-ink3);
  border: 1px solid var(--ad-line2);
  border-radius: 7px;
}
.notif-read:hover { color: var(--ad-ink); background: var(--ad-inset); }
.notif-read:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 1px; }

/* ---------------------------------------------------------------------------
   Memory — conversations and messages
   --------------------------------------------------------------------------- */

/* Capped so the conversation list never pushes the messages below the fold on a
   tenant with hundreds of threads. */
.mem-conv-list { max-height: 268px; overflow-y: auto; margin-top: 4px; }

.mem-conv {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.mem-conv:hover { background: var(--ad-inset); }
.mem-conv.active { background: var(--ad-accent-tint); box-shadow: inset 2px 0 0 var(--ad-accent); }

.mem-conv-main { flex: 1; min-width: 0; }
.mem-conv-name {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mem-conv-preview {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--ad-ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mem-conv-side { flex: none; text-align: right; }
.mem-conv-side .num { display: block; font-size: 11.5px; color: var(--ad-ink2); }
.mem-conv-when { display: block; margin-top: 2px; font-size: 10.5px; color: var(--ad-ink4); }

.mem-msg { padding: 10px 0; border-bottom: 1px solid var(--ad-line); }
.mem-msg:last-child { border-bottom: 0; }
.mem-msg-head { display: flex; align-items: baseline; gap: 8px; }
.mem-msg-head .who { font-size: 12px; font-weight: 600; }
.mem-msg-head .when {
  font-family: var(--ad-mono); font-size: 10.5px; color: var(--ad-ink4);
}
/* Which chat a search hit came from. Quieter than the sender, louder than the
   timestamp — it answers "where was this said" without competing with "who". */
.mem-msg-head .where {
  font-size: 11px; color: var(--ad-ink3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%;
}
.mem-msg-head .when { margin-left: auto; }
.mem-msg-body {
  margin-top: 3px;
  font-size: 13px; line-height: 1.55;
  color: var(--ad-ink2);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   Invite acceptance — a standalone page, reached from an emailed link by
   someone who has never seen the console and has no session yet.
   --------------------------------------------------------------------------- */
.invite-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--ad-bg, #f4f4f2);
}

.invite-card {
  width: 100%;
  max-width: 420px;
  background: var(--ad-surface, #fff);
  border: 1px solid var(--ad-line, #e4e4e1);
  border-radius: 14px;
  padding: 32px;
}

.invite-brand {
  font-size: 12px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ad-ink4, #9a9a94);
  margin-bottom: 22px;
}

.invite-card h1 {
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.invite-muted {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ad-ink2, #5c5c57);
  margin: 0 0 6px;
}

.invite-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ad-ink2, #5c5c57);
  margin: 18px 0 6px;
}

.invite-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--ad-line, #e4e4e1);
  border-radius: 8px;
  background: var(--ad-surface, #fff);
  color: var(--ad-ink, #1a1a18);
}

.invite-input:focus {
  outline: 2px solid var(--ad-accent, #2f6df6);
  outline-offset: 1px;
  border-color: transparent;
}

.invite-hint {
  font-size: 11.5px;
  color: var(--ad-ink4, #9a9a94);
  margin: 6px 0 0;
}

.invite-formerror {
  font-size: 13px;
  color: var(--ad-crit, #c4321f);
  margin: 16px 0 0;
}

.invite-submit {
  width: 100%;
  margin-top: 22px;
  padding: 11px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--ad-ink, #1a1a18);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.invite-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Sits at the foot of a drawer, below the fields that save on blur. Separated by
   a rule and given its own label so removing a record cannot be mistaken for one
   more field to fill in. */
.danger-zone {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--ad-line);
}
.danger-zone .danger-copy { flex: 1; min-width: 0; font-size: 12px; color: var(--ad-ink3); }
.danger-zone .danger-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ad-ink);
  margin-bottom: 2px;
}
.danger-zone .btn { flex: none; }
/* Already removed: the tone is informational, not a warning to act on. */
.danger-zone.restored .danger-copy strong { color: var(--ad-ink2); }

/* ---------------------------------------------------------------------------
   Facts — what LAMP answers from
   --------------------------------------------------------------------------- */

.fact-card {
  padding: 16px 0;
  border-top: 1px solid var(--ad-line);
}
.fact-card:first-child { border-top: 0; padding-top: 4px; }

.fact-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.fact-scope { font-size: 11px; color: var(--ad-ink4); }
.fact-key { font-size: 14px; font-weight: 600; color: var(--ad-ink); }
.fact-edit { font-size: 11.5px; flex: none; }

/* Grouping is what makes a twelve-field profile readable: without it every field
   carries the same weight and the name of the business reads like a locale code. */
.fact-section + .fact-section { margin-top: 14px; }

.fact-section-title {
  margin: 0 0 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ad-ink4);
}

.fact-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 3px 0;
}

/* Wide enough for "Words that route" labels without wrapping mid-phrase; the
   previous inline 96px clipped anything longer than one word. */
.fact-label {
  flex: 0 0 128px;
  font-size: 11.5px;
  color: var(--ad-ink3);
}

.fact-value {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--ad-ink);
}

.fact-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.fact-empty { color: var(--ad-ink4); font-style: italic; }

/* Says where a value is really edited, so a duplicated field cannot be changed in
   the place that does not count. */
.fact-managed {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ad-ink4);
}

.fact-foot {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--ad-ink4);
}

@media (max-width: 620px) {
  /* Stacked, because a 128px label column leaves nothing for the value. */
  .fact-row { flex-direction: column; gap: 2px; }
  .fact-label { flex: none; }
}

/* Key/value editor rows — pricing, and any flat fact. Replaces a JSON textarea,
   so a missing brace can no longer stop someone editing their own prices. */
.kv-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.kv-row .kv-key {
  flex: 0 0 38%;
  min-width: 0;
}

.kv-row .kv-value {
  flex: 1;
  min-width: 0;
}

.kv-row input {
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--ad-line);
  border-radius: 7px;
  background: var(--ad-surface);
  color: var(--ad-ink);
}

.kv-remove {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ad-line);
  border-radius: 7px;
  background: transparent;
  color: var(--ad-ink3);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.kv-remove:hover {
  color: var(--ad-crit-ink, #c4321f);
  border-color: currentColor;
}

/* Explanation under a field whose meaning is not self-evident — a 0-100 score
   is only overridable by hand if the operator knows what the scale means. */
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ad-ink3);
}

/* The message that caused a run or a draft. Approving a reply without seeing
   what it replies to is guesswork, so the quote leads rather than hides. */
.run-quote {
  padding: 10px 12px;
  border-left: 2px solid var(--ad-line2);
  background: rgba(0, 0, 0, 0.018);
  border-radius: 0 8px 8px 0;
}

.run-quote-who {
  font-size: 11px;
  color: var(--ad-ink4);
  margin-bottom: 4px;
}

.run-quote-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ad-ink);
}

/* One sentence at the top of a run saying what it was, before any detail. */
.run-summary {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ad-ink);
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ad-line);
}

/* Immediate actions — what is happening in the bound groups right now.
   These replaced the pipeline funnel on the dashboard: a stage count is a report
   an owner can do nothing with today, whereas abuse in a group is. */
/* The number behind a one-to-one conversation. A DM thread is addressed by phone,
   so it is real and dialable; group threads carry no number at all. */
.mem-conv-phone {
  font-family: var(--ad-mono); font-size: 10.5px;
  font-weight: 400; color: var(--ad-ink4);
}

/* ---------------------------------------------------------------------------
   Action carousel — what needs a decision, above the work itself
   --------------------------------------------------------------------------- */

.action-strip { margin-top: 18px; }

/* Scrolls horizontally rather than wrapping: the row is a queue to work through,
   and a wrapping grid of identical boxes reads as a wall instead of a queue. */
.carousel {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.action-card {
  flex: 0 0 268px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--ad-surface);
  border: 1px solid var(--ad-line2);
  border-radius: 13px;
  padding: 13px 14px;
}
.action-card.urgent { border-color: var(--ad-crit); }

/* Priority bands.
   The stripe carries the signal rather than a tinted card body: a wall of
   coloured boxes is harder to scan than white cards with a coloured edge, and
   it keeps the text on the same background at the same contrast in both
   themes. */
/* A titled priority strip on the dashboard: one per scope, so Leads work and
   Customer work are never read as one interleaved list. */
.attn-block { margin-top: 22px; }
.attn-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.attn-title { font-size: 16px; letter-spacing: -0.02em; }
.attn-count {
  font-size: 12px;
  color: var(--ad-ink3);
  background: var(--ad-inset);
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  padding: 1px 8px;
}
.attn-crit {
  font-size: 12px;
  color: var(--ad-crit-ink);
  background: var(--ad-crit-tint);
  border-radius: 999px;
  padding: 1px 8px;
}
.attn-block .action-strip { margin-top: 0; }

.action-card[data-band] { border-left-width: 3px; }
.action-card[data-band="critical"] { border-left-color: var(--ad-crit); }
.action-card[data-band="high"] { border-left-color: var(--ad-attn); }
.action-card[data-band="medium"] { border-left-color: var(--ad-warn); }
.action-card[data-band="low"] { border-left-color: var(--ad-pos); }

/* The score, so the ordering is legible rather than something to take on
   trust — two cards in the same band are not equally urgent. */
.action-score {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}
.action-score .num { font-variant-numeric: tabular-nums; }
.action-card[data-band="critical"] .action-score { background: var(--ad-crit-tint); color: var(--ad-crit-ink); }
.action-card[data-band="high"] .action-score { background: var(--ad-attn-tint); color: var(--ad-attn-ink); }
.action-card[data-band="medium"] .action-score { background: var(--ad-warn-tint); color: var(--ad-warn-ink); }
.action-card[data-band="low"] .action-score { background: var(--ad-pos-tint); color: var(--ad-pos-ink); }

.action-card-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.action-who {
  font-size: 13.5px; font-weight: 600; color: var(--ad-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.action-when { flex: none; font-size: 10.5px; color: var(--ad-ink4); }
.action-what { margin-top: 5px; font-size: 12.5px; color: var(--ad-ink2); }
.action-quote {
  margin-top: 7px;
  font-size: 12.5px; line-height: 1.45; color: var(--ad-ink3);
  /* Two lines then ellipsis: the full text is one click away in the panel, and a
     long group message would otherwise make every card a different height. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.action-take { margin-top: auto; padding-top: 7px; align-self: flex-start; }
.action-card .action-take { margin-top: 12px; }

/* ---------------------------------------------------------------------------
   Pipeline board
   --------------------------------------------------------------------------- */

.board-wrap { margin-top: 26px; }
.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 12px;
  align-items: start;
}
.board-col {
  background: var(--ad-inset);
  border: 1px solid var(--ad-line);
  border-radius: 13px;
  padding: 11px;
}
.board-col-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 2px 9px;
}
.board-col-name {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ad-ink3);
}
.board-col-count { font-size: 12px; color: var(--ad-ink4); }
.board-col-body {
  display: flex; flex-direction: column; gap: 9px;
  min-height: 72px;
  border-radius: 9px;
  transition: background .12s ease, outline-color .12s ease;
  outline: 2px dashed transparent; outline-offset: -2px;
}
/* Only while a card is over it, so the board is quiet at rest. */
.board-col-body.over {
  background: var(--ad-accent-tint);
  outline-color: var(--ad-accent-line);
}
.board-empty {
  padding: 14px 4px; text-align: center;
  font-size: 12px; color: var(--ad-ink4);
}

.board-card {
  background: var(--ad-surface);
  border: 1px solid var(--ad-line2);
  border-radius: 11px;
  padding: 10px 11px;
  cursor: grab;
}
.board-card:active { cursor: grabbing; }
.board-card.dragging { opacity: .45; }
/* A won lead lives on Customers; the card is a pointer to them, not a lead in play. */
.board-card.won { border-color: color-mix(in srgb, var(--ad-pos) 40%, transparent); }
.board-card-top { display: flex; align-items: center; gap: 8px; }
.board-card-top .avatar {
  width: 25px; height: 25px; flex: none; border-radius: 8px;
  background: var(--ad-inset); border: 1px solid var(--ad-line);
  color: var(--ad-ink2); font-family: var(--ad-mono); font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.board-card-name {
  flex: 1; min-width: 0;
  background: none; border: none; padding: 0;
  text-align: left; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ad-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-card-name:hover { text-decoration: underline; }
.board-card-meta {
  margin-top: 5px; padding-left: 33px;
  font-family: var(--ad-mono); font-size: 10.5px; color: var(--ad-ink4);
}
.board-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px; padding-left: 33px;
}
.board-card-foot .owner { font-size: 11px; color: var(--ad-ink3); }
.board-card-foot .owner.unassigned { color: var(--ad-attn-ink); }
.board-card-foot .overdue { font-size: 11px; font-weight: 600; color: var(--ad-crit-ink); }

/* The board is four columns of cards; below tablet it becomes one column of
   stacked sections, which keeps the cards readable rather than shrinking them. */
@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; }
  .action-card { flex-basis: 232px; }
}

/* ---------------------------------------------------------------------------
   Closing a lead — won or lost, asked rather than assumed
   --------------------------------------------------------------------------- */

/* Above the drawer (61): a confirmation raised from inside a drawer must sit on
   top of it, or the question is invisible and the click looks ignored. */
.ask-close {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(16, 16, 16, 0.38);
}
.ask-close-panel {
  width: min(380px, 100%);
  background: var(--ad-surface);
  border: 1px solid var(--ad-line2);
  border-radius: 15px;
  padding: 20px;
}
.ask-close-panel h2 { font-size: 17px; letter-spacing: -0.01em; }
.ask-close-panel p { margin-top: 6px; font-size: 13px; color: var(--ad-ink2); }
.ask-close-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px;
}

/* ---------------------------------------------------------------------------
   Customer roster — what they pay for, and when it runs out
   --------------------------------------------------------------------------- */

.client-row .client-plan {
  flex: none; width: 150px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.client-plan-name {
  font-size: 12.5px; color: var(--ad-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.client-training {
  font-size: 11px; color: var(--ad-ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.client-renewal { flex: none; width: 138px; font-size: 11.5px; color: var(--ad-ink3); }
/* Lapsed is the one state that needs the owner today, so it is the one that
   reads as urgent; a renewal months out should not compete with it. */
.client-renewal.crit { color: var(--ad-crit-ink); font-weight: 600; }
.client-renewal.attn { color: var(--ad-attn-ink); font-weight: 600; }
.client-renewal.none { color: var(--ad-ink4); font-style: italic; }


/* The plan and renewal columns are the first to go when width runs out: the
   drawer carries the same facts, and a squashed row is worse than a shorter one. */
@media (max-width: 860px) {
  .client-row .client-plan { display: none; }
}
@media (max-width: 680px) {
  .client-row .client-renewal { display: none; }
}