/* ==========================================================================
   NOUSTIQ DESIGN SYSTEM v5
   ==========================================================================
   One canonical token set and one component library. No page may introduce a
   colour, radius, shadow or font size of its own, and no browser-default
   control may appear on an operator screen.

   WHAT CHANGED FROM v2.1 AND WHY
   ------------------------------
   v2.1 was a competent internal-admin stylesheet: system font stack, blue
   accent, flat 1px boxes. It was not wrong, it was unfinished — pages fell
   back to native <button> and <select> in table cells, metric numbers used the
   same face as body copy, and nothing distinguished an operational number from
   a paragraph.

   Three deliberate changes carry most of the difference:

   1. TWO TYPEFACES WITH DIFFERENT JOBS. Plus Jakarta Sans for language,
      JetBrains Mono for anything an operator scans rather than reads: counts,
      capacities, phone numbers, timestamps, status labels. An operations
      product is mostly numbers, and numbers set in a UI face read as prose.

   2. A COOL NEUTRAL RAMP AND A SINGLE ACCENT. Slate greys with an emerald
      accent. Emerald because this product is about work moving forward, and
      because generic-SaaS blue is what every CRM already looks like.

   3. SEMANTIC COLOUR IS STRUCTURAL, NOT DECORATIVE. Tone is carried by a
      bordered pill or a left rule, never by tinting a whole card. Once
      everything is coloured, colour stops meaning anything.

   Density is a feature. This is a screen operators live in for a whole shift.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — a cool neutral ramp, four steps, no more */
  --app-bg:          #f6f8fa;
  --surface:         #ffffff;
  --surface-sunken:  #f1f4f7;
  --surface-hover:   #f7f9fb;
  --surface-active:  #eef2f6;

  --line:            #e3e8ee;
  --line-strong:     #cdd5df;
  --line-heavy:      #aab4c0;

  --ink:             #0f172a;
  --ink-body:        #334155;
  /* 5.13:1 on the sunken surface, the worst case in the product. Was #64748b
     at 4.23:1, which failed AA on every screen that uses a muted column header. */
  --ink-muted:       #5b6775;
  /* NON-TEXT ONLY: empty-cell dashes and icon strokes. 3.74:1 clears the 3:1
     bar for non-text UI components. Anything a person has to READ uses
     --ink-muted instead. */
  --ink-faint:       #6f7d8d;
  --ink-inverse:     #ffffff;

  /* Accent — one, used for brand, primary action and focus */
  --accent:          #047857;
  --accent-hover:    #036349;
  --accent-active:   #02523c;
  --accent-soft:     #ecfdf5;
  --accent-line:     #a7f3d0;
  --accent-text:     #065f46;

  /* Semantic. "good" is the accent family on purpose: work going well and the
     brand are the same idea here. The other three are distinct hues so a state
     is never guessed from saturation alone. */
  --good:            #047857;
  --good-soft:       #ecfdf5;
  --good-line:       #a7f3d0;

  --info:            #1d4ed8;
  --info-soft:       #eff6ff;
  --info-line:       #bfdbfe;

  --warn:            #b45309;
  --warn-soft:       #fffbeb;
  --warn-line:       #fde68a;

  --bad:             #be123c;
  --bad-soft:        #fff1f2;
  --bad-line:        #fecdd3;

  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* Shadows stay near-invisible. A page of drop shadows reads as a template. */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px -1px rgba(15, 23, 42, .05);
  --shadow-md: 0 8px 20px -6px rgba(15, 23, 42, .10), 0 3px 8px -4px rgba(15, 23, 42, .06);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, .16), 0 6px 16px -8px rgba(15, 23, 42, .08);

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 44px; --s9: 64px;

  --sidebar-w: 232px;
  --sidebar-w-min: 60px;
  --topbar-h: 56px;
  --strip-h: 32px;

  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* Dark is a genuine second design, not an inversion. Every token is restated;
   nothing is left to be derived, so no component can half-adapt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-bg:         #0a0e14;
    --surface:        #11161f;
    --surface-sunken: #161d28;
    --surface-hover:  #1a2230;
    --surface-active: #1f2837;

    --line:           #232d3c;
    --line-strong:    #35424f; /* raised for AA on dividers */
    --line-heavy:     #4a5a6a;

    --ink:            #e9eef4;
    --ink-body:       #c0cbd8; /* raised from #b3c0cf for body contrast */
    --ink-muted:      #9aa8b8; /* 5.1:1 on --surface */
    --ink-faint:      #8b98a8; /* 5.05:1 — non-text placeholders only */
    --ink-inverse:    #0a0e14;

    --accent:         #34d399;
    --accent-hover:   #6ee7b7;
    --accent-active:  #a7f3d0;
    --accent-soft:    #06231a;
    --accent-line:    #10543f;
    --accent-text:    #6ee7b7;

    --good:           #34d399; --good-soft: #06231a; --good-line: #10543f;
    --info:           #7aa7ff; --info-soft: #0b1730; --info-line: #1e3a6e;
    --warn:           #eab55c; --warn-soft: #241a06; --warn-line: #5a4212;
    --bad:            #fb7185; --bad-soft:  #2a0d15; --bad-line:  #6a1f2e;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.5);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.55);
    --shadow-md: 0 8px 20px -6px rgba(0,0,0,.6);
    --shadow-lg: 0 20px 40px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --app-bg:#0a0e14; --surface:#11161f; --surface-sunken:#161d28;
  --surface-hover:#1a2230; --surface-active:#1f2837;
  --line:#232d3c; --line-strong:#35424f; --line-heavy:#4a5a6a;
  --ink:#e9eef4; --ink-body:#c0cbd8; --ink-muted:#9aa8b8; --ink-faint:#8b98a8;
  --ink-inverse:#0a0e14;
  --accent:#34d399; --accent-hover:#6ee7b7; --accent-active:#a7f3d0;
  --accent-soft:#06231a; --accent-line:#10543f; --accent-text:#6ee7b7;
  --good:#34d399; --good-soft:#06231a; --good-line:#10543f;
  --info:#7aa7ff; --info-soft:#0b1730; --info-line:#1e3a6e;
  --warn:#eab55c; --warn-soft:#241a06; --warn-line:#5a4212;
  --bad:#fb7185; --bad-soft:#2a0d15; --bad-line:#6a1f2e;
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 1px 3px rgba(0,0,0,.55);
  --shadow-md:0 8px 20px -6px rgba(0,0,0,.6);
  --shadow-lg:0 20px 40px -12px rgba(0,0,0,.7);
}

/* --------------------------------------------------------------------------
   RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

/* Form controls do NOT inherit colour — they fall back to the UA's buttontext,
   which is near-black. On a light surface that is invisible as a bug; on the
   dark theme's #11161f it is 1.16:1 and unreadable. Any component that paints a
   control's background but forgets its colour hits this, so the default is set
   once here rather than remembered per component. Every .btn variant sets its
   own colour and out-specifies this. */
button, input, select, textarea { color: inherit; }

body {
  background: var(--app-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -.014em; color: var(--ink); }
h1 { font-size: 21px; line-height: 1.25; }
h2 { font-size: 17px; line-height: 1.3; }
h3 { font-size: 14.5px; line-height: 1.35; }
p  { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

img, svg { display: block; max-width: 100%; }
svg { flex: none; }

/* One focus treatment for the whole product. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.hidden { display: none !important; }
.muted  { color: var(--ink-muted); }
.faint  { color: var(--ink-faint); }
.num    { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; 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;
}

/* The label device that runs through the whole product: small, mono, tracked,
   uppercase. Used for every column header, metric caption and section eyebrow
   so an operator can tell structure from content at a glance. */
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-h: 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--btn-h); padding: 0 13px;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  letter-spacing: -.006em;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--ink-body);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color .13s var(--ease), border-color .13s var(--ease),
              color .13s var(--ease), box-shadow .13s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 15px; height: 15px; }

