/* First Fleet CRM — design system (W1C-1 / D15). Plain CSS, no build step.
   DARK navy/gold is the DEFAULT theme (:root); [data-theme="light"] restores the
   original light palette. Token NAMES are stable — only values swap per theme. */
:root {
  color-scheme: dark;
  /* ---- colour: brand ---- */
  --navy: #01253d;          /* Flagship primary navy */
  --navy-2: #063a5d;
  --navy-ink: #001a2b;
  --blue: #79b8ea;          /* interactive / links */
  --blue-dark: #9ccbf1;
  --gold: #cab775;          /* Flagship primary gold */
  --gold-dark: #b09d5d;
  --accent: #cab775;        /* primary CTA == gold in dark */
  --accent-dark: #b09d5d;
  --on-accent: #182338;     /* button label on gold */
  --on-badge: #ffffff;      /* always-white text on solid status badges */
  --accent-soft: #2a3b58;
  --focus-ring: #cab775;
  --focus-soft: rgba(202, 183, 117, 0.28);
  /* ---- colour: surfaces (elevation steps on deep navy) ---- */
  --bg: #01253d;            /* Flagship background */
  --surface: #0a324d;       /* panels / cards / menus */
  --card: #0a324d;
  --surface-2: #123e5b;     /* raised: table heads, section chrome */
  --btn-bg: #123e5b;
  --btn-hover-bg: #194a68;
  --btn-hover-border: #3b6077;
  --hover: #0e3a56;         /* row hover */
  --inset: #123e5b;         /* wells, tracks, icon circles */
  --border: #244f69;        /* 1px hairlines */
  --border-2: #1b455f;
  --topbar-bg: rgba(1, 37, 61, 0.88);
  --scrim: rgba(3, 8, 16, 0.62);
  /* ---- colour: ink ---- */
  --text: #f2ece1;          /* warm white */
  --head: #f7f2e7;          /* headings / emphasis */
  --muted: #a9b6c9;
  --faint: #8395ab;
  --chip-bg: #243c5c;
  --chip-fg: #cdd9e8;
  --avatar-bg: #33587f;
  --active-bg: #cab775;
  --active-fg: #182338;
  /* ---- colour: semantic (gold does NOT replace these) ---- */
  --ok: #7fd8a0;   --ok-deep: #1d7a46;
  --warn: #e9b95f;
  --bad: #f19b95;  --bad-deep: #a83232;
  --line-ok: #2e5d41; --line-warn: #6d5426; --line-bad: #6e3434; --line-info: #2c5480;
  /* semantic status chips — AA (>=4.5:1) fg-on-bg on dark */
  --st-new-bg: #17324f;     --st-new-fg: #93c5f5;
  --st-prog-bg: #3b2b10;    --st-prog-fg: #e9b95f;
  --st-won-bg: #11331f;     --st-won-fg: #7fd8a0;
  --st-wait-bg: #2d2347;    --st-wait-fg: #cdb2f2;
  --st-over-bg: #421d1c;    --st-over-fg: #f19b95;
  --st-stale-bg: #263243;   --st-stale-fg: #b9c4d2;
  --st-done-bg: #0f3a22;    --st-done-fg: #8ce0ab;
  --st-med-bg: #1b3a5e;     --st-med-fg: #9cc7f2;
  --st-high-bg: #46260f;    --st-high-fg: #f0a473;
  --st-odue-bg: #471b31;    --st-odue-fg: #f5a6c8;
  /* ---- space (4px scale) ---- */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  /* ---- radius + shadow ---- */
  --r-sm: 6px; --r: 8px; --r-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.30), 0 6px 16px rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.40);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.50);
  /* ---- shell dims ---- */
  --sidebar-w: 244px;
  --topbar-h: 60px;
}
[data-theme="light"] {
  color-scheme: light;
  --blue: #1a6fb5;
  --blue-dark: #15598f;
  --gold: #8a6011;
  --gold-dark: #6f4d0c;
  --accent: #2f7ff0;
  --accent-dark: #1f66cc;
  --on-accent: #ffffff;
  --on-badge: #ffffff;
  --accent-soft: #dcebfb;
  --focus-ring: #1f66cc;
  --focus-soft: rgba(47, 127, 240, 0.14);
  --bg: #f5f7fa;
  --surface: #ffffff;
  --card: #ffffff;
  --surface-2: #f7f9fc;
  --btn-bg: #ffffff;
  --btn-hover-bg: #fbfcfe;
  --btn-hover-border: #cbd5e1;
  --hover: #f6f9fc;
  --inset: #eef2f7;
  --border: #e3e8ef;
  --border-2: #eef2f7;
  --topbar-bg: rgba(255, 255, 255, 0.85);
  --scrim: rgba(16, 40, 64, 0.45);
  --text: #1b2a3a;
  --head: #01253d;
  --muted: #6b7a89;
  --faint: #8896a4;
  --chip-bg: #e5edf5;
  --chip-fg: #01253d;
  --avatar-bg: #01253d;
  --active-bg: #01253d;
  --active-fg: #ffffff;
  --ok: #1d7a46;   --ok-deep: #1d7a46;
  --warn: #b3711d;
  --bad: #a83232;  --bad-deep: #a83232;
  --line-ok: #bcdcc4; --line-warn: #e9d3ab; --line-bad: #eabfbf; --line-info: #bcd6ef;
  --st-new-bg: #dcebfb;     --st-new-fg: #114a7c;
  --st-prog-bg: #fbeeda;    --st-prog-fg: #9a5f13;
  --st-won-bg: #ddefe3;     --st-won-fg: #14622f;
  --st-wait-bg: #ece1f6;    --st-wait-fg: #6a3d80;
  --st-over-bg: #f6dede;    --st-over-fg: #a83232;
  --st-stale-bg: #e9edf1;   --st-stale-fg: #55606b;
  --st-done-bg: #d7ead9;    --st-done-fg: #14532d;
  --st-med-bg: #e2ecfa;     --st-med-fg: #1f5fa0;
  --st-high-bg: #fce4d6;    --st-high-fg: #a5541e;
  --st-odue-bg: #fbdce9;    --st-odue-fg: #b01e5f;
  --shadow-sm: 0 1px 2px rgba(16, 40, 64, 0.06);
  --shadow: 0 1px 3px rgba(16, 40, 64, 0.08), 0 6px 16px rgba(16, 40, 64, 0.06);
  --shadow-lift: 0 6px 20px rgba(16, 40, 64, 0.14);
  --shadow-pop: 0 8px 28px rgba(16, 40, 64, 0.18);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
[x-cloak] { display: none !important; }
h1 { font-size: 1.375rem; margin: 0 0 var(--s4); letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; }

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

/* ---- left sidebar ---- */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 60;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-ink) 100%);
  color: #cdddec; border-right: 1px solid rgba(0,0,0,.2);
}
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 0 var(--s4); height: var(--topbar-h); flex: 0 0 auto; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand .brand { display: flex; align-items: center; gap: var(--s2); color: #fff; font-weight: 700; }
.sidebar-brand .brand:hover { text-decoration: none; opacity: .95; }
.brand-crest { display: block; width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; font-size: 0.98rem; }
.brand-sub { font-weight: 600; font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.sidebar-close { display: none; background: none; border: none; color: #9fbdd8; cursor: pointer; padding: 4px; }

.sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: var(--s3) var(--s2); display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: var(--s3); padding: 0.55rem 0.7rem; border-radius: var(--r);
  color: #b9cee0; font-size: 0.9rem; font-weight: 500; transition: background .12s, color .12s; }
.nav-item:hover { text-decoration: none; background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.nav-ico { flex: 0 0 auto; width: 19px; height: 19px; opacity: .9; }

.sidebar-foot { flex: 0 0 auto; padding: var(--s3); border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-user { display: flex; align-items: center; gap: var(--s2); }
.sidebar-user-meta { min-width: 0; }
.sidebar-user-name { color: #fff; font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { color: #8fb2d2; font-size: 0.72rem; }

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

/* ---- top bar (in content column) ---- */
.topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s5);
  background: var(--topbar-bg); backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border); }
.hamburger { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 6px; margin-left: -6px; }
.topbar-search { position: relative; flex: 1 1 auto; max-width: 460px; display: flex; align-items: center; }
.topbar-search .search-ico { position: absolute; left: 11px; color: var(--faint); pointer-events: none; }
.topbar-search input { width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.2rem; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg); font: inherit; font-size: 0.88rem; color: var(--text); }
.topbar-search input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--focus-soft); }
.topbar-search input:disabled { cursor: default; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }

/* ---- user menu ---- */
.usermenu { position: relative; }
.usermenu-trigger { display: flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; padding: 3px; border-radius: 999px; }
.usermenu-trigger:hover { background: var(--bg); }
.usermenu-caret { color: var(--muted); }
.usermenu-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 220px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; z-index: 50; }
.usermenu-head { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); }
.usermenu-name { font-weight: 600; font-size: 0.9rem; }
.usermenu-mail { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usermenu-item { display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 0.6rem 0.9rem; font: inherit; font-size: 0.88rem; color: var(--text); }
.usermenu-item:hover { background: var(--bg); color: var(--bad); }

/* ---- content area ---- */
.content { flex: 1 1 auto; width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s7); }

/* ---- toasts ---- */
.toasts { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.toast { padding: 0.65rem 0.9rem; border-radius: var(--r); font-size: 0.9rem; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.toast-success { background: var(--st-won-bg); border-color: var(--line-ok); color: var(--st-won-fg); }
.toast-error, .toast-danger { background: var(--st-over-bg); border-color: var(--line-bad); color: var(--bad); }
.toast-warning { background: var(--st-prog-bg); border-color: var(--line-warn); color: var(--warn); }
.toast-info { background: var(--st-new-bg); border-color: var(--line-info); color: var(--st-new-fg); }

/* ---- auth (login) shell ---- */
.auth-shell { max-width: 440px; margin: 0 auto; padding: 3.5rem var(--s4) 2rem; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--s3); justify-content: center; margin-bottom: var(--s5); color: var(--head); }
.auth-wordmark { display: block; width: min(100%, 320px); height: auto; }
.auth-product-name { font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; }
.auth-product-name span { color: var(--gold); font-weight: 600; }

/* ============================================================= PRIMITIVES */
.btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--btn-bg); color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s; white-space: nowrap; }
.btn:hover { text-decoration: none; border-color: var(--btn-hover-border); background: var(--btn-hover-bg); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-ink); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--blue); }
.btn-ghost:hover { background: var(--accent-soft); border-color: transparent; }
.btn-sm { padding: 0.32rem 0.6rem; font-size: 0.8rem; }

/* avatar */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; background: var(--avatar-bg); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: .02em; }
.avatar-lg { width: 38px; height: 38px; font-size: 0.82rem; }
.avatars { display: inline-flex; gap: 0.15rem; }
.avatars .avatar { width: 26px; height: 26px; font-size: 0.68rem; box-shadow: 0 0 0 2px var(--surface); }

/* ============================================================= COMPONENTS (carried + refined) */
.page-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.page-head h1 { margin-bottom: 0; }
.crumb { display: inline-block; margin-bottom: var(--s3); font-size: 0.85rem; color: var(--muted); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--blue); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* filters */
.filters { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3); box-shadow: var(--shadow-sm); }
.filters select, .filters input { padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); font-size: 0.9rem; color: var(--text); }
.filters select:focus, .filters input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-soft); }
.clear-filters { align-self: center; font-size: 0.85rem; }

/* cards */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s4) 1.1rem; margin-bottom: var(--s3); box-shadow: var(--shadow-sm); }

/* tables */
table.list { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
table.list th, table.list td { text-align: left; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
table.list th { position: sticky; top: var(--topbar-h); background: var(--surface-2); font-weight: 600; color: var(--muted);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; z-index: 1; }
table.list tbody tr { transition: background 0.1s; }
table.list tbody tr:hover { background: var(--hover); }
table.list tr:last-child td { border-bottom: none; }

/* chips */
.chip { display: inline-block; padding: 0.16rem 0.6rem; border-radius: 999px; font-size: 0.76rem; background: var(--chip-bg); color: var(--chip-fg); white-space: nowrap; font-weight: 600; }
.chip.status-new { background: var(--st-new-bg); color: var(--st-new-fg); }
.chip.status-stale { background: var(--st-prog-bg); color: var(--warn); }
.chip.status-dead { background: var(--st-over-bg); color: var(--bad); }
.chip.status-connected_qualified, .chip.status-sold { background: var(--st-won-bg); color: var(--ok); }
.chip.unassigned { background: var(--st-wait-bg); color: var(--st-wait-fg); }

/* detail grid + kv */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); }
dl.kv { margin: 0; }
dl.kv dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-top: 0.55rem; }
dl.kv dt:first-of-type { margin-top: 0.2rem; }
dl.kv dd { margin: 0.15rem 0 0; }

/* status action buttons */
.status-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.status-actions button { border: 1px solid var(--border); background: var(--btn-bg); border-radius: 999px; padding: 0.32rem 0.75rem; font-size: 0.8rem; cursor: pointer; transition: all 0.12s; }
.status-actions button.active { background: var(--active-bg); color: var(--active-fg); border-color: var(--active-bg); }
.status-actions button:hover { border-color: var(--accent); }

/* generic timeline */
.timeline { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.timeline li { border-left: 3px solid var(--border); padding: 0.35rem 0 0.35rem 0.8rem; margin-bottom: 0.3rem; font-size: 0.9rem; }
.timeline .meta { color: var(--muted); font-size: 0.78rem; }

/* note form / legacy buttons */
form.note-form textarea { width: 100%; min-height: 70px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.55rem; font: inherit; background: var(--surface); color: var(--text); }
button.primary { background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--r); padding: 0.5rem 1.1rem; font-size: 0.9rem; cursor: pointer; margin-top: 0.4rem; font-weight: 600; }
button.primary:hover { background: var(--accent-dark); }
.errorlist { color: var(--bad); font-size: 0.85rem; padding-left: 1rem; }

/* login card (allauth form sits inside .auth-shell) */
.login-card { box-shadow: var(--shadow); border-radius: var(--r-lg); }
.login-card input { width: 100%; padding: 0.6rem; margin: 0.25rem 0 0.7rem; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; background: var(--surface); color: var(--text); }
.cta.big { display: inline-block; border: none; font-size: 1rem; padding: 0.65rem 1.4rem; cursor: pointer; margin-top: 0.6rem; background: var(--accent); color: var(--on-accent); border-radius: var(--r); font-weight: 600; }
.cta.big:hover { background: var(--accent-dark); text-decoration: none; }

/* empty states */
.empty { padding: 1.4rem; text-align: center; color: var(--muted); }
.empty-state { text-align: center; color: var(--muted); padding: 2.6rem 1rem; background: var(--card); border: 1px dashed var(--border); border-radius: var(--r-lg); }
.empty-state .es-icon { font-size: 2rem; opacity: 0.5; display: block; margin-bottom: 0.5rem; }
.empty-state .es-title { font-weight: 600; color: var(--text); margin-bottom: 0.25rem; }
td .es-mini { color: var(--muted); }

