/* ABC — dark console theme, matched to URL and Billing Buddy so the suite reads
   as one product. Status is never colour-alone: every use pairs a dot or icon
   with a text word. */

:root {
  --bg: #0b0d11;
  --panel: #12141a;
  --panel-2: #171a22;
  --panel-3: #1d212b;
  --border: #232734;
  --text: #e7eaf0;
  --muted: #8b93a7;
  --chip-text: #bcc4d4;
  --faint: #5c6374;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, .16);
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #ef4444;
  --unknown: #6b7280;
  --radius: 8px;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", Consolas, monospace;

  /* One source of truth for the sidebar width: the topbar's company cluster is
     sized from it too, so "ABC" starts exactly on the sidebar divider and the
     two can't drift apart when one is adjusted. */
  --sidebar-w: 262px;
  /* Height of the fixed command bar. The main pane pads its bottom by this much
     so the last row of a table is never stranded underneath it. */
  --cmdbar-h: 92px;
}

/* Light theme — dark is the default; the toggle is in ⚙ Settings and the choice
   is remembered per browser. */
:root[data-theme="light"] {
  --bg: #eef1f5;  --panel: #ffffff;  --panel-2: #f6f8fa;  --panel-3: #e9edf2;
  --border: #d5dae2; --text: #1b2330; --muted: #5b6472; --chip-text: #3d4757;
  --faint: #7c8595; --accent-soft: rgba(37, 99, 235, .12);
  --good: #047857; --warn: #b45309; --bad: #dc2626;
}
/* the surfaces that pin a dark hex rather than a variable */
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .sidebar { background: #ffffff; }
:root[data-theme="light"] a { color: #1d4ed8; }
:root[data-theme="light"] .logo-word b { color: #0078d4; }
:root[data-theme="light"] .tree-row.selected { color: #1d4ed8; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c3cad6; }

/* The rest of the light-theme surfaces. Dark is the default everywhere, so any
   rule below that pins a dark literal needs its counterpart here or the light
   theme develops holes — a panel that stayed near-black under a white page is
   the failure mode, and it only ever shows up on the one screen nobody opened. */
:root[data-theme="light"] .modal-backdrop { background: rgba(20, 28, 40, .42); }
:root[data-theme="light"] table.grid td { border-bottom-color: #e6eaf0; }
:root[data-theme="light"] .toast.err { color: #b91c1c; }
:root[data-theme="light"] .tree-badge.quiet { color: #6b7482; }
:root[data-theme="light"] .banner code,
:root[data-theme="light"] .card-body code { background: rgba(0, 0, 0, .06); }
:root[data-theme="light"] .op-kind { background: #e4ecfb; }
:root[data-theme="light"] .src-chip { background: #f2f5f9; }
:root[data-theme="light"] .fact-win { background: rgba(37, 99, 235, .07); }
:root[data-theme="light"] .prov-rail { background: var(--panel-2); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  /* Only .main and .tree scroll. The window itself never does — the command bar
     is fixed to the bottom and a scrolling body would slide it off. */
  overflow: hidden;
}
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
a { color: #60a5fa; text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.good { color: var(--good); }
.warn { color: var(--warn); }
.bad  { color: var(--bad); }
.mono { font-family: var(--mono); font-size: 11.5px; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- top bar ---------- */
.topbar {
  height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: #0e1015;
  border-bottom: 1px solid var(--border);
}
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.clock {
  font-size: 12.5px; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.logo-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 8px 0 4px; flex-shrink: 0;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--text);
  transition: border-color .12s, background .12s;
}
.logo-btn:hover, .logo-btn.active { border-color: var(--border); background: var(--panel-2); }
/* The chalkboard still, framed like a title card. 1.6:1 to match the source so
   the lettering is never squashed; object-position lifts the crop off centre so
   the chalk lettering stays in frame at this size. */
.logo-mark {
  width: 58px; height: 36px; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; background: #14251d;
  border: 1px solid rgba(196, 160, 106, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.logo-mark img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* The still and the wordmark are one lockup and sit tight together — the
   sidebar-width alignment the other apps use was for a company wordmark that no
   longer exists here, and padding "ABC" out to the divider just stranded it
   away from the image it belongs to. */
.logo-left {
  display: inline-flex; align-items: center; flex-shrink: 0;
  width: auto;
  transition: width .16s ease;
}
:root[data-sidebar="collapsed"] .logo-left { width: 0; overflow: hidden; }

/* The ABC lockup. Chalk white, matched to the lettering in the still it sits
   beside — the A/B/C on Blake's blackboard are white chalk, so the wordmark is
   too. Georgia because it ships on every Windows and Mac and the house style
   forbids webfonts. scaleX supplies the condensing Georgia has no width axis
   for; inline-block is what lets the transform take at all. */
.brand-name {
  font-family: Georgia, "Times New Roman", "Liberation Serif", serif;
  font-size: 26px; font-weight: 700; line-height: 1;
  letter-spacing: .5px; white-space: nowrap;
  display: inline-block; transform: scaleX(.84); transform-origin: left center;
  margin-right: -3px;
  color: #f4f2ec;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
:root[data-theme="light"] .brand-name {
  color: #1b2330; text-shadow: none;
}
/* The tagline is the product's whole thesis, so it stays on screen as long as
   there is room; it is the first thing to go when there isn't. */
.brand-tag {
  font-size: 11px; color: var(--faint); white-space: nowrap; line-height: 1;
  letter-spacing: .4px; padding-left: 10px; border-left: 1px solid var(--border);
}

/* Rotating quote between the lockup and the controls. basis 0, never auto: at
   its own content width a long quote would shove the button row off the bar
   instead of shrinking. */
  flex: 1 1 0; min-width: 0; padding: 0 16px;
  font-size: 11.5px; font-style: italic; color: var(--faint);
  /* Left, not centred: a centred line that overruns its box is clipped at the
     start as well as the end, so the opening words vanish. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Below this the controls need every pixel. */

.pill {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--chip-text);
  white-space: nowrap;
}
.pill-live { color: var(--good); background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .35); }
.pill-warn { color: var(--warn); background: rgba(251, 191, 36, .10); border-color: rgba(251, 191, 36, .35); }
.pill-off  { color: var(--bad);  background: rgba(239, 68, 68, .10); border-color: rgba(239, 68, 68, .40); }

/* ---------- buttons ---------- */
.btn {
  border-radius: 6px; padding: 6px 12px; font-size: 13px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
}
.btn:hover { background: var(--panel-3); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--panel-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-primary:disabled { background: var(--accent); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--panel-2); }
.btn-danger { color: var(--bad); border-color: rgba(239, 68, 68, .4); background: transparent; }
.btn-danger:hover { background: rgba(239, 68, 68, .1); }
.btn-sm { padding: 3px 9px; font-size: 12px; }
.btn-icon { padding: 6px 9px; font-size: 15px; line-height: 1; }
/* The topbar's Sources and Jobs buttons carry the current view, so they need a
   pressed state that survives .btn-ghost's transparent background. */
.btn.active { background: var(--panel-3); border-color: var(--accent); color: var(--text); }
/* A plain-text button that reads as a link — used inside banners and prose,
   where a bordered control would break the sentence. */
.lnk {
  border: none; background: none; padding: 0; font: inherit;
  color: inherit; text-decoration: underline; font-weight: 700;
}
.lnk:hover { opacity: .8; }

/* ---------- layout ---------- */
/* Full height below the topbar. The command bar is pinned over the main pane
   only, so the leads list runs all the way to the bottom of the window instead
   of stopping short of it. */
.layout { display: flex; height: calc(100vh - 48px); }

/* ---------- sidebar ---------- */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: #0e1015;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;                 /* clips the contents mid-collapse */
  transition: width .16s ease;
  /* Required, not tidying. A flex item's min-width defaults to `auto`, which
     resolves to its content's min-content size — and the min-width on .tree
     below pins that at the full sidebar width. Without this the panel refuses to
     go below 262px and the collapse silently does nothing. */
  min-width: 0;
}
/* The contents hold their laid-out width while the panel closes over them —
   without this the rows reflow and the names re-wrap on the way out. */
.sidebar-head, .tree { min-width: var(--sidebar-w); }
/* Width, not colour: a transparent border still occupies its px and leaves the
   panel 1px wide when closed.

   This is deliberately an override of the real `width` property rather than a
   shared `--sidebar-cur` custom property read by all three movers. Chromium will
   not restart a transition when the only thing that changed is a custom property
   on an ancestor: `width: var(--sidebar-cur)` keeps its old used value and the
   panel silently refuses to move. Overriding the real property in the cascade is
   an ordinary change the engine does animate. */
:root[data-sidebar="collapsed"] .sidebar { width: 0; border-right-width: 0; }
/* The icon's left band is the panel: solid while it's showing, hollow once it
   isn't, so the button reads at a glance without a label. */
.sb-panel { opacity: .5; transition: opacity .16s ease; }
:root[data-sidebar="collapsed"] .sb-panel { opacity: 0; }

/* The heading is fixed-width and the filter box absorbs whatever is left — that
   is what stops this row overflowing the sidebar at the narrow breakpoints. */
.sidebar-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 10px 8px;
}
.sidebar-title {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); flex-shrink: 0;
}
/* min-width:0 is what actually permits the shrink — a flex item will not go
   below its intrinsic minimum without it, and an <input> defaults to ~170px. */
.sidebar-head input {
  flex: 1 1 auto; width: auto; min-width: 0;
  padding: 3px 8px; font-size: 12px; -webkit-appearance: none; appearance: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: 5px; color: var(--text);
}
.sidebar-head input:focus { outline: none; border-color: var(--accent); }
.sidebar-head input::-webkit-search-cancel-button { -webkit-appearance: none; }

.tree { overflow-y: auto; flex: 1; padding-bottom: 20px; }

/* "ALL LEADS" — sits above the industries and reads as a way out, not as a
   lead, so it gets the muted-caps treatment and a rule beneath it. */
.tree-home {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 10px 7px 12px; cursor: pointer; user-select: none;
  background: transparent; border: none; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.tree-home:hover { background: var(--panel); color: var(--text); }
.tree-home.selected { background: var(--accent-soft); color: #93b8f8; }
.tree-home .tree-count { letter-spacing: 0; }

/* A node is caret + row: two separate click targets in one flex line, so the
   caret can toggle without selecting and the row can select without toggling. */
.tree-node { display: flex; align-items: center; }
.tree-caret {
  width: 18px; flex-shrink: 0; align-self: stretch;
  background: transparent; border: none; color: var(--faint);
  font-size: 9px; line-height: 1; padding: 0; text-align: center;
}
.tree-caret:hover { color: var(--text); }
.tree-caret.blank { cursor: default; visibility: hidden; }
.tree-row {
  display: flex; align-items: center; gap: 7px;
  flex: 1; min-width: 0;
  padding: 6px 10px 6px 4px; cursor: pointer; user-select: none;
  font-size: 13px; color: var(--text);
  background: transparent; border: none; text-align: left;
}
.tree-row:hover { background: var(--panel); }
.tree-row.selected { background: var(--accent-soft); color: #93b8f8; }
.tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count {
  font-size: 11px; color: var(--faint); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.tree-row.selected .tree-count { color: inherit; opacity: .8; }
/* Indentation is on the node so the caret column steps in with the row. */
.lvl-industry { padding-left: 4px; }
.lvl-industry .tree-name { font-weight: 600; }
/* Discipline sits between industry and firm. Styled as a quiet divider rather
   than a peer of the firm rows — it is a grouping label, not something you
   navigate to, so it reads as structure and never competes with a real lead. */
.lvl-discipline { padding-left: 14px; }
.lvl-discipline .tree-row {
  font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--muted); padding-top: 5px; padding-bottom: 3px;
}
.lvl-discipline .tree-count { letter-spacing: 0; }
.lvl-firm   { padding-left: 30px; }
.lvl-firm   .tree-row { font-size: 12.5px; }
.lvl-person { padding-left: 46px; }
.lvl-person .tree-row { font-size: 12.5px; padding-top: 4px; padding-bottom: 4px; color: var(--chip-text); }
.tree-role { font-size: 10.5px; color: var(--faint); flex-shrink: 0; }
.tree-row.selected .tree-role { color: inherit; opacity: .75; }

/* ---------- call list ---------- */

/* The score is the first thing read on the page, so it gets size and weight the
   rest of the table does not. Three bands, never colour alone — the number is
   always present and is the real signal; the tint only groups it at a glance. */
.call-list .score {
  display: inline-block; min-width: 30px; text-align: center;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border);
}
.call-list .score.hot  { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.call-list .score.warm { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.call-list .score.cool { color: var(--muted); }

.call-list td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
/* Keep the nine columns readable instead of letting them squeeze to nothing on a
   narrow screen; below this width the .table-wrap scrolls horizontally rather
   than clipping cell content (the panel is overflow-x:hidden). */
.call-list { min-width: 1080px; }
.call-list .cl-why { min-width: 190px; }
.call-list .cl-stack { min-width: 132px; }
.cl-name { font-weight: 600; }
.cl-sub  { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
/* The reason is the product. Given room to be a sentence rather than truncated
   into a code, because a rep reads it aloud. */
.cl-why  { max-width: 520px; line-height: 1.45; color: var(--chip-text); }

/* Report: campaigns by finding. Reuses the call-list score/name/why tokens; adds
   only the group-card grid that sits above the firm list. Each card is a campaign
   the rep can click to filter the list to just its members. */
.report-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}
.group-card {
  display: flex; flex-direction: column; gap: 6px;
  text-align: left; cursor: pointer;
  padding: 12px 13px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text);
  transition: border-color .12s ease, background .12s ease;
}
.group-card:hover { border-color: var(--accent); }
.group-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.group-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.group-count { font-size: 22px; font-weight: 700; line-height: 1; }
.group-label { font-weight: 600; font-size: 13px; line-height: 1.3; }
.group-why { font-size: 11px; color: var(--faint); line-height: 1.4; }
.report-list td { vertical-align: top; }

.chip-btn {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--chip-text);
}
.chip-btn:hover { border-color: var(--accent); }
.chip-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }

.tree-badge {
  min-width: 18px; height: 17px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 10.5px; font-weight: 700; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  background: rgba(251, 191, 36, .14); color: var(--warn); border: 1px solid rgba(251, 191, 36, .32);
}
.tree-badge.quiet { background: var(--panel-3); color: var(--faint); border-color: var(--border); }
.tree-badge.alarm { background: rgba(239, 68, 68, .12); color: var(--bad); border-color: rgba(239, 68, 68, .35); }
/* The gap marker on a firm row. A dot alone would be colour-only, so it always
   carries a title naming the empty slots and the count badge sits beside it. */
.tree-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--warn); box-shadow: 0 0 0 2px rgba(251, 191, 36, .18);
}
.tree-empty { color: var(--faint); font-size: 12.5px; padding: 14px 12px; line-height: 1.5; }
.tree-loading { color: var(--faint); font-size: 11.5px; padding: 4px 12px 4px 40px; font-style: italic; }

/* ---------- main ---------- */
/* The bottom padding is what keeps content clear of the fixed command bar. */
.main { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 18px calc(var(--cmdbar-h) + 24px); }

/* Carries no box of its own — every view supplies its own panels — but it is
   what the command-bar cards are prepended into and what .main scrolls, so it
   stays named in the sheet rather than being an anonymous section. */
.content { display: block; min-width: 0; }

.banner {
  border-radius: 8px; padding: 9px 14px; margin-bottom: 12px;
  font-size: 13px; line-height: 1.55;
  background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .45); color: var(--warn);
}
.banner b { font-weight: 700; }
.banner + .banner { margin-top: -4px; }
.banner code { font-family: var(--mono); font-size: 12px; background: rgba(0, 0, 0, .25); padding: 1px 5px; border-radius: 4px; }
.banner-info { background: var(--accent-soft); border-color: rgba(37, 99, 235, .45); color: var(--chip-text); }
.banner-bad  { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .45); color: #fca5a5; }
:root[data-theme="light"] .banner-bad { color: #b91c1c; }

.page-head { margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.page-crumb { font-size: 11.5px; color: var(--faint); margin-bottom: 3px; }
.page-crumb .lnk { font-weight: 400; text-decoration: none; }
.page-crumb .lnk:hover { text-decoration: underline; }
.page-title { font-size: 21px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.55; }
.page-actions { display: flex; gap: 6px; flex-shrink: 0; padding-top: 3px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- stat tiles ---------- */
.tiles { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); margin-bottom: 16px; }
.tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 11px 13px; text-align: left; font: inherit; color: var(--text);
}
button.tile { cursor: pointer; }
button.tile:hover { background: var(--panel-2); border-color: var(--faint); }
.tile-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.tile-value { font-size: 22px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile-note { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.tile-value.up { color: var(--good); }
.tile-value.down { color: var(--bad); }
.tile-value.attn { color: var(--warn); }

/* Industry cards on the home view: count, people, and how much of the role
   grid is actually filled. The coverage bar is the number that matters — a
   thousand firms with no named IT Director is not a pipeline. */
.ind-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); margin-bottom: 16px; }
.ind-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
}
.ind-card:hover { background: var(--panel-2); border-color: var(--faint); }
.ind-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ind-card-name { font-size: 14.5px; font-weight: 700; }
.ind-card-slug { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.ind-card-nums { display: flex; gap: 16px; margin: 9px 0 10px; }
.ind-num { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.ind-num-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ind-card-full { font-size: 11.5px; color: var(--faint); margin-top: 2px; line-height: 1.45; }

.cov { display: flex; align-items: center; gap: 8px; }
.cov-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--panel-3); overflow: hidden; min-width: 40px; }
.cov-fill { height: 100%; background: var(--accent); }
.cov-fill.low { background: var(--bad); }
.cov-fill.mid { background: var(--warn); }
.cov-fill.high { background: var(--good); }
.cov-text { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Scope, in Settings. A county's rule is a name, a coverage word and the ZIP
   prefixes it resolves to — the last of which is 16 tokens for Los Angeles, so
   it wraps as its own band rather than being squeezed into a grid cell. */
.scope-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.scope-row:last-of-type { border-bottom: none; }
.scope-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.zip-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.zip-list span {
  font-family: var(--mono); font-size: 10.5px; color: var(--chip-text);
  background: var(--panel-3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}

.cov-grid { display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 8px; }
.cov-row { display: grid; grid-template-columns: 118px 1fr auto; gap: 9px; align-items: center; font-size: 11.5px; }
.cov-row .r-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-row.critical .r-label { color: var(--text); font-weight: 600; }

/* ---------- panels and tables ---------- */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.panel-head h3 { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.panel-head .note { font-size: 11.5px; color: var(--faint); font-weight: 400; letter-spacing: 0; text-transform: none; }
.panel-head-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.panel-body { padding: 12px 14px; }
.panel-body > :last-child { margin-bottom: 0; }

/* Wide tables scroll inside their own box rather than widening the page — the
   only mechanism keeping the desktop layout intact at 1152px. */
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.grid th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--muted); padding: 8px 11px; border-bottom: 1px solid var(--border);
  background: var(--panel-2); white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
table.grid th.sortable { cursor: pointer; user-select: none; }
table.grid th.sortable:hover { color: var(--text); }
table.grid th.sorted { color: var(--text); }
.sort-arrow { margin-left: 4px; font-size: 9px; opacity: .3; }
th.sorted .sort-arrow { opacity: 1; color: var(--accent); }
table.grid td { padding: 7px 11px; border-bottom: 1px solid rgba(35, 39, 52, .6); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover { background: var(--panel-2); }
table.grid td.r, table.grid th.r { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.num { font-variant-numeric: tabular-nums; }
table.grid tr.clickable { cursor: pointer; }
table.grid tr.dim td { color: var(--faint); }
/* Selection in a table is a left edge, not a fill: the row keeps its hover and
   the eye still tracks the column it was reading. */
table.grid tr.row-selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
table.grid tr.row-empty td { color: var(--faint); }
.cell-strong { font-weight: 600; color: var(--text); }
.cell-sub { font-size: 11px; color: var(--faint); margin-top: 2px; }
table.firms { min-width: 940px; }
table.people { min-width: 880px; }
table.jobs  { min-width: 860px; }
table.sources { min-width: 900px; }

/* ---------- chips and badges ---------- */
.chip {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--panel-3); color: var(--muted);
}
.chip-ok      { color: var(--good); background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .3); }
.chip-info    { color: #93b8f8; background: var(--accent-soft); border-color: rgba(37, 99, 235, .45); }
.chip-warn    { color: var(--warn); background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .38); }
.chip-bad     { color: var(--bad); background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .45); }
.chip-quiet   { color: var(--faint); }
.chip-empty   { color: var(--warn); background: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .3); }
/* Source tiers. Confidence is a number, but the tier is what a person reasons
   about — a registry beats a scraped about-page and the chip should say so. */
.chip-human      { color: var(--good); background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .3); }
.chip-registry   { color: #93b8f8; background: var(--accent-soft); border-color: rgba(37, 99, 235, .4); }
.chip-firstparty { color: var(--chip-text); }
.chip-inferred   { color: var(--warn); background: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .3); }
.chip-vendor     { color: var(--muted); }

/* Email confidence. `✓` found at source, `~` pattern-guessed — never colour
   alone, and the glyph carries a title spelling out which it is. */
.mail-ok { color: var(--good); font-weight: 700; }
.mail-guess { color: var(--warn); font-weight: 700; cursor: help; }
.mail-none { color: var(--faint); }

/* ---------- key/value detail blocks ---------- */
.detail-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.kv-list { display: block; }
.kv {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0 14px;
  font-size: 13px; padding: 6px 0; border-bottom: 1px solid rgba(35, 39, 52, .55);
  align-items: baseline;
}
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); font-size: 11.5px; }
.kv .v { font-weight: 500; word-break: break-word; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.kv .v.empty { color: var(--faint); font-weight: 400; }

/* ---------- the provenance rail ---------- */
/* Deliberately quiet. Provenance should be always visible and never loud: it is
   what makes "sources of truth" a fact of the UI rather than a column somebody
   has to go looking for. */
.src-chip {
  font-size: 10px; padding: 1px 6px; border-radius: 999px;
  background: var(--panel-3); color: var(--faint); border: 1px solid var(--border);
  cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
.src-chip:hover { color: var(--text); border-color: var(--faint); }
.src-chip.human { color: var(--good); border-color: rgba(52, 211, 153, .3); }
.src-chip.stale { color: var(--warn); border-color: rgba(251, 191, 36, .3); }
.src-chip.none { cursor: default; opacity: .6; }

.prov-rail {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; position: sticky; top: 0;
}
.prov-head {
  padding: 10px 13px; border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}
.prov-body { padding: 6px 0; max-height: calc(100vh - 300px); overflow-y: auto; }
.prov-item {
  display: block; width: 100%; text-align: left; font: inherit;
  background: transparent; border: none; border-left: 2px solid transparent;
  padding: 7px 13px; cursor: pointer;
}
.prov-item:hover { background: var(--panel-2); border-left-color: var(--accent); }
.prov-field { font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.prov-val { font-size: 12.5px; color: var(--text); margin-top: 2px; word-break: break-word; }
.prov-meta { font-size: 10.5px; color: var(--faint); margin-top: 3px; font-variant-numeric: tabular-nums; }
.prov-empty { padding: 14px 13px; font-size: 12px; color: var(--faint); line-height: 1.5; }
.prov-conf { font-variant-numeric: tabular-nums; }

/* Fact history: every competing assertion for one field, newest first. */
.fact-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: start;
}
.fact-row:last-child { border-bottom: none; }
.fact-mark { font-size: 12px; line-height: 1.4; text-align: center; }
.fact-win { background: rgba(37, 99, 235, .09); border-radius: 6px; padding: 9px 8px; margin: 0 -8px; }
.fact-value { font-size: 13px; word-break: break-word; }
.fact-value.dead { text-decoration: line-through; color: var(--faint); }
.fact-meta { font-size: 11px; color: var(--faint); margin-top: 3px; line-height: 1.5; }
.fact-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---------- source-of-truth list ---------- */
.sot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.sot-row { display: contents; }
.sot-name { font-size: 12.5px; font-weight: 600; }
.sot-sub { font-size: 11px; color: var(--faint); margin-top: 2px; word-break: break-all; }

/* ---------- cards (command bar plans) ---------- */
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; overflow: hidden;
}
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 11px 14px 9px;
}
.card-body { padding: 0 14px 12px; font-size: 13px; line-height: 1.62; }
.card-body > :first-child { margin-top: 0; }
.card-body > :last-child { margin-bottom: 0; }
.card-body h2 { font-size: 14px; margin: 14px 0 6px; }
.card-body h3 { font-size: 13px; margin: 12px 0 5px; color: var(--muted); }
.card-body h4 { font-size: 12.5px; margin: 12px 0 5px; color: var(--muted); }
.card-body p { margin: 8px 0; }
.card-body ul, .card-body ol { margin: 8px 0; padding-left: 20px; }
.card-body li { margin: 3px 0; }
.card-body code { font-family: var(--mono); font-size: 12px; background: var(--panel-3); padding: 1px 5px; border-radius: 4px; }
.card-body pre {
  background: var(--panel-3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; overflow-x: auto; margin: 10px 0;
}
.card-body pre code { background: none; padding: 0; }
.card-body table { border-collapse: collapse; margin: 10px 0; font-size: 12px; }
.card-body th, .card-body td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; }
.card-body th { background: var(--panel-3); font-weight: 600; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--border); background: var(--panel-2);
}
.card-meta { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
/* The plan card is the one place the app is about to change data, so it gets the
   only accent edge in the sheet. */
.card.plan { border-left: 2px solid var(--accent); }
.card.plan-view { border-left-color: var(--good); }
.card.plan-feature { border-left-color: var(--warn); }
.card.plan-error { border-left-color: var(--bad); }
.cmd-q { font-size: 13px; font-weight: 600; color: var(--text); display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.cmd-q .q-mark { color: var(--accent); flex-shrink: 0; }
.cmd-q span { overflow-wrap: anywhere; }

/* Operations are a numbered manifest, not prose. Somebody is about to press
   Apply on them, so each one states its kind, its target and its change. */
.ops { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--border); }
.op {
  display: grid; grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(35, 39, 52, .55); align-items: start;
}
.op:last-child { border-bottom: none; }
.op-kind {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .3px;
  background: var(--panel-3); border-radius: 4px; padding: 2px 6px; color: var(--chip-text);
  justify-self: start; white-space: nowrap;
}
.op-desc { font-size: 12.5px; line-height: 1.5; word-break: break-word; }
.op-detail { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.op-result { font-size: 11.5px; margin-top: 3px; }
.warn-list { margin: 10px 0 0; padding: 9px 12px; border-radius: 6px;
  background: rgba(251, 191, 36, .09); border: 1px solid rgba(251, 191, 36, .35); }
.warn-list li { font-size: 12px; color: var(--warn); line-height: 1.5; margin-left: 16px; }

/* Three dots that fade in sequence while the model is thinking. */
.thinking { display: inline-flex; gap: 4px; align-items: center; }
.thinking i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: blip 1.2s infinite ease-in-out;
}
.thinking i:nth-child(2) { animation-delay: .18s; }
.thinking i:nth-child(3) { animation-delay: .36s; }
@keyframes blip { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }

.empty-state { color: var(--muted); font-size: 13px; padding: 26px 4px; text-align: center; line-height: 1.65; }
.empty-state b { color: var(--text); }

/* ---------- filter strip ---------- */
.filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.filter-label { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

/* ---------- settings / chip buttons ---------- */
.set-section {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 8px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.set-section:first-of-type { border-top: none; padding-top: 0; margin-top: 4px; }
/* Tab strips reflow to two rows rather than overflowing — one of the three
   mechanisms that keeps the desktop layout intact at the narrow widths. */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn {
  padding: 5px 12px; font-size: 12.5px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel); color: var(--chip-text);
}
.chip-btn:hover { color: var(--text); }
.chip-btn:disabled { opacity: .45; cursor: not-allowed; }
a.chip-btn { display: inline-block; text-decoration: none; }
a.chip-btn:hover { text-decoration: none; }
.chip-btn.active { background: var(--panel-3); color: var(--text); font-weight: 600; border-color: var(--accent); }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(4, 6, 10, .72);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 62px; z-index: 50;
  overflow-y: auto;
}
.modal {
  width: 560px; max-width: 94vw; margin-bottom: 40px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 18px 20px;
}
.modal-wide { width: 820px; }
.modal h2 { font-size: 15px; margin-bottom: 4px; }
.modal .modal-sub { font-size: 12px; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
.modal label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; letter-spacing: .3px; }
.frow { margin-bottom: 12px; }
.mrow { display: flex; gap: 10px; }
.mrow > * { flex: 1; min-width: 0; }
.modal input[type=text], .modal input[type=number], .modal input[type=email],
.modal input[type=url], .modal select, .modal textarea {
  width: 100%; padding: 7px 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px; color: var(--text);
}
.modal textarea { resize: vertical; min-height: 110px; font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.modal input:focus, .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; align-items: center; }
.modal-actions .spacer { flex: 1; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; cursor: pointer; color: var(--text); }
.chk input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.hint-text { font-size: 11.5px; color: var(--faint); margin-top: 5px; line-height: 1.5; }
/* .bad is declared far earlier in the sheet and loses to .hint-text on equal
   specificity, so the error line under an import has to say so again here. */
.hint-text.bad { color: var(--bad); }
.hint-text code { font-family: var(--mono); font-size: 11px; background: var(--panel-3); padding: 1px 5px; border-radius: 4px; }
.pre {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; overflow-x: auto; white-space: pre; color: var(--chip-text);
  max-height: 340px; overflow-y: auto;
}
.modal-scroll { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }

/* ---------- toast ---------- */
/* Sits above the command bar rather than on top of it — a toast covering the box
   you just typed into is the one place it must never land. */
.toast {
  position: fixed; bottom: calc(var(--cmdbar-h) + 16px); left: 50%; transform: translateX(-50%);
  background: var(--panel-3); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 16px; font-size: 13px; z-index: 99; max-width: 70vw;
}
.toast.err { border-color: rgba(239, 68, 68, .5); color: #fca5a5; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #262b38; border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- responsive ----------
   Four queries, and none of them targets 1536/1366/1317/1152 — the desktop
   layout survives those widths on its own through a fixed sidebar plus flex:1
   main, .chips wrapping, and .table-wrap scrolling its own overflow. What these
   do is stop the TOP BAR overflowing, which is the only thing that can scroll
   the whole page sideways. */
@media (max-width: 1100px) {
  :root { --sidebar-w: 212px; }
  .brand-tag { display: none; }
  .detail-cols { grid-template-columns: minmax(0, 1fr); }
  .prov-rail { position: static; }
  .prov-body { max-height: none; }
}
@media (max-width: 980px) {
  .logo-word { display: none; }
  .logo-left { width: auto; }
  .clock { display: none; }
}
@media (max-width: 760px) {
  .chips { flex-wrap: wrap; }
  .page-head { flex-direction: column; }
  .page-actions { justify-content: flex-start; }
  .ind-grid { grid-template-columns: minmax(0, 1fr); }
  .op { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}
@media (max-width: 640px) {
  .brand-name { font-size: 16px; }
  #scopeBadge { display: none; }
  :root { --sidebar-w: 168px; }
  .main { padding: 12px 12px calc(var(--cmdbar-h) + 20px); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .thinking i { opacity: .6; }
}

/* ---------- command bar ---------- */
/* Spans the main pane, not the window: it starts where the leads list ends and
   runs to the right edge of the screen. Its inner padding matches .main's, so
   the box lines up with the content above it on both sides.

   min-height rather than height: the textarea grows to 120px and a hard 92px
   would clip it mid-sentence. The bar grows upward from bottom:0, and .main's
   padding is still computed off the resting height because that is the height it
   spends all but a few seconds at. */
.cmdbar {
  position: fixed; left: var(--sidebar-w); right: 0; bottom: 0; min-height: var(--cmdbar-h);
  background: var(--panel); border-top: 1px solid var(--border);
  display: flex; align-items: center; z-index: 40;
  transition: left .16s ease;
}
:root[data-sidebar="collapsed"] .cmdbar { left: 0; }
/* OFF is the default (Scott, 2026-10-02): the bar is an opt-in in Settings.
   --cmdbar-h is the strip .main reserves at its foot for the bar, so zeroing it
   here is the difference between hiding the box and actually getting the space
   back — hiding alone leaves a dead 92px band under every page. */
:root[data-cmdbar="off"] .cmdbar { display: none; }
:root[data-cmdbar="off"] { --cmdbar-h: 0px; }
.cmdbar-inner { width: 100%; padding: 11px 18px; }
/* Matches .main's padding at the narrow breakpoint, and lives HERE rather than
   up in the media-query block with the .main rule: this section is further down
   the file, so a 12px override written up there loses to the 18px above on equal
   specificity and the box quietly stops lining up with the content. */
@media (max-width: 640px) { .cmdbar-inner { padding: 11px 12px; } }

/* What the command will act on, taken from the current view — so it is obvious
   before pressing Enter that "add a person" means this firm and not some other. */
.cmd-scope {
  font-size: 11px; color: var(--faint); margin-bottom: 5px; min-height: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmd-scope b { color: var(--muted); font-weight: 600; }
.cmd-scope code { font-family: var(--mono); font-size: 10.5px; background: var(--panel-3); padding: 1px 5px; border-radius: 4px; }

.cmd-row { display: flex; gap: 8px; align-items: flex-end; }
#cmdBox {
  flex: 1; resize: none; min-height: 34px; max-height: 120px;
  padding: 7px 10px; font: inherit; font-size: 13px; line-height: 1.4;
  color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--radius);
}
#cmdBox:focus { outline: none; border-color: var(--accent); background: var(--panel-3); }
#cmdBox:disabled { opacity: .55; cursor: not-allowed; }
#btnRun { min-width: 74px; height: 34px; }
.cmd-hint { font-size: 11px; color: var(--faint); margin-top: 5px; min-height: 13px; }

/* ============================== outbound / campaigns ============================== */

/* The send-gate banner. gate-off is the resting state — muted, not alarming,
   because a shut gate is the correct default until the domain is bought. */
.panel.gate-off { border-left: 3px solid var(--warn); }
.panel.gate-on { border-left: 3px solid var(--good); }
.gate-missing { margin: 6px 0 2px; padding-left: 18px; }
.gate-missing li { font-size: 12px; color: var(--muted); font-family: var(--mono); margin: 2px 0; }

/* Build stats */
.stat-row { display: flex; align-items: baseline; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.stat-big { font-size: 22px; font-weight: 700; color: var(--text); }
.stat-row .dim { margin-right: 14px; }
.skip-samples { margin-top: 6px; }
.skip-samples summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.skip-samples ul { margin: 6px 0 0; padding-left: 18px; }
.skip-samples li { font-size: 12px; color: var(--muted); margin: 2px 0; }

/* Rendered-template preview, in the detail pane and the message modal */
.tpl-preview {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; margin-top: 4px;
}
.tpl-subj { font-size: 13px; margin-bottom: 8px; color: var(--text); }
.tpl-body {
  font-family: var(--font); font-size: 13px; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; word-break: break-word; margin: 0;
}

/* Checkbox chips in the campaign form (roles, flags) */
label.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); margin: 2px 10px 2px 0; cursor: pointer; }
label.chk input { accent-color: var(--accent); }

/* The role/token hint code chips already inherit .hint-text code styling. */
textarea.mono { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; }

/* ============================== clients tab ============================== */

/* The visual break between the lead verticals and CLIENTS in the call-list
   scope bar — Scott wanted them read as separate, not as one more vertical. */
.scope-sep { color: var(--faint); font-weight: 700; letter-spacing: -1px; margin: 0 4px; user-select: none; align-self: center; }
.chip-btn.chip-clients { border-color: var(--accent-soft); color: var(--muted); font-weight: 600; letter-spacing: .3px; }
.chip-btn.chip-clients.on { background: var(--accent); color: var(--chip-text); border-color: var(--accent); }

/* ============================== sortable call-list headers ============================== */
.grid th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.grid th.sortable:hover { color: var(--text); }
.grid th.sortable.sorted { color: var(--accent); }

/* ============================== weather (top bar) ============================== */
.weather {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums;
  cursor: default;
}
.wx-icon { flex-shrink: 0; }
.wx-now { color: var(--text); font-weight: 600; }
.wx-hilo { color: var(--muted); font-size: 11.5px; }
@media (max-width: 1080px) { .wx-hilo { display: none; } }

/* ============================== google ads planner ============================== */
.ad-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .ad-cols { grid-template-columns: 1fr; } }
.ad-col-h { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--faint); margin-bottom: 4px; }
.ad-kw { font-size: 12.5px; color: var(--text); padding: 2px 0; font-family: var(--mono); }
.ad-line { font-size: 13px; color: var(--text); padding: 3px 8px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; margin: 3px 0; }

/* ============================== resizable split + quote alignment ============================== */

/* Draggable divider between the leads list and the content pane (mirrors Optimus).
   A 5px bar with a wider invisible hit area; it drives --sidebar-w. */
.splitter {
  flex: 0 0 5px; align-self: stretch; position: relative; z-index: 3;
  cursor: col-resize; background: transparent; transition: background .12s;
}
.splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px; }
.splitter:hover, .splitter:focus-visible { background: var(--accent); outline: none; }
:root[data-sidebar="collapsed"] .splitter { display: none; }

/* While dragging: global col-resize cursor, no text selection, and the sidebar's
   open/close transition suspended so the drag tracks the pointer 1:1. */
body.dragging { cursor: col-resize; user-select: none; }
body.dragging .sidebar, body.dragging .logo-btn, body.dragging .cmdbar { transition: none; }

/* Quote starts at the split line: the home/brand block spans the leads-list
   column, so the rotating quote begins over the content pane — the lockup URL,
   Research and Optimus use. Width tracks --sidebar-w, so it follows the divider. */
.logo-btn {
  width: calc(var(--sidebar-w) - 14px); box-sizing: border-box; justify-content: flex-start;
  transition: width .16s ease, border-color .12s, background .12s;
}
:root[data-sidebar="collapsed"] .logo-btn { width: auto; }
/* Below the quote's hide breakpoint a wide empty home button looks odd — let it
   shrink to the lockup. */
@media (max-width: 1180px) { .logo-btn { width: auto; } }

/* ============================== tech-stack chips + signals panel ============================== */
.cl-stack { white-space: normal; }
.stack-row { display: flex; flex-wrap: wrap; gap: 4px; }
.sc { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; border: 1px solid var(--border); color: var(--muted); background: var(--panel-2); }
.sc-mail { border-color: var(--accent-soft); color: var(--text); }
.sc-gw { border-color: var(--warn); color: var(--warn); }
.sc-egnyte { border-color: var(--good); color: var(--good); }
.sc-exp { border-color: var(--bad); color: var(--bad); }

.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; }
@media (max-width: 760px) { .sig-grid { grid-template-columns: 1fr; } }
.sig-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--panel-3); font-size: 12.5px; }
.sig-k { color: var(--muted); }
.sig-v { color: var(--text); }
.sig-ok { color: var(--good); font-weight: 600; }
.sig-bad { color: var(--bad); font-weight: 600; }
.sig-flag { color: var(--warn); font-weight: 600; }