.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover  { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
:root[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary { color: var(--ink-inverse); }

.btn-secondary {
  background: var(--surface); border-color: var(--line-strong); color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover  { background: var(--surface-hover); border-color: var(--line-heavy); }
.btn-secondary:active { background: var(--surface-active); }

.btn-ghost { background: none; border-color: transparent; color: var(--ink-body); }
.btn-ghost:hover  { background: var(--surface-active); color: var(--ink); }
.btn-ghost:active { background: var(--surface-sunken); }

/* Destructive actions never look like the primary action. They stay quiet
   until hover, then commit to red — the weight matches the consequence rather
   than shouting on every row. */
.btn-danger {
  background: var(--surface); border-color: var(--bad-line); color: var(--bad);
}
.btn-danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }
:root[data-theme="dark"] .btn-danger:hover,
:root:not([data-theme="light"]) .btn-danger:hover { color: var(--ink-inverse); }

.btn-solid-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-solid-danger:hover { filter: brightness(1.08); }

.btn-sm  { --btn-h: 28px; padding: 0 10px; font-size: 12px; gap: 5px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-lg  { --btn-h: 42px; padding: 0 20px; font-size: 14px; }
.btn-xl  { --btn-h: 50px; padding: 0 26px; font-size: 15px; border-radius: var(--radius); }
.btn-block { width: 100%; }

.btn-icon { width: var(--btn-h); padding: 0; }
.btn-icon.btn-sm { width: 28px; }

.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none;
}

/* Loading state: the label stays (so width does not jump) and a spinner
   replaces the icon slot. */
.btn.is-loading { pointer-events: none; position: relative; color: transparent; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
  color: var(--ink-body);
}
.btn-primary.is-loading::after { color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* A row of actions inside a table cell.
   Deliberately ALWAYS VISIBLE. Hover-reveal was tried and rejected: a manager
   cannot discover an action they cannot see, it is dead on touch, and it makes
   the table look like it has no actions at all in a screenshot or a demo. The
   buttons are quiet enough (ghost, small) that a dense table stays calm, and
   they gain weight on row hover instead of appearing from nothing. */
.row-actions { display: inline-flex; gap: 3px; }
.row-actions .btn { color: var(--ink-muted); }
tr:hover .row-actions .btn { color: var(--ink-body); }
tr:hover .row-actions .btn-secondary { border-color: var(--line-heavy); }

.btn-link {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  font-size: 12.5px; color: var(--accent); cursor: pointer;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--ink-body); }
.field-hint  { font-size: 11.5px; color: var(--ink-muted); line-height: 1.45; }
.field-error { font-size: 11.5px; color: var(--bad); font-weight: 500; }

.input, .select, .textarea {
  font-family: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 8px 11px; width: 100%;
  transition: border-color .13s, box-shadow .13s, background-color .13s;
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-heavy); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--surface-sunken); color: var(--ink-muted); cursor: not-allowed;
}
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--bad); }
.textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
.input-sm, .select-sm { padding: 5px 9px; font-size: 12.5px; }

/* Native select arrow removed and redrawn, so a select matches an input on
   every platform instead of inheriting the OS control. */
.select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b6775' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px;
  cursor: pointer;
}
:root[data-theme="dark"] .select,
:root:not([data-theme="light"]) .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa8b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

/* Search input with a leading icon and an optional shortcut hint. */
.search { position: relative; }
.search .input { padding-left: 32px; }
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-faint); pointer-events: none;
}
kbd {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--ink-muted); background: var(--surface-sunken);
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: var(--radius-xs); padding: 2px 5px; line-height: 1;
}
.search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* Checkbox and radio, drawn rather than inherited. */
.check, .radio {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; flex: none; margin: 0;
  border: 1.5px solid var(--line-heavy); background: var(--surface);
  cursor: pointer; position: relative;
  transition: background-color .12s, border-color .12s;
}
.check { border-radius: 4px; }
.radio { border-radius: 50%; }
.check:hover, .radio:hover { border-color: var(--accent); }
.check:checked, .radio:checked { background: var(--accent); border-color: var(--accent); }
.check:checked::after {
  content: ""; position: absolute; left: 4.5px; top: 1px;
  width: 4px; height: 8.5px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(43deg);
}
.check:indeterminate { background: var(--accent); border-color: var(--accent); }
.check:indeterminate::after {
  content: ""; position: absolute; left: 3px; top: 6px;
  width: 8px; height: 2px; background: #fff; border: 0; transform: none;
}
.radio:checked::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff;
}
.check:focus-visible, .radio:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.check-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }

/* Segmented control — the filter device used across list screens. */
.segment {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.segment button, .segment-tab {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-muted);
  background: none; border: 0; border-radius: var(--radius-xs);
  padding: 5px 11px; cursor: pointer; white-space: nowrap;
  transition: background-color .12s, color .12s;
}
.segment button:hover, .segment-tab:hover { color: var(--ink); }
.segment button[aria-selected="true"], .segment-tab[aria-selected="true"] {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs);
}

/* Filter chip. Distinct from .pill, which is a read-only status. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 550; color: var(--ink-body);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); padding: 4px 11px;
  cursor: pointer; white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s;
}
.chip:hover { background: var(--surface-hover); border-color: var(--line-heavy); }
.chip[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
:root[data-theme="dark"] .chip[aria-pressed="true"],
:root:not([data-theme="light"]) .chip[aria-pressed="true"] { color: var(--ink-inverse); }
.chip-n {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] .chip-n { color: inherit; opacity: .82; }

/* --------------------------------------------------------------------------
   STATUS PILLS
   -------------------------------------------------------------------------- */
/* Read-only state. Border + tint + mono label, so a state is legible without
   relying on hue alone (and survives a monochrome screenshot). */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  padding: 2.5px 7px; border-radius: var(--radius-xs);
  border: 1px solid; white-space: nowrap; line-height: 1.45;
}
.pill::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.pill-bare::before { display: none; }
.pill-neutral { color: var(--ink-muted); background: var(--surface-sunken); border-color: var(--line-strong); }
.pill-good    { color: var(--good); background: var(--good-soft); border-color: var(--good-line); }
.pill-info    { color: var(--info); background: var(--info-soft); border-color: var(--info-line); }
.pill-warn    { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.pill-bad     { color: var(--bad);  background: var(--bad-soft);  border-color: var(--bad-line); }

/* --------------------------------------------------------------------------
   SURFACES
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.card-head-main { min-width: 0; }
.card-title { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.card-sub   { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }
.card-body  { padding: var(--s5); }
.card-body-tight { padding: var(--s4); }
.card-foot {
  padding: var(--s3) var(--s5); border-top: 1px solid var(--line);
  background: var(--surface-sunken);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}

/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table thead th {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted);
  text-align: left; padding: 9px var(--s4); white-space: nowrap;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1;
}
.table tbody td {
  padding: 10px var(--s4); border-bottom: 1px solid var(--line);
  vertical-align: middle; color: var(--ink-body);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color .1s; }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr[aria-selected="true"] { background: var(--accent-soft); }

.td-strong { color: var(--ink); font-weight: 600; }
.td-num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.td-end { text-align: right; white-space: nowrap; }
.td-tight { width: 1%; white-space: nowrap; }
.td-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 1px; }

/* Row-level severity, carried by a left rule rather than a tinted row so the
   table does not turn into a heat map. */
.row-flag-bad  { box-shadow: inset 3px 0 0 var(--bad); }
.row-flag-warn { box-shadow: inset 3px 0 0 var(--warn); }
.row-flag-good { box-shadow: inset 3px 0 0 var(--good); }

.table-compact tbody td { padding: 6px var(--s4); }
.table-roomy tbody td { padding: 13px var(--s4); }

/* Bulk-selection bar, appears above the table when rows are picked. */
.bulkbar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: 10px var(--s5); background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-line);
}
.bulkbar-n { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--accent-text); }

.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) var(--s5); border-top: 1px solid var(--line);
}
.pager-info { font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted); }
.pager-btns { display: flex; gap: 6px; }

/* --------------------------------------------------------------------------
   MENUS
   -------------------------------------------------------------------------- */
.menu-host { position: relative; display: inline-flex; }
/*
 * POSITION: FIXED, NOT ABSOLUTE.
 *
 * Row menus live inside .table-wrap, which sets overflow-x: auto. An
 * absolutely positioned child of a scroll container is clipped by it, so the
 * bottom of every row menu — including the destructive "Cancel assignment"
 * item — was cut off. Fixed positioning takes the menu out of that clipping
 * context entirely.
 *
 * The trade: fixed coordinates are viewport-relative, so the opener must set
 * top/left from getBoundingClientRect() and close the menu on scroll. That is
 * three lines in the shared menu helper and it is the only arrangement that
 * cannot clip.
 */
.menu {
  position: fixed; z-index: 60;
  min-width: 194px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.menu[hidden] { display: none; }
.menu button, .menu a, .menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-body);
  background: none; border: 0; border-radius: var(--radius-xs);
  padding: 7px 9px; cursor: pointer; text-align: left; text-decoration: none;
}
.menu button:hover, .menu a:hover, .menu-item:hover { background: var(--surface-active); color: var(--ink); text-decoration: none; }
.menu svg, .menu-item svg { width: 15px; height: 15px; color: var(--ink-muted); }
.menu button:hover svg, .menu a:hover svg, .menu-item:hover svg { color: inherit; }
.menu-sep { height: 1px; background: var(--line); margin: 5px 0; }
.menu-danger { color: var(--bad) !important; }
.menu-danger svg { color: var(--bad) !important; }
.menu-danger:hover { background: var(--bad-soft) !important; }
.menu-label { padding: 6px 9px 3px; }

/* --------------------------------------------------------------------------
   MODALS & DRAWERS
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: var(--s5);
}
.modal {
  width: min(560px, 100%); max-height: min(86vh, 760px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-lg { width: min(880px, 100%); }
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); padding: var(--s5) var(--s5) var(--s4);
}
.modal-title { font-size: 16px; font-weight: 700; letter-spacing: -.012em; }
.modal-sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; line-height: 1.5; }
.modal-body { padding: 0 var(--s5) var(--s5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s4); }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s2);
  padding: var(--s4) var(--s5); border-top: 1px solid var(--line);
  background: var(--surface-sunken);
}
.modal-foot-split { justify-content: space-between; }

/* Destructive confirmation reads differently from an ordinary dialog: an icon,
   a plain statement of the consequence, and a red commit button. */
.confirm-danger { display: flex; gap: var(--s4); }
.confirm-icon {
  width: 38px; height: 38px; flex: none; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad-line);
}

