/* Energin Outbound AI console. Self-hosted assets only (strict CSP). */

/* Energin brand (Figma "Energin (Rebrand)" brand guidelines, Oct 2026).
   Primary: Navy #3E4B60, Blue Grey #97A9AA, Bright Yellow #FFDD51.
   Secondary: Orange #F19937, Teal #8AD1D1, Pale Yellow #F9EAB9, Pale Sand #F2E9D9, Pale Blue #E5F8F9.
   Web only: Danger #C72426, Success #209898, Neutral #DDDDDD.
   Text on light backgrounds uses darker shades of Blue Grey, Success and Orange where the brand value is below
   WCAG AA contrast (4.5:1) for small text; the brand values stay for fills, dots and large type. */
:root {
  --navy: #3E4B60; --blue-grey: #97A9AA; --yellow: #FFDD51;
  --orange: #F19937; --teal: #8AD1D1; --pale-yellow: #F9EAB9; --pale-sand: #F2E9D9; --pale-blue: #E5F8F9;
  --danger-brand: #C72426; --success-brand: #209898; --neutral-brand: #DDDDDD;

  --bg: #FFFEFC;
  --surface: #ffffff;
  --surface-2: #F2F7F7;
  --text: var(--navy);
  --muted: #5E6F71;            /* Blue Grey darkened to 5:1 */
  --border: var(--neutral-brand);
  --brand: var(--navy);
  --brand-strong: #2F3A4B;
  --brand-ink: #ffffff;
  --accent: var(--yellow);
  --accent-ink: var(--navy);
  --link: var(--navy);
  --topbar-bg: var(--navy); --topbar-fg: var(--pale-blue); --topbar-muted: #C9D6D7;
  --ok-bg: #DDF1F1; --ok-fg: #146B6B;
  --info-bg: var(--pale-blue); --info-fg: var(--navy);
  --warn-bg: var(--pale-yellow); --warn-fg: #6B4A00;
  --bad-bg: #F8E1E1; --bad-fg: #9E1C1E;
  --neutral-bg: #EEF2F2; --neutral-fg: var(--navy);
  --hot-bg: #FCE3CC; --hot-fg: #8A3F00; --hot-dot: var(--orange);
  --warm-bg: #FFF4C4; --warm-fg: #6B4A00; --warm-dot: var(--yellow);
  --cold-bg: var(--pale-blue); --cold-fg: #3F5759; --cold-dot: var(--blue-grey);
  --danger: var(--danger-brand);
  --focus: var(--success-brand);
  --radius: 8px;
  --shadow: 0 1px 2px rgba(62, 75, 96, 0.08);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Brand typefaces are At Aero (primary) and Aeonik Pro (secondary); they are licensed and not bundled yet, so the
     console falls back to the system sans-serif until Energin supplies web font files. */
  --font: "At Aero", "Aeonik Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #222A36;
    --surface: #2C3544;
    --surface-2: #354052;
    --text: #FFFEFC;
    --muted: #B9C7C8;
    --border: #46526A;
    --brand: var(--yellow);
    --brand-strong: #FFE680;
    --brand-ink: var(--navy);
    --link: var(--teal);
    --topbar-bg: #1B222C; --topbar-fg: var(--pale-blue); --topbar-muted: #B9C7C8;
    --ok-bg: #133B3B; --ok-fg: #8AD1D1;
    --info-bg: #2A3D49; --info-fg: var(--pale-blue);
    --warn-bg: #3F3416; --warn-fg: var(--pale-yellow);
    --bad-bg: #4A1E22; --bad-fg: #F3A6A7;
    --neutral-bg: #354052; --neutral-fg: #DDE6E6;
    --hot-bg: #4A2E14; --hot-fg: #F8C08A; --hot-dot: var(--orange);
    --warm-bg: #403614; --warm-fg: #FFE680; --warm-dot: var(--yellow);
    --cold-bg: #2A3D49; --cold-fg: #C9D6D7; --cold-dot: var(--blue-grey);
    --danger: #F07476;
    --focus: var(--yellow);
    --shadow: none;
    color-scheme: dark;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  overflow-x: hidden;
}

a { color: var(--link); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1 { font-size: 1.45rem; line-height: 1.25; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }
h3 { font-size: 0.92rem; margin: 1.1rem 0 0.4rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
h4 { font-size: 0.85rem; margin: 0.8rem 0 0.3rem; }
p { margin: 0 0 0.6rem; }

.muted { color: var(--muted); }
.small { font-size: 0.83rem; }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.skip { position: absolute; left: -999px; top: 0; }
.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; }
.skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 6px 10px; z-index: 20; }

/* ------------------------------------------------ top bar */
.topbar { background: var(--topbar-bg); color: var(--topbar-fg); position: sticky; top: 0; z-index: 10; }
.topbar-inner {
  max-width: none; margin: 0; padding: 0.55rem 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
}
/* Logo clear space: at least the height of the "e" (about 40% of the logo's height) on every side. */
.logo { display: inline-flex; align-items: center; gap: 0.85rem; padding: 0.35rem 0.5rem 0.35rem 0; color: var(--topbar-fg); text-decoration: none; white-space: nowrap; }
.logo img { height: 30px; width: auto; display: block; }
.mainnav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
/* top menus (14 Oct 2026): Prospects ▾ · Agents ▾ · Reports ▾ */
.navmenu > summary { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 6px; cursor: pointer; color: var(--topbar-muted); font-weight: 500; border-bottom: 2px solid transparent; user-select: none; }
.navmenu > summary:hover, .navmenu[open] > summary { color: #fff; background: rgba(255, 255, 255, 0.08); }
.navmenu > summary.is-current { color: #fff; border-bottom-color: var(--accent); border-radius: 6px 6px 0 0; }
.navmenu .chev { font-size: 0.7rem; }
.navmenu .menu-list { left: 0; right: auto; min-width: 12rem; color: var(--text); }
.navmenu .menu-item[hidden] { display: none; }
/* the section's menu items as tabs at the top of Agents and Reports pages */
.section-tabs { display: flex; gap: 0.25rem; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--border); margin: 0 0 1rem; }
.section-tabs a { padding: 0.45rem 0.8rem; text-decoration: none; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.section-tabs a:hover { color: var(--text); }
.section-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.topbar :focus-visible { outline-color: var(--accent); }
.env { font-size: 0.75rem; }
.env[hidden] { display: none; }
.user { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; }
.user-chip { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--topbar-fg); text-decoration: none; padding: 0.2rem 0.5rem 0.2rem 0.2rem; border-radius: 999px; }
.user-chip:hover, .user-chip[aria-current="page"] { background: rgba(255, 255, 255, 0.1); }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 20ch; font-size: 0.9rem; }
.avatar {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
}
.avatar-lg { width: 4rem; height: 4rem; font-size: 1.4rem; }
.topbar .btn { background: transparent; color: var(--topbar-fg); border-color: rgba(229, 248, 249, 0.35); }
.topbar .btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }

main { max-width: 1440px; margin: 0 auto; padding: 1.25rem 16px 4rem; outline: none; }
main:focus, main:focus-visible { outline: none; } /* focused after each route change for screen readers; no ring */

/* ------------------------------------------------ panels and notices */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem; box-shadow: var(--shadow); margin-bottom: 1rem; min-width: 0;
}
.notice { border-radius: 6px; padding: 0.6rem 0.8rem; margin: 0.5rem 0; border: 1px solid transparent; }
.notice-error { background: var(--bad-bg); color: var(--bad-fg); }
.notice-warn { background: var(--warn-bg); color: var(--warn-fg); }
.notice-info { background: var(--info-bg); color: var(--info-fg); }
.notice-ok { background: var(--ok-bg); color: var(--ok-fg); }
section.notice-error h1 { margin-bottom: 0.5rem; color: inherit; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.crumbs { margin: 0 0 0.6rem; font-size: 0.9rem; }

/* ------------------------------------------------ badges */
.badge {
  display: inline-block; padding: 0.08rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  background: var(--neutral-bg); color: var(--neutral-fg); white-space: nowrap; text-decoration: none; vertical-align: middle;
}
.badge-ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge-info { background: var(--info-bg); color: var(--info-fg); }
.badge-warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge-bad { background: var(--bad-bg); color: var(--bad-fg); }
.badge-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }

/* ------------------------------------------------ buttons and fields */
.btn {
  font: inherit; font-weight: 600; font-size: 0.9rem;
  padding: 0.45rem 0.9rem; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-primary:hover:not(:disabled) { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(0.95); background: var(--danger); }
.btn-danger-outline { color: var(--danger); border-color: var(--danger); }
.btn-small { padding: 0.2rem 0.6rem; font-size: 0.8rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.field { display: block; margin: 0.6rem 0; }
.field > span { display: block; font-size: 0.83rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--muted); }
.field.inline { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.field.inline > span { margin: 0; }
input[type="text"], .picker-input, input[type="tel"], input[type="date"], input[type="number"], textarea, select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 0.45rem 0.6rem; width: 100%; max-width: 100%;
}
select { width: auto; max-width: 14rem; }
textarea { resize: vertical; line-height: 1.5; min-height: 6rem; }
.field-error { color: var(--danger); font-size: 0.85rem; min-height: 0; margin: 0.25rem 0; }
.field-error:empty { display: none; }

/* ------------------------------------------------ queue */
.tabs { display: flex; gap: 0.25rem; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 0.9rem; scrollbar-width: thin; }
.tab {
  padding: 0.5rem 0.8rem; white-space: nowrap; text-decoration: none; color: var(--muted); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-bottom: 0.75rem; }
.count { margin: 0 0 0 auto; font-size: 0.85rem; }
.more { margin-top: 0.75rem; text-align: center; }
.status:empty { display: none; }

/* ------------------------------------------------ tables */
.table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.panel .table-wrap { border-radius: 6px; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.data th, table.data td { padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
table.data th { background: var(--surface-2); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.empty { text-align: center; color: var(--muted); padding: 1.5rem; }
table.compact th, table.compact td { padding: 0.4rem 0.6rem; }
.col-side table.compact td:first-child { min-width: 7.5rem; }
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: var(--surface-2); }
tr.row-link td:first-child a { font-weight: 600; }

/* ------------------------------------------------ prospect */
.prospect-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; }
.subhead { margin: 0.2rem 0 0; color: var(--muted); }
.head-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
@media (min-width: 960px) {
  .grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
.col-main, .col-side { min-width: 0; }
/* Single column: lift the score card to the top (it sits atop the right column on wide screens). */
@media (max-width: 959.98px) {
  .col-main, .col-side { display: contents; }
  .score-host { order: -1; }
}

dl.fields { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: 0.3rem 1rem; margin: 0; }
dl.fields dt { color: var(--muted); font-size: 0.85rem; }
dl.fields dd { margin: 0; overflow-wrap: anywhere; }
dl.compact { font-size: 0.88rem; }

ul.plain, ul.sources { margin: 0; padding-left: 1.1rem; }
ul.sources li { margin: 0.2rem 0; overflow-wrap: anywhere; }
.unsafe-link { color: var(--muted); text-decoration: line-through; }

details { border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.7rem; margin: 0.5rem 0; background: var(--surface); }
details > summary { cursor: pointer; font-weight: 500; }
details[open] > summary { margin-bottom: 0.4rem; }

.touch { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem; margin: 0.75rem 0; background: var(--surface); }
.touch-blocked { border-color: var(--warn-fg); }
.touch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.body-readonly { background: var(--surface-2); border-radius: 6px; padding: 0.6rem 0.75rem; margin: 0.4rem 0; font-size: 0.92rem; }
.notes { background: var(--surface-2); }
.notes pre { margin: 0; font: 0.82rem/1.5 var(--mono); }
.edits h4 { color: var(--muted); }

ol.timeline { list-style: none; margin: 0; padding: 0; }
ol.timeline li { border-left: 2px solid var(--border); padding: 0 0 0.8rem 0.8rem; position: relative; }
ol.timeline li::before { content: ""; position: absolute; left: -5px; top: 0.45rem; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

/* ------------------------------------------------ score (Phase 6) */
.badge.band { border: 1px solid currentColor; }
.band-hot { background: var(--hot-bg); color: var(--hot-fg); }
.band-warm { background: var(--warm-bg); color: var(--warm-fg); }
.band-cold { background: var(--cold-bg); color: var(--cold-fg); }
.band-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: 0.05rem; }
.band-dot-hot { background: var(--hot-dot); }
.band-dot-warm { background: var(--warm-dot); }
.band-dot-cold { background: var(--cold-dot); }
.band-order { margin: 0; }
.head-band-link { text-decoration: none; }
.head-band:empty { display: none; }

.enrich { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.meter-track { display: inline-block; width: 3.5rem; height: 0.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--brand); }
.meter-num { font-variant-numeric: tabular-nums; font-size: 0.85rem; min-width: 2.6rem; }

td.reasons-cell { max-width: 22rem; }
.reasons { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }

.score-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.score-head h2 { margin: 0; }
.score-card .badge.band, .score-card .score-head .badge { font-size: 0.9rem; padding: 0.15rem 0.7rem; }
.score-reasons { font-weight: 500; }
.enrich-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin: 0.6rem 0; }
ul.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; font-size: 0.88rem; }
ul.checklist li { display: flex; align-items: center; gap: 0.4rem; min-width: 0; padding: 0.1rem 0; border-bottom: 1px solid var(--border); }
ul.checklist li:last-child { border-bottom: 0; }
ul.checklist li .badge { margin-left: auto; }
.check-mark { width: 1rem; text-align: center; font-weight: 700; }
.is-present .check-mark { color: var(--ok-fg); }
.is-missing .check-mark { color: var(--warn-fg); }
.score-at { margin: 0.6rem 0 0; }

.qualify-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
@media (min-width: 640px) { .qualify-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qualify-field > label, .field-label { display: block; font-size: 0.83rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--muted); }
.qualify-field select { width: 100%; max-width: 100%; }
.qualify-field.is-changed > label::after { content: " · changed"; color: var(--info-fg); font-weight: 500; }
.inline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.inline-row input { flex: 1 1 9rem; width: auto; min-width: 0; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }

/* ------------------------------------------------ Zoho backlog (Phase 6) */
.hint { margin: 0.25rem 0 0; font-size: 0.9rem; }
.zoho-summary { margin-bottom: 0.9rem; }
dl.stat-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.4rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.8rem; min-width: 7.5rem; }
.stat dt { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.15rem; }
.stat dd { margin: 0; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat dd .meter-num { font-size: 1rem; }
ul.flags { list-style: none; margin: 0; padding: 0; font-size: 0.83rem; white-space: nowrap; }
ul.flags li { display: flex; align-items: center; gap: 0.3rem; }
ul.flags .is-missing { color: var(--muted); }
.empty-state h2 { margin-bottom: 0.4rem; }
.nowrap { white-space: nowrap; }
.zoho-table td.reasons-cell, .zoho-table .reasons { max-width: 15rem; }
.zoho-table td:nth-child(3) { min-width: 9rem; }

/* ------------------------------------------------ reports */
.report-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; align-items: start; }
@media (min-width: 900px) { .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bars { margin: 0.5rem 0 0.9rem; display: grid; gap: 0.3rem; }
.bar-row { display: grid; grid-template-columns: minmax(6rem, 38%) minmax(0, 1fr) 4.5rem; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--surface-2); border-radius: 4px; height: 0.8rem; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 4px; min-width: 1px; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ dialog and toasts */
dialog.dialog {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem;
  width: min(32rem, calc(100vw - 32px)); background: var(--surface); color: var(--text);
}
dialog.dialog::backdrop { background: rgba(10, 14, 20, 0.45); }
dialog.dialog h2 { font-size: 1.1rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }

.toasts { position: fixed; right: 16px; bottom: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; z-index: 30; pointer-events: none; }
.toast { pointer-events: auto; max-width: 28rem; padding: 0.6rem 0.9rem; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); font-size: 0.9rem; overflow-wrap: anywhere; }
.toast-ok { background: var(--ok-bg); color: var(--ok-fg); }
.toast-error { background: var(--bad-bg); color: var(--bad-fg); }