/* sub-industry (discipline) firm count in the page title */
.page-title .page-count { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 8px; }
.tree-discipline { cursor: pointer; }

/* State nodes sit at the same indent as the sub-types, so they have to read as
   a different KIND of thing or "TEXAS" looks like another sub-type of
   developer. The sub-type rows are a quiet uppercase divider; a state is a
   place you navigate TO, so it gets sentence case, the normal text colour and a
   marker bar down its left edge. */
.lvl-discipline .tree-row.tree-state {
  cursor: pointer; text-transform: none; font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em; color: var(--text); padding-top: 3px; padding-bottom: 3px;
  border-left: 2px solid var(--accent); padding-left: 6px; border-radius: 0 6px 6px 0;
}
.lvl-discipline .tree-row.tree-state .tree-count { color: var(--muted); letter-spacing: 0; }

/* MX Records rows in the Identity panel: priority + host, monospace host */
.kv .mx-row { display: flex; gap: 8px; align-items: baseline; }
.kv .mx-pri { min-width: 24px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.kv .mx-host { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

/* Email Compliance verdict on the vertical firm table */
.comp-ok  { color: var(--good); font-weight: 600; }
.comp-bad { color: var(--bad); }
.comp-na  { color: var(--muted); }
/* widened table: 12 columns; scroll rather than squeeze */
table.grid.firms { min-width: 1240px; }