/* ============================================================================
   styles.css — the whole design system, in one stylesheet.

   ONE FILE, NO FRAMEWORK
   ----------------------
   Everything the interface looks like is here: the tokens below, the app
   shell, and a section per screen. No Tailwind, no component library, no build
   step — the page loads this file and a font, and that is the entire styling
   pipeline. On a screen this size a framework would be more code than the app.

   READ THE TOKENS FIRST
   ---------------------
   The `:root` block is the design system. Colours, spacing, radii and shadows
   are all named there and referenced everywhere else, so a change to the look
   is a change to a variable rather than a search across 700 lines. If you find
   yourself writing a literal colour further down, it belongs up there instead.

   BRANDING OVERRIDES THESE AT RUNTIME
   -----------------------------------
   `--brand`, `--brand-ink` and the logo are set from the signed-in company's
   branding by applyBranding() in app.js. The values here are the neutral
   defaults a company sees before it has customised anything — they are not
   FaceEcho's, and nothing here should assume a particular company.

   HOW IT IS ORGANISED
   -------------------
   Tokens, then the shell (sidebar, content, header), then components in the
   order a new operator meets them: the queue, the lead page, the drafts, the
   documents, the admin console. Each section is announced by a banner comment
   like this one. Add to the section a rule belongs to rather than to the end
   of the file, which is how a stylesheet becomes a pile.
   ============================================================================ */
:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --ink: #09090b;
  --navy: #09090b;             /* legacy var names used by inline styles */
  --sage: #18181b;
  --sage-lighter: #f4f4f5;
  --text: #18181b;
  --text-muted: #71717a;
  --text-faint: #a1a1aa;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 1px 3px rgba(0,0,0,.05), 0 12px 32px -8px rgba(0,0,0,.08);
  --ease: cubic-bezier(.25,.8,.25,1);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
}
h2 { margin: 0 0 4px; font-size: 21px; font-weight: 650; letter-spacing: -0.025em; color: var(--ink); }
h3 { margin: 0 0 10px; font-size: 13px; font-weight: 650; color: var(--ink); }
a { color: var(--ink); text-underline-offset: 2px; }
code { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 0.92em; }
::selection { background: #18181b; color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ============ App shell ============ */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 232px; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 20px 14px;
}
.content {
  flex: 1; margin-left: 232px; min-width: 0;
  padding: 32px 40px 60px;
  max-width: 1200px;
}
@media (max-width: 900px) {
  .sidebar { position: static; width: auto; flex-direction: row; align-items: center; padding: 12px 16px; inset: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .content { margin-left: 0; padding: 20px; }
  .sidebar-foot { margin-left: auto; }
}

.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 700;
  letter-spacing: -0.02em;
}
.brand-name { font-size: 14px; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); line-height: 1.2; }
.brand-sub { font-size: 11px; color: var(--text-muted); }

.new-lead-btn {
  display: block; width: 100%; margin: 2px 0 16px;
  background: var(--ink); color: #fff; border: none; border-radius: 10px;
  font: 600 13px/1 "Inter", inherit; padding: 11px 14px; cursor: pointer; text-align: center;
  transition: background .15s var(--ease), transform .06s;
  box-shadow: var(--shadow-sm);
}
.new-lead-btn:hover { background: #27272a; }
.new-lead-btn:active { transform: translateY(1px); }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); padding: 14px 10px 6px; }
.nav-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; border-radius: 9px;
  font: 500 13.5px/1 "Inter", inherit; color: var(--text-muted);
  padding: 10px 12px; cursor: pointer; text-align: left;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.nav-btn:hover { background: var(--sage-lighter); color: var(--ink); }