.drawer-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,.42); }
.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 101;
  width: min(600px, 100%); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  animation: drawer-in .22s var(--ease);
}
@keyframes drawer-in { from { transform: translateX(14px); opacity: .6; } }
.drawer-head { padding: var(--s5); border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); }
.drawer-foot { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); background: var(--surface-sunken); display: flex; gap: var(--s2); justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   FEEDBACK: toasts, empty, loading, error
   -------------------------------------------------------------------------- */
.toast-host {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 200;
  display: flex; flex-direction: column; gap: var(--s2); max-width: 380px;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px var(--s4); font-size: 13px; font-weight: 500;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-left-width: 3px;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  animation: toast-in .2s var(--ease);
}
@keyframes toast-in { from { transform: translateY(6px); opacity: 0; } }
.toast-success { border-left-color: var(--good); }
.toast-error   { border-left-color: var(--bad); }
.toast-warning { border-left-color: var(--warn); }
.toast-info    { border-left-color: var(--info); }
.toast svg { width: 16px; height: 16px; margin-top: 1px; }
.toast-success svg { color: var(--good); }
.toast-error svg   { color: var(--bad); }
.toast-warning svg { color: var(--warn); }
.toast-info svg    { color: var(--info); }

.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: var(--s8) var(--s5);
}
.empty-icon {
  width: 40px; height: 40px; border-radius: var(--radius-lg);
  display: grid; place-items: center; margin-bottom: 4px;
  background: var(--surface-sunken); border: 1px solid var(--line);
  color: var(--ink-faint);
}
.empty-title { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.empty-body  { font-size: 12.5px; color: var(--ink-muted); max-width: 46ch; line-height: 1.55; }
.empty .btn { margin-top: var(--s3); }

.state-error .empty-icon { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }

.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-active) 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--radius-xs);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.sk-line { height: 11px; margin-bottom: 9px; }
.sk-tile { height: 104px; border-radius: var(--radius-lg); }
.sk-row  { height: 38px; margin-bottom: 1px; border-radius: 0; }

/* --------------------------------------------------------------------------
   APP SHELL
   -------------------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  width: var(--sidebar-w); display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  height: var(--topbar-h); padding: 0 var(--s4);
  border-bottom: 1px solid var(--line); flex: none;
}
.brand-mark {
  width: 27px; height: 27px; flex: none; border-radius: 8px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px; letter-spacing: -.02em;
}
:root[data-theme="dark"] .brand-mark,
:root:not([data-theme="light"]) .brand-mark { color: var(--ink-inverse); }
.brand-word {
  font-size: 12.5px; font-weight: 800; letter-spacing: .09em;
  color: var(--ink); white-space: nowrap;
}
.brand-word span { color: var(--accent); }

.nav { flex: 1; overflow-y: auto; padding: var(--s4) var(--s3); }
.nav-group + .nav-group { margin-top: var(--s5); }
.nav-group-label { padding: 0 9px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 550; color: var(--ink-body);
  text-decoration: none; white-space: nowrap;
  transition: background-color .12s, color .12s;
}
.nav-item:hover { background: var(--surface-active); color: var(--ink); text-decoration: none; }
.nav-item[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent-text); font-weight: 650;
}
.nav-item svg { width: 16px; height: 16px; color: currentColor; }
.nav-badge {
  margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line);
}
.nav-badge-quiet { background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--line-strong); }

.sidebar-foot { flex: none; border-top: 1px solid var(--line); padding: var(--s3); }
.signout-icon { display: none; width: 15px; height: 15px; }
.userbox { display: flex; align-items: center; gap: 9px; padding: 4px 5px; min-width: 0; }
.avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--surface-sunken); border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: var(--ink-body);
}
.userbox-meta { min-width: 0; }
.userbox-name { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.userbox-role { font-family: var(--mono); font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }

/* The operating strip. Small, mono, always present — the product's vital signs
   on every screen, so the operator never has to go to Home to know whether the
   floor is moving. */
.strip {
  height: var(--strip-h); flex: none;
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s5); overflow-x: auto;
  background: var(--surface-sunken); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--ink-muted);
  white-space: nowrap;
}
.strip-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent-text); }
.strip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.strip-dot-live { animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.strip-item b { color: var(--ink); font-weight: 700; }
.strip-sep { color: var(--line-heavy); }
.strip-right { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }

.topbar {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s5);
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.topbar-titles { min-width: 0; }
.topbar-title { font-size: 15px; font-weight: 700; letter-spacing: -.012em; }
.topbar-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: -1px; }
.topbar-spacer { flex: 1; }
.topbar .search { width: 244px; }

.page { padding: var(--s6) var(--s5) var(--s9); max-width: 1560px; width: 100%; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); margin-bottom: var(--s5); flex-wrap: wrap;
}
.page-head-main { min-width: 0; }
.page-head-aside { display: inline-flex; align-items: center; gap: var(--s3); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: var(--radius-pill);
  padding: 3px 10px; margin-bottom: 9px;
}
.eyebrow svg { width: 13px; height: 13px; }
.page-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.page-lede { font-size: 13px; color: var(--ink-muted); margin-top: 3px; max-width: 78ch; line-height: 1.55; }
.page-actions { display: flex; align-items: center; gap: var(--s2); flex: none; }

.section { margin-bottom: var(--s7); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s3); flex-wrap: wrap;
}
.section-actions { display: flex; align-items: baseline; gap: var(--s3); }

/* --------------------------------------------------------------------------
   METRIC TILES
   -------------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: var(--s3); }
.tile {
  display: flex; flex-direction: column; gap: 7px;
  padding: var(--s4) var(--s5) var(--s5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease), transform .14s var(--ease);
}
a.tile:hover {
  text-decoration: none; border-color: var(--line-strong);
  box-shadow: var(--shadow-md); transform: translateY(-1px);
}
.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.tile-icon {
  width: 30px; height: 30px; flex: none; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--surface-sunken); color: var(--ink-muted);
  border: 1px solid var(--line);
}
.tile-icon svg { width: 15px; height: 15px; }
.tile-icon-good { background: var(--good-soft); color: var(--good); border-color: var(--good-line); }
.tile-icon-info { background: var(--info-soft); color: var(--info); border-color: var(--info-line); }
.tile-icon-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.tile-icon-bad  { background: var(--bad-soft);  color: var(--bad);  border-color: var(--bad-line); }

.tile-figure { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tile-value {
  font-family: var(--mono); font-size: 30px; font-weight: 700;
  letter-spacing: -.035em; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tile-value-sm { font-size: 23px; }
.tile-context { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.tile-context-good { color: var(--good); font-weight: 600; }
.tile-context-warn { color: var(--warn); font-weight: 600; }

/* The line that stops a tile being decoration: it states what the number
   MEANS, in the operator's language. Every tile has one. */
.tile-note { font-size: 11.5px; color: var(--ink-muted); line-height: 1.45; }
.tile-flag {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--warn);
}
.tile-flag svg { width: 12px; height: 12px; }
.tile-accent-warn { border-left: 2.5px solid var(--warn); }
.tile-accent-good { border-left: 2.5px solid var(--good); }

/* --------------------------------------------------------------------------
   PIPELINE / LIFECYCLE FLOW
   -------------------------------------------------------------------------- */
/* Makes the Noustiq machine visible: raw prospects becoming approved,
   caller-ready opportunities. Each stage is a real count, and clicking one
   filters the Prospects list to exactly that stage. */
.flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 2px; }
.flow-node {
  flex: 1 1 0; min-width: 96px; min-height: 80px; position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--s4) var(--s4) var(--s4) var(--s5);
  background: var(--surface); border: 1px solid var(--line);
  color: inherit; text-decoration: none;
  transition: background-color .12s, border-color .12s;
}
.flow-node:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.flow-node:last-child  { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.flow-node + .flow-node { border-left: 0; }
.flow-node:hover { background: var(--surface-hover); text-decoration: none; }
/* The chevron between stages, drawn from the node itself so it survives
   horizontal scrolling and needs no extra elements. */
.flow-node + .flow-node::before {
  content: ""; position: absolute; left: -1px; top: 50%;
  width: 11px; height: 11px; transform: translateY(-50%) rotate(45deg);
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  background: var(--surface); z-index: 2;
}
.flow-node:hover::before { background: var(--surface-hover); }
.flow-n {
  font-family: var(--mono); font-size: 20px; font-weight: 700;
  line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.flow-l {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-muted);
  /* Stage names wrap rather than clip. "Ready to approve" does not fit one
     line at this width and truncating a stage name makes the flow unreadable. */
  white-space: normal; line-height: 1.3; overflow-wrap: anywhere;
}
.flow-node.is-zero .flow-n { color: var(--ink-faint); }
.flow-node.is-gate { background: var(--accent-soft); border-color: var(--accent-line); }
.flow-node.is-gate::before { background: var(--accent-soft); border-color: var(--accent-line); }
.flow-node.is-gate .flow-n { color: var(--accent-text); }
.flow-node.is-gate .flow-l { color: var(--accent-text); }
.flow-gatemark {
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent-text); opacity: .8;
}

/* --------------------------------------------------------------------------
   ATTENTION LIST
   -------------------------------------------------------------------------- */