@media (max-width: 600px) {
  .topbar { position: static; }
  body { font-size: 14.5px; }
  h1 { font-size: 1.25rem; }
  .user { margin-left: 0; width: 100%; }
  .user-email { max-width: 60vw; }
  .count { margin-left: 0; width: 100%; }
  dl.fields { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  dl.fields dd { margin-bottom: 0.4rem; }
  .bar-row { grid-template-columns: minmax(5rem, 40%) minmax(0, 1fr) 3.5rem; }
}

/* Phase 6.4 Data review */
.review-table td.decision { white-space: nowrap; }
.review-table .notice-inline { margin-top: 0.25rem; color: var(--warn-fg); }

/* ------------------------------------------------ profile and settings */
.profile-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.profile-head h1 { margin-bottom: 0.15rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; align-items: end; }
input[type="email"] {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 0.45rem 0.6rem; width: 100%; max-width: 100%;
}
.users-table td.actions-cell { white-space: nowrap; }
.users-table .you { margin-left: 0.35rem; }
.role-list { margin: 0; padding-left: 1.1rem; }
.accent-rule { height: 4px; width: 3rem; background: var(--accent); border-radius: 2px; margin: 0.4rem 0 0.8rem; }

/* ------------------------------------------------ prospect record (Head of Sales' layout, 12 Oct 2026) */
.eyebrow { margin: 0 0 0.2rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.strong { margin: 0; font-weight: 600; }
.strong.large { font-size: 1.05rem; }
.missing { margin: 0; color: var(--warn-fg); font-weight: 600; }
dd.missing { font-weight: 600; }
.stack > * + * { margin-top: 0; }

.record-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.record-title { min-width: 0; }
.record-title .crumbs { margin-bottom: 0.3rem; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.25rem; }
.title-row h1 { font-size: 1.6rem; letter-spacing: -0.01em; }
.record-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.record-actions .divider { width: 1px; height: 1.75rem; background: var(--border); margin: 0 0.25rem; }
.btn-icon { padding: 0.35rem 0.7rem; font-size: 1.1rem; line-height: 1; text-decoration: none; }

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 16rem; padding: 0.35rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(62, 75, 96, 0.16);
}
.menu-item { display: block; width: 100%; text-align: left; font: inherit; font-size: 0.9rem; padding: 0.5rem 0.65rem; border: 0; border-radius: 6px; background: none; color: var(--text); cursor: pointer; }
.menu-item:hover:not(:disabled) { background: var(--surface-2); }
.menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
.menu-item.danger { color: var(--danger); }

.contact-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
.contact-person { display: flex; align-items: center; gap: 0.75rem; min-width: 12rem; }
.contact-person p { margin: 0; }
.avatar-contact { width: 2.75rem; height: 2.75rem; background: var(--pale-blue); color: var(--navy); }
.contact-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.contact-btn { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.contact-missing { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border: 1px dashed var(--orange); border-radius: 6px; color: var(--warn-fg); font-weight: 600; font-size: 0.88rem; }
.contact-dm p { margin: 0; }
.contact-warn { margin: 0 0 0 auto; max-width: 22rem; background: var(--warn-bg); color: var(--warn-fg); border-radius: 6px; padding: 0.5rem 0.7rem; font-size: 0.85rem; }

.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 0; }
.strip-cell { padding: 0.8rem 1rem; border-right: 1px solid var(--border); min-width: 0; }
.strip-cell:last-child { border-right: 0; }
.strip-cell p { margin: 0; }
.strip-band .clamp { margin-top: 0.3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.record-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; align-items: start; }
@media (min-width: 1040px) { .record-grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } }
.record-tabs { margin-bottom: 1rem; }
.record-tabs .tab { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.record-tabs .tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--accent); font-weight: 600; }
@media (prefers-color-scheme: dark) { .record-tabs .tab[aria-selected="true"] { color: var(--text); } }

