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

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: .95;
  margin: 0;
}

/* ---------------------------------------------------------------- LOGIN */

.login-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 860px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-brand { display: none; }
}

.login-brand {
  position: relative;
  padding: 56px 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(900px 500px at 15% 0%, var(--brand-soft), transparent 60%),
    linear-gradient(160deg, var(--surface-2), var(--bg));
  border-right: 1px solid var(--line);
  overflow: hidden;
}

/* Signature: a static leaderboard "ghost" behind the login copy — the
   product's core object, used as the brand mark for its own front door. */
.ghost-board { display: grid; gap: 10px; opacity: .5; }
.ghost-row {
  display: grid;
  grid-template-columns: 46px 1fr 92px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(90deg, var(--surface-2), transparent);
  border-left: 3px solid var(--line-bright);
  border-radius: 0 var(--r) var(--r) 0;
}
.ghost-row:nth-child(1) { border-left-color: var(--gold);   opacity: 1; }
.ghost-row:nth-child(2) { border-left-color: var(--silver); opacity: .82; }
.ghost-row:nth-child(3) { border-left-color: var(--bronze); opacity: .66; }
.ghost-row .rank {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.ghost-row .bar { height: 8px; border-radius: 99px; background: var(--surface-3); }
.ghost-row:nth-child(1) .bar { background: linear-gradient(90deg, var(--gold), transparent); }
.ghost-row .val {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--text-dim);
  text-align: right;
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.login-card { width: 100%; max-width: 380px; }

/* ---------------------------------------------------------------- FORMS */

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.field input, .field select {
  width: 100%;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line-bright);
  border-radius: var(--r);
  color: var(--text);
  font-size: var(--step-0);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--step-0);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s;
  background: var(--surface-3);
  color: var(--text);
}
.btn:active { transform: translateY(1px); }
/* Disabled is its own appearance, not the enabled one faded out.
   Fading a dark-text-on-orange button leaves near-black text on a muddy
   background — legible to nobody. */
.btn:disabled,
.btn-primary:disabled {
  cursor: not-allowed;
  background: var(--surface-3);
  background-image: none;
  color: var(--muted);
  border-color: var(--line-bright);
  box-shadow: none;
  opacity: 1;
}
.btn-primary {
  background: linear-gradient(180deg, var(--brand), var(--brand-hot));
  color: #1A0B02;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-ghost {
  background: transparent;
  border-color: var(--line-bright);
  color: var(--text-dim);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--text); }
.btn-block { width: 100%; }

/* --------------------------------------------------------------- LAYOUT */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.sidebar-brand .name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.sidebar-brand .sub {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.nav-group-label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 10px 6px;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r);
  color: var(--text-dim);
  font-weight: 500;
  font-size: var(--step-0);
  border-left: 2px solid transparent;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active {
  background: var(--brand-soft);
  border-left-color: var(--brand);
  color: var(--text);
  font-weight: 600;
}
.nav a .ico { width: 18px; text-align: center; opacity: .9; }

.sidebar-foot {
  border-top: 1px solid var(--line);
  padding: 12px;
}

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

.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(18,24,33,.82);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.content { padding: 26px 22px 60px; max-width: 1400px; width: 100%; }