.att {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none; transition: background-color .1s;
}
.att:last-of-type { border-bottom: 0; }
.att:hover { background: var(--surface-hover); text-decoration: none; }
.att-n {
  font-family: var(--mono); font-size: 19px; font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  min-width: 42px; text-align: right; flex: none; color: var(--ink);
}
.att-main { flex: 1; min-width: 0; }
.att-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.att-why { font-size: 11.5px; color: var(--ink-muted); line-height: 1.45; margin-top: 1px; }
.att-chev { width: 15px; height: 15px; color: var(--ink-faint); flex: none; }
.att:hover .att-chev { color: var(--accent); }

/* --------------------------------------------------------------------------
   CAPACITY METER
   -------------------------------------------------------------------------- */
.cap { display: flex; align-items: center; gap: 9px; min-width: 132px; }
/* Inside a compact table the meter must be able to shrink, or the table gains
   an intrinsic minimum wider than its card and the whole column overflows. */
.table-compact .cap { min-width: 96px; gap: 7px; }
.table-compact .cap-track { min-width: 40px; }
.cap-track {
  flex: 1; height: 5px; border-radius: 3px; min-width: 56px;
  background: var(--surface-active); overflow: hidden;
}
.cap-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.cap-fill-full { background: var(--warn); }
.cap-fill-over { background: var(--bad); }
.cap-n { font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }


/* Home's two-column band. The attention list is the primary action surface and
   takes the wider column; the team and deals cards are a status rail beside it.
   Below 1200px they stack, because a four-column table in a half-width column
   is where the previous build clipped. */
.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 1240px) {
  .home-split { grid-template-columns: minmax(0, 1fr); }
}

/* The deals strip reuses .flow at a smaller scale. Declared once here rather
   than as inline overrides on every node. */
.flow-mini .flow-node { min-width: 66px; min-height: 62px; padding: 10px 9px; }
.flow-mini .flow-n { font-size: 17px; }
.flow-mini .flow-l { font-size: 9px; letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .topbar .search { width: 190px; }
  :root { --sidebar-w: 208px; }
}
@media (max-width: 1080px) {
  :root { --sidebar-w: var(--sidebar-w-min); }
  .brand-word, .nav-item span:not(.nav-badge), .nav-group-label, .userbox-meta { display: none; }
  /* The sign-out label does not fit a 60px rail. It becomes an icon button
     rather than a block button whose text overflows its own box. */
  .sidebar-foot .btn-block { width: 34px; margin-inline: auto; padding: 0; }
  .sidebar-foot .btn-block .signout-label { display: none; }
  .sidebar-foot .btn-block .signout-icon { display: block; }
  .nav-item { justify-content: center; padding: 9px 0; }
  .nav-badge {
    position: absolute; top: 3px; right: 6px; margin: 0;
    min-width: 15px; padding: 0 3px; text-align: center; font-size: 9px;
  }
  .nav-item { position: relative; }
  .brand { justify-content: center; padding: 0; }
  .userbox { justify-content: center; }
  .topbar .search { width: 150px; }
}
@media (max-width: 860px) {
  .page { padding: var(--s5) var(--s4) var(--s8); }
  .att-why { display: none; }
  .strip-item:nth-child(n+5) { display: none; }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .topbar .search { display: none; }
  .page-head { flex-direction: column; gap: var(--s3); }
}

/* ==========================================================================
   CALLER FOCUS
   ==========================================================================
   The caller is on a live call. Two rules govern this screen:

   1. NOTHING THEY NEED MID-CALL MAY REQUIRE SCROLLING. An objection you have
      to scroll to find is an objection you fumble. The layout is two columns —
      context on the left, words to say on the right — with the outcome bar
      pinned. Only what is needed AFTER the call sits behind disclosure.

   2. ONE TAP PER COMMON OUTCOME. Twelve outcomes, six of them keyboard-bound.
      Nothing that a caller does forty times a day may cost two clicks.
   ========================================================================== */
.focus-body { background: var(--app-bg); }

.fx { min-height: 100vh; display: flex; flex-direction: column; }