.collapse { padding: 0; }
.collapse > summary { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.85rem 1.1rem; cursor: pointer; list-style: none; }
.collapse > summary::-webkit-details-marker { display: none; }
.collapse > summary::before { content: "▸"; color: var(--muted); font-size: 0.8rem; transition: transform 0.15s; }
.collapse[open] > summary::before { transform: rotate(90deg); }
.collapse > summary h2 { margin: 0; }
.collapse-hint { margin-left: auto; }
.collapse-body { padding: 0 1.1rem 1rem; }
/* a panel nested in a collapsible card drops its own frame and heading */
.collapse-body > .panel, .collapse-body > div > .panel { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
.collapse-body > .panel > h2:first-child, .collapse-body > div > .panel > h2:first-child { display: none; }

.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.8rem 1.25rem; margin: 0 0 0.5rem; }
.kv dt { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.15rem; }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.next-step .steps li { margin-bottom: 0.4rem; }
.all-fields dd { font-family: var(--mono); font-size: 0.82rem; overflow-wrap: anywhere; }
.record-grid .score-host { order: 0; } /* the record page keeps tabs first on narrow screens */
details.menu { border: 0; padding: 0; margin: 0; background: none; }
details.menu[open] > summary { margin-bottom: 0; }
details.collapse[open] > summary { margin-bottom: 0; }
.record-tabs { flex-wrap: wrap; overflow-x: visible; }
@media (min-width: 1200px) { .collapse .qualify-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------ agent rules (R1, 12 Oct 2026)
   Two columns: the agent rail and one agent's pane. The pane always has the same order (waiting, settings, rules,
   enforced, history) so every agent reads the same way. */
.rules-head { align-items: flex-start; }
.rules-head .hint { max-width: 62ch; }
.rules-layout { display: block; }
.picker-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.picker-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
select.agent-picker {
  max-width: 100%; min-width: min(22rem, 100%); font-weight: 600; padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--brand); border-radius: 8px; box-shadow: inset 0 -3px 0 var(--accent);
}
.agent-head.agent-planned { border-top-color: var(--teal); }
.agent > * { margin-bottom: 0.85rem; }
.agent-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; border-top: 4px solid var(--accent); }
.agent-title { min-width: 0; flex: 1 1 26rem; }
.agent-title h2 { font-size: 1.35rem; margin: 0 0 0.3rem; }
.agent-summary { margin: 0 0 0.35rem; max-width: 70ch; }
.agent-runs { margin: 0; }
.agent-version { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; text-align: right; }
@media (max-width: 600px) { .agent-version { align-items: flex-start; text-align: left; } }
.version-chip {
  display: inline-block; font: 600 0.8rem/1.4 var(--mono); padding: 0.05rem 0.45rem; border-radius: 4px;
  background: var(--navy); color: var(--pale-blue);
}
@media (prefers-color-scheme: dark) { .version-chip { background: var(--yellow); color: var(--navy); } }
.version-chip.small { font-size: 0.72rem; }
.version-chip.version-none { background: var(--neutral-bg); color: var(--muted); }

.block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.5rem; }
.block-title { margin: 0; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.collapse > summary .block-title { color: var(--text); }
.rules-block > .block-head { padding: 0 0.15rem; }

/* waiting for approval */
.pending-block { border-color: var(--orange); }
.pending-block > .block-title { color: var(--warn-fg); margin-bottom: 0.6rem; }
.changes { display: grid; gap: 0.6rem; }
.change { border: 1px solid var(--border); border-left: 3px solid var(--orange); border-radius: 6px; padding: 0.6rem 0.8rem; background: var(--surface); }
.change-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-bottom: 0.35rem; }
.change .actions { margin-top: 0.4rem; }
.change-note { margin: 0.3rem 0 0; font-size: 0.88rem; }
.diff { margin: 0.2rem 0; line-height: 1.6; overflow-wrap: anywhere; }
.diff del, .rule-why del { background: var(--bad-bg); color: var(--bad-fg); text-decoration: line-through; border-radius: 3px; padding: 0 0.1rem; }
.diff ins, .rule-why ins { background: var(--ok-bg); color: var(--ok-fg); text-decoration: none; border-radius: 3px; padding: 0 0.1rem; }
.setting-change { margin: 0.2rem 0; }

/* settings */
ul.settings { list-style: none; margin: 0; padding: 0; }
.setting { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.4rem 1rem; padding: 0.6rem 0; border-top: 1px solid var(--border); }
.setting:first-child { border-top: 0; padding-top: 0.2rem; }
.setting-main { flex: 1 1 22rem; min-width: 0; }
.setting-label { margin: 0; font-weight: 500; }
.setting-help { margin: 0.15rem 0 0; }
.setting-side { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.value-chip {
  display: inline-block; padding: 0 0.45rem; margin: 0 0.1rem; border-radius: 5px; font-weight: 700;
  background: var(--warm-bg); color: var(--warm-fg); font-variant-numeric: tabular-nums;
}
.value-chip.value-old { background: var(--neutral-bg); color: var(--muted); text-decoration: line-through; font-weight: 500; }
.setting-quote { margin: 0.35rem 0 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 6px 6px 0; font-size: 0.92rem; }
.setting-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0; }
.setting-edit input[type="number"] {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.35rem 0.5rem; width: 6rem;
}
.setting-edit select { max-width: 100%; }
.setting-edit textarea { flex: 1 1 100%; min-height: 4.5rem; }