@media (max-width: 780px) {
  .sidebar {
    position: fixed; z-index: 50; height: 100vh;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sidebar.open { transform: none; }
  .menu-btn { display: inline-flex !important; }
  .content { padding: 18px 14px 60px; }
}
.menu-btn { display: none; }

/* ---------------------------------------------------------------- CARDS */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* --------------------------------------------------------------- PILLS */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid;
}
.pill-admin   { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.pill-manager { color: var(--info);   border-color: var(--info);   background: #38BDF822; }
.pill-agent   { color: var(--up);     border-color: var(--up);     background: #34D39922; }
.pill-demo    { color: var(--warn);   border-color: var(--warn);   background: #FB923C1F; }

.demo-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 22px;
  background: linear-gradient(90deg, #FB923C22, transparent);
  border-bottom: 1px solid #FB923C44;
  font-size: var(--step--1);
  color: var(--warn);
  font-weight: 600;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------- STATES */

.alert {
  padding: 11px 14px;
  border-radius: var(--r);
  font-size: var(--step--1);
  border: 1px solid;
  margin-bottom: 14px;
}
.alert-error { background: #F43F5E1A; border-color: #F43F5E66; color: #FDA4B4; }
.alert-ok    { background: #34D3991A; border-color: #34D39966; color: #86EFC5; }
.alert-info  { background: #38BDF81A; border-color: #38BDF866; color: #A5DFFA; }

.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.empty .empty-title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: var(--r-sm);
  height: 14px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* --------------------------------------------------------------- TABLES */

table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
th {
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
tbody tr:hover { background: var(--surface-2); }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------- RLS CHECK VIEW */

.check-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.check-row:last-child { border-bottom: none; }
.check-icon { font-size: 15px; line-height: 1.4; }
.check-name { font-weight: 600; }
.check-detail { color: var(--muted); font-size: var(--step--1); margin-top: 2px; }
.check-verdict {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: var(--step--1);
  white-space: nowrap;
}
.v-pass { color: var(--up); }
.v-fail { color: var(--down); }
.v-warn { color: var(--warn); }

/* ----------------------------------------------------- ORG SWITCHER */

.org-switch {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.org-current .org-name,
.org-select {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
}
.org-select {
  width: 100%;
  padding: 7px 9px;
  background: var(--surface);
  border: 1px solid var(--line-bright);
  border-radius: var(--r);
  cursor: pointer;
}
.org-select:focus { outline: none; border-color: var(--brand); }
.org-role {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.org-empty { color: var(--muted); font-size: var(--step--1); }

.pill-role {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* ------------------------------------------------------ PERMISSIONS */

.perm-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-dim);
  white-space: nowrap;
}

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

/* --------------------------------------------- LOGIN SIGNATURE PANEL
   A ghost of the daily work queue — the object this product is built
   around. Scores lead, reasons sit beneath them: the same rule the
   real queue follows (never a number without its explanation). */

.queue-ghost { display: grid; gap: 12px; opacity: .55; }
.queue-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: linear-gradient(90deg, var(--surface-2), transparent);
  border-left: 3px solid var(--line-bright);
  border-radius: 0 var(--r) var(--r) 0;
}
.queue-row:nth-child(1) { border-left-color: var(--brand); opacity: 1; }
.queue-ghost { margin-top: 8px; }
.queue-row:nth-child(2) { opacity: .78; }
.queue-row:nth-child(3) { opacity: .58; }

.q-score {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.q-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--surface-3);
  margin-bottom: 7px;
}
.queue-row:nth-child(1) .q-bar {
  background: linear-gradient(90deg, var(--brand), transparent);
}
.q-reason {
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: .01em;
}

/* ======================================================= CRM SCREENS */

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.back-link {
  display: inline-block; color: var(--muted);
  font-size: var(--step--1); margin-bottom: 14px;
}
.back-link:hover { color: var(--text); }

.detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}

/* --------------------------------------------------------- FILTERS */

.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.filter-input {
  padding: 8px 11px; min-width: 150px;
  background: var(--surface-2); border: 1px solid var(--line-bright);
  border-radius: var(--r); color: var(--text);
  font-family: inherit; font-size: var(--step--1);
}
.filter-input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.filter-check {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--step--1); color: var(--text-dim); cursor: pointer;
}
.result-count {
  color: var(--muted); font-size: var(--step--1); margin: 12px 0 0;
}

/* ----------------------------------------------------- DATA TABLES */

.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: var(--surface-2); }
.cell-sub { color: var(--muted); font-size: var(--step--1); }

.kv td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv td:first-child { color: var(--muted); width: 42%; }
.kv tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------- SLA STRIP */

.sla-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px;
  background: linear-gradient(90deg, #FB923C1F, transparent);
  border: 1px solid #FB923C55; border-radius: var(--r-lg);
  color: var(--text-dim); font-size: var(--step--1);
}
.sla-count {
  font-family: var(--font-display); font-size: var(--step-2);
  font-weight: 800; color: var(--warn); line-height: 1;
}
.sla-link { margin-left: auto; color: var(--warn); font-weight: 600; }

/* ----------------------------------------------------- SCORE + BAND */

.score-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 3px 8px;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-0); font-variant-numeric: tabular-nums;
  border: 1px solid; border-radius: var(--r);
  background: var(--surface-2);
}
.score-block {
  text-align: center; padding: 12px 20px;
  border: 1px solid; border-radius: var(--r-lg);
  background: var(--surface);
}
.score-value {
  font-family: var(--font-display); font-size: var(--step-4);
  font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.score-band {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-top: 2px;
}

/* Score factors — §55: never a number without its reasons. */
.factor-list { display: grid; gap: 12px; }
.factor { display: grid; grid-template-columns: 10px 1fr; gap: 11px; align-items: start; }
.factor-dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 6px;
  background: var(--muted);
}
.factor-positive { background: var(--up); }
.factor-negative { background: var(--down); }
.factor-neutral  { background: var(--muted); }
.factor-name { font-weight: 600; font-size: var(--step--1); }
.factor-detail { color: var(--muted); font-size: var(--step--1); }
.model-note {
  color: var(--muted); font-size: 11px; margin: 14px 0 0;
  padding-top: 12px; border-top: 1px solid var(--line);
}

.stage-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------- LIFECYCLE */

.life-chip {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: capitalize;
  background: var(--surface-3); border: 1px solid var(--line-bright);
  color: var(--text-dim);
}
.life-chip-lg { font-size: var(--step--1); padding: 5px 14px; }

.consent {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; border: 1px solid;
}
.consent-granted   { color: var(--up);    border-color: var(--up);    background: #34D39918; }
.consent-denied    { color: var(--down);  border-color: var(--down);  background: #F43F5E18; }
.consent-withdrawn { color: var(--warn);  border-color: var(--warn);  background: #FB923C18; }
.consent-unknown   { color: var(--muted); border-color: var(--line-bright); }

/* -------------------------------------------------------- TIMELINE */

.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 1px; background: var(--line-bright);
}
.tl-item { position: relative; padding: 0 0 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-marker {
  position: absolute; left: -21px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--line-bright);
}
.tl-call    { background: var(--info); }
.tl-sms     { background: var(--up); }
.tl-email   { background: var(--brand); }
.tl-note    { background: var(--muted); }
.tl-form_submitted { background: var(--warn); }
.tl-purchase { background: var(--accent); }
.tl-ai_action { background: var(--accent); }

.tl-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.tl-subject { font-weight: 600; font-size: var(--step--1); }
.tl-time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.tl-outcome { color: var(--text-dim); font-size: var(--step--1); margin-top: 2px; }
.tl-text {
  color: var(--muted); font-size: var(--step--1); margin-top: 4px;
  padding-left: 10px; border-left: 2px solid var(--line-bright);
}

/* ----------------------------------------------------- CUSTOMER TIER
   Tier colours come from the database, so each organization sets its
   own. The chip only supplies shape, weight, and spacing. */

.tier-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 99px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid; background: var(--surface-2);
  white-space: nowrap;
}
.tier-chip-lg {
  font-size: var(--step--1); padding: 5px 14px; letter-spacing: .06em;
}

/* ========================================================= IMPORT */

.wizard-steps {
  display: flex; gap: 6px; flex-wrap: wrap;
  list-style: none; padding: 0; margin: 0 0 18px;
  counter-reset: step;
}
.wizard-steps li {
  counter-increment: step;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 12px;
  font-size: var(--step--1); font-weight: 600;
  color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r);
}
.wizard-steps li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-3); color: var(--muted);
  font-family: var(--font-display); font-size: 11px; font-weight: 800;
}
.wizard-steps li.active {
  color: var(--text); border-color: var(--brand); background: var(--brand-soft);
}
.wizard-steps li.active::before { background: var(--brand); color: #061021; }
.wizard-steps li.done { color: var(--text-dim); }
.wizard-steps li.done::before { content: '✓'; background: var(--up); color: #04140C; }

.wizard-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  flex-wrap: wrap; margin-top: 18px;
}

/* ------------------------------------------------------- TARGETS */

.target-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.target-card {
  text-align: left; padding: 14px;
  background: var(--surface-2); border: 1px solid var(--line-bright);
  border-radius: var(--r); cursor: pointer; color: var(--text);
  transition: border-color .15s, background .15s;
}
.target-card:hover { border-color: var(--brand); }
.target-card.selected { border-color: var(--brand); background: var(--brand-soft); }
.target-name { font-weight: 700; font-size: var(--step-0); margin-bottom: 3px; }
.target-desc { color: var(--muted); font-size: var(--step--1); line-height: 1.4; }

/* ------------------------------------------------------ DROPZONE */

.dropzone {
  border: 2px dashed var(--line-bright); border-radius: var(--r-lg);
  padding: 40px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.over {
  border-color: var(--brand); background: var(--brand-soft);
}
.drop-title {
  font-family: var(--font-display); font-size: var(--step-2);
  font-weight: 700; margin-bottom: 4px;
}
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--brand); font: inherit; text-decoration: underline;
}
.link-btn.danger { color: var(--down); }

/* -------------------------------------------------------- MAPPING */

.col-name {
  font-family: var(--font-mono); font-size: 11px;
  padding: 2px 7px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-dim);
}
.sample { max-width: 260px; }