/* --- progress ----------------------------------------------------------- */
.fx-top {
  height: 52px; flex: none; display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s5); background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.fx-progress { flex: 1; display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.fx-progress-track {
  flex: 1; max-width: 380px; height: 5px; border-radius: 3px;
  background: var(--surface-active); overflow: hidden;
}
.fx-progress-track i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.fx-progress-n { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
.fx-top-right { display: flex; align-items: center; gap: var(--s2); flex: none; }

/* --- two-column body ---------------------------------------------------- */
.fx-main {
  flex: 1; display: grid; gap: var(--s6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1240px; width: 100%; margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s5);
  align-content: start;
}
.fx-col { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }

.fx-block { display: flex; flex-direction: column; gap: 7px; }

/* --- who ---------------------------------------------------------------- */
.fx-who-tags { display: flex; gap: 6px; margin-bottom: 9px; }
.fx-biz { font-size: 30px; font-weight: 800; letter-spacing: -.028em; line-height: 1.08; }
.fx-loc { font-size: 13px; color: var(--ink-muted); margin-top: 4px; }

.fx-person {
  padding: var(--s4) var(--s5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.fx-person-name { font-size: 19px; font-weight: 700; letter-spacing: -.016em; }
.fx-person-role { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
.fx-dot { margin: 0 7px; color: var(--line-heavy); }
/* Contact context in the caller's language. Not "TEAM_PAGE / STRONG" — that is
   admin approval machinery and a caller should never see it. */
.fx-evidence { font-style: italic; }

/* --- reach -------------------------------------------------------------- */
.fx-reach {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.fx-reach-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
}
.fx-reach-row:last-of-type { border-bottom: 0; }
.fx-reach-ico { color: var(--ink-faint); flex: none; }
.fx-reach-ico svg { width: 17px; height: 17px; }
.fx-reach-main { flex: 1; min-width: 0; }
.fx-reach-value { font-size: 17px; font-weight: 650; letter-spacing: -.01em; word-break: break-all; }
.fx-reach-meta { font-size: 11.5px; color: var(--ink-muted); margin-top: 1px; }
.fx-reach-alt {
  padding: 9px var(--s4); font-size: 11.5px; color: var(--ink-muted);
  background: var(--surface-sunken); border-top: 1px solid var(--line);
}
.fx-reach-none {
  padding: var(--s4); font-size: 13px; color: var(--bad);
  background: var(--bad-soft); border: 1px solid var(--bad-line); border-radius: var(--radius-lg);
}

/* --- why / objective / admin note --------------------------------------- */
.fx-why-text { font-size: 15px; line-height: 1.55; color: var(--ink); }
.fx-why-text em { font-style: normal; font-weight: 650; }
.fx-objective p { font-size: 14px; color: var(--ink-body); line-height: 1.5; }
.fx-admin {
  padding: var(--s3) var(--s4); border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0;
}
.fx-admin p { font-size: 13.5px; color: var(--accent-text); font-weight: 500; }

/* --- what to say -------------------------------------------------------- */
.fx-script {
  margin: 0; padding: var(--s4) var(--s5);
  font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0; box-shadow: var(--shadow-sm);
}
.fx-questions {
  margin: 0; padding: 0; list-style: none;
  counter-reset: q; display: flex; flex-direction: column; gap: 7px;
}
.fx-questions li {
  counter-increment: q; position: relative; padding-left: 30px;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-body);
}
.fx-questions li::before {
  content: counter(q); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-active); color: var(--ink-muted);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
}

.fx-objections { display: flex; flex-direction: column; gap: 5px; }
.fx-obj {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.fx-obj summary {
  padding: 10px var(--s4); font-size: 13.5px; font-weight: 600; color: var(--ink-body);
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
}
.fx-obj summary::-webkit-details-marker { display: none; }
.fx-obj summary::before {
  content: "+"; font-family: var(--mono); font-size: 14px; color: var(--ink-faint); flex: none;
}
.fx-obj[open] summary::before { content: "−"; }
.fx-obj summary:hover { background: var(--surface-hover); }
.fx-obj p {
  padding: 0 var(--s4) var(--s4) 38px; font-size: 13.5px; line-height: 1.55; color: var(--ink-body);
}

/* --- outcome ------------------------------------------------------------ */
.fx-foot {
  position: sticky; bottom: 0; z-index: 30; flex: none;
  background: var(--surface); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -4px 16px -8px rgba(15,23,42,.10);
  padding: var(--s3) var(--s5) var(--s4);
}
.fx-outcome-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-bottom: 9px; max-width: 1240px; margin-inline: auto;
}
.fx-outcomes {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  max-width: 1240px; margin: 0 auto var(--s3);
}
.fx-out {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 8px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink-body); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  cursor: pointer; text-align: center; line-height: 1.2;
  transition: background-color .12s, border-color .12s, color .12s;
}
.fx-out:hover { background: var(--surface-hover); border-color: var(--line-heavy); }
.fx-out kbd { font-size: 9.5px; padding: 1px 4px; }
.fx-out-primary { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.fx-out-primary:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.fx-out-good { border-color: var(--good-line); color: var(--good); background: var(--good-soft); }
.fx-out-warn { border-color: var(--warn-line); color: var(--warn); background: var(--warn-soft); }
.fx-out-danger { border-color: var(--bad-line); color: var(--bad); }
.fx-out-danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }

.fx-foot-bar {
  display: flex; gap: var(--s3); align-items: center;
  max-width: 1240px; margin: 0 auto;
}
.fx-foot-bar .input { flex: 1; }

.fx-learn summary {
  font-size: 12px; color: var(--ink-muted); cursor: pointer; font-weight: 500;
  list-style: none;
}
.fx-learn summary::-webkit-details-marker { display: none; }
.fx-learn summary::before { content: "▸ "; }
.fx-learn[open] summary::before { content: "▾ "; }
.fx-learn-body { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.fx-learn-body .select { width: auto; min-width: 0; flex: 1 1 180px; }
.fx-learn-body .input { flex: 1 1 240px; width: auto; }

/* --- responsive --------------------------------------------------------- */
/* Below 1024 the two columns stack. The order is deliberate: who and how to
   reach them first, then what to say, because that is the order of the call. */
@media (max-width: 1024px) {
  .fx-main { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .fx-outcomes { grid-template-columns: repeat(4, 1fr); }
  .fx-biz { font-size: 25px; }
}
@media (max-width: 680px) {
  .fx-main { padding: var(--s4) var(--s4) var(--s3); }
  .fx-outcomes { grid-template-columns: repeat(3, 1fr); }
  .fx-foot-bar { flex-direction: column; align-items: stretch; }
  .fx-foot-bar .btn { width: 100%; }
  .fx-biz { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   SIGN IN
   --------------------------------------------------------------------------
   Two panels: the form, and a plain statement of what the product does. The
   right panel exists because sign-in is the one screen a new pilot customer's
   whole team sees on day one, and "your callers stop researching and start
   calling" is worth saying there rather than nowhere.
   -------------------------------------------------------------------------- */
.auth-body { background: var(--app-bg); }
.auth {
  min-height: 100vh; display: grid; align-items: center;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: var(--s9); max-width: 1120px; margin: 0 auto; padding: var(--s7) var(--s5);
}
.auth-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  padding: var(--s7);
}
.auth-brand { display: flex; align-items: center; gap: 9px; margin-bottom: var(--s6); }
.auth-title { font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.auth-sub { font-size: 13px; color: var(--ink-muted); margin-top: 3px; }
.auth-form { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s6); }
.auth-form .btn { margin-top: var(--s2); }
.auth-foot {
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-muted); line-height: 1.55;
}

.auth-side { min-width: 0; }
.auth-side-title {
  font-size: 27px; font-weight: 800; letter-spacing: -.028em; line-height: 1.2;
  margin-top: 4px; max-width: 20ch;
}
.auth-side-lede { font-size: 14px; color: var(--ink-body); line-height: 1.6; margin-top: var(--s3); max-width: 52ch; }
.auth-points { list-style: none; margin: var(--s6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.auth-points li { display: flex; gap: 11px; font-size: 13.5px; color: var(--ink-body); line-height: 1.55; }
.auth-points svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 2px; }
.auth-points b { color: var(--ink); font-weight: 650; }

@media (max-width: 940px) {
  .auth { grid-template-columns: minmax(0, 1fr); gap: var(--s7); max-width: 480px; }
  /* The form comes first on a narrow screen: a returning caller is here to
     sign in, not to read the pitch. */
  .auth-side { order: 2; }
  .auth-side-title { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   TIMELINE
   -------------------------------------------------------------------------- */
.timeline { display: flex; flex-direction: column; gap: 2px; position: relative; }
.tl-item { display: flex; gap: 11px; padding: 6px 0; position: relative; }
.tl-item:not(:last-child)::before {
  content: ""; position: absolute; left: 4px; top: 20px; bottom: -2px;
  width: 1px; background: var(--line);
}
.tl-dot {
  width: 9px; height: 9px; flex: none; border-radius: 50%; margin-top: 5px;
  background: var(--line-heavy); border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-heavy); position: relative; z-index: 1;
}
.tl-dot-good { background: var(--good); box-shadow: 0 0 0 1px var(--good); }
.tl-dot-info { background: var(--info); box-shadow: 0 0 0 1px var(--info); }
.tl-dot-bad  { background: var(--bad);  box-shadow: 0 0 0 1px var(--bad); }


/* ==========================================================================
   LEGACY COMPONENTS, PORTED ONTO THE v5 TOKEN SET
   ==========================================================================
   Generated, not hand-written. Every block below comes from the production
   stylesheet and covers a screen that was NOT individually redesigned in this
   checkpoint: prospect detail tabs, the pipeline board, the caller portal,
   analytics, data quality, templates, import, security.

   They are here so those screens inherit the new palette, type scale and
   density instead of rendering unstyled. Only design tokens were remapped —
   no layout was changed — and any block touching a class the v5 system already
   defines was dropped so the new definition wins.

   380 blocks ported · 129 dropped as superseded.
   ========================================================================== */
.btn-danger-soft { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
.hint { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 650; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-neutral  { background: var(--surface-sunken); color: var(--ink-body); border-color: var(--line); }
.badge-brand    { background: var(--accent-soft);   color: var(--accent);   border-color: var(--accent-line); }
.badge-success  { background: var(--good-soft); color: var(--good); border-color: var(--good-line); }
.badge-warning  { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.badge-danger   { background: var(--bad-soft);  color: var(--bad);  border-color: var(--bad-line); }
.badge-info     { background: var(--info-soft);    color: var(--info);    border-color: var(--info-line); }
.badge-dot::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.skeleton-row { height: 13px; margin: 11px var(--s3); }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,13,18,.5);
  display: flex; align-items: center; justify-content: center; padding: var(--s5);
}
.modal-desc { font-size: 13px; color: var(--ink-muted); margin: 4px 0 0; }
.modal-actions {
  display: flex; justify-content: flex-end; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line);
}
@media (max-width: 560px) {
.modal-backdrop { align-items: flex-end; padding: 0; }
}
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s5);
  background:
    radial-gradient(1100px 520px at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--app-bg);
}
.auth-mark {
  width: 38px; height: 38px; margin: 0 auto var(--s3);
  display: grid; place-items: center; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.02em;
}
.auth-name { font-size: 15px; font-weight: 700; letter-spacing: .12em; }
.auth-name span { color: var(--accent); }
.auth-tagline { font-size: 12px; color: var(--ink-muted); margin-top: 3px; }
.auth-footnote {
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line);
  text-align: center; font-size: 12px; color: var(--ink-muted);
}
.password-wrap { position: relative; }
.password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 5px 7px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink-muted);
}
.password-toggle:hover { color: var(--ink); }
.alert {
  display: flex; gap: var(--s2); padding: 9px 11px; border-radius: var(--radius-sm);
  font-size: 13px; margin-bottom: var(--s4);
}
.alert-danger  { background: var(--bad-soft);  color: var(--bad);  border: 1px solid var(--bad-line); }
.alert-warning { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); }
.alert-info    { background: var(--info-soft);    color: var(--info);    border: 1px solid var(--info-line); }
.sidebar-head {
  display: flex; align-items: center; gap: var(--s2);
  height: var(--topbar-h); padding: 0 var(--s3); border-bottom: 1px solid var(--line);
}
.sidebar-mark {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; background: var(--accent);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.sidebar-word { font-size: 12px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.sidebar-word span { color: var(--accent); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--s3) var(--s2); }
.nav-count { margin-left: auto; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sidebar-user { display: flex; align-items: center; gap: var(--s2); padding: 5px var(--s2); }
.sidebar-user-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--ink-muted); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 4px; background: var(--surface-sunken);
}
.health { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-body); white-space: nowrap; }
.health-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-muted); }
.health-ok   { background: var(--good); }
.health-warn { background: var(--warn); }
.health-bad  { background: var(--bad); }
.section-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--s3); }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s3) var(--s4); }
.metric-label { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.metric-value { font-size: 24px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; line-height: 1.15; }
.funnel { display: flex; gap: var(--s2); flex-wrap: wrap; }
.funnel-step {
  flex: 1 1 116px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4); position: relative;
}
.funnel-step + .funnel-step::before {
  content: "›"; position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  color: var(--ink-muted); font-size: 15px;
}
.funnel-value { font-size: 20px; font-weight: 680; font-variant-numeric: tabular-nums; }
.funnel-label { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.funnel-rate { font-size: 11px; color: var(--ink-muted); }
.attention-list { display: flex; flex-direction: column; }
.attention-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s4); border: 0; border-bottom: 1px solid var(--line);
  background: none; width: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer; transition: background-color .12s;
}
.attention-row:last-child { border-bottom: 0; }
.attention-row:hover { background: var(--surface-hover); }
.attention-count { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 26px; }
.attention-text { flex: 1; font-size: 13px; }
.attention-chev { color: var(--ink-muted); }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(10,13,18,.4); z-index: 100; }
.drawer-tabs { display: flex; gap: 2px; padding: 0 var(--s4); border-bottom: 1px solid var(--line); overflow-x: auto; }
.drawer-tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px var(--s2); font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-muted); cursor: pointer; white-space: nowrap;
}
.drawer-tab:hover { color: var(--ink); }
.drawer-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.kv { display: grid; grid-template-columns: 128px 1fr; gap: 7px var(--s3); font-size: 13px; margin: 0; }
.kv dt { color: var(--ink-muted); font-size: 12px; }
.kv dd { margin: 0; }
.caller-body { background: var(--app-bg); padding-bottom: 72px; }
.caller-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 10px var(--s4); background: var(--surface); border-bottom: 1px solid var(--line);
}
.caller-brand { display: flex; align-items: center; gap: var(--s2); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.caller-main { max-width: 620px; margin: 0 auto; padding: var(--s4); }
.greeting { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.greeting-sub { font-size: 13px; color: var(--ink-muted); margin-top: 1px; }
.caller-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin: var(--s4) 0; }
.caller-metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 8px; text-align: center; }
.caller-metric-value { font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums; line-height: 1.2; }
.caller-metric-label { font-size: 10px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-muted); margin-top: 1px; }
.progress { height: 5px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.progress-bar { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.progress-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-muted); margin-bottom: 5px; }
.queue-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.queue-progress-bar { display: flex; align-items: center; justify-content: space-between; padding: 9px var(--s4); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-muted); }
.queue-biz { padding: var(--s4); border-bottom: 1px solid var(--line); }
.queue-biz-name { font-size: 19px; font-weight: 680; letter-spacing: -.01em; line-height: 1.25; }
.queue-biz-meta { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.contact-block { padding: var(--s4); border-bottom: 1px solid var(--line); }
.contact-person { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.contact-name { font-size: 15px; font-weight: 650; }
.contact-role { font-size: 12px; color: var(--ink-muted); }
.contact-line { display: flex; align-items: center; gap: var(--s3); padding: 9px 0; border-top: 1px solid var(--line); }
.contact-line-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.contact-line-value { font-size: 14px; font-variant-numeric: tabular-nums; word-break: break-all; }
.contact-line-grow { flex: 1; min-width: 0; }
.brief { padding: var(--s4); border-bottom: 1px solid var(--line); display: grid; gap: var(--s3); }
.brief-item-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px; }
.brief-item-value { font-size: 13px; line-height: 1.45; }
.outcomes { padding: var(--s4); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
@media (min-width: 520px) {
.outcomes { grid-template-columns: repeat(3, 1fr); }
}
.outcome-btn {
  padding: 13px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 620;
  cursor: pointer; min-height: 46px; transition: background-color .12s, border-color .12s;
}
.outcome-btn:hover { background: var(--surface-hover); }
.outcome-btn:disabled { opacity: .5; cursor: progress; }
.outcome-primary { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.outcome-good    { border-color: var(--good-line); background: var(--good-soft); color: var(--good); }
.outcome-danger  { border-color: var(--bad-line); color: var(--bad); }
.outcome-quiet   { color: var(--ink-body); }
.caller-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.caller-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; font-size: 10px; font-weight: 650; letter-spacing: .03em;
  color: var(--ink-muted); text-decoration: none; min-height: 50px; justify-content: center;
}
.caller-nav a.active { color: var(--accent); }
.caller-nav a:hover { text-decoration: none; }
.caller-nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.fu-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4); margin-bottom: var(--s2); flex-wrap: wrap;
}
.fu-main { font-weight: 620; font-size: 14px; }
.fu-sub { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }
.fu-actions { display: flex; gap: var(--s2); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.review-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--s3); }
.review-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.review-cols { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s4); padding: var(--s4); align-items: start; }
@media (max-width: 720px) {
.review-cols { grid-template-columns: 1fr; }
}
.review-col-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; }
.review-value { font-size: 14px; font-weight: 600; }
.review-meta { font-size: 12px; color: var(--ink-muted); margin-top: 3px; }
.review-note { background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; margin-top: var(--s2); }
.review-actions { display: flex; flex-direction: column; gap: var(--s2); min-width: 116px; }
@media (max-width: 380px) {
.caller-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (pointer: coarse), (max-width: 560px) {
.caller-nav a { min-height: 54px; }
}
.filter-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}
.pipe-totals {
  display: grid; gap: var(--s3); margin-bottom: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.pipe-total {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s4);
}
.pipe-total-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s2);
}
.pipe-total-val { font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.pipe-board {
  display: flex; gap: var(--s3); align-items: flex-start;
  overflow-x: auto; padding-bottom: var(--s3);
  scroll-snap-type: x proximity;
}
.pipe-col {
  flex: 0 0 288px; scroll-snap-align: start;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s3);
}
.pipe-col-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); padding: 0 var(--s1) var(--s3);
}
.pipe-col-name { font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.pipe-col-meta { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pipe-col-body { display: flex; flex-direction: column; gap: var(--s2); }
.pipe-col-empty { color: var(--ink-muted); font-size: 13px; padding: var(--s3); text-align: center; }
.pipe-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s3);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.pipe-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.pipe-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pipe-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
}
.pipe-card-biz { font-weight: 600; font-size: 14px; line-height: 1.3; }
.pipe-card-val { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pipe-card-offer { font-size: 13px; color: var(--ink-body); margin-top: var(--s2); }
.pipe-card-dm { font-size: 12px; margin-top: var(--s1); }
.pipe-card-next {
  font-size: 12px; margin-top: var(--s3); padding-top: var(--s2);
  border-top: 1px solid var(--line); color: var(--ink-body);
}
.pipe-next-label {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); margin-right: var(--s1);
}
.pipe-card-nonext { color: var(--warn); }
.pipe-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap;
}
.pipe-card-age { font-size: 11px; }
.pipe-chip {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px var(--s2); border-radius: 999px;
  background: var(--surface-sunken); color: var(--ink-body); border: 1px solid var(--line);
}
.pipe-chip-soon { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.pipe-chip-late { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
@media (max-width: 640px) {
.pipe-board { flex-direction: column; overflow-x: visible; }
.pipe-col { flex: 1 1 auto; width: 100%; }
}
@media (pointer: coarse) {
.pipe-card { padding: var(--s4); }
}
.text-danger { color: var(--bad); font-weight: 600; }
.stage-bar {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}
.stage-cell-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
}
.stage-cell-name { font-size: 12px; font-weight: 600; color: var(--ink-body); }
.stage-cell-count { font-size: 16px; font-weight: 680; font-variant-numeric: tabular-nums; }
.stage-cell-track {
  height: 6px; background: var(--surface-sunken); border-radius: 999px;
  overflow: hidden; margin: var(--s2) 0 var(--s1);
}
.stage-cell-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .25s ease; }
.stage-fill-NEGOTIATION { background: var(--warn); }
.stage-fill-PROPOSAL    { background: var(--info); }
.stage-fill-WON         { background: var(--good); }
.stage-fill-LOST        { background: var(--line-strong); }
.stage-cell-val { font-size: 11px; font-variant-numeric: tabular-nums; }
.enforce-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
}
.enforce-state { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: var(--s2); }
.enforce-state::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted);
}
.enforce-on::before  { background: var(--good); }
.enforce-off::before { background: var(--warn); }
@media (max-width: 640px) {
.filter-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}
@media (max-width: 420px) {
.filter-grid { grid-template-columns: 1fr; }
}
.pc-head {
  display: flex; justify-content: space-between; gap: var(--s6);
  padding: var(--s5); flex-wrap: wrap; margin-bottom: var(--s4);
}
.pc-title-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pc-biz { font-size: 22px; font-weight: 680; letter-spacing: -.02em; margin: 0; }
.pc-meta { margin-top: var(--s2); font-size: 13px; color: var(--ink-body); }
.pc-sep { margin: 0 var(--s2); color: var(--line-strong); }
.pc-head-side { display: grid; grid-template-columns: repeat(2, auto); gap: var(--s3) var(--s6); align-content: start; }
.pc-stat { display: flex; flex-direction: column; gap: 3px; }
.pc-stat-label {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted);
}
.pc-actions {
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--s4);
}
.pc-actions-gap { flex: 1 1 auto; }
.pc-danger { color: var(--bad); }
.pc-tabs {
  display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line);
  margin-bottom: var(--s4);
}
.pc-tab {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: var(--s3) var(--s4); font-size: 13px; font-weight: 600;
  color: var(--ink-muted); white-space: nowrap; font-family: inherit;
}
.pc-tab:hover { color: var(--ink); }
.pc-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.pc-tab-badge {
  display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 5px;
  background: var(--bad); color: #fff; border-radius: 999px; font-size: 10px; line-height: 16px;
}
.pc-grid-2 { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.pc-answers { display: flex; flex-direction: column; gap: var(--s4); }
.pc-ans-q { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.pc-ans-a { margin-top: 4px; font-size: 14px; line-height: 1.5; }
.pc-contact { font-variant-numeric: tabular-nums; }
.pc-states { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--s4); }
.pc-state { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.pc-state-k { font-size: 12px; color: var(--ink-body); }
.pc-reasons { display: flex; flex-direction: column; gap: 3px; }
.pc-reason { font-size: 13px; line-height: 1.5; }
.pc-yes  { color: var(--good); }
.pc-no   { color: var(--bad); }
.pc-warn { color: var(--warn); }
.pc-queues { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--s4); }
.pc-next-blocked, .pc-next-ok { font-size: 14px; }
.pc-blocking { margin: var(--s2) 0 0; padding-left: var(--s5); color: var(--ink-body); }
.pc-blocking li { margin: 2px 0; }
.pc-kv {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.pc-kv:last-child { border-bottom: 0; }
.pc-kv > span:first-child { color: var(--ink-muted); }
.pc-list { margin: 0; padding-left: var(--s5); font-size: 13px; line-height: 1.7; }
.pc-conflicts { margin-bottom: var(--s4); }
.pc-conflict {
  background: var(--bad-soft); border: 1px solid var(--bad-line);
  border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s3);
}
.pc-conflict-head { display: flex; align-items: center; gap: var(--s2); font-size: 14px; font-weight: 600; }
.pc-conflict-people { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: var(--s3); }
.pc-conflict-person { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s3); }
.pc-conflict-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--s2); }
.pc-conflict-note { font-size: 12px; margin-top: var(--s3); }
.pc-src { font-size: 12px; color: var(--accent); word-break: break-all; }
.pc-dm-primary { display: flex; flex-direction: column; gap: 4px; }
.pc-dm-name { font-size: 18px; font-weight: 650; }
.pc-dm-title { color: var(--ink-body); }
.pc-dm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--s2); }
.pc-row-primary { background: var(--accent-soft); }
.pc-pkg-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pc-pkg-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.pc-pkg-value { margin-top: 3px; font-size: 14px; line-height: 1.45; }
.pc-pkg-sugg { margin-top: 3px; font-size: 12px; color: var(--accent); }
.pc-tpl { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s3); margin-bottom: var(--s3); }
.pc-tpl-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pc-tpl-subj { font-weight: 600; margin-top: var(--s2); font-size: 13px; }
.pc-tpl-body {
  margin: var(--s2) 0 0; padding: var(--s3); background: var(--surface-sunken);
  border-radius: var(--radius-xs); font-family: inherit; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; overflow-x: auto;
}
.pc-ai-bridge { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pc-ai-bridge h3 { margin: 0 0 4px; font-size: 14px; }
.pc-final-summary {
  background: var(--surface-sunken); border-radius: var(--radius-sm);
  padding: var(--s3); margin: var(--s3) 0; font-size: 13px; line-height: 1.6;
}
.pc-timeline { display: flex; flex-direction: column; }
.pc-tl-item {
  display: grid; grid-template-columns: 150px 130px 1fr 120px; gap: var(--s3);
  padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: 13px; align-items: baseline;
}
.pc-tl-item:last-child { border-bottom: 0; }
.pc-tl-when { color: var(--ink-muted); font-size: 12px; }
.pc-tl-who { font-size: 12px; text-align: right; }
@media (max-width: 860px) {
.pc-head { flex-direction: column; gap: var(--s4); }
.pc-head-side { grid-template-columns: repeat(2, 1fr); }
.pc-tl-item { grid-template-columns: 1fr; gap: 2px; padding: var(--s3) 0; }
.pc-tl-who { text-align: left; }
}
.fm-body { background: var(--app-bg); padding-bottom: 96px; }
.fm-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.fm-exit {
  font-size: 18px; line-height: 1; color: var(--ink-muted); text-decoration: none;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.fm-exit:hover { background: var(--surface-sunken); color: var(--ink); text-decoration: none; }
.fm-progress { flex: 1; font-size: 12px; color: var(--ink-muted); text-align: center; }
.fm-main { max-width: 640px; margin: 0 auto; padding: var(--s4); }
.fm-loading, .fm-empty { padding: var(--s6) 0; }
.fm-hero {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s5); margin-bottom: var(--s3);
}
.fm-hero-top { display: flex; gap: var(--s2); margin-bottom: var(--s2); }
.fm-biz { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
.fm-loc { font-size: 13px; margin-top: 2px; }
.fm-person { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.fm-person-name { font-size: 18px; font-weight: 650; }
.fm-person-role { font-size: 13px; }
.fm-person-none { color: var(--warn); font-size: 14px; font-weight: 600; }
.fm-contact-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.fm-chip {
  font-size: 13px; font-variant-numeric: tabular-nums;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px var(--s3);
}
.fm-block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s3);
}
.fm-block-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s2);
}
.fm-why { font-size: 14px; line-height: 1.55; }
.fm-objective { border-left: 3px solid var(--accent); }
.fm-say { font-size: 17px; line-height: 1.5; font-weight: 500; }
.fm-questions { margin: 0; padding-left: var(--s5); font-size: 15px; line-height: 1.85; }
.fm-details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s3) var(--s4); margin-bottom: var(--s3);
}
.fm-details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-body); }
.fm-details[open] summary { margin-bottom: var(--s3); }
.fm-obj { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.fm-obj:last-child { border-bottom: 0; }
.fm-obj-q { font-weight: 600; font-size: 13px; }
.fm-obj-a { font-size: 13px; color: var(--ink-body); margin-top: 2px; line-height: 1.5; }
.fm-obs { display: flex; flex-direction: column; gap: var(--s2); }
.fm-outcomes { margin-bottom: var(--s3); }
.fm-outcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.fm-outcome {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: var(--s4) var(--s3); min-height: 52px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  transition: background-color .12s ease, border-color .12s ease;
}
.fm-outcome:hover { background: var(--surface-hover); }
.fm-outcome:active { transform: translateY(1px); }
.fm-primary { border-color: var(--accent); color: var(--accent); }
.fm-good    { background: var(--good-soft); border-color: var(--good-line); color: var(--good); }
.fm-warn    { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.fm-danger  { background: var(--bad-soft);  border-color: var(--bad-line);  color: var(--bad); }
.fm-quiet   { color: var(--ink-body); }
.fm-quick-dates { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.fm-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2);
  padding: var(--s3) var(--s4);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
}
.fm-next { grid-column: span 1; }
@media (min-width: 640px) {
.fm-actions { max-width: 640px; margin: 0 auto; border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--line); border-bottom: 0; }
.fm-outcome-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
.fm-actions { grid-template-columns: repeat(2, 1fr); }
.fm-biz { font-size: 22px; }
}
.dq-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.dq-card {
  text-align: left; font-family: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s4);
  transition: border-color .12s ease, box-shadow .12s ease;
  /* A grid item defaults to min-width:auto, so the card refused to shrink
     below the intrinsic width of its nowrap badge and pushed the whole page
     sideways at every breakpoint. It is a <button>, so white-space has to be
     restated too — the UA stylesheet does not inherit it here. */
  min-width: 0; white-space: normal;
}
.dq-card:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--shadow-md); }
.dq-card:disabled { cursor: default; opacity: .55; }
.dq-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); flex-wrap: wrap; min-width: 0;
}
.dq-card-top > * { min-width: 0; }
.dq-count { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dq-clear .dq-count { color: var(--good); }
.dq-label { font-size: 14px; font-weight: 600; margin-top: var(--s2); overflow-wrap: anywhere; }
.dq-problem { font-size: 12px; color: var(--ink-muted); line-height: 1.45; margin-top: 3px; overflow-wrap: anywhere; }
.an-rangebar { display: flex; justify-content: flex-end; margin-bottom: var(--s4); }
.an-ranges { display: inline-flex; background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.an-range {
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px var(--s3); border: 0; background: transparent;
  color: var(--ink-body); border-radius: var(--radius-xs);
}
.an-range:hover { color: var(--ink); }
.an-range.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.an-fn-row {
  display: grid; grid-template-columns: 130px 1fr 56px 44px;
  gap: var(--s3); align-items: center; padding: 5px 0; font-size: 13px;
}
.an-fn-label { color: var(--ink-body); }
.an-fn-track { height: 8px; background: var(--surface-sunken); border-radius: 999px; overflow: hidden; }
.an-fn-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.an-fn-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.an-fn-drop { text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.an-cmp { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.an-cmp:last-child { border-bottom: 0; }
.an-cmp-title { font-size: 14px; font-weight: 650; margin-bottom: var(--s3); display: flex; gap: var(--s2); align-items: center; }
.an-cmp-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: center; }
.an-cmp-side { background: var(--surface-sunken); border-radius: var(--radius-sm); padding: var(--s3); }
.an-cmp-group { font-size: 12px; font-weight: 600; color: var(--ink-body); margin-bottom: var(--s2); }
.an-cmp-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.an-cmp-metrics > div { display: flex; flex-direction: column; }
.an-cmp-v { font-size: 15px; font-weight: 680; font-variant-numeric: tabular-nums; }
.an-cmp-k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.an-cmp-vs { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.an-thin { color: var(--ink-muted); }
.an-thin sup { color: var(--warn); }
.an-rate { font-weight: 650; }
.an-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.an-tab {
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px var(--s3); border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-body); border-radius: var(--radius-sm);
}
.an-tab.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
@media (max-width: 700px) {
.an-cmp-grid { grid-template-columns: 1fr; }
.an-cmp-vs { text-align: center; }
.an-fn-row { grid-template-columns: 100px 1fr 48px 38px; }
}
.pl-alerts { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pl-alert {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-sunken);
}
.pl-alert-live { background: var(--warn-soft); border-color: var(--warn-line); }
.pl-alert-count { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-alert-live .pl-alert-count { color: var(--warn); }
.pl-alert-clear .pl-alert-count { color: var(--good); }
.pl-alert-label { font-size: 12px; color: var(--ink-body); }
.pl-views { display: inline-flex; background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.pl-view {
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px var(--s3); border: 0; background: transparent;
  color: var(--ink-body); border-radius: var(--radius-xs);
}
.pl-view.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.pl-board {
  display: flex; gap: var(--s3); align-items: flex-start;
  overflow-x: auto; padding: var(--s4) 0;
}
.pl-col {
  flex: 0 0 272px;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s3);
}
.pl-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); padding: 0 var(--s1) var(--s3); }
.pl-col-name { font-size: 13px; font-weight: 650; }
.pl-col-meta { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pl-col-body { display: flex; flex-direction: column; gap: var(--s2); }
.pl-col-empty { color: var(--ink-muted); font-size: 13px; padding: var(--s3); text-align: center; }
.pl-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s3);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.pl-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.pl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-card-alert { border-left: 3px solid var(--warn); }
.pl-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.pl-card-biz { font-weight: 600; font-size: 13px; line-height: 1.3; }
.pl-card-val { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-card-offer { font-size: 12px; color: var(--ink-body); margin-top: 4px; }
.pl-card-meta { display: flex; gap: var(--s2); font-size: 11px; color: var(--ink-muted); margin-top: var(--s2); flex-wrap: wrap; }
.pl-card-foot { display: flex; justify-content: space-between; gap: var(--s2); font-size: 11px; margin-top: 4px; }
.pl-card-next {
  font-size: 12px; margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--line); color: var(--ink-body);
}
.pl-card-nonext { color: var(--warn); }
.pl-card-alerts { display: flex; flex-wrap: wrap; gap: 3px; margin-top: var(--s2); }
.pl-drawer-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16,19,26,.42); display: flex; justify-content: flex-end;
}
.pl-drawer {
  width: min(460px, 100%); height: 100%; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
}
.pl-drawer-head {
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding: var(--s4); border-bottom: 1px solid var(--line);
}
.pl-drawer-biz { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.pl-drawer-body { padding: var(--s4); }
.pl-drawer-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--s4); }
.pl-drawer-block { margin-top: var(--s4); }
.pl-drawer-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 3px; }
@media (max-width: 640px) {
.pl-board { flex-direction: column; overflow-x: visible; }
.pl-col { flex: 1 1 auto; width: 100%; }
.pl-drawer { width: 100%; }
}
.tp-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.tp-vars { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: var(--s2); }
.tp-var {
  font-family: var(--mono); font-size: 11px; cursor: pointer;
  padding: 3px 7px; border-radius: var(--radius-xs);
  border: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink-body);
}
.tp-var:hover { border-color: var(--accent); color: var(--accent); }
.tp-preview { margin-top: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s3); }
.tp-preview-head { font-size: 12px; color: var(--ink-muted); margin-bottom: var(--s2); }
.tp-preview-subj { font-weight: 600; font-size: 13px; margin-bottom: var(--s2); }
.tp-preview-body {
  margin: 0; padding: var(--s3); background: var(--surface-sunken);
  border-radius: var(--radius-xs); font-family: inherit; font-size: 13px;
  line-height: 1.6; white-space: pre-wrap;
}
@media (max-width: 560px) {
.tp-row { grid-template-columns: 1fr; }
}
.ms-variants { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.ms-variant {
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px var(--s3); border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-body);
}
.ms-variant.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ms-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s3); }
@media (pointer: coarse) {
.ms-variant { min-height: 44px; }
}