.nav-btn.active { background: var(--sage-lighter); color: var(--ink); font-weight: 600; }
.nav-btn.active::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--ink); margin-left: -6px; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding: 12px 6px 2px; }
.user-row { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.user-name { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.user-role { font-size: 11px; color: var(--text-muted); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sage-lighter); border: 1px solid var(--border-strong);
  color: var(--ink); font-size: 11px; font-weight: 700;
}

/* ============ Pages & cards ============ */
.page-enter { animation: pageIn .28s var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.subtitle { font-size: 13.5px; color: var(--text-muted); margin-bottom: 20px; }
.section-header {
  font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); margin: 26px 0 14px; padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 9px; border: 1px solid transparent;
  font: 600 13px/1 "Inter", inherit;
  padding: 10px 16px; cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease), transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #27272a; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--ink); background: var(--surface); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--ink); background: var(--sage-lighter); }

/* ============ Stats ============ */
.stats-grid { display: grid; gap: 14px; margin: 8px 0 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.stat-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.stat-label { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.stat-value { font-size: 30px; font-weight: 650; letter-spacing: -0.035em; color: var(--ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat-delta { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

/* ============ Lead list ============ */
.lead-item {
  display: flex; align-items: center; gap: 14px; text-align: left;
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 18px; margin-bottom: 9px; cursor: pointer;
  font-family: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.lead-item:hover { border-color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.lead-item-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(180deg, #fafafa, #f0f0f1);
  border: 1px solid var(--border); color: var(--ink); font-size: 12px; font-weight: 700;
}
.lead-item-info { flex: 1; min-width: 0; }
.lead-item-name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.lead-item-company { font-size: 12.5px; color: var(--text-muted); }

/* ============ Category system ============ */
.cat-chip {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--text); background: var(--sage-lighter);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 8px; margin-top: 5px; white-space: nowrap;
}
.category-banner {
  display: flex; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(180deg, #fcfcfc, #f8f8f8);
  border: 1px solid var(--border-strong);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 18px;
}
.cat-kicker { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--text-faint); }
.cat-confidence {
  font-size: 10.5px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 2px 8px;
}
.cat-reason { font-size: 12.5px; color: var(--text-muted); margin-top: 7px; line-height: 1.6; }
.cat-template-note {
  font-size: 12.5px; color: var(--text); margin-top: 10px; line-height: 1.6;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
}
.cat-select {
  padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 9px;
  font: 500 13px/1.3 "Inter", inherit; background: var(--surface); width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2318181b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.template-banner {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; line-height: 1.6; color: var(--text);
  background: var(--sage-lighter); border-radius: 12px;
  padding: 13px 16px; margin-bottom: 14px;
}

/* ============ Forms ============ */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px; }
.form-row.single { grid-template-columns: 1fr; }
.form-field label {
  display: block; font-size: 11px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text); margin-bottom: 7px;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  font: 400 13.5px/1.45 "Inter", inherit; background: var(--surface); color: var(--text);
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2318181b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus,
.agent-question-input:focus, .cat-select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(24,24,27,.08);
}
.form-field input::placeholder, .form-field textarea::placeholder, .agent-question-input::placeholder { color: var(--text-faint); }
.form-field textarea { min-height: 78px; resize: vertical; }
.hint { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.55; }
.required { color: var(--ink); font-weight: 700; }
.optional { color: var(--text-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ============ Work header ============ */
.work-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border);
}
.work-header-left { display: flex; align-items: center; gap: 14px; }
.work-header-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
}
.work-header-name { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.work-header-role { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ============ Agent question ============ */
.agent-question {
  background: var(--surface); border: 1px solid var(--ink);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.agent-question-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 11px;
}
.agent-question-title-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
}
.agent-question-body { font-size: 13.5px; line-height: 1.65; color: var(--text); }
.agent-question-why { font-size: 12px; color: var(--text-muted); margin: 10px 0 14px; line-height: 1.6; }
.agent-question-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 6px; }
.agent-question-input {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  font: 400 13.5px/1.4 "Inter", inherit;
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.agent-question-actions { display: flex; align-items: center; gap: 8px; margin-top: 13px; }

/* ============ Research review ============ */
.research-section { border-top: 1px solid var(--border); padding: 15px 0 5px; }
.research-section:first-of-type { border-top: none; }
.research-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.research-section-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.research-edit-hint {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 600; color: var(--text-faint); padding: 4px 9px; border-radius: 7px;
  transition: color .12s, background .12s;
}
.research-edit-hint:hover { color: var(--ink); background: var(--sage-lighter); }
.research-content {
  font-size: 13.5px; line-height: 1.7; color: var(--text);
  background: var(--sage-lighter); border-radius: 11px;
  padding: 13px 16px; margin-bottom: 13px; cursor: pointer;
  border: 1px solid transparent; transition: border-color .14s var(--ease), background .14s var(--ease);
}
.research-content:hover { border-color: var(--border-strong); background: #f0f0f1; }

/* ============ Notes & banners ============ */
.document-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); margin: 24px 0 14px; display: flex; align-items: center; gap: 10px;
}
.document-group-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.personalization-hook {
  font-size: 13px; line-height: 1.65; color: var(--text);
  background: var(--sage-lighter); border-left: 3px solid var(--ink);
  border-radius: 0 11px 11px 0; padding: 13px 16px; margin-bottom: 10px;
}
.personalization-hook strong { display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.confidence-note {
  font-size: 12.5px; line-height: 1.65; color: var(--text-muted);
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: 11px; padding: 12px 16px; margin-bottom: 10px;
}
.confidence-note strong { color: var(--ink); }

/* ============ Draft cards ============ */
.draft-card {
  border: 1px solid var(--border); border-radius: 16px;
  margin-bottom: 16px; overflow: hidden; background: var(--surface);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.draft-card:hover { box-shadow: var(--shadow-sm); }
.draft-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; background: #fcfcfc; border-bottom: 1px solid var(--border);
}
.draft-card-title { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.draft-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.draft-card-meta { font-size: 11.5px; font-weight: 500; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.draft-card-body { padding: 18px; }
.draft-text {
  font-size: 13.5px; line-height: 1.7; color: var(--text);
  background: var(--sage-lighter); border-radius: 11px; padding: 15px 18px;
  border: 1px solid transparent; transition: background .14s var(--ease);
}
.draft-text:focus { outline: none; border-color: var(--ink); background: var(--surface); box-shadow: 0 0 0 3px rgba(24,24,27,.08); }
.draft-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ============ Deeper guides ============ */
.deeper-guide {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; background: var(--surface);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.deeper-guide:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.deeper-guide-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.deeper-guide-name { font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.deeper-guide-desc { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin-bottom: 12px; }

/* ============ Tables ============ */
.data-table { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.table-head, .table-row {
  display: grid; grid-template-columns: 1.2fr 1.2fr 1.2fr 0.9fr 1.1fr;
  gap: 12px; padding: 12px 18px; align-items: center;
}
.table-head {
  background: #fcfcfc; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
}
.table-row { border-top: 1px solid var(--border); font-size: 13px; transition: background .1s; }
.table-row:hover { background: #fafafa; }

/* ============ Misc ============ */
.empty-state { text-align: center; padding: 52px 20px; color: var(--text-muted); font-size: 13.5px; }
.panel-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 18px; margin-top: 22px;
}
.panel-footer-note { font-size: 12.5px; color: var(--text-muted); }
.panel-footer-actions { display: flex; gap: 8px; }

/* ============ Flow stepper ============ */
.flow-steps { display: flex; align-items: center; margin: 2px 0 22px; flex-wrap: wrap; row-gap: 8px; }
.flow-step { display: flex; align-items: center; gap: 8px; }
.flow-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--border-strong); color: var(--text-faint); background: var(--surface);
  transition: all .2s var(--ease);
}
.flow-step.done .flow-num { background: var(--ink); border-color: var(--ink); color: #fff; }
.flow-step.active .flow-num { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 3px rgba(24,24,27,.08); }
.flow-label { font-size: 12px; font-weight: 500; color: var(--text-faint); white-space: nowrap; }
.flow-step.done .flow-label { color: var(--text-muted); }
.flow-step.active .flow-label { color: var(--ink); font-weight: 650; }
.flow-line { width: 26px; height: 1.5px; background: var(--border-strong); margin: 0 10px; }
.flow-line.done { background: var(--ink); }
.queue-group-title {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px;
}
.queue-group-title .count {
  font-size: 10.5px; font-weight: 650; color: var(--ink); background: var(--sage-lighter);
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.queue-group-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ============ Add-lead method tabs ============ */
.method-tabs {
  display: inline-flex; gap: 2px; background: var(--sage-lighter);
  border: 1px solid var(--border); border-radius: 11px; padding: 3px; margin: 4px 0 22px;
}
.method-tab {
  border: none; background: transparent; border-radius: 8px; cursor: pointer;
  font: 600 12.5px/1 "Inter", inherit; color: var(--text-muted);
  padding: 9px 18px; transition: all .14s var(--ease);
}
.method-tab:hover { color: var(--ink); }
.method-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); border: 1px solid var(--border); padding: 8px 17px; }
.drop-zone {
  display: block;
  border: 1.5px dashed var(--border-strong); border-radius: 14px;
  padding: 44px 24px; text-align: center; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.drop-zone:hover, .drop-zone.drag { border-color: var(--ink); background: var(--sage-lighter); }
.drop-zone-title { font-size: 14px; font-weight: 650; color: var(--ink); margin-bottom: 4px; }
.drop-zone-sub { font-size: 12.5px; color: var(--text-muted); }
.bulk-area {
  width: 100%; min-height: 180px; padding: 14px 16px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  font: 400 12.5px/1.7 "SF Mono", ui-monospace, Menlo, monospace;
  background: var(--surface); color: var(--text); resize: vertical;
}
.bulk-area:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(24,24,27,.08); }

/* ============ App shell components (modal · toast · pills · badges) ============ */
/* App-specific additions on top of the prototype design system */
  .modal-bg { position:fixed; inset:0; background:rgba(10,10,10,.4); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:50; }
  .modal-bg.open { display:flex; }
  .modal-box { background:#fff; border-radius:14px; padding:22px; width:min(640px, 92vw); max-height:85vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.25); }
  .modal-box h3 { margin:0 0 12px; color:var(--navy); }
  .modal-box textarea { width:100%; min-height:140px; padding:10px; border:1px solid var(--border); border-radius:8px; font:inherit; font-size:13px; }
  .spinner { display:inline-block; width:14px; height:14px; border:2px solid #e0e0e0; border-top-color:#111; border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .stage-pill { font-size:10px; font-weight:700; letter-spacing:0.04em; border-radius:20px; padding:3px 10px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
  .stage-dot { width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; }
  .skipped-note { font-size:12px; color:var(--text-muted); background:#f6f7f8; border:1px dashed var(--border); border-radius:8px; padding:10px 12px; }
  .accepted { outline:2px solid #111; border-radius:14px; }
  .kv { font-size:12px; color:var(--text-muted); }
  pre.body-text { white-space:pre-wrap; font-family:inherit; margin:0; }
  .mock-badge { font-size:10px; font-weight:700; letter-spacing:0.05em; color:#6e6e73; background:#f4f4f5; border:1px solid #d1d1d6; border-radius:20px; padding:3px 10px; margin-left:8px; }

/* ============================================================================
   ADMIN CONSOLE — overview, setup checklist, activity feed
   Used by the Administration section (public/app.js → renderAdminOverview).
   ========================================================================== */

/* Page header shared by every admin page: title, purpose, and the way back. */
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 4px; }
.admin-back { background: none; border: none; padding: 0; font: 500 12.5px Inter, sans-serif; color: var(--text-muted); cursor: pointer; letter-spacing: -0.005em; white-space: nowrap; flex: none; }
.admin-back:hover { color: var(--text); }

/* "You are administering X" strip at the top of the console. */
.scope-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fafafa; margin-bottom: 22px; }
.scope-bar .scope-dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; flex: none; }
.scope-bar .scope-text { font-size: 13px; color: var(--text-muted); }
.scope-bar .scope-text strong { color: var(--text); font-weight: 650; }

/* Setup checklist */
.checklist { display: flex; flex-direction: column; gap: 0; margin: 6px 0 4px; }
.check-item { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--border); }
.check-item:last-child { border-bottom: none; }
.check-mark { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1.5px solid var(--border); color: var(--text-muted); background: #fff; }
.check-item.is-done .check-mark { background: #09090b; border-color: #09090b; color: #fff; }
.check-body { flex: 1; min-width: 0; }
.check-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.check-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* Activity feed */
.activity { display: flex; flex-direction: column; }
.activity-row { display: flex; align-items: baseline; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.activity-row:last-child { border-bottom: none; }
.activity-when { margin-left: auto; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.activity-who { font-size: 11.5px; color: var(--text-muted); }

/* Quick actions */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 4px; }
.quick-action { text-align: left; padding: 15px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, transform .15s; }
.quick-action:hover { border-color: #09090b; transform: translateY(-1px); }
.quick-action-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.quick-action-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* The lead reference — L-001, L-002. A per-company sequence, because the record
   id comes from one counter shared with events and sessions and so reads as a
   random number to anybody looking at a queue. */
.lead-ref {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  background: #f1f4f5;
  border-radius: 5px;
  padding: 1px 6px;
  vertical-align: middle;
  margin-left: 2px;
}

/* A step that is running: the spinner takes the number's place, so the label
   is never followed by a stray glyph that reads as a rendering fault. */
.flow-step.busy .flow-num { border-color: transparent; background: transparent; }
.flow-step.busy .flow-num .spinner { width: 14px; height: 14px; }
/* A button showing its own progress is not clickable and should not look it. */
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.62; cursor: default; pointer-events: none; }

/* ============================================================
   Next step — the single answer to "what do I do now?"
   ============================================================
   The lead page used to present ~3000px of category, reference, brand capture,
   drafts and documents with no statement of what the operator was for. This
   band sits directly under the flow steps and carries the one task and the one
   primary button; everything below it is reference material for doing it.
   ------------------------------------------------------------ */
.next-step {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: 18px 0 4px; padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.next-step-body { flex: 1 1 320px; min-width: 0; }
.next-step-kicker {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 6px;
}
.next-step-title { font-size: 17px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.next-step-detail { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-top: 4px; max-width: 66ch; }
.next-step-action { flex: 0 0 auto; }
.next-step-action .btn { white-space: nowrap; }
.next-step-warn { border-color: #f0c9a0; background: #fffbf5; }
.next-step-muted { opacity: .72; }

/* Approval progress: three dots beat "1 of 3" alone, because the shape of the
   remaining work is visible before the sentence is read. */
.step-progress { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.step-dot { width: 22px; height: 4px; border-radius: 2px; background: var(--border-strong); }
.step-dot.is-done { background: var(--ink); }
.step-progress-text { font-size: 11.5px; color: var(--text-muted); margin-left: 4px; }

/* Where a jump lands. Movement without a landing mark reads as the page having
   twitched rather than as having gone somewhere. */
@keyframes flashring {
  from { box-shadow: 0 0 0 3px rgba(9,9,11,.16); }
  to   { box-shadow: 0 0 0 3px rgba(9,9,11,0); }
}
.flash { animation: flashring 1.1s var(--ease); }

/* ============================================================
   Setup — configuration, folded
   ============================================================ */
.setup-panel {
  margin: 16px 0 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.setup-summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--text-muted);
}
.setup-summary::-webkit-details-marker { display: none; }
.setup-summary:hover { background: #fafafa; }
.setup-summary-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint);
}
.setup-summary-text { flex: 1 1 auto; min-width: 0; color: var(--text); }
.setup-summary-text strong { font-weight: 600; }
.setup-summary-toggle {
  font-size: 12px; font-weight: 600; color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 4px 11px;
}
.setup-panel[open] .setup-summary { border-bottom: 1px solid var(--border); }
.setup-panel[open] .setup-summary-toggle::after { content: ' \2715'; }
.setup-body { padding: 4px 16px 16px; }

/* ============================================================
   Queue rows — a task, not a state
   ============================================================ */
.lead-item-task {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-muted); white-space: nowrap;
}
.lead-item-task.is-yours { color: var(--ink); font-weight: 600; }
.lead-item-go { flex: 0 0 auto; color: var(--text-faint); font-size: 15px; margin-left: 2px; }
.lead-item:hover .lead-item-go { color: var(--ink); transform: translateX(2px); }
.lead-item-go { transition: transform .18s var(--ease), color .18s var(--ease); }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }

/* Approved is a state, not a button you press again. */
.approved-tick {
  margin-left: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0f766e;
}
.approved-tick::before { content: '\2713 '; }

.personalisation-flag { margin-bottom: 8px; font-size: 12px; }
.personalisation-flag.is-good { color: #0f766e; }
.personalisation-flag.is-generic { color: #b45309; font-weight: 600; }

/* WHY THESE CONDITIONS — the reasoning behind the slide, on the card that
   generated it. Collapsed by default: the answer matters when it is questioned,
   and nine rows of evidence open on every guide card is noise the rest of the
   time. */
.condition-why { margin-top: 6px; font-weight: 400; }
.condition-why > summary { cursor: pointer; color: #475569; font-size: 11.5px; }
.condition-why-row { padding: 5px 0; border-top: 1px solid #eef1f4; }
.condition-why-name { font-weight: 600; color: #0f172a; }
.condition-why-text { color: #475569; font-size: 11.5px; line-height: 1.45; }
/* The detection method, said in the same breath as the condition. A partner
   who hears "thirty conditions from a face scan" and gets ten that need a
   questionnaire has been mis-sold, and this is where that is caught. */
.pathway { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 9px;
  font-size: 10px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px; }
.pathway-vision  { background: #ecfdf5; color: #0f766e; }
.pathway-hybrid  { background: #eff6ff; color: #1d4ed8; }
.pathway-context { background: #fef3c7; color: #92400e; }
.pathway-none, .pathway-unknown { background: #f1f5f9; color: #64748b; }
/* Conditions added for this partner beyond the standard list. Stated once, on
   the card, and nowhere on the slide — to the partner they are simply what
   their patients have. */
.added-conditions { margin-bottom: 8px; font-size: 11.5px; color: #475569; }
.guide-minor { display: flex; gap: 4px; }
.guide-minor .btn { flex: 1; }

/* ============================================================
   Research review — grouped
   ============================================================
   Nineteen identical boxes gave a reader no way in: every section looked
   exactly as important as every other. Four questions with answers under them
   is a document; nineteen equal boxes is a dump.
   ------------------------------------------------------------ */
.research-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 10px;
  overflow: hidden;
}
.research-group-summary {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; cursor: pointer; list-style: none;
}
.research-group-summary::-webkit-details-marker { display: none; }
.research-group-summary:hover { background: #fafafa; }
.research-group-name { font-size: 14px; font-weight: 650; color: var(--ink); }
.research-group-hint { flex: 1 1 260px; font-size: 12.5px; color: var(--text-muted); }
.research-group-count { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.research-group-summary::before {
  content: '\203A'; font-size: 17px; color: var(--text-faint); line-height: 1;
  transition: transform .18s var(--ease); align-self: center;
}
.research-group[open] > .research-group-summary::before { transform: rotate(90deg); }
.research-group[open] > .research-group-summary { border-bottom: 1px solid var(--border); }
.research-group-body { padding: 6px 16px 12px; }
.thin-flag { color: #b45309; font-weight: 600; }

/* An empty section should look empty, and say what to do about it — a dash in
   a grey box is indistinguishable from content nobody has read yet. */
.research-content.is-thin { color: var(--text-faint); font-style: italic; }

/* The sample-content chip is metadata about where the text came from. It was
   set louder than the task beside it, which inverts what the row is for. */
.lead-item .cat-confidence { font-weight: 500; opacity: .8; }

/* ============================================================
   Progressive disclosure on the add form
   ============================================================
   Only a name is required, but eleven fields were on screen at once — so the
   cheapest action in the product looked like paperwork.
   ------------------------------------------------------------ */
.context-fold { margin: 22px 0 4px; border-top: 1px solid var(--border); }
.context-summary {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 2px; cursor: pointer; list-style: none;
}
.context-summary::-webkit-details-marker { display: none; }
.context-summary::before {
  content: '\203A'; font-size: 17px; color: var(--text-faint); line-height: 1;
  transition: transform .18s var(--ease); align-self: center;
}
.context-fold[open] > .context-summary::before { transform: rotate(90deg); }
.context-summary-title { font-size: 13px; font-weight: 650; color: var(--ink); }
.context-summary-hint { flex: 1 1 320px; font-size: 12.5px; color: var(--text-muted); }
.context-summary:hover .context-summary-title { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   The funnel — where leads stop
   ============================================================ */
.funnel { margin-top: 18px; }
.funnel-row { display: grid; grid-template-columns: 96px 1fr 46px 44px; align-items: center; gap: 12px; padding: 5px 0; }
.funnel-label { font-size: 12.5px; color: var(--text-muted); }
.funnel-track { height: 26px; background: #f4f4f5; border-radius: 6px; overflow: hidden; }
.funnel-bar { height: 100%; background: var(--ink); border-radius: 6px; transition: width .4s var(--ease); }
.funnel-count { font-size: 15px; font-weight: 650; color: var(--ink); text-align: right; }
.funnel-drop { font-size: 11.5px; color: #b45309; text-align: right; }

/* ============================================================
   Queue at volume — find it, and see what is going stale
   ============================================================ */
.queue-find {
  flex: 0 0 auto; width: 260px; padding: 8px 12px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  font: inherit; font-size: 13px; background: var(--surface); color: var(--text);
}
.queue-find:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(9,9,11,.06); }
.queue-find::placeholder { color: var(--text-faint); }

/* Priority was captured on the add form and shown nowhere. */
.prio {
  margin-left: 7px; padding: 1px 6px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.prio-high { background: #fef2f2; color: #b91c1c; }

/* How long it has sat. Quiet until it matters, then not. */
.lead-item-age { flex: 0 0 auto; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.lead-item-age.is-stale { color: #b45309; font-weight: 600; }