.opt-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.opt-grid label { display: grid; gap: 6px; }
.opt-grid label > span {
  font-size: var(--step--1); font-weight: 600; color: var(--text-dim);
}

/* --------------------------------------------------------- REVIEW */

.stat-ok   { border-color: var(--up); }
.stat-info { border-color: var(--info); }
.stat-bad  { border-color: var(--down); }

.sev {
  display: inline-block; margin-right: 7px; padding: 1px 7px;
  border-radius: var(--r-sm); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}
.sev-error   { background: #F43F5E22; color: #FDA4B4; }
.sev-warning { background: #FB923C22; color: #FDBA74; }

.act {
  display: inline-block; padding: 1px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; border: 1px solid;
}
.act-created { color: var(--up);    border-color: var(--up); }
.act-updated { color: var(--info);  border-color: var(--info); }
.act-skipped { color: var(--muted); border-color: var(--line-bright); }
.act-failed  { color: var(--down);  border-color: var(--down); }

.row-failed { background: #F43F5E0F; }

.progress-wrap {
  height: 8px; border-radius: 99px; background: var(--surface-3);
  overflow: hidden; margin-top: 12px;
}
.progress-bar {
  height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--info));
  transition: width .25s ease;
}

.state {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; border: 1px solid;
}
.state-completed   { color: var(--up);    border-color: var(--up); }
.state-failed      { color: var(--down);  border-color: var(--down); }
.state-rolled_back { color: var(--warn);  border-color: var(--warn); }
.state-importing   { color: var(--info);  border-color: var(--info); }
.state-ready,
.state-draft       { color: var(--muted); border-color: var(--line-bright); }

/* ========================================================== SETUP */

.field textarea {
  width: 100%; padding: 11px 13px;
  background: var(--surface); border: 1px solid var(--line-bright);
  border-radius: var(--r); color: var(--text);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  resize: vertical;
}
.field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.setup-help {
  padding: 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  max-width: 42ch;
}
.setup-help-title {
  font-family: var(--font-display); font-size: var(--step-0);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 10px;
}
.setup-help ol {
  margin: 0; padding-left: 20px;
  color: var(--text-dim); font-size: var(--step--1); line-height: 1.9;
}
.setup-warn {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--warn); font-size: var(--step--1); line-height: 1.5;
}
.setup-warn code {
  font-family: var(--font-mono); font-size: 11px;
  padding: 1px 5px; border-radius: var(--r-sm); background: var(--surface-2);
}