/* htmx niceties */
.htmx-indicator { opacity: 0; transition: opacity 0.15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request table.list tbody, .htmx-request #contact-rows, .htmx-request #lead-rows { opacity: 0.45; transition: opacity 0.15s; }
.loading-dot { display: inline-block; width: 0.9rem; height: 0.9rem; border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--inset) 25%, var(--hover) 37%, var(--inset) 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: var(--r-sm); }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* dashboard */
.section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin: var(--s5) 0 var(--s2); }
.section-label:first-of-type { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.cards .card { margin: 0; display: block; transition: box-shadow 0.14s, transform 0.14s; }
a.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); text-decoration: none; }
.cards .card.accent { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cards .card.alert { border-color: var(--line-bad); box-shadow: inset 0 0 0 1px var(--line-bad); }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-ico { font-size: 1.1rem; opacity: 0.6; }
.card-n { font-size: 1.9rem; font-weight: 700; color: var(--head); line-height: 1.05; font-variant-numeric: tabular-nums; }
.card-n.bad { color: var(--bad); }
.card-l { font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-bottom: var(--s4); }
/* Grid items default to min-width:auto, so a panel refuses to shrink below the
   min-content of its nowrap rows (due-title/feed-sub) and forces horizontal
   overflow at narrow viewports; min-width:0 lets the panel take the track size
   so the flex rows inside can truncate as designed. */
.grid2 > * { min-width: 0; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); }
.panel h2 { font-size: 1rem; margin: 0 0 0.7rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.panel h2 .h2-link { font-size: 0.8rem; font-weight: 400; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.82rem; }
.bar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--inset); border-radius: 4px; height: 15px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; transition: width 0.3s; }
.bar-fill.green { background: var(--ok); }
.bar-fill.muted-fill { background: #b8c4d0; }
.bar-n { text-align: right; font-variant-numeric: tabular-nums; }
table.mini { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
table.mini td { padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--border-2); }
table.mini td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.mini tr:last-child td { border-bottom: none; }
.pill { display: inline-block; padding: 0.08rem 0.5rem; border-radius: 999px; font-size: 0.72rem; background: var(--chip-bg); color: var(--chip-fg); }
ul.due-list { list-style: none; margin: 0; padding: 0; }
ul.due-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border-2); font-size: 0.87rem; }
ul.due-list li:last-child { border-bottom: none; }
ul.due-list .due-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.due-list .due-when { flex: 0 0 auto; font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
ul.feed { list-style: none; margin: 0; padding: 0; }
ul.feed li { display: flex; gap: 0.55rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-2); }
ul.feed li:last-child { border-bottom: none; }
ul.feed .feed-ico { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--inset); display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; }
ul.feed .feed-main { flex: 1 1 auto; min-width: 0; }
ul.feed .feed-sub { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.feed .feed-meta { font-size: 0.74rem; color: var(--muted); }

/* forms */
.form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.2rem; max-width: 620px; box-shadow: var(--shadow-sm); }
.form-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.form-row label { flex: 1 1 220px; display: flex; flex-direction: column; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.6rem; }
.form-row input { margin-top: 0.2rem; padding: 0.55rem; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; background: var(--surface); color: var(--text); }
.form-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-soft); }

.act-body { margin-top: .3rem; padding: .5rem .7rem; background: var(--inset); border-left: 2px solid var(--border); border-radius: 4px; font-size: .86rem; white-space: pre-wrap; max-height: 260px; overflow: auto; }

/* LMS task board (Monday-style) */
.board-meta { display: flex; gap: 0.4rem; align-items: center; }
.pill-bad { background: var(--st-over-bg); color: var(--bad); }
.board-group { margin-bottom: 1.4rem; }
.board-group-head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem 0.1rem; }
.board-group-title { font-weight: 700; color: var(--head); border-left: 4px solid var(--accent); padding-left: 0.5rem; }
table.board-table td { vertical-align: middle; }
.task-title-cell a { font-weight: 600; }
.subcount { color: var(--muted); font-size: 0.76rem; margin-left: 0.4rem; white-space: nowrap; }
.chip.tstatus-not_started { background: var(--st-stale-bg); color: var(--st-stale-fg); }
.chip.tstatus-in_progress { background: var(--st-new-bg); color: var(--st-new-fg); }
.chip.tstatus-waiting_feedback { background: var(--st-prog-bg); color: var(--warn); }
.chip.tstatus-approved { background: var(--st-won-bg); color: var(--ok); }
.chip.tstatus-done { background: var(--st-done-bg); color: var(--st-done-fg); }
.chip.prio-low { background: var(--st-stale-bg); color: var(--st-stale-fg); }
.chip.prio-medium { background: var(--st-med-bg); color: var(--st-med-fg); }
.chip.prio-high { background: var(--st-high-bg); color: var(--st-high-fg); }
/* p6w16 failure-queue triage chips — token-only, no hex (D14). */
.chip.triage-stuck { background: var(--st-over-bg); color: var(--bad); }
.chip.triage-retry { background: var(--st-prog-bg); color: var(--warn); }
.chip.triage-superseded { background: var(--st-stale-bg); color: var(--st-stale-fg); }
.chip.triage-resolved { background: var(--st-won-bg); color: var(--ok); }
.autom-triage-summary { color: var(--muted); font-size: 0.85rem; margin: var(--s2) 0 0; }

/* p6w19 — admin-only Requeue action on the failure queue.
   The button reuses .btn-navy so it inherits Flagship navy (#01253d) and the
   global :focus-visible gold (#cab775) ring; no bespoke colours introduced. */
.autom-action-col { white-space: nowrap; }
.autom-action { white-space: nowrap; }
.autom-requeue-form { margin: 0; display: inline; }
.autom-requeue-btn { min-height: 32px; }
.autom-requeued { color: var(--muted); font-size: 0.8rem; }
.autom-action-none { color: var(--muted); }
.chip.prio-urgent { background: var(--st-over-bg); color: var(--bad); }
.chip.prio-overdue { background: var(--st-odue-bg); color: var(--st-odue-fg); font-weight: 700; }