/* ==========================================================================
   COMPATIBILITY
   ==========================================================================
   Four classes the production stylesheet defined that the v5 rewrite dropped.
   Screens not individually redesigned still use them, so dropping them was a
   regression rather than a cleanup. Aliased to their v5 equivalents rather
   than duplicated, so there is still one definition of each behaviour.

   The 24 OTHER classes the audit flagged were already undefined in production
   (`cell-actions` aside, things like .queue-view and .verify-panel are markup
   hooks that never had styles). Those are pre-existing and untouched here.
   ========================================================================== */
.cell-strong  { color: var(--ink); font-weight: 600; }
.cell-num     { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cell-actions { text-align: right; white-space: nowrap; }

/*
 * SIDEBAR COLLAPSE.
 *
 * assets/shell.js toggles .collapsed on #appShell and persists it to
 * localStorage. The v5 shell collapses automatically below 1080px via a media
 * query, but the MANUAL toggle still has to work at any width or the button is
 * dead. Same rules, driven by the class instead of the viewport.
 */
.shell.collapsed { --sidebar-w: var(--sidebar-w-min); }
.shell.collapsed .brand-word,
.shell.collapsed .nav-item span:not(.nav-badge),
.shell.collapsed .nav-group-label,
.shell.collapsed .userbox-meta,
.shell.collapsed .signout-label { display: none; }
.shell.collapsed .signout-icon { display: block; }
.shell.collapsed .nav-item { justify-content: center; padding: 9px 0; position: relative; }
.shell.collapsed .nav-badge {
  position: absolute; top: 3px; right: 6px; margin: 0;
  min-width: 15px; padding: 0 3px; text-align: center; font-size: 9px;
}
.shell.collapsed .brand { justify-content: center; padding: 0; }
.shell.collapsed .userbox { justify-content: center; }
.shell.collapsed .sidebar-foot .btn-block { width: 34px; margin-inline: auto; padding: 0; }

/* Overdue card gets a red border only when it has rows in it. */
.card-danger { border-color: var(--bad-line); }


/* ==========================================================================
   CONTROLS THAT WERE NEVER STYLED
   ==========================================================================
   Found by rendering the real pages: these three were referenced by markup and
   defined in no stylesheet, so they rendered as operating-system controls in
   production. Built from the same primitives as .btn and .segment rather than
   given bespoke rules.
   ========================================================================== */

/* Analytics range tabs — same behaviour as .segment button. */
.an-tabs { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-sunken);
           border: 1px solid var(--line); border-radius: var(--radius-xs); }