/* ==================================================== REP PORTAL */

.queue-section { margin-bottom: 26px; }
.queue-head {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.queue-section.urgent .queue-head h2 { color: var(--warn); }
.queue-list { display: grid; gap: 8px; }

/* Work cards — the rep's atomic unit. Score leads, reason follows,
   action on the right. Same shape for a lead and a check-in so the eye
   doesn't have to re-learn the layout between sections. */
.work-card, .pool-row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.work-card:hover, .pool-row:hover {
  border-color: var(--line-bright); background: var(--surface-2);
}
.queue-section.urgent .work-card { border-left: 3px solid var(--warn); }
.work-checkin { border-left: 3px solid var(--info); }

.wc-score {
  font-family: var(--font-display); font-size: var(--step-3);
  font-weight: 800; line-height: 1; text-align: center;
  font-variant-numeric: tabular-nums;
}
.wc-checkin-icon { color: var(--info); font-size: var(--step-2); }
.wc-name { font-weight: 700; font-size: var(--step-1); }
.wc-meta {
  color: var(--text-dim); font-size: var(--step--1);
  margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.wc-sub { color: var(--muted); font-size: 11px; margin-top: 4px; }
.wc-side {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; text-align: right;
}
.wc-call { padding: 7px 18px; }
.card-done { opacity: .5; }
.pool-note:empty { display: none; }
.pool-note { font-size: var(--step--1); margin-top: 5px; }
.row-claimed { border-color: var(--up) !important; }
.row-released { opacity: .45; }

/* --------------------------------------------------------- CLOCKS */

.clock {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  border: 1px solid; white-space: nowrap;
}
.clock-ok     { color: var(--muted); border-color: var(--line-bright); }
.clock-soon   { color: var(--info);  border-color: var(--info);  background: #38BDF815; }
.clock-urgent { color: var(--warn);  border-color: var(--warn);  background: #FB923C18; }
.clock-late   { color: var(--down);  border-color: var(--down);  background: #F43F5E18; }

/* ------------------------------------------------------ HOLD CAP */

.hold-bar {
  padding: 12px 16px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.hold-bar.hold-full { border-color: var(--warn); }
.hold-text { font-size: var(--step--1); color: var(--text-dim); margin-bottom: 8px; }
.hold-track {
  height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden;
}
.hold-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--info));
  transition: width .3s ease;
}
.hold-full .hold-fill { background: var(--warn); }

/* ----------------------------------------------------- CALL LISTS */

.list-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.list-card {
  text-align: left; padding: 14px;
  background: var(--surface-2); border: 1px solid var(--line-bright);
  border-radius: var(--r); cursor: pointer; color: var(--text);
  transition: border-color .15s, background .15s;
}
.list-card:hover { border-color: var(--brand); }
.list-card.selected { border-color: var(--brand); background: var(--brand-soft); }
.list-card-top { display: flex; flex-direction: column; gap: 2px; }
.list-name { font-weight: 700; font-size: var(--step-0); }
.list-purpose {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.list-count {
  font-family: var(--font-display); font-size: var(--step-3);
  font-weight: 800; line-height: 1.1; margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.list-sub { color: var(--muted); font-size: 11px; }

.list-tag {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-sm);
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--surface-3); border: 1px solid var(--line-bright);
  color: var(--text-dim);
}
.list-tag-checkin { color: var(--info); border-color: var(--info); }

@media (max-width: 640px) {
  .work-card, .pool-row { grid-template-columns: 44px 1fr; }
  .wc-side {
    grid-column: 1 / -1; flex-direction: row;
    align-items: center; justify-content: flex-start;
  }
}

/* ======================================================== BRANDING

   The logo is a heavy, dimensional, highly saturated mark. On a dark
   surface it carries itself — so everything around it stays quiet, and
   the orange is spent on the mark and primary actions only. If orange
   also appeared in chips, links, and status text, the logo would stop
   reading as the brand and start reading as decoration. */

.sidebar-brand {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 20% 0%, var(--brand-soft), transparent 70%),
    var(--surface);
}
.brand-mark {
  display: block;
  width: 100%;
  max-width: 168px;
  height: auto;
  /* The mark carries its own dark drop shadow from the source art, which
     disappears against a dark UI. A soft warm glow replaces it so the
     silhouette keeps its edge. */
  filter: drop-shadow(0 2px 10px rgba(255,107,26,.28));
}
.sidebar-brand .sub {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.login-logo {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  filter: drop-shadow(0 6px 28px rgba(255,107,26,.22));
}
.login-tagline {
  color: var(--text-dim);
  max-width: 38ch;
  margin-top: 20px;
  font-size: var(--step-1);
  line-height: 1.45;
}

/* The login panel picks up a warm cast from the mark rather than the old
   cool one, so the two halves of the screen belong to each other. */
.login-brand {
  background:
    radial-gradient(900px 520px at 20% 12%, rgba(255,107,26,.13), transparent 62%),
    linear-gradient(160deg, var(--surface-2), var(--bg));
}

/* Primary actions carry the brand; text on orange must be near-black to
   stay readable, not white. */
.nav a.active {
  background: var(--brand-soft);
  border-left-color: var(--brand);
}

@media (max-width: 780px) {
  .brand-mark { max-width: 140px; }
}

/* ---- logo classes used by the boot, login and setup screens ---- */

.boot-mark {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto 18px;
  opacity: .9;
  filter: drop-shadow(0 4px 18px rgba(248,107,10,.25));
}

/* The monogram on the login panel, sized to sit above the tagline
   without competing with the sign-in form opposite it. */
.panel-mark {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 6px 26px rgba(248,107,10,.22));
}

/* Full lockup on first-run setup — there is no navigation yet, so the
   brand can carry the whole panel. */
.brand-lockup {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 6px 28px rgba(248,107,10,.2));
}

/* ---- sidebar wordmark under the monogram ----
   The logo's own "LEADER OF THE PACK" lettering is unreadable at this
   width, so it is set in type instead. Condensed and letterspaced to
   echo the mark without imitating it. */

.sidebar-brand { text-align: center; }

.brand-mark { margin-inline: auto; }

.brand-name {
  margin-top: 9px;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--text);
}
.sidebar-brand .sub {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  /* Letterspacing trails after the final glyph; shift left by half of it
     so the word reads as centred rather than measuring as centred. */
  text-indent: .28em;
}