/* --- Board inline pill dropdown (status + approval) --- */
.status-cell, .approval-cell { position: relative; }
.status-pill, .appr-pill { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid transparent; border-radius: 999px; padding: 0.18rem 0.55rem; font-size: 0.76rem; font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1.2; }
.status-pill:hover, .appr-pill:hover { filter: brightness(0.97); border-color: rgba(0,0,0,0.08); }
.status-pill .caret, .appr-pill .caret { font-size: 0.6rem; opacity: 0.6; }
.status-menu { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 190px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(20,40,70,0.16); padding: 0.3rem; display: flex; flex-direction: column; gap: 1px; }
.status-menu-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; background: none; border: none; border-radius: 7px; padding: 0.4rem 0.5rem; font: inherit; font-size: 0.82rem; cursor: pointer; color: var(--text); }
.status-menu-item:hover { background: var(--hover); }
.swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 4px; background: #cbd5e1; }
.swatch.tstatus-not_started { background: #94a3b8; }
.swatch.tstatus-in_progress { background: #2f7ff0; }
.swatch.tstatus-waiting_feedback { background: var(--warn); }
.swatch.tstatus-approved { background: var(--ok); }
.swatch.tstatus-done { background: var(--st-done-fg); }

/* --- Approvals gate (M5.2) --- */
.chip.appr-awaiting, .appr-pill.appr-awaiting { background: var(--st-prog-bg); color: var(--warn); }
.chip.appr-approved, .appr-pill.appr-approved { background: var(--st-won-bg); color: var(--ok); }
.chip.appr-rework, .appr-pill.appr-rework { background: var(--st-over-bg); color: var(--bad); }
.chip.appr-none, .appr-pill.appr-none { background: var(--inset); color: var(--muted); }
.appr-pill.appr-awaiting::before, .appr-pill.appr-approved::before, .appr-pill.appr-rework::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.85; }
.swatch.appr-awaiting { background: var(--warn); }
.swatch.appr-approved { background: var(--ok); }
.swatch.appr-rework { background: var(--bad); }
.swatch.appr-none { background: #cbd5e1; }
.approval-card .approval-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.approval-card .appr-meta { margin: 0.2rem 0 0.4rem; }
.approval-card .appr-note { font-style: italic; color: var(--st-prog-fg); background: var(--st-prog-bg); border-radius: 8px; padding: 0.5rem 0.7rem; }
.approval-form textarea { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.65rem; font: inherit; font-size: 0.86rem; resize: vertical; background: var(--surface); color: var(--text); }
.approval-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.55rem; }
.btn.appr-btn-approved { background: var(--ok-deep); color: #fff; border-color: var(--ok-deep); }
.btn.appr-btn-rework { background: var(--bad-deep); color: var(--on-badge); border-color: var(--bad-deep); }
.btn.appr-btn-awaiting { color: var(--warn); border-color: var(--line-warn); }

.progress { display: inline-block; width: 90px; height: 8px; background: var(--inset); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.progress-fill { display: block; height: 100%; background: var(--ok); }
ul.checklist { list-style: none; margin: 0.4rem 0 0; padding: 0; }
ul.checklist li { margin-bottom: 0.2rem; }
.check-btn { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 0.25rem 0.1rem; font: inherit; color: var(--text); }
.check-btn .box { flex: 0 0 auto; width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--on-accent); }
ul.checklist li.done .box { background: var(--ok); border-color: var(--ok); }
ul.checklist li.done .check-text { color: var(--muted); text-decoration: line-through; }

/* contact record UX */
.sec-h { font-size: 1.05rem; margin: 0 0 0.6rem; color: var(--head); }
.detail-grid .card { margin-bottom: 0; }
.kv.card dt:first-child { margin-top: 0; }
ul.thread { list-style: none; margin: 0.4rem 0 0; padding: 0; }
ul.thread .act { display: flex; gap: 0.6rem; background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: var(--r); padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; box-shadow: var(--shadow-sm); }
ul.thread .act.dir-in { border-left-color: var(--accent); }
ul.thread .act.dir-out { border-left-color: var(--ok); }
.act-icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--inset); display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.act-email .act-icon { background: var(--st-new-bg); }
.act-call .act-icon { background: var(--st-won-bg); }
.act-note .act-icon { background: var(--st-prog-bg); }
.act-main { flex: 1 1 auto; min-width: 0; }
.act-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.act-subject { font-weight: 700; color: var(--text); }
.act-kind { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.dir-tag { font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; text-transform: uppercase; }
.dir-tag.out { background: var(--st-won-bg); color: var(--ok); }
.dir-tag.in { background: var(--st-new-bg); color: var(--st-new-fg); }
.act-details { margin-top: 0.35rem; }
.act-details summary { cursor: pointer; color: var(--muted); font-size: 0.86rem; list-style: none; }
.act-details summary::-webkit-details-marker { display: none; }
.act-details[open] summary { color: var(--blue); }
.act-details .act-body { max-height: 420px; }
details.fieldset { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 0.6rem; overflow: hidden; box-shadow: var(--shadow-sm); }
details.fieldset > summary { cursor: pointer; padding: 0.7rem 0.9rem; font-weight: 600; color: var(--head);
  display: flex; align-items: center; gap: 0.5rem; list-style: none; background: var(--surface-2); }
details.fieldset > summary::-webkit-details-marker { display: none; }
details.fieldset > summary::before { content: "▸"; color: var(--muted); font-size: 0.8rem; }
details.fieldset[open] > summary::before { content: "▾"; }
.fieldset-name { flex: 1 1 auto; }
.fieldset-n { font-size: 0.72rem; font-weight: 700; background: var(--inset); color: var(--muted); border-radius: 999px; padding: 0.05rem 0.5rem; }
table.kv-table { border: none; border-radius: 0; box-shadow: none; width: 100%; border-collapse: collapse; table-layout: fixed; }
table.kv-table td { border-bottom: 1px solid var(--border); vertical-align: top; padding: 0.5rem 0.6rem; }
table.kv-table tr:last-child td { border-bottom: none; }
table.kv-table tbody tr:hover { background: var(--hover); }
/* Fixed layout + percentage widths stop the label column from starving the
   value column inside the narrow left rail, which previously forced each
   character of a long value onto its own line (one-char-per-line bug). */
.kv-label { width: 40%; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; hyphens: auto; }
.kv-val { width: 60%; font-size: 0.88rem; overflow-wrap: anywhere; hyphens: auto; }

/* Prominent enquiry / client-interest card (contact workspace) --------- */
.ws-enquiry { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent, #cab775); border-radius: var(--r-lg); padding: 0.8rem 0.95rem; margin: 0 0 0.9rem; box-shadow: var(--shadow-sm); }
.ws-enquiry .we-head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.55rem; }
.ws-enquiry .we-title { font-weight: 700; color: var(--head); font-size: 0.9rem; letter-spacing: 0.01em; }
.ws-enquiry .we-src { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--inset); border-radius: 999px; padding: 0.1rem 0.55rem; margin-left: auto; }
.ws-enquiry .we-lookingfor { font-size: 0.95rem; color: var(--head); line-height: 1.35; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.ws-enquiry dl.we-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.7rem; margin: 0; }
.ws-enquiry dl.we-facts dt { color: var(--muted); font-size: 0.78rem; }
.ws-enquiry dl.we-facts dd { margin: 0; font-size: 0.82rem; color: var(--text); overflow-wrap: anywhere; }
.ws-enquiry .we-when { margin: 0.55rem 0 0; font-size: 0.74rem; color: var(--muted); }

/* Board broker people-picker: Claim button matches the chip affordance ---- */
.col-broker .claim-btn { font: inherit; cursor: pointer; border: 1px dashed var(--border); background: var(--inset); color: var(--muted); }
.col-broker .claim-btn:hover { color: var(--head); border-style: solid; }
.assign-menu .assign-none { color: var(--muted); }

/* Pinned origin/ingress event at the base of the timeline --------------- */
.act.act-origin { border-top: 1px dashed var(--border); margin-top: 0.4rem; padding-top: 0.7rem; opacity: 0.95; }
.act.act-origin .act-subject { font-weight: 700; }
.act.act-origin .we-src { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--inset); border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.4rem; }

/* ---------- contact record (M1, HubSpot 3-column) ---------- */
.record-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.avatar-xl { width: 54px; height: 54px; font-size: 1.25rem; }
.record-title { min-width: 0; }
.record-title h1 { margin: 0 0 0.25rem; }
.record-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.record-actions { margin-left: auto; display: flex; gap: var(--s2); }
.record-cols { display: grid; grid-template-columns: 320px minmax(0,1fr) 300px; gap: var(--s4); align-items: start; }
.rail { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.rail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.rail-card h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  margin: 0; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.rail-count { background: var(--border-2); color: var(--muted); border-radius: 999px; padding: 0.02rem 0.5rem; font-size: 0.72rem; }
.rail-body { padding: 0.7rem 0.9rem; }
.rail-subhead { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; margin: 0.4rem 0 0.1rem 0.1rem; }
.id-row { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.42rem 0; border-bottom: 1px solid var(--border-2); font-size: 0.86rem; }
.id-row:last-child { border-bottom: none; }
.id-row .k { color: var(--muted); flex: 0 0 auto; }
.id-row .v { text-align: right; word-break: break-word; }
.related-row { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--border-2); }
.related-row:last-child { border-bottom: none; }
.related-row:hover { text-decoration: none; }
.related-main { font-weight: 600; font-size: 0.86rem; color: var(--text); }
.related-meta { font-size: 0.76rem; color: var(--muted); margin: 0.1rem 0 0.2rem; }

/* composer */
.composer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--s3); margin-bottom: var(--s4); }
.composer textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--r); padding: 0.6rem 0.7rem; font: inherit; font-size: 0.9rem; resize: vertical; background: var(--surface); color: var(--text); }
.composer textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-soft); }
.composer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); }
.composer-hint { font-size: 0.78rem; }
.composer-btns { display: flex; gap: var(--s2); }

/* activity tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--s3); flex-wrap: wrap; }
.tab { padding: 0.5rem 0.8rem; border: none; background: none; cursor: pointer; font: inherit; font-size: 0.88rem;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--head); border-bottom-color: var(--accent); font-weight: 600; }
.tab-n { font-size: 0.72rem; background: var(--border-2); color: var(--muted); border-radius: 999px; padding: 0.02rem 0.4rem; margin-left: 0.2rem; }

@media (max-width: 1080px) {
  .record-cols { grid-template-columns: 1fr; }
  .rail-right { order: 3; }
}

/* legacy container (safety) */
.container { max-width: 1240px; margin: 0 auto; padding: 0 var(--s4); }

/* ============================================================= RESPONSIVE */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-pop); }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-close { display: inline-flex; }
  .app-main { margin-left: 0; }
  .hamburger { display: inline-flex; }
  .app-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app-scrim.is-open { opacity: 1; pointer-events: auto; }
  .content { padding: var(--s4); }
  .grid2 { grid-template-columns: 1fr; }
  h1 { font-size: 1.2rem; }
  table.list th:nth-child(n+5), table.list td:nth-child(n+5) { display: none; }
  .bar-row { grid-template-columns: 100px 1fr 30px; }
  .kv-label { width: 42%; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s2); }
  .card-n { font-size: 1.5rem; }
  .topbar { padding: 0 var(--s4); }
}
@media (min-width: 769px) { .app-scrim { display: none; } }

/* ============================================================
   M2 — Contacts list: saved views, filter bar, bulk, slide-over
   ============================================================ */
.page-head-actions { display: flex; align-items: center; gap: var(--s2); position: relative; }

/* saved-view tabs */
.view-tabs { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap;
  margin-bottom: var(--s3); border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.view-tab { display: inline-flex; align-items: center; gap: .3rem; padding: .42rem .7rem;
  font-size: .84rem; font-weight: 600; color: var(--muted); border-radius: var(--r-sm) var(--r-sm) 0 0;
  border: 1px solid transparent; border-bottom: none; position: relative; top: 1px; white-space: nowrap; }
.view-tab:hover { color: var(--text); background: var(--inset); text-decoration: none; }
.view-tab.active { color: var(--head); background: var(--surface); border-color: var(--border);
  box-shadow: inset 0 -2px 0 var(--accent); }
.view-tab .sv-share { color: var(--warn); font-size: .8rem; margin-right: .15rem; }
.view-tab-wrap { display: inline-flex; align-items: center; }
.view-tab-del { display: inline; margin-left: -.4rem; }
.view-tab-del button { border: none; background: none; color: var(--faint); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 .3rem; border-radius: 4px; }
.view-tab-del button:hover { color: var(--bad); background: var(--st-over-bg); }

/* save-view popover */
.sv-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 280px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); padding: var(--s4); }
.sv-pop form { display: flex; flex-direction: column; gap: var(--s2); }
.sv-lbl { font-size: .78rem; font-weight: 600; color: var(--muted); }
.sv-pop input[type=text] { padding: .5rem .6rem; border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: .9rem; background: var(--surface); color: var(--text); }
.sv-pop input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-soft); }
.sv-check { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--text); }

/* bulk action bar */
.bulk-bar { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2);
  padding: .5rem .8rem; background: var(--navy); color: #fff; border-radius: var(--r);
  box-shadow: var(--shadow); }
.bulk-bar .bulk-count { font-size: .85rem; margin-right: .3rem; }
.bulk-bar .btn { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.22); }
.bulk-bar .btn:hover { background: rgba(255,255,255,.24); }
.bulk-bar .btn-ghost { background: none; border-color: transparent; }

/* table extras */
.contacts-table .col-check, .contacts-table th.col-check { width: 34px; text-align: center; padding-left: .5rem; padding-right: .3rem; }
.contacts-table .col-eye, .contacts-table th.col-eye { width: 40px; text-align: center; }
.contacts-table input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.contacts-table tr.is-hot .cell-name a { font-weight: 600; }
.hot-star { color: var(--warn); margin-right: .25rem; }
.eye-btn { border: 1px solid transparent; background: none; color: var(--faint); cursor: pointer;
  padding: .25rem; border-radius: var(--r-sm); display: inline-flex; opacity: 0; transition: opacity .12s, color .12s; }
.contacts-table tr:hover .eye-btn { opacity: 1; }
.eye-btn:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--border); }
.cell-name { display: flex; align-items: center; }

/* slide-over */
.slide-scrim { position: fixed; inset: 0; background: var(--scrim); opacity: 0;
  pointer-events: none; transition: opacity .2s; z-index: 70; }
.slide-scrim.is-open { opacity: 1; pointer-events: auto; }
.slide-over { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-pop);
  transform: translateX(100%); transition: transform .22s ease; z-index: 71; display: flex; flex-direction: column; }
.slide-over.is-open { transform: translateX(0); }
.slide-head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4); border-bottom: 1px solid var(--border); }
.slide-title { font-weight: 700; color: var(--head); }
.slide-close { border: none; background: none; color: var(--muted); cursor: pointer; padding: .3rem;
  border-radius: var(--r-sm); display: inline-flex; }
.slide-close:hover { background: var(--inset); color: var(--text); }
.slide-body { overflow-y: auto; padding: var(--s4); flex: 1; }
.slide-empty { text-align: center; padding: var(--s6) 0; }

/* preview content */
.prev-top { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.prev-name { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.prev-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .3rem; }
.prev-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--border); }
.prev-kv-row { display: flex; justify-content: space-between; gap: var(--s3); padding: .4rem 0;
  border-bottom: 1px solid var(--border-2); font-size: .86rem; }
.prev-kv-k { color: var(--muted); font-weight: 600; }
.prev-kv-v { color: var(--text); text-align: right; word-break: break-word; }
.prev-sec { margin-top: var(--s4); }
.prev-sec-h { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--faint); font-weight: 700; margin-bottom: var(--s2); }
.prev-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: .4rem; font-size: .86rem; color: var(--text); }
.prev-row:hover { background: var(--hover); text-decoration: none; border-color: var(--accent); }
.prev-act { display: flex; gap: var(--s2); padding: .45rem 0; border-bottom: 1px solid var(--border-2); }
.prev-act-ico { width: 22px; text-align: center; opacity: .7; }
.prev-act-line { font-size: .86rem; color: var(--text); }
.prev-act-meta { font-size: .76rem; }

/* pager */
.pager { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }

@media (max-width: 720px) {
  .slide-over { width: 100vw; }
  .contacts-table .col-eye { display: none; }
}

/* ============================================================= W1C-1 (D15) */
/* visible keyboard focus: gold ring, 2px, offset */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.sidebar a:focus-visible, .sidebar button:focus-visible { outline-offset: -2px; }

/* theme toggle (topbar) */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--btn-bg); color: var(--muted);
  cursor: pointer; padding: 0; transition: background .12s, color .12s, border-color .12s; }
.theme-toggle:hover { color: var(--gold); border-color: var(--btn-hover-border); background: var(--btn-hover-bg); }
.theme-toggle svg { display: none; }
.theme-toggle .ico-sun { display: block; }
[data-theme="light"] .theme-toggle .ico-sun { display: none; }
[data-theme="light"] .theme-toggle .ico-moon { display: block; }

/* ==========================================================================
   Contact Workspace (D13) — W1C-2
   3-column desktop record; collapses to Overview/Activity/Related tabs on
   mobile. Theme tokens only — no hardcoded colours.
   ========================================================================== */
.workspace { min-width: 0; }

/* header action toolbar */
.ws-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s3) 0 var(--s4); }
.ws-action[disabled] { opacity: 0.45; cursor: not-allowed; }
.ws-action:focus-visible, .ws-tab:focus-visible, .ws-pager .btn:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* three columns on desktop */
.ws-cols { display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px;
  gap: var(--s4); align-items: start; }
.ws-stack { display: flex; flex-direction: column; gap: var(--s3); }

/* mobile tab bar — desktop hides it, mobile drives the columns */
.ws-tabs { display: none; }
.ws-tab { padding: 0.55rem 0.9rem; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 0.9rem; color: var(--muted);
  border-bottom: 2px solid transparent; }
.ws-tab:hover { color: var(--text); }
.ws-tab.active { color: var(--head); border-bottom-color: var(--accent); font-weight: 600; }
@media (max-width: 768px) {
  .ws-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border);
    margin-bottom: var(--s3); }
  .ws-cols { grid-template-columns: 1fr; }
  .ws-rail { display: none; }
  .ws-rail.is-active { display: flex; }
}

/* editable left rail */
.ws-field { margin-bottom: var(--s2); }
.ws-lbl { display: block; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.ws-field-row { display: flex; gap: var(--s2); align-items: center; }
.ws-field-row input, .ws-field-row select,
.ws-call-card select, .ws-call-card input, .ws-task-form input {
  flex: 1; min-width: 0; width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r); padding: 0.4rem 0.55rem;
  font: inherit; font-size: 0.88rem; }
.ws-field-row input:focus-visible, .ws-field-row select:focus-visible,
.ws-call-card select:focus-visible, .ws-call-card input:focus-visible,
.ws-call-card textarea:focus-visible, .ws-task-form input:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-soft); }
.ws-field-row input[disabled] { opacity: 0.6; cursor: not-allowed; }
.ws-own form { margin-top: var(--s2); }
.ws-hint { font-size: 0.75rem; margin: var(--s2) 0 0; }

/* error + empty states */
.ws-error { color: var(--bad); font-size: 0.8rem; margin-top: 4px; }
.ws-banner { background: var(--st-over-bg); color: var(--st-over-fg);
  border: 1px solid var(--line-bad); border-radius: var(--r); padding: 0.5rem 0.7rem;
  margin-bottom: var(--s3); }
.ws-empty { padding: 1rem 0.5rem; border: none; background: none; }

/* structured call card */
.ws-call-card select, .ws-call-card input, .ws-call-card textarea { margin-bottom: var(--s2); }
.ws-call-card textarea { width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r); padding: 0.4rem 0.55rem;
  font: inherit; font-size: 0.88rem; resize: vertical; }
.ws-outcome { background: var(--st-med-bg); color: var(--st-med-fg); }
.ws-overdue { background: var(--st-odue-bg); color: var(--st-odue-fg); }

/* right rail */
.ws-next .ws-next-hint { font-size: 0.88rem; color: var(--text); }
.ws-task-form { margin-bottom: var(--s3); padding-bottom: var(--s3);
  border-bottom: 1px dashed var(--border); }
.ws-task-form .ws-field-row { margin-bottom: var(--s2); }

/* timeline pager */
.ws-pager { display: flex; align-items: center; justify-content: center;
  gap: var(--s3); margin-top: var(--s3); }
.ws-pager-label { font-size: 0.82rem; }

/* ============================================================
   Lead board (D14) — W1C-3
   Theme tokens ONLY (no hardcoded colours). Sticky header + sticky
   key column, inline-edit cells, move menu, bulk bar, quick-add row,
   column manager, saved-view tabs, 390px mobile structure.
   ============================================================ */
.board-head { display: flex; align-items: center; gap: var(--s3); }
.board-head .qa-link { margin-left: auto; }

/* saved-view tabs */
.view-tabs { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s3); }
.view-tab-wrap { display: inline-flex; align-items: center; gap: 2px; }
.view-tab { padding: var(--s1) var(--s3); border-radius: var(--r-sm); color: var(--muted);
  text-decoration: none; border: 1px solid transparent; font-size: 0.9rem; }
.view-tab:hover { background: var(--hover); color: var(--text); }
.view-tab.active { background: var(--active-bg); color: var(--active-fg); font-weight: 600; }
.view-del button { background: none; border: 0; color: var(--faint); cursor: pointer;
  padding: 0 var(--s1); font-size: 0.9rem; border-radius: var(--r-sm); }
.view-del button:hover { color: var(--bad); background: var(--hover); }

/* toolbar */
.board-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-bottom: var(--s3); }
.board-toolbar select, .board-toolbar .board-q { background: var(--btn-bg);
  color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--s1) var(--s2); font-size: 0.9rem; }
.board-q { min-width: 220px; }
.board-count { font-size: 0.85rem; margin-left: auto; }

/* column manager + save view (details popovers) */
.col-menu, .save-view { position: relative; display: inline-block; }
.save-view { margin-bottom: var(--s3); }
.col-menu > summary, .save-view > summary { list-style: none; cursor: pointer; }
.col-menu > summary::-webkit-details-marker,
.save-view > summary::-webkit-details-marker { display: none; }
.col-list, .save-view-form { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  min-width: 220px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-pop); padding: var(--s2); }
.col-item { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); padding: var(--s1); border-radius: var(--r-sm); font-size: 0.9rem; }
.col-item:hover { background: var(--hover); }
.col-item.col-hidden label { color: var(--faint); }
.col-move button { background: var(--btn-bg); border: 1px solid var(--border);
  color: var(--muted); border-radius: var(--r-sm); cursor: pointer; padding: 0 var(--s1); }
.col-move button:hover { background: var(--btn-hover-bg); color: var(--text); }
.save-view-form { display: flex; flex-direction: column; gap: var(--s2); min-width: 260px; }
.save-view-form input[type="text"] { background: var(--inset); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s1) var(--s2); }

/* bulk bar */
.bulk-bar { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3);
  margin-bottom: var(--s2); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); }
.bulk-bar[hidden] { display: none; }
.bulk-count { font-weight: 600; color: var(--head); font-size: 0.9rem; }
.bulk-bar select { background: var(--btn-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s1) var(--s2); }
.bulk-clear { background: none; border: 0; color: var(--muted); cursor: pointer;
  text-decoration: underline; font-size: 0.85rem; }

/* the board table: sticky header row + sticky key columns */
.board-scroll { overflow: auto; max-height: calc(100vh - var(--topbar-h) - 220px);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.board-scroll:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.board-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; }
.board-table thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.board-table .col-sticky { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.board-table .col-sticky-2 { position: sticky; left: 36px; z-index: 2;
  background: var(--surface); box-shadow: 4px 0 8px -4px var(--scrim); }
.board-table thead .col-sticky, .board-table thead .col-sticky-2 { z-index: 4;
  background: var(--surface-2); }
.board-table td, .board-table th { padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border-2); white-space: nowrap; }
/* Thin single-line rows (Monday parity): long free-text values ellipsize
   inside a capped cell instead of wrapping and inflating row height. The
   table slides horizontally, so nothing is lost — just tidier. */
/* Ellipsis on INNER elements only. Setting display:inline-block on the <td>
   itself rips the cell out of the table grid: cells stack, every value lands
   one column off and the first row bleeds into the group band (bug A2/A3). */
.board-table .col-contact a, .board-table .col-source > *:not(form) {
  display: inline-block; max-width: 26ch; overflow: hidden;
  text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.board-table td.col-boat, .board-table td.col-owns,
.board-table td.col-location, .board-table td.col-phone {
  max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
.board-row:hover td { background: var(--hover); }
.board-row:hover .col-sticky, .board-row:hover .col-sticky-2 { background: var(--hover); }
.col-head { position: relative; }
.col-resize { position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; touch-action: none; }
.col-resize:hover { background: var(--focus-soft); }

/* group sections */
.group-head th { background: var(--surface-2); color: var(--head); text-align: left;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em;
  border-top: 1px solid var(--border); }
.group-count { display: inline-block; margin-left: var(--s2); padding: 0 var(--s2);
  border-radius: 999px; background: var(--chip-bg); color: var(--chip-fg);
  font-size: 0.75rem; }
.group-empty td { color: var(--faint); font-style: italic; }

/* Collapsible groups (Monday parity) ------------------------------------ */
.group-head th { position: relative; }
.group-toggle { background: none; border: 0; cursor: pointer; color: inherit;
  padding: 0 0.35rem 0 0; line-height: 1; font-size: 0.9rem; }
.group-caret { display: inline-block; transition: transform .12s ease; }
.board-group.is-collapsed .group-caret { transform: rotate(-90deg); }
.board-group.is-collapsed > tr:not(.group-head) { display: none; }
.group-menu { display: inline-block; position: relative; margin-left: 0.4rem; }
.group-menu > summary { list-style: none; cursor: pointer; color: var(--muted);
  padding: 0 0.3rem; border-radius: var(--r); font-weight: 700; }
.group-menu > summary::-webkit-details-marker { display: none; }
.group-menu > summary:hover { color: var(--head); background: var(--hover); }
.group-menu-list { position: absolute; top: 1.5rem; left: 0; z-index: 6;
  min-width: 180px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-md, 0 6px 20px -6px var(--scrim));
  padding: 0.3rem; display: flex; flex-direction: column; }
.group-menu-list button { text-align: left; background: none; border: 0;
  color: var(--text); padding: 0.4rem 0.55rem; border-radius: var(--r);
  cursor: pointer; font: inherit; text-transform: none; letter-spacing: 0; }
.group-menu-list button:hover { background: var(--hover); }

/* inline-edit cells */
.cell-edit { margin: 0; display: inline-block; }
.cell-input { background: transparent; color: var(--text); border: 1px solid transparent;
  border-radius: var(--r-sm); padding: 2px var(--s1); font-size: 0.9rem; max-width: 160px; }
.cell-input:hover { border-color: var(--border); background: var(--inset); }
.cell-input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px;
  background: var(--inset); border-color: var(--border); }
.cell-num { max-width: 90px; }
.budget-pair { display: inline-flex; align-items: center; gap: var(--s1); }
select.cell-input { appearance: auto; }

/* move menu (drag/drop fallback — R2 brings DnD) */
.move-menu { position: relative; display: inline-block; }
.move-menu > summary { list-style: none; cursor: pointer; }
.move-menu > summary::-webkit-details-marker { display: none; }
.move-menu > summary .caret { margin-left: 4px; opacity: 0.7; }
.move-menu > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.move-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-pop); padding: var(--s1); display: flex; flex-direction: column; }
.move-list button { text-align: left; background: none; border: 0; color: var(--text);
  padding: var(--s1) var(--s2); border-radius: var(--r-sm); cursor: pointer; font-size: 0.9rem; }
.move-list button:hover, .move-list button:focus-visible { background: var(--hover);
  outline: none; }
.move-list button.active { background: var(--accent-soft); color: var(--head); font-weight: 600; }

/* row error + board alert (rejected writes roll back to server state) */
.row-invalid td { background: var(--st-over-bg); }
.row-error { display: block; color: var(--bad); font-size: 0.8rem; margin-top: 2px; }
.board-alert { margin-top: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r);
  background: var(--st-over-bg); color: var(--st-over-fg);
  border: 1px solid var(--line-bad); font-size: 0.9rem; }

/* empty states */
.board-empty { padding: var(--s6) var(--s4); text-align: center; color: var(--muted); }
.board-empty .btn { margin-top: var(--s2); display: inline-block; }

/* quick-add row */
.quick-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-top: var(--s3); padding: var(--s2) var(--s3); background: var(--surface);
  border: 1px dashed var(--border); border-radius: var(--r); }
.qa-plus { color: var(--gold); font-weight: 700; font-size: 1.1rem; }
.quick-add-row input { background: var(--inset); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--s1) var(--s2); font-size: 0.9rem; min-width: 110px; flex: 1 1 110px; }
.quick-add-row .qa-full { font-size: 0.85rem; }

/* 390px mobile: toolbar stacks, board scrolls horizontally, key column stays */
@media (max-width: 430px) {
  .board-toolbar { flex-direction: column; align-items: stretch; }
  .board-toolbar select, .board-q { width: 100%; min-width: 0; }
  .board-count { margin-left: 0; }
  .board-scroll { max-height: none; }
  .board-table { min-width: 640px; } /* horizontal scroll; sticky contact col keeps context */
  .board-table td, .board-table th { padding: var(--s1) var(--s2); font-size: 0.85rem; }
  .quick-add-row input { min-width: 100%; }
  .view-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .move-list { position: fixed; left: var(--s3); right: var(--s3); top: auto; }
  /* The notification bell widened the topbar action row past 390px; tighten
     the chrome spacing so every control stays visible with no overflow. */
  .topbar { padding: 0 var(--s2); }
  .topbar-actions { gap: var(--s2); }
}

/* ---------- Accessibility: skip-to-content link ----------
   Off-screen until keyboard-focused, then pins to the top-left so a
   keyboard/AT user can jump past the sidebar nav straight to <main id="main">.
   Uses theme tokens so it reads correctly in both dark and light themes. */
.skip-to-content{
  position:absolute;
  left:-9999px;
  top:.5rem;
  z-index:1000;
  padding:.55rem 1rem;
  background:var(--accent);
  color:var(--on-accent);
  font-weight:600;
  text-decoration:none;
  border-radius:.4rem;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.skip-to-content:focus,
.skip-to-content:focus-visible{
  left:.75rem;
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}
/* the main landmark receives focus programmatically after the skip; never show a lingering ring on it */
main.content:focus{outline:none;}

/* --- P3-CSP: inline style= migrated to classes so style-src drops 'unsafe-inline' (W3D-2c) --- */
col.cg-check { width: 36px; }
.search-input { min-width: 230px; }
.section-gap { margin-top: 1.5rem; }
.run-intro { margin: 0 0 1rem; }
.queue-intro { margin: .25rem 0 1rem; }
.preview-empty { font-size: .85rem; }
.lead-qa-actions { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; }
.lead-qa-actions .cta { margin-top: 0; }
/* width buckets for progress/funnel/fleet bars (widthratio yields an integer 0-100) */
.wpct-0{width:0%}
.wpct-1{width:1%}
.wpct-2{width:2%}
.wpct-3{width:3%}
.wpct-4{width:4%}
.wpct-5{width:5%}
.wpct-6{width:6%}
.wpct-7{width:7%}
.wpct-8{width:8%}
.wpct-9{width:9%}
.wpct-10{width:10%}
.wpct-11{width:11%}
.wpct-12{width:12%}
.wpct-13{width:13%}
.wpct-14{width:14%}
.wpct-15{width:15%}
.wpct-16{width:16%}
.wpct-17{width:17%}
.wpct-18{width:18%}
.wpct-19{width:19%}
.wpct-20{width:20%}
.wpct-21{width:21%}
.wpct-22{width:22%}
.wpct-23{width:23%}
.wpct-24{width:24%}
.wpct-25{width:25%}
.wpct-26{width:26%}
.wpct-27{width:27%}
.wpct-28{width:28%}
.wpct-29{width:29%}
.wpct-30{width:30%}
.wpct-31{width:31%}
.wpct-32{width:32%}
.wpct-33{width:33%}
.wpct-34{width:34%}
.wpct-35{width:35%}
.wpct-36{width:36%}
.wpct-37{width:37%}
.wpct-38{width:38%}
.wpct-39{width:39%}
.wpct-40{width:40%}
.wpct-41{width:41%}
.wpct-42{width:42%}
.wpct-43{width:43%}
.wpct-44{width:44%}
.wpct-45{width:45%}
.wpct-46{width:46%}
.wpct-47{width:47%}
.wpct-48{width:48%}
.wpct-49{width:49%}
.wpct-50{width:50%}
.wpct-51{width:51%}
.wpct-52{width:52%}
.wpct-53{width:53%}
.wpct-54{width:54%}
.wpct-55{width:55%}
.wpct-56{width:56%}
.wpct-57{width:57%}
.wpct-58{width:58%}
.wpct-59{width:59%}
.wpct-60{width:60%}
.wpct-61{width:61%}
.wpct-62{width:62%}
.wpct-63{width:63%}
.wpct-64{width:64%}
.wpct-65{width:65%}
.wpct-66{width:66%}
.wpct-67{width:67%}
.wpct-68{width:68%}
.wpct-69{width:69%}
.wpct-70{width:70%}
.wpct-71{width:71%}
.wpct-72{width:72%}
.wpct-73{width:73%}
.wpct-74{width:74%}
.wpct-75{width:75%}
.wpct-76{width:76%}
.wpct-77{width:77%}
.wpct-78{width:78%}
.wpct-79{width:79%}
.wpct-80{width:80%}
.wpct-81{width:81%}
.wpct-82{width:82%}
.wpct-83{width:83%}
.wpct-84{width:84%}
.wpct-85{width:85%}
.wpct-86{width:86%}
.wpct-87{width:87%}
.wpct-88{width:88%}
.wpct-89{width:89%}
.wpct-90{width:90%}
.wpct-91{width:91%}
.wpct-92{width:92%}
.wpct-93{width:93%}
.wpct-94{width:94%}
.wpct-95{width:95%}
.wpct-96{width:96%}
.wpct-97{width:97%}
.wpct-98{width:98%}
.wpct-99{width:99%}
.wpct-100{width:100%}

/* htmx indicator styles — vendored from htmx's default injected <style> (W3D-2c:
   includeIndicatorStyles disabled via meta so style-src can stay 'self'). */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }
.htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }

/* ---------- Notifications: header bell + inbox (p6w4) ---------- */
.notifbell { position: relative; }
.notifbell-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: none; border: none; color: var(--text); cursor: pointer; border-radius: 999px; }
.notifbell-trigger:hover { background: var(--bg); }
.notifbell-badge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--bad-deep); color: var(--on-badge); font-size: 0.64rem; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.notifbell-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); z-index: 50; overflow: hidden; }
.notifbell-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); }
.notifbell-title { font-weight: 600; font-size: 0.9rem; }
.notifbell-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.notifbell-item { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); }
.notifbell-item.is-unread { background: var(--bg); }
.notifbell-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notifbell-item-title { font-size: 0.84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notifbell-item-time { font-size: 0.72rem; color: var(--muted); }
.notifbell-empty { padding: 1rem 0.85rem; color: var(--muted); font-size: 0.84rem; text-align: center; }
.notifbell-all { display: block; padding: 0.6rem 0.85rem; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--blue); }
.notifbell-all:hover { background: var(--bg); text-decoration: none; }
.nav-badge { display: inline-block; min-width: 17px; padding: 0 5px; border-radius: 999px; background: var(--bad-deep); color: var(--on-badge); font-size: 0.66rem; font-weight: 700; line-height: 17px; text-align: center; }

.notif-page { max-width: 760px; }
.notif-sub { color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0 0; }
.notif-filter { display: flex; gap: 0.4rem; margin-bottom: var(--s3); }
.notif-tab { padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--muted); background: var(--chip-bg); }
.notif-tab:hover { text-decoration: none; color: var(--text); }
.notif-tab.is-active { background: var(--accent); color: var(--on-accent); }
.notif-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.notif-row { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); }
.notif-row:last-child { border-bottom: none; }
.notif-row.is-unread { background: var(--bg); }
.notif-dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 999px; background: var(--muted); }
.notif-info { background: var(--blue); }
.notif-action { background: var(--warn); }
.notif-alert { background: var(--bad-deep); }
.notif-main { flex: 1 1 auto; min-width: 0; }
.notif-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.notif-title { font-weight: 600; font-size: 0.9rem; }
.notif-time { flex: 0 0 auto; font-size: 0.74rem; color: var(--muted); }
.notif-body { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--text-2, var(--muted)); }
.notif-actions { display: flex; align-items: center; gap: var(--s2); margin-top: 0.5rem; }
.notif-readmark { font-size: 0.76rem; color: var(--muted); font-weight: 600; }
.notif-empty { margin-top: var(--s3); }

/* ---------- Automation operator console (p6w7) ---------- */
.autom-sub { color: var(--muted); margin: 0.2rem 0 0; font-size: 0.85rem; }
.autom-page .panel { margin-bottom: 1rem; }
.autom-switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem 1.2rem; }
.autom-switch dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 0; }
.autom-switch dd { margin: 0.3rem 0 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.autom-note { color: var(--muted); font-size: 0.82rem; margin: 0.8rem 0 0; }
.autom-filter { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0 0 0.7rem; }
.autom-rule-search { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.8rem; }
.autom-search-field { display: flex; flex-direction: column; gap: 0.2rem; }
.autom-search-field > span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.autom-rule-search input[type=search], .autom-rule-search select { padding: 0.45rem 0.6rem; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--inset); color: var(--text); font-size: 0.9rem; }
.autom-rule-search input[type=search]:focus, .autom-rule-search select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-soft); }
.autom-scroll { overflow-x: auto; }
table.list td.num, table.list th.num { text-align: right; font-variant-numeric: tabular-nums; }
.chip.autom-st-succeeded { background: var(--st-won-bg); color: var(--ok); }
.chip.autom-st-failed { background: var(--st-over-bg); color: var(--bad); }
.chip.autom-st-dead_letter { background: var(--st-over-bg); color: var(--bad); font-weight: 700; }
.chip.autom-st-skipped_paused { background: var(--st-wait-bg); color: var(--st-wait-fg); }
.chip.autom-st-skipped_loop { background: var(--st-prog-bg); color: var(--warn); }
@media (max-width: 430px) {
  .autom-page table.list { min-width: 32rem; }
}

/* p6w10 — automation rule disable/delete row controls + confirm page */
.autom-row-actions { display: flex; gap: .6rem; align-items: center; white-space: nowrap; }
.autom-row-actions .inline-form { display: inline; margin: 0; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-danger, .link-btn.link-danger { color: var(--bad-deep); }
.btn-danger { color: var(--on-badge); background: var(--bad-deep); border-color: var(--bad-deep); }
.btn-danger:hover { filter: brightness(1.08); }
.panel.form-warning { border-left: 3px solid var(--line-bad); }
.autom-rule-meta { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: .5rem 0 0; }
.autom-rule-meta dt { color: var(--muted); }
.autom-rule-meta dd { margin: 0; }

/* p6w11 unread-badge htmx auto-refresh: sr-only live region + inert polling slot */
.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; }
.notifbell-badgeslot { display: contents; }

/* p6w12 — run-preview (dry-run) surface. Tokens only, no hex. */
.autom-tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border: 1px solid var(--border); border-radius: 0.3rem; padding: 0.05rem 0.35rem; vertical-align: middle; }
.autom-preview-summary .kv { margin-bottom: 0.4rem; }
.autom-match-list { margin: 0; padding-left: 1.1rem; }
.autom-match-list li { margin: 0.1rem 0; }
.autom-nomatch { color: var(--muted); }

/* p6w13 — single-run detail (failure-queue drill-in). Tokens only, no hex. */
.autom-run-detail .panel { margin-top: 0.9rem; }
.autom-muted { color: var(--muted); font-size: 0.82rem; }
.autom-key-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.autom-key-list li { margin: 0; }
.autom-key-list code { border: 1px solid var(--border); border-radius: 0.3rem; padding: 0.05rem 0.35rem; font-size: 0.8rem; }
.autom-error-panel { border-left: 3px solid var(--line-bad); }
.autom-error { margin: 0.4rem 0 0; padding: 0.7rem 0.8rem; background: var(--inset); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); font-size: 0.82rem; white-space: pre-wrap; word-break: break-word; overflow-x: auto; max-height: 22rem; }
.autom-actions-table td, .autom-actions-table th { vertical-align: top; }


/* --- Leads UX fixes (bug list 15 Jul) --- */
form.topbar-search { margin: 0; }

/* B1: Monday-style full-cell status pills on the board */
.board-table .col-status .chip, .board-table .col-status .move-menu summary.chip {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  border-radius: 6px; padding: 0.3rem 0.5rem; }
.chip.status-attempted_1, .chip.status-attempted_2 { background: var(--st-prog-bg); color: var(--st-prog-fg); }
.chip.status-no_connect { background: var(--st-prog-bg); color: var(--warn); }
.chip.status-connected_follow_up { background: var(--st-new-bg); color: var(--st-new-fg); }
.chip.status-inspection_booked { background: var(--st-won-bg); color: var(--st-won-fg); }
.chip.status-nurture_other_boat { background: var(--st-wait-bg); color: var(--st-wait-fg); }

/* B2: per-row quick note */
.note-pop { display: inline-block; margin-left: 0.4rem; }
.note-pop > summary { cursor: pointer; list-style: none; opacity: 0.55; }
.note-pop > summary:hover { opacity: 1; }
.note-pop[open] > summary { opacity: 1; }
.note-pop .note-pop-form { position: absolute; z-index: 6; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem;
  box-shadow: 0 8px 24px var(--scrim); width: 280px; }
.note-pop .note-pop-form textarea { width: 100%; min-height: 64px; margin-bottom: 0.4rem; }

/* A1: global search results */
.search-results h2 { margin-top: 1.2rem; font-size: 0.95rem; }
.search-results li { padding: 0.35rem 0; border-bottom: 1px solid var(--border-2); }