.an-tab {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-muted);
  background: none; border: 0; border-radius: var(--radius-xs);
  padding: 5px 11px; cursor: pointer; white-space: nowrap;
  transition: background-color .12s, color .12s;
}
.an-tab:hover { color: var(--ink); }
.an-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }

/* Research review accept / reject / keep-both. A decision control, so it reads
   as a real button and the destructive option is not the default weight. */
.btn-outcome {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 13px;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs);
  cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-xs);
  transition: background-color .13s, border-color .13s, color .13s;
}
.btn-outcome:hover { background: var(--surface-hover); border-color: var(--line-heavy); }
.btn-outcome-good {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.btn-outcome-good:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
:root[data-theme="dark"] .btn-outcome-good,
:root:not([data-theme="light"]) .btn-outcome-good { color: var(--ink-inverse); }

/* Show / hide password, sitting inside the field rather than beside it. */
.password-wrap { position: relative; }
.password-wrap .input { padding-right: 62px; }
.password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-muted);
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: 4px 8px; cursor: pointer;
  transition: background-color .12s, color .12s;
}
.password-toggle:hover { background: var(--surface-active); color: var(--ink); }

/* Inline alert used by the sign-in form. */
.alert {
  padding: 10px var(--s4); border-radius: var(--radius-xs); border: 1px solid;
  font-size: 13px; font-weight: 500; margin-bottom: var(--s4);
}
.alert-danger  { color: var(--bad);  background: var(--bad-soft);  border-color: var(--bad-line); }
.alert-warning { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }


/* Caller portal metric captions, normalised to the 11px label floor. */
.caller-metric-label { font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* ===========================================================================
   STRUCTURAL CONTAINERS
   These class names were carried in the markup but never had a rule — in the
   legacy stylesheet either. They rendered as anonymous blocks, which is why
   nothing overflowed and nothing looked broken, but the grouping they were
   meant to express was invisible. Defining them finishes the layout that the
   markup already describes; none of them changes an approved composition.
   ========================================================================= */

/* Prospects — three labelled chip groups, stacked, each legend above its row. */
.filters { display: flex; flex-direction: column; gap: var(--s4); }
.filter-set { display: flex; flex-direction: column; gap: var(--s2); }
.filter-legend { color: var(--ink-muted); }

/* Activity / Templates / Data quality — a single row of small controls that
   wraps rather than forcing the table to scroll. */
.filter-row,
.quickrow {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}

/* Follow-up and review collections: the items carry their own card styling,
   the list only owns the rhythm between them. */
.fu-list,
.review-list { display: flex; flex-direction: column; gap: var(--s3); }
.overdue-title { color: var(--bad); }

/* Prospect detail */
.pc-head-main { min-width: 0; flex: 1; }
.pc-panel { display: block; min-width: 0; }
.form-msg { font-size: 13px; color: var(--ink-muted); min-height: 18px; }
.form-msg.is-error { color: var(--bad); }

/* First-run checklist on Home. */
.setup-steps { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }

/* Caller cockpit: identity block above the fold. */
.fx-who { display: flex; flex-direction: column; gap: var(--s2); }

/* Caller Today: the two mutually exclusive views. */
.summary-view { display: flex; flex-direction: column; gap: var(--s5); }
.queue-upcoming { font-size: 12.5px; color: var(--ink-muted); }
.verify-research-links { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Top bar */
.topbar-add { flex: none; }
.health-text { font-size: 12px; color: var(--ink-muted); }