/* ================================================== DISPOSITIONS */

.disp-card { border-color: var(--line-bright); }

.disp-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.disp-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-bright);
  border-left: 3px solid var(--disp, var(--muted));
  border-radius: var(--r);
  color: var(--text); cursor: pointer;
  font-size: var(--step-0); font-weight: 600;
  text-align: left;
  transition: background .15s, border-color .15s;
}
.disp-btn:hover { background: var(--surface-3); }
.disp-btn.selected {
  border-color: var(--disp, var(--muted));
  background: color-mix(in srgb, var(--disp, var(--muted)) 14%, var(--surface-2));
}
.disp-icon {
  font-size: var(--step-1); line-height: 1; color: var(--disp, var(--muted));
  min-width: 16px; text-align: center;
}
.disp-name { line-height: 1.2; }

.disp-card textarea {
  width: 100%; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--line-bright);
  border-radius: var(--r); color: var(--text);
  font-family: inherit; font-size: var(--step-0); resize: vertical;
}
.disp-card textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ====================================================== SUMMARY

   Sits above the metrics because it answers the question a rep has with
   the phone already ringing: what happened last time. */

.summary-card {
  border-color: var(--line-bright);
  background:
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.summary-headline {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 16px;
}
.summary-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.summary-value {
  font-weight: 600; font-size: var(--step-1);
  line-height: 1.2; margin: 3px 0 2px;
}
.summary-objection {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.summary-objection p {
  margin: 5px 0 0; color: var(--text-dim);
  font-size: var(--step--1); line-height: 1.5;
  padding-left: 11px; border-left: 2px solid var(--warn);
}

/* ======================================================== NOTES */

.note-compose textarea {
  width: 100%; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--line-bright);
  border-radius: var(--r); color: var(--text);
  font-family: inherit; font-size: var(--step-0); resize: vertical;
}
.note-compose textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.note-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; flex-wrap: wrap;
}