/* rules */
.rule-sections > .rule-section { margin-bottom: 0.5rem; }
.rule-section > summary { padding: 0.65rem 1rem; }
.rule-section .collapse-body { padding: 0 0.6rem 0.6rem; }
ol.rules { list-style: none; margin: 0; padding: 0; }
.rule {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 0.2rem 0.6rem; align-items: start;
  padding: 0.5rem 0.4rem; border-top: 1px solid var(--border); border-radius: 4px;
}
.rule:first-child { border-top: 0; }
.rule:hover { background: var(--surface-2); }
.rule-pending { background: var(--warn-bg); }
.rule-pending:hover { background: var(--warn-bg); }
.rule-id { font: 600 0.75rem/1.9 var(--mono); color: var(--muted); }
.rule-body { min-width: 0; }
.rule-text { margin: 0; overflow-wrap: anywhere; }
.rule-why { margin: 0.15rem 0 0; font-size: 0.84rem; color: var(--muted); }
.rule-meta { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--muted); }
.rule-actions { display: flex; gap: 0.15rem; opacity: 0.35; transition: opacity 0.12s; }
.rule:hover .rule-actions, .rule:focus-within .rule-actions, .rule-pending .rule-actions { opacity: 1; }
@media (hover: none) { .rule-actions { opacity: 1; } }
@media (max-width: 600px) {
  .rule { grid-template-columns: minmax(0, 1fr) auto; }
  .rule-id { grid-column: 1 / -1; line-height: 1.2; }
}
.points { display: inline-block; min-width: 2.4rem; text-align: center; padding: 0 0.3rem; border-radius: 4px; font: 700 0.82rem/1.5 var(--mono); background: var(--ok-bg); color: var(--ok-fg); }
.points-neg { background: var(--bad-bg); color: var(--bad-fg); }
.add-slot { padding: 0.35rem 0.4rem 0; }
.empty-rules { margin: 0.3rem 0.4rem; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--link); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border); }
.btn-quiet { color: var(--muted); }
.add-rule { padding-left: 0.4rem; }

.change-form { display: grid; gap: 0.4rem; margin: 0.2rem 0; }
.change-form textarea { min-height: 4.5rem; }
.change-form .actions { margin-top: 0.1rem; }
.char-count { justify-self: end; margin-top: -0.25rem; }

/* enforced */
ul.enforced { list-style: none; margin: 0; padding: 0; }
ul.enforced li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: 0.2rem 0.5rem; align-items: baseline; padding: 0.45rem 0; border-top: 1px solid var(--border); }
ul.enforced li:first-child { border-top: 0; }
.lock { font-size: 0.8rem; filter: grayscale(1); opacity: 0.7; }
.enforced-where { font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 600px) { ul.enforced li { grid-template-columns: 1.4rem minmax(0, 1fr); } .enforced-where { grid-column: 2; white-space: normal; } }

/* history */
ol.history { list-style: none; margin: 0; padding: 0; }
.history-item { border: 0; border-top: 1px solid var(--border); border-radius: 0; margin: 0; padding: 0.35rem 0; background: none; }
ol.history li:first-child .history-item { border-top: 0; }
.history-item > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; font-weight: 400; }
.history-title { font-weight: 600; }
.history-who { margin-left: auto; }
.history-body { padding: 0.3rem 0 0.2rem 0.2rem; }

/* ------------------------------------------------ account menu (avatar, top right): profile, settings, how it works, sign out */
.user-menu > summary { list-style: none; cursor: pointer; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary.is-current, .user-menu[open] > summary { background: rgba(255, 255, 255, 0.12); }
.user-chip .chev { font-size: 0.7rem; color: var(--topbar-muted); }
.user-menu .menu-list { min-width: 15rem; color: var(--text); }
.menu-who { display: grid; gap: 0.1rem; padding: 0.5rem 0.65rem 0.6rem; border-bottom: 1px solid var(--border); margin-bottom: 0.3rem; }
.menu-who .badge { justify-self: start; margin-top: 0.25rem; }
a.menu-item { text-decoration: none; }
.menu-item[aria-current="page"] { background: var(--surface-2); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.menu-sep { border: 0; border-top: 1px solid var(--border); margin: 0.3rem 0; }
@media (max-width: 600px) { .user-menu .menu-list { right: auto; left: 0; } }

/* ------------------------------------------------ how it works */
.legend { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.who { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.who-agent { background: var(--navy); color: var(--yellow); }
.who-system { background: var(--pale-blue); color: var(--navy); border: 1px solid var(--teal); }
.who-person { background: var(--pale-yellow); color: #6B4A00; }
.who-planned { background: transparent; color: var(--muted); border: 1px dashed var(--blue-grey); }
@media (prefers-color-scheme: dark) { .who-agent { background: var(--yellow); color: var(--navy); } .who-system { background: #2A3D49; color: var(--pale-blue); } }
.flow-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 1000px) { .flow-layout { grid-template-columns: minmax(0, 1fr) 20rem; } .flow-side { position: sticky; top: 4.5rem; } }
ol.flow { list-style: none; margin: 0; padding: 0; }
.flow-step { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 0.75rem; }
.flow-marker { display: flex; flex-direction: column; align-items: center; }
.flow-num { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--accent); color: var(--navy); font-weight: 800; flex: none; }
.flow-line { flex: 1; width: 2px; background: var(--border); margin: 0.2rem 0; min-height: 1rem; }
.flow-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 0.8rem; box-shadow: var(--shadow); min-width: 0; }
.flow-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.75rem; }
.flow-head h2 { margin: 0; font-size: 1.02rem; }
.flow-who { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.flow-text { margin: 0.35rem 0 0; }
.flow-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.flow-branch { display: grid; align-content: start; gap: 0.15rem; padding: 0.5rem 0.65rem; border-radius: 6px; background: var(--surface-2); border-left: 3px solid var(--teal); font-size: 0.88rem; }
.flow-where { margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--muted); }
.flow-side h2 { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; }
.flow-side h2 + * { margin-bottom: 1rem; }
ul.flow-guard { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
ul.flow-guard li { margin-bottom: 0.35rem; }
dl.flow-terms { margin: 0; font-size: 0.88rem; }
dl.flow-terms dt { font-weight: 700; }
dl.flow-terms dd { margin: 0 0 0.45rem; color: var(--muted); }

/* ------------------------------------------------ call log (prospect page) */
.calls-card { border-left: 4px solid var(--accent); }
.calls-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
.calls-head h2 { margin: 0; }
.calls-head .btn { margin-left: auto; }
.call-form { display: grid; gap: 0.6rem; padding: 0.75rem; margin: 0.25rem 0 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.call-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.call-form legend { font-size: 0.83rem; font-weight: 600; color: var(--muted); margin-bottom: 0.35rem; padding: 0; }
.call-form .field { margin: 0; }
.call-form input[type="date"] { max-width: 12rem; }
.chip-group { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip-opt { position: relative; display: inline-flex; }
.chip-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-opt span { padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 0.86rem; font-weight: 500; cursor: pointer; user-select: none; }
.chip-opt:hover span { border-color: var(--brand); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip-opt input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 700; }
.chip-ok input:checked + span { background: var(--success-brand); border-color: var(--success-brand); color: #fff; }
.chip-bad input:checked + span { background: var(--danger); border-color: var(--danger); color: #fff; }
.call-list { display: grid; gap: 0; }
.call-row { padding: 0.55rem 0; border-top: 1px solid var(--border); }
.call-row:first-child { border-top: 0; }
.call-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.call-row-who { margin-left: auto; }
.call-notes { margin: 0.3rem 0 0; font-size: 0.92rem; }
.call-facts { margin: 0.25rem 0 0; }
/* Before you call: a compact brief above the form */
.call-brief { margin: 0.25rem 0 0.6rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; }
.call-brief > summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.brief { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.75rem; margin: 0.45rem 0 0.1rem; font-size: 0.9rem; }
.brief dt { color: var(--muted); font-weight: 600; }
.brief dd { margin: 0; min-width: 0; }
.brief-list { list-style: none; padding: 0; margin: 0; }
.brief-list li { margin: 0 0 0.15rem; }
.brief-list li::before { content: "? "; color: var(--muted); font-weight: 600; }
/* What did you learn? */
.call-form .facts { border-top: 1px solid var(--border); padding-top: 0.5rem; }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.5rem 0.75rem; }
.fact select, .fact input, .call-form .fact input[type="date"] { width: 100%; max-width: none; }
.call-form [hidden] { display: none !important; }
.fact-from { display: block; font-size: 0.78rem; margin-top: 0.15rem; overflow-wrap: anywhere; }
.call-form .assisted { outline: 2px solid var(--teal); outline-offset: 1px; }
.fact-industry { margin-top: 0.5rem; }
.fact-industry > summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.4rem; }
.notes-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
.notes-head label { font-weight: 600; font-size: 0.9rem; }
.assist-note { margin: 0.3rem 0 0; }
@media (max-width: 560px) { .brief { grid-template-columns: 1fr; } .brief dt { margin-top: 0.3rem; } }
.dnc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.estimate { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.estimate .strong { font-style: italic; }

/* ------------------------------------------------ sources (where a record came from) */
.src-badge { display: inline-block; font-size: 0.72rem; font-weight: 600; line-height: 1.4; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.src-agent { border-color: var(--teal); color: var(--ok-fg); background: var(--ok-bg); }
.src-zoho { border-color: #E3A33C; color: var(--warn-fg); background: var(--warn-bg); }
.src-clay { border-color: var(--blue-grey); color: var(--info-fg); background: var(--info-bg); }
.src-line { margin-top: 0.15rem; }
.provenance { margin: 0.2rem 0 0; }

/* ------------------------------------------------ Zoho backlog: clickable tiles, search, what is missing */
a.stat-link { color: inherit; text-decoration: none; display: block; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
a.stat-link:hover { border-color: var(--blue-grey); box-shadow: var(--shadow); }
a.stat-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a.stat-link.is-active { border-color: var(--brand); box-shadow: inset 0 -3px 0 var(--accent); }
.zoho-search { display: flex; gap: 0.5rem; align-items: center; margin: 0.75rem 0 0.9rem; max-width: 52rem; }
.zoho-search input[type="search"] { flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.7rem; }
.missing-table { max-width: 44rem; }
.bar-cell { width: 45%; }
.bar { display: block; height: 0.55rem; border-radius: 999px; background: var(--navy); min-width: 2px; }
td.break { overflow-wrap: anywhere; }
@media (max-width: 560px) { .zoho-search { flex-wrap: wrap; } .zoho-search input[type="search"] { flex-basis: 100%; } }
.zoho-search a.btn { text-decoration: none; }

/* duplicates */
.stat-sub { font-size: 0.78rem; font-weight: 400; color: var(--muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
a.chip-link, button.chip-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 0.85rem; background: var(--surface); }
a.chip-link:hover, button.chip-link:hover { border-color: var(--blue-grey); }
a.chip-link.is-active, button.chip-link.is-active { border-color: var(--brand); background: var(--surface-2); font-weight: 600; }
.chip-count { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dup-list { display: grid; gap: 0.6rem; margin-top: 0.6rem; }
.dup-group { padding: 0.6rem 0.8rem; }
.dup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-bottom: 0.4rem; }
.dup-matched { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dup-table { width: 100%; }
.chip-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 0.15rem; }

/* ------------------------------------------------ Prospects: one list (12 Oct 2026) */
.wl-summary dl.stat-row .stat { min-width: 6.5rem; }
.wl-filters { display: grid; gap: 0.1rem; margin-bottom: 0.4rem; }
.wl-filters .chip-row { align-items: center; margin: 0.2rem 0; }
.chip-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); min-width: 3.6rem; }
.chip-clear { font-size: 0.85rem; margin-left: 0.3rem; }
.wl-filters select { font: inherit; font-size: 0.85rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.6rem; }
.tabs .tab .chip-count { margin-left: 0.35rem; }
.wl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 1100px) { .wl-layout.has-panel { grid-template-columns: minmax(0, 1fr) 24rem; } }
.wl-panel-host:empty { display: none; }
.wl-panel { position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); overflow: auto; margin: 0; }
@media (max-width: 1099.98px) {
  .wl-panel { position: fixed; inset: auto 0 0 0; top: auto; max-height: 70vh; z-index: 15; border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18); }
}
.wl-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.wl-panel-head h2 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.wl-panel-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.wl-panel-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.3rem 0 0.6rem; }
.wl-panel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.8rem; }
.wl-panel .notice { margin: 0.6rem 0; font-size: 0.88rem; }
.wl-table td { vertical-align: middle; }
.wl-table tr.is-selected td { background: var(--surface-2); box-shadow: inset 0 0 0 0 transparent; }
.wl-table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.wl-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.wl-badges .badge { font-size: 0.7rem; }
.src-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
/* "Found twice": in Zoho and found independently by our source: the one strong highlight in the list */
.badge-twice { background: var(--yellow); color: var(--navy); font-weight: 700; }
/* Phase 7.1: the business came to us (form, reply, enquiry) */
.badge-engaged { background: var(--ok-bg); color: var(--ok-fg); font-weight: 700; }
.badge-in { background: var(--ok-bg); color: var(--ok-fg); }
ol.timeline.interactions li.tp-engaged::before { background: var(--ok-fg); }
.notice-twice { background: var(--pale-yellow); color: var(--navy); border-left: 4px solid var(--yellow); }
.zoho-match { margin: 0 0 1rem; }
.zoho-match .btn { margin-left: 0.2rem; }
@media (prefers-color-scheme: dark) {
  .notice-twice { background: #3F3416; color: var(--pale-yellow); }
}
.wl-table td:first-child { min-width: 14rem; }
.wl-table .reasons-cell { max-width: 16rem; }
.wl-table .reasons { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-table td:nth-child(6) { white-space: nowrap; }

/* Header search (12 Oct 2026): one search for prospects and Zoho, just before the account menu; "/" focuses it */
.top-search { margin-left: auto; flex: 0 1 26rem; min-width: 12rem; }
.top-search input { width: 100%; font: inherit; font-size: 0.9rem; color: var(--topbar-fg); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(229, 248, 249, 0.25); border-radius: 999px; padding: 0.4rem 0.9rem; }
.top-search input::placeholder { color: var(--topbar-muted); }
.top-search input:focus { background: var(--surface); color: var(--text); outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 700px) { .top-search { order: 10; flex-basis: 100%; margin-left: 0; } }
.search-head { margin: 0 0 0.6rem; }

/* Prospects, compact (12 Oct 2026): one slim row of tiles as navigation, filters behind one button */
.wl-tiles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.75rem; }
.wl-tile { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 0.88rem; font-weight: 500; white-space: nowrap; }
.wl-tile:hover { border-color: var(--blue-grey); }
.wl-tile.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.wl-tile-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-tile:not(.is-active) .wl-tile-n { color: var(--muted); }
.wl-tile-sep { width: 1px; height: 1.3rem; background: var(--border); margin: 0 0.2rem; }
.wl-info { position: relative; margin-left: auto; }
.wl-info > summary { list-style: none; cursor: pointer; }
.wl-info > summary::-webkit-details-marker { display: none; }
.wl-info-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 12; width: min(24rem, 90vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); padding: 0.6rem 0.9rem; }
.wl-info-panel p { margin: 0.35rem 0; }
.wl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; }
.wl-spacer { flex: 1; }
.wl-toolbar .count { margin: 0; font-size: 0.82rem; }
.wl-filter-menu { position: relative; }
.wl-filter-menu > summary { list-style: none; cursor: pointer; }
.wl-filter-menu > summary::-webkit-details-marker { display: none; }
.wl-filter-n { display: inline-block; min-width: 1.2rem; margin-left: 0.35rem; padding: 0 0.3rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; font-weight: 700; text-align: center; }
.wl-filter-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 12; width: min(40rem, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); padding: 0.5rem 0.8rem; }
.wl-filter-panel .chip-row { align-items: center; margin: 0.35rem 0; }
.wl-pill { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 0.82rem; font-weight: 600; }
.wl-pill:hover { border-color: var(--danger); }
details.wl-filter-menu, details.wl-info { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }
.wl-tiles { gap: 0.3rem; }
.wl-tile { padding: 0.3rem 0.65rem; font-size: 0.86rem; gap: 0.4rem; }
.wl-tile-sep { margin: 0 0.1rem; }
.wl-pill span { margin-left: 0.3rem; }
.wl-tiles-wrap { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 0.75rem; }
.wl-tiles-wrap .wl-tiles { flex: 1; margin: 0; }
.wl-tiles-wrap .wl-info { margin-left: 0; flex: none; }
.dup-intro .wl-tile { font-size: 0.84rem; }
.dup-intro .chip-row { gap: 0.3rem; align-items: center; }
/* tiles never wrap: tighter, and the row scrolls sideways on narrow screens (Shwe, 12 Oct 2026) */
.wl-tiles-wrap { align-items: center; }
.wl-tiles-wrap .wl-tiles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; min-width: 0; }
.wl-tiles-wrap .wl-tile { flex: none; padding: 0.28rem 0.55rem; gap: 0.35rem; font-size: 0.85rem; }
.wl-tiles-wrap .wl-tiles { gap: 0.25rem; }
.wl-tiles-wrap .wl-tile-sep { flex: none; margin: 0 0.05rem; }
/* info tiles (Shwe, 12 Oct 2026): label over number, whole tile clickable, one row */
.wl-card { flex: 1 0 auto; display: flex; flex-direction: column; gap: 0.1rem; min-width: 5.6rem; padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 0.12s, box-shadow 0.12s; }
.wl-card:hover { border-color: var(--blue-grey); box-shadow: var(--shadow); }
.wl-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wl-card.is-active { border-color: var(--brand); box-shadow: inset 0 -3px 0 var(--accent); background: var(--surface-2); }
.wl-card-label { font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.wl-card-n { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.wl-tiles-wrap .wl-tiles { align-items: stretch; }
.wl-tiles-wrap .wl-tile-sep { height: auto; align-self: stretch; }
.dup-intro .chip-row { flex-wrap: wrap; align-items: stretch; }
.dup-intro .wl-card { flex: 0 0 auto; }
.wl-select { font: inherit; font-size: 0.85rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.7rem; max-width: 100%; }
/* row ⋯ menu (12 Oct 2026) */
.row-actions { width: 1%; text-align: right; }
.row-menu > summary { list-style: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0.15rem 0.5rem; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu .menu-list { right: 0; left: auto; min-width: 16rem; text-align: left; white-space: nowrap; }

/* header search: short placeholder; what it searches shows on focus; wider (Shwe, 13 Oct 2026) */
.top-search { position: relative; flex: 0 1 34rem; }
.top-search-hint { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; z-index: 20; padding: 0.45rem 0.8rem; font-size: 0.82rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14); }
.top-search:focus-within .top-search-hint { display: block; }
.top-search-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Zoho data issues (console/zoho-issues.js) */
.zoho-issues .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.zoho-issues .panel-head h2 { display: flex; align-items: center; gap: 0.4rem; }
.issues { display: grid; gap: 0.5rem; margin: 0.5rem 0; padding: 0; list-style: none; }
.issue { border-left: 3px solid var(--neutral-bg); padding: 0.2rem 0 0.2rem 0.6rem; }
.issue-high { border-left-color: var(--bad-fg); }
.issue-medium { border-left-color: var(--warn-fg); }
.issue-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }

/* Data quality (console/dataquality.js) */
.dq-tiles { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0 1rem; }
.dq-table td.num, .dq-table th.num { text-align: right; }
.dq-table tr.muted td { color: var(--muted); }
.dq-actions { display: flex; justify-content: flex-end; margin: 0.4rem 0; }
.dq-table { table-layout: fixed; width: 100%; }
.dq-table th:nth-child(1) { width: 36%; }
.dq-table th:nth-child(2) { width: 7.5rem; }
.dq-table th:nth-child(3) { width: 8rem; }
@media (max-width: 640px) { .dq-table { table-layout: auto; } .dq-table th:nth-child(4), .dq-table td:nth-child(4) { display: none; } }

/* Scout runs (console/scout.js) */
.scout-head { justify-content: space-between; align-items: flex-start; }
.scout-stats { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
pre.brief { white-space: pre-wrap; font-size: 0.85rem; background: var(--neutral-bg); padding: 0.6rem; border-radius: 6px; }
.feedback { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.feedback input[type=text] { min-width: 12rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem; }
fieldset { border: 0; padding: 0; margin: 0; }
fieldset legend { font-weight: 600; margin-bottom: 0.2rem; }
label.check { display: flex; gap: 0.4rem; align-items: center; }
.dq-estimate { background: var(--info-bg); color: var(--info-fg); padding: 0.5rem 0.7rem; border-radius: 6px; }
button.chip-link { cursor: pointer; font-family: inherit; }
.btn-link { background: none; border: 0; color: var(--link, inherit); text-decoration: underline; cursor: pointer; padding: 0; }

/* ------------------------------------------------ Agents (14 Oct 2026) */
.agent-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .agent-layout { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; } }
.agent-list { display: grid; gap: 0.75rem; }
.agent-list-label { margin: 0 0 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.agent-list-item { display: grid; gap: 0.1rem; padding: 0.5rem 0.65rem; border-radius: 6px; text-decoration: none; color: var(--text); border: 1px solid transparent; }
.agent-list-item:hover { background: var(--surface-2); }
.agent-list-item[aria-current="page"] { background: var(--surface); border-color: var(--border); box-shadow: inset 3px 0 0 var(--accent); }
.agent-list-name { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.agent-detail h3 { margin: 1.25rem 0 0.5rem; font-size: 1rem; }
.agent-stats { margin-top: 0.75rem; }
.agent-run .panel { border: 0; padding: 0; box-shadow: none; }
.picker-list { list-style: none; margin: 0.25rem 0; padding: 0; display: grid; gap: 0.25rem; }
.picker-list li { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.85rem; }
.logs-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.logs-toolbar input, .logs-toolbar select { width: auto; }
.picker-input { max-width: 28rem; }
@media (max-width: 600px) { .navmenu:last-child .menu-list { left: auto; right: 0; } }
.site-list { margin: 0.25rem 0 0; padding-left: 1.1rem; columns: 2 16rem; font-size: 0.92rem; }

/* Push to Zoho (14 Oct 2026): tick prospects in the list, then push them from the bar */
.pick-cell { width: 2rem; text-align: center; }
.pick-cell input { width: 1.05rem; height: 1.05rem; cursor: pointer; }
.bulk-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; border-radius: 6px; background: var(--surface-2, #eef1f5); border: 1px solid var(--border, #d5dbe3); }
.bulk-bar[hidden] { display: none; }
dialog.dialog.dialog-wide { width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); }
.push-body { max-height: 60vh; overflow: auto; }
.push-group { margin: 0.6rem 0; }
.push-group summary { cursor: pointer; }
.push-list { margin: 0.35rem 0 0 1.1rem; padding: 0; }
.push-list li { margin: 0.2rem 0; }
.push-warnings { margin: 0.5rem 0; padding-left: 1.6rem; }

/* R2 trials, R4 examples, R3 reject reasons (14 Oct 2026) */
.trial:empty { display: none; }
.trial { margin-top: 0.6rem; }
.trial-results > summary { cursor: pointer; }
.trial-one { border-top: 1px solid var(--border); padding-top: 0.6rem; margin-top: 0.6rem; }
.trial-company { margin: 0 0 0.4rem; font-weight: 600; }
.trial-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.trial-cols > div { background: var(--surface-2); border-radius: var(--radius); padding: 0.5rem 0.7rem; min-width: 0; overflow-wrap: anywhere; }
.trial-field > p.muted { margin: 0.4rem 0 0.1rem; }
.trial-field .diff, .trial-field .prewrap { margin: 0; font-size: 0.9rem; white-space: pre-wrap; }
dd.changed { font-weight: 600; background: var(--ok-bg); color: var(--ok-fg); border-radius: 3px; padding: 0 0.2rem; }
@media (max-width: 640px) { .trial-cols { grid-template-columns: 1fr; } }
.example { background: var(--surface-2); border-radius: var(--radius); padding: 0.5rem 0.7rem; overflow-wrap: anywhere; }
.example-body { margin: 0.3rem 0 0; font-size: 0.92rem; }
.example-del { text-decoration: none; }
.example-del .example { opacity: 0.6; text-decoration: line-through; }
.example-fields { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.example-fields > * { flex: 1 1 10rem; }
.reason-picker { border: 0; padding: 0; margin: 0 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.reason-picker legend { margin-bottom: 0.4rem; color: var(--muted); }
.chip-check { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.65rem; cursor: pointer; font-size: 0.9rem; }
.chip-check:has(input:checked) { background: var(--surface-2); border-color: var(--text); }