.pinned-notes { margin-top: 16px; display: grid; gap: 10px; }
.pinned-note {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r);
}
.pin-mark { color: var(--warn); line-height: 1.4; }
.pin-body {
  font-size: var(--step--1); line-height: 1.5;
  white-space: pre-wrap; margin-bottom: 4px;
}

/* ------------------------------------------------- TIMELINE DATES

   A rep reconstructing a history thinks in days, so the date is a header
   and each entry carries only its clock time. Repeating the full date on
   every row buries the thing that actually varies. */

.tl-day + .tl-day { margin-top: 20px; }

.tl-day-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.tl-day-date {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tl-day-rel {
  font-size: 11px;
  color: var(--muted);
}

.tl-time {
  color: var(--text-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
}
.tl-who {
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}
.tl-pinned .tl-marker {
  background: var(--warn);
  box-shadow: 0 0 0 1px var(--warn);
}

/* ------------------------------------------------- KIND BADGES

   My day mixes leads and accounts in one queue. Calling an account is a
   different conversation from working a lead, so the rep needs to know
   which before they dial. */

.kind {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 8px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid;
}
.kind-lead    { color: var(--info);   border-color: var(--info);   background: #38BDF814; }
.kind-account { color: var(--brand);  border-color: var(--brand);  background: var(--brand-soft); }

/* --------------------------------------------- HOLD BAR AS A LINK */

.hold-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 8px;
}
.hold-row .hold-text { margin-bottom: 0; }
.hold-link { padding: 5px 12px; font-size: var(--step--1); white-space: nowrap; }

/* ------------------------------------------------- ACTIVE FILTER */

.filter-chip-row { margin-bottom: 14px; }
.active-filter {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 99px;
  font-size: var(--step--1);
  color: var(--text-dim);
}
.active-filter a { color: var(--brand); font-weight: 600; }

/* --------------------------------------------- HEADER ROW PICKER

   Export files often begin with a title or a blank line, so the detected
   header row has to be correctable. Showing the raw first rows lets the
   user recognise the right one rather than count. */

.header-pick { display: grid; gap: 6px; }
.header-row {
  display: grid; grid-template-columns: 30px 1fr; gap: 10px;
  align-items: center; text-align: left;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-bright);
  border-radius: var(--r);
  color: var(--text-dim); cursor: pointer;
  font-size: var(--step--1);
}
.header-row:hover { border-color: var(--brand); }
.header-row.selected { border-color: var(--brand); background: var(--brand-soft); }
.header-row-n {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); text-align: right;
}
.header-row-cells { display: flex; flex-wrap: wrap; gap: 6px; overflow: hidden; }
.header-row-cells em {
  font-style: normal;
  padding: 1px 6px; border-radius: var(--r-sm);
  background: var(--surface-3);
  white-space: nowrap;
}