/* 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;
  /* 20 persistent workflow-group colours. These are text/stripe colours, not
     filled badges, and each has readable contrast on the dark board chrome. */
  --grp-01: #75b8ff; --grp-02: #ffcc66; --grp-03: #72d6a1; --grp-04: #d2a8ff;
  --grp-05: #ff8fa3; --grp-06: #68d4e8; --grp-07: #ff9f68; --grp-08: #b7d66d;
  --grp-09: #a9b7ff; --grp-10: #f28bd4; --grp-11: #87d7c7; --grp-12: #e6b566;
  --grp-13: #9fd07f; --grp-14: #7fc8ff; --grp-15: #d8b4fe; --grp-16: #ffa8a8;
  --grp-17: #b8c4d9; --grp-18: #f4d35e; --grp-19: #85e0d0; --grp-20: #c7a6ff;
  /* ---- 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;
  --grp-01: #0b63b6; --grp-02: #8a5a00; --grp-03: #166b3b; --grp-04: #6b3fa0;
  --grp-05: #a12a43; --grp-06: #0b7183; --grp-07: #a3480b; --grp-08: #4f6f00;
  --grp-09: #3f51a5; --grp-10: #9a247b; --grp-11: #11695b; --grp-12: #795100;
  --grp-13: #3d6f20; --grp-14: #14689e; --grp-15: #7442a8; --grp-16: #9b3030;
  --grp-17: #4f5f73; --grp-18: #7a6000; --grp-19: #0b6f63; --grp-20: #6140a0;
  --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); }

.admin-view-switch { display: flex; align-items: center; gap: var(--s1); }
.admin-view-switch label { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.admin-view-switch select { width: 150px; min-height: 34px; padding: .35rem .55rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-size: .8rem; }
.admin-view-banner { position: sticky; top: var(--topbar-h); z-index: 39; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: .65rem var(--s5); background: var(--st-prog-bg); border-bottom: 1px solid var(--line-warn); color: var(--text); }
.admin-view-banner > div { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.admin-view-banner strong { color: var(--head); white-space: nowrap; }
.admin-view-banner span { color: var(--muted); font-size: .84rem; }
.admin-view-banner form { flex: 0 0 auto; margin: 0; }
.admin-view-write-disabled, [data-admin-view-readonly="true"] form[aria-disabled="true"] { cursor: not-allowed; opacity: .58; }
.admin-view-menu { display: none; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.admin-view-menu label { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.admin-view-menu select { display: block; width: 100%; margin-bottom: .45rem; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); }

/* ---- 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: 3; }
/* `--topbar-h` is the offset for the PAGE scroller. A table that lives inside
   its own scroll container owns its own top edge, so the same offset parks the
   header 60px down and the first rows paint in the gap underneath it ("the
   overlapping lines"). Inside a scroller the sticky origin is 0.
   z-index 3 (was 1) keeps the header above the frozen body columns, which sit
   at z-index 2; the frozen HEADER cells stay highest at z-index 11. */
.board-scroll table.list th,
.contacts-table-wrap table.list th,
.claim-queue-table-wrap table.list th,
.listing-table-wrap table.list th { top: 0; }
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; }
/* Listing aging ladder (parity for the Monday aging automations). */
.chip.aging-review { background: var(--warn-bg, #6b4a12); color: var(--warn-fg, #f2d492); }
.aging-tier { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.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; }
.task-title-content { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.task-title-content > .cell-title, .task-title-content > .task-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.task-title-content .cell-title-input { width: 100%; min-width: 0; box-sizing: border-box; }
.task-title-content > .task-open { flex: 0 0 24px; text-align: center; padding: .25rem 0; }
.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, .composer input { 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); box-sizing: border-box; }
.composer textarea:focus, .composer input: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); }
.outlook-picker-target { margin-top: var(--s3); }
.outlook-picker { display: grid; gap: var(--s3); min-width: 0; }
.outlook-picker-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr); gap: var(--s2) var(--s3); align-items: end; }
.outlook-picker-head > div { align-self: center; }
.outlook-picker-head strong, .outlook-picker-head span { display: block; }
.outlook-picker-head .ws-lbl { grid-column: 2; margin: 0; }
.outlook-picker-head input { grid-column: 2; }
.outlook-message-list { display: grid; gap: .45rem; max-height: min(46vh, 420px); margin: 0; padding: .15rem; overflow-y: auto; border: 0; }
.composer .outlook-message-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: start; min-width: 0; padding: .7rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); cursor: pointer; }
.composer .outlook-message-option[hidden] { display: none; }
.composer .outlook-message-option:hover { border-color: var(--accent); }
.composer .outlook-message-option:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.composer .outlook-message-option input[type="radio"] { width: auto; margin: .18rem 0 0; padding: 0; box-shadow: none; }
.outlook-message-copy { display: block; min-width: 0; }
.outlook-message-copy strong, .outlook-message-copy span { display: block; overflow-wrap: anywhere; }
.outlook-message-copy strong { color: var(--head); font-size: .88rem; line-height: 1.35; }
.outlook-message-copy span { margin-top: .2rem; color: var(--muted); font-size: .76rem; }
.outlook-picker-state { margin: 0; padding: .75rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); color: var(--text); }
.outlook-picker-state.is-error { border-color: var(--bad); color: var(--bad); }
.outlook-picker-empty { margin: .5rem 0 0; color: var(--muted); }
@media (max-width: 700px) {
  .outlook-picker-head { grid-template-columns: minmax(0, 1fr); }
  .outlook-picker-head .ws-lbl, .outlook-picker-head input { grid-column: 1; }
  .outlook-picker .composer-foot { align-items: stretch; flex-direction: column; }
  .outlook-picker .composer-btns, .outlook-picker .composer-btns .btn { width: 100%; }
}

/* 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); }
  .admin-view-switch { display: none; }
  .admin-view-menu { display: block; }
  .admin-view-banner { align-items: flex-start; padding: .6rem var(--s4); }
  .admin-view-banner > div { display: block; }
  .admin-view-banner strong, .admin-view-banner span { display: block; white-space: normal; }
}
@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-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
/* overflow-x:auto with no max-height still makes this a scroll CONTAINER, so
   the sticky header inside it resolves against this box — but the box can never
   scroll vertically, so the header never sticks and the rows ride over it.
   Bound the height and give it a real vertical scroller. (Kept as a separate
   rule so the horizontal-scroll declaration above stays verbatim for
   leads.tests_ui_fixes.) */
.contacts-table-wrap { overflow-y: auto;
  max-height: calc(100dvh - var(--topbar-h) - 12rem); }
.claim-queue-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.claim-queue-table { min-width: 38rem; table-layout: fixed; }
.claim-queue-table th, .claim-queue-table td { box-sizing: border-box; vertical-align: middle; }
.claim-queue-table th:nth-child(1), .claim-queue-table td:nth-child(1) { width: 42%; }
.claim-queue-table th:nth-child(2), .claim-queue-table td:nth-child(2) { width: 22%; }
.claim-queue-table th:nth-child(3), .claim-queue-table td:nth-child(3) { width: 24%; }
.claim-queue-table th:nth-child(4), .claim-queue-table td:nth-child(4) { width: 12%; }
.contacts-table { min-width: 0; table-layout: fixed; }
.contacts-table th, .contacts-table td {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
table.contacts-table th, table.contacts-table td { padding-left: .55rem; padding-right: .55rem; }
.contacts-table th { line-height: 1.2; text-overflow: clip; white-space: normal; }
.contacts-table td { white-space: nowrap; }
.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); }
/* Keep the name cell in the table formatting context. Applying flex directly
   to a <td> makes browsers calculate its column independently, which caused
   the live header and body grid to drift apart. The contents can ellipsize
   without changing the cell's display role. */
.cell-name { display: table-cell; }
.cell-name a { display: inline-block; max-width: calc(100% - 1.25rem);
  overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }

/* Fit the operational columns into ordinary laptop/desktop viewports. The
   name link opens the full record, so the redundant quick-preview icon and
   lower-priority last-contacted column step out below 1600px instead of
   leaving a clipped, apparently misaligned table. Wide screens retain every
   column. */
@media (min-width: 769px) and (max-width: 1599px) {
  .contacts-table th:nth-child(9), .contacts-table td:nth-child(9),
  .contacts-table th:nth-child(10), .contacts-table td:nth-child(10) { display: none; }
  .contacts-table th:nth-child(1), .contacts-table td:nth-child(1) { width: 3%; }
  .contacts-table th:nth-child(2), .contacts-table td:nth-child(2) { width: 18%; }
  .contacts-table th:nth-child(3), .contacts-table td:nth-child(3) { width: 25%; }
  .contacts-table th:nth-child(4), .contacts-table td:nth-child(4) { width: 14%; }
  .contacts-table th:nth-child(5), .contacts-table td:nth-child(5) { width: 12%; }
  .contacts-table th:nth-child(6), .contacts-table td:nth-child(6) { width: 10%; }
  .contacts-table th:nth-child(7), .contacts-table td:nth-child(7) { width: 9%; }
  .contacts-table th:nth-child(8), .contacts-table td:nth-child(8) { width: 9%; }
}

@media (min-width: 1600px) {
  .contacts-table th:nth-child(1), .contacts-table td:nth-child(1) { width: 3%; }
  .contacts-table th:nth-child(2), .contacts-table td:nth-child(2) { width: 16%; }
  .contacts-table th:nth-child(3), .contacts-table td:nth-child(3) { width: 22%; }
  .contacts-table th:nth-child(4), .contacts-table td:nth-child(4) { width: 12%; }
  .contacts-table th:nth-child(5), .contacts-table td:nth-child(5) { width: 10%; }
  .contacts-table th:nth-child(6), .contacts-table td:nth-child(6) { width: 8%; }
  .contacts-table th:nth-child(7), .contacts-table td:nth-child(7) { width: 9%; }
  .contacts-table th:nth-child(8), .contacts-table td:nth-child(8) { width: 9%; }
  .contacts-table th:nth-child(9), .contacts-table td:nth-child(9) { width: 8%; }
  .contacts-table th:nth-child(10), .contacts-table td:nth-child(10) { width: 3%; }
}

/* 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; }
.nav-alpha-group { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-nav .nav-item-alpha { color: #89919c; }
.sidebar-nav .nav-item-disabled { cursor: not-allowed; opacity: .72; user-select: none; }
.sidebar-nav .nav-item-disabled:hover { background: transparent; color: #89919c; }
.nav-alpha-label { margin-left: .3rem; font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; }

/* 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 */
/* Fixed 320px/300px rails crush the centre column on narrow laptops; make the
   rails elastic and collapse at the same 1080px breakpoint as .record-cols. */
.ws-cols { display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(240px, 280px);
  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: 1080px) {
  .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; }
.board-pagination { display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s2); margin: var(--s2) 0; }

/* 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-drag-handle { display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.65rem; min-height: 1.65rem; color: var(--muted); cursor: grab;
  border-radius: var(--r-sm); user-select: none; }
.col-drag-handle:hover, .col-drag-handle:focus-visible { color: var(--text);
  background: var(--hover); outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.col-add-mark { color: var(--accent); font-weight: 800; }
.is-col-dragging { cursor: grabbing; user-select: none; }
.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 column header lives in a separate, horizontally-synchronised strip.
   Browser sticky positioning inside a vertically scrolling table is not
   reliable once grouped <tbody> sections and sticky key columns are combined;
   keeping the strip outside the vertical scroller guarantees it never drops
   out while preserving the table's real (visually hidden) semantic header. */
.board-frame { border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); overflow: hidden; isolation: isolate; }
.board-frame:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.board-header-scroll { overflow: hidden; position: relative; z-index: 12;
  height: 42px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.board-scroll { overflow: auto; max-height: calc(100dvh - var(--topbar-h) - 262px);
  background: var(--surface); overscroll-behavior: contain; scrollbar-gutter: stable; }
.board-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px;
  table-layout: fixed;
  border: 0; border-radius: 0; box-shadow: none; }
.board-header-table { table-layout: fixed; position: absolute; inset: 0 auto auto 0; margin: 0; }
.board-header-table thead, .board-header-table tr { height: 42px; }
.board-header-table thead th { position: static; top: auto; height: 42px;
  box-sizing: border-box; background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.board-header-table thead th.col-head { position: relative; }
#board-table > .board-semantic-head { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#board-table > .board-semantic-head th { position: static; top: auto; }
#board-table > .board-semantic-head .col-resize { pointer-events: none; }
.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: 11;
  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;
  overflow: hidden; text-overflow: ellipsis; }
.board-table td.col-contact { overflow: hidden; }
.board-table td.col-status { overflow: visible; }
/* 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; }
.lead-contact-cell { display: flex; min-width: 0; align-items: center; gap: .35rem; }
.board-table .col-contact a { flex: 1 1 auto; min-width: 0; max-width: none; }
.board-table col[data-col="contact"], .board-header-table col[data-col="contact"] { width: 210px; }
.board-table col[data-col="status"], .board-header-table col[data-col="status"] { width: 145px; }
.board-table col[data-col="broker"], .board-header-table col[data-col="broker"] { width: 155px; }
.board-table col[data-col="next_action"], .board-header-table col[data-col="next_action"] { width: 125px; }
.board-table col[data-col="created"], .board-header-table col[data-col="created"] { width: 120px; }
.board-table col[data-col="phone"], .board-header-table col[data-col="phone"] { width: 150px; }
.board-table col[data-col="boat"], .board-header-table col[data-col="boat"] { width: 210px; }
.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); }
.row-edit-load { margin-left: var(--s2); padding: 0.15rem 0.42rem;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--btn-bg); color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.75rem; line-height: 1.2; }
.row-edit-load:hover, .row-edit-load:focus-visible {
  background: var(--btn-hover-bg); color: var(--text); }
.col-head { position: relative; }
.col-head[draggable="true"] { cursor: grab; }
.col-head[draggable="true"]:active { cursor: grabbing; }
.col-head.is-pointer-col-dragging { cursor: grabbing; opacity: .7; }
.col-head.is-pointer-col-target { box-shadow: inset 3px 0 0 var(--accent); }
.col-head-drag { display: inline-flex; margin: 0 .28rem 0 -.35rem;
  min-width: 1.4rem; min-height: 1.4rem; align-items: center;
  justify-content: center; color: var(--muted); font-size: .82rem; vertical-align: middle; }
.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); }
.col-resize:focus-visible { background: var(--focus-soft); outline: 2px solid var(--focus-ring);
  outline-offset: -2px; }
.is-col-resizing { cursor: col-resize; user-select: none; }

/* group sections */
.board-table .group-head th { position: static; top: auto; 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); min-height: 42px;
  box-shadow: inset 4px 0 0 var(--group-colour, transparent); }
.group-label { color: var(--group-colour, var(--head)); font-weight: 700; }
.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-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); }
.group-menu-divider { display: block; height: 1px; margin: var(--s1) 0;
  background: var(--border); }

/* Persistent group palette: one CSS token per database colour key. */
.group-colour-c01 { --group-colour: var(--grp-01); }
.group-colour-c02 { --group-colour: var(--grp-02); }
.group-colour-c03 { --group-colour: var(--grp-03); }
.group-colour-c04 { --group-colour: var(--grp-04); }
.group-colour-c05 { --group-colour: var(--grp-05); }
.group-colour-c06 { --group-colour: var(--grp-06); }
.group-colour-c07 { --group-colour: var(--grp-07); }
.group-colour-c08 { --group-colour: var(--grp-08); }
.group-colour-c09 { --group-colour: var(--grp-09); }
.group-colour-c10 { --group-colour: var(--grp-10); }
.group-colour-c11 { --group-colour: var(--grp-11); }
.group-colour-c12 { --group-colour: var(--grp-12); }
.group-colour-c13 { --group-colour: var(--grp-13); }
.group-colour-c14 { --group-colour: var(--grp-14); }
.group-colour-c15 { --group-colour: var(--grp-15); }
.group-colour-c16 { --group-colour: var(--grp-16); }
.group-colour-c17 { --group-colour: var(--grp-17); }
.group-colour-c18 { --group-colour: var(--grp-18); }
.group-colour-c19 { --group-colour: var(--grp-19); }
.group-colour-c20 { --group-colour: var(--grp-20); }

.group-add-btn { margin-top: var(--s3); }
.group-dialog { width: min(520px, calc(100vw - 2 * var(--s4))); max-height: 85vh;
  overflow: auto; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 0;
  text-align: left; text-transform: none; letter-spacing: normal; font-size: 0.9rem; }
.group-dialog::backdrop { background: var(--scrim); }
.group-dialog-form { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); }
.group-dialog-form h2 { margin: 0; color: var(--head); }
.group-dialog-form > label { display: flex; flex-direction: column; gap: var(--s1);
  color: var(--muted); font-weight: 600; }
.group-dialog-form input[type="text"] { width: 100%; padding: var(--s2) var(--s3);
  color: var(--text); background: var(--inset); border: 1px solid var(--border);
  border-radius: var(--r-sm); font: inherit; }
.group-palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2);
  margin: 0; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r); }
.group-palette legend { padding: 0 var(--s1); color: var(--muted); font-weight: 600; }
.group-swatch { position: relative; min-width: 40px; min-height: 40px; cursor: pointer; }
.group-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.group-swatch > span[aria-hidden="true"] { display: block; width: 100%; height: 40px;
  background: var(--group-colour); border: 3px solid transparent; border-radius: var(--r); }
.group-swatch input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.group-swatch input:checked + span { border-color: var(--head); box-shadow: inset 0 0 0 2px var(--surface); }
.group-swatch.is-used { cursor: not-allowed; opacity: 0.25; }
.group-swatch-auto { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2);
  color: var(--text); text-transform: none; letter-spacing: normal; }
.group-auto-help { margin: calc(-1 * var(--s2)) 0 0; font-size: 0.82rem; }
.group-dialog-actions { display: flex; justify-content: flex-end; gap: var(--s2); }
.card-group-actions { display: flex; gap: var(--s2); padding: var(--s2) var(--s3) 0; }

/* 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; }
/* .board-frame is overflow:hidden and .board-scroll is overflow:auto, so a menu
   opened on a low row is clipped by its own scroller and the status can never
   be changed. board-controls.js measures the summary on `toggle` and flips the
   menu above it. Scoped to >=431px: below that .move-list is a fixed bottom
   sheet (see the 430px block) and must not be re-anchored. */
@media (min-width: 431px) {
  .move-list.menu-up, .status-menu.menu-up { top: auto; bottom: calc(100% + 4px); }
}

/* 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 */

/* ---------- Lead board — phone-card mode (wave 2d, §4.2) ----------
   The SAME board: same query, same mutation endpoints, same permissions.
   Only the drawing differs. Authored by the board writer, applied here because
   shared CSS is coordinator-owned (§8). */
.board-cards { display: block; margin-bottom: var(--s4); }

/* Groups: native <details> — collapsible with zero JS under enforced CSP.
   (board-groups.js is hard-scoped to tbody.board-group and drives the TABLE.) */
.card-group { margin: 0 0 var(--s4); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.card-group > summary { list-style: none; cursor: pointer; display: flex;
  align-items: center; gap: var(--s2); padding: var(--s2) var(--s3);
  background: var(--surface-2); color: var(--head); font-size: 0.8rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  border-left: 4px solid var(--group-colour, var(--border)); }
.card-group > summary::-webkit-details-marker { display: none; }
.card-group > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.card-group:not([open]) .group-caret { transform: rotate(-90deg); }
.card-group-body { display: grid; grid-template-columns: 1fr; gap: var(--s3); padding: var(--s3); }
.card-group-body > .empty { margin: 0; font-style: italic; color: var(--faint); }

/* One lead. .card already supplies background/border/radius/shadow. */
.lead-card { margin: 0; padding: var(--s3); min-width: 0; }
.lead-card-head { display: flex; align-items: baseline; gap: var(--s2); }
.lead-card-name { font-weight: 700; color: var(--head); font-size: 1rem;
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.lead-card-head .note-pop { flex: 0 0 auto; }
.lead-card-head .row-edit-load { flex: 0 0 auto; margin-left: 0; }
.lead-card-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

/* Field list. minmax(0,1fr) + overflow-wrap = no horizontal overflow at 390px. */
.card-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s1) var(--s3); margin: var(--s3) 0 0; align-items: baseline; }
.card-kv dt { color: var(--muted); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600; }
.card-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 0.9rem; }
.card-kv .cell-edit { display: block; }
.card-kv .cell-input { max-width: 100%; width: 100%; }
.card-kv .cell-num { max-width: 100px; }
.card-kv .budget-pair { display: flex; }

/* Rejected write: .row-invalid is td-scoped for the table; the card needs its own. */
.lead-card.row-invalid { border-color: var(--line-bad);
  box-shadow: inset 0 0 0 1px var(--line-bad); }

/* Desktop may sit cards side by side; the phone stays one column.
   Deliberately NOT reusing .cards: its auto-fit minmax would break to multiple
   columns at phone width, which is the one thing card mode must not do. */
@media (min-width: 700px) {
  .card-group-body { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

@media (max-width: 430px) {
  .board-toolbar { flex-direction: column; align-items: stretch; }
  /* Card mode is the phone rendering: one column, tighter chrome. */
  .card-group-body { padding: var(--s2); }
  .lead-card { padding: var(--s2); }
  .board-toolbar select, .board-q { width: 100%; min-width: 0; }
  .board-count { margin-left: 0; }
  .board-scroll { max-height: calc(100dvh - var(--topbar-h) - var(--s4)); }
  .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; }
  /* Phone move-menu = bottom sheet. This is the ONLY working touch path to
     change a lead's status: HTML5 drag-and-drop never fires from a tap, so
     board-order.js is inert on touch and this menu is the documented fallback
     that §4.2 ("keyboard and touch-accessible alternatives to drag") requires.
     It was previously `position: fixed; ...; top: auto`, which is a trap: with
     top:auto a FIXED box resolves to its STATIC position - i.e. wherever the
     row happens to sit - but measured against the VIEWPORT, and then refuses to
     scroll because it is fixed. Any row below the fold opened a menu that could
     never be reached (measured at 390x844: items at y=943..967, ~100px under
     the viewport). Anchor to the viewport bottom instead, and give the sheet its
     own scroll so all ten lead statuses stay reachable. */
  .move-list { position: fixed; left: var(--s3); right: var(--s3);
    top: auto; bottom: var(--s3); max-height: 60vh; overflow-y: auto;
    overscroll-behavior: contain; }
  /* 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); }
  .admin-view-banner { padding: .55rem 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-trigger { text-decoration: none; }
.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; }
.notif-empty-actions { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-top: var(--s3); }
.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; }

@media (max-width: 430px) {
  .notifbell-pop {
    position: fixed;
    top: calc(var(--topbar-h) + var(--s1));
    right: var(--s2);
    left: var(--s2);
    width: auto;
  }
}

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

/* Listings workspace: dense desktop table and purpose-built phone cards. */
.listing-head .muted { margin: .3rem 0 0; }
.listing-total { color: var(--muted); font-variant-numeric: tabular-nums; }
.listing-filters .listing-search { flex: 1 1 22rem; }
.listing-filters input[type=search] { width: 100%; }
.listing-table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.listing-table { min-width: 58rem; }
.listing-boat { display: flex; align-items: center; gap: .7rem; color: var(--text); min-width: 13rem; }
.listing-boat:hover strong { color: var(--blue); text-decoration: underline; }
.listing-boat img, .listing-thumb-placeholder { width: 44px; height: 34px; flex: 0 0 auto; border-radius: var(--r-sm); object-fit: cover; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; }
.listing-boat span { min-width: 0; }
.listing-boat strong, .listing-boat small { display: block; }
.listing-boat strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-boat small { color: var(--muted); margin-top: .12rem; }
.listing-actions, .listing-report-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.listing-documents { background: linear-gradient(135deg, var(--panel), var(--inset)); }
.document-sync { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.listing-document-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.listing-document-card { min-width: 0; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r); background: var(--panel); display: grid; grid-template-rows: auto 1fr auto; gap: var(--s3); }
.listing-document-card h3 { margin: 0 0 .35rem; color: var(--head); }
.listing-document-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.listing-document-card .btn { justify-content: center; }
.document-format { width: max-content; padding: .25rem .45rem; border: 1px solid var(--gold); color: var(--gold); border-radius: 3px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.listing-footer td { text-align: right; }.listing-footer .muted { float: left; }
.listing-title-wrap { display: flex; align-items: center; gap: 1rem; }
.listing-title-wrap h1 { margin: 0 0 .35rem; }.listing-kicker { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; font-weight: 700; margin: 0 0 .15rem; }
.listing-hero-thumb { width: 112px; height: 80px; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--border); }
.listing-section-nav { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--border); margin: 0 0 var(--s4); }
.listing-section-nav a { padding: .55rem .75rem; white-space: nowrap; color: var(--muted); font-size: .86rem; font-weight: 600; border-bottom: 2px solid transparent; }
.listing-section-nav a:hover { color: var(--text); border-bottom-color: var(--accent); text-decoration: none; }
.listing-section-nav span { border-radius: 999px; background: var(--surface-2); padding: .05rem .38rem; font-size: .72rem; }
.listing-section { scroll-margin-top: calc(var(--topbar-h) + 1rem); margin-bottom: var(--s4); }
.listing-section > h2, .listing-section-title h2 { margin-top: 0; }
.listing-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }.listing-section-title p { margin-top: .25rem; }.listing-stat { font-size: 2rem; color: var(--head); }
.listing-metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: var(--s2); margin: .8rem 0; }
.listing-metric-strip > div { min-width: 0; border: 1px solid var(--border); border-radius: var(--r); padding: .75rem; background: var(--surface-2); }
.listing-metric-strip strong, .listing-metric-strip span { display: block; }.listing-metric-strip strong { font-size: 1.15rem; color: var(--head); }.listing-metric-strip span { color: var(--muted); font-size: .76rem; margin-top: .1rem; }
.fleet-reporting { min-width: 0; overflow: hidden; }
.fleet-reporting > h3 { margin: 1.35rem 0 .65rem; font-size: 1rem; }
.fleet-freshness { display: grid; justify-items: end; gap: .15rem; text-align: right; color: var(--muted); font-size: .76rem; }
.fleet-freshness strong { color: var(--text); font-size: .82rem; }
.fleet-summary { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.fleet-quality-note { margin: .7rem 0 0; padding: .6rem .75rem; border-left: 3px solid var(--accent); border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); font-size: .8rem; }
.fleet-platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); min-width: 0; }
.fleet-platform-card { min-width: 0; padding: .8rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.fleet-platform-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.fleet-platform-head strong { min-width: 0; overflow-wrap: anywhere; color: var(--head); }
.fleet-live-state { flex: 0 0 auto; padding: .12rem .42rem; border-radius: 999px; background: var(--chip-bg); color: var(--muted); font-size: .68rem; font-weight: 700; }
.fleet-live-state.is-live { background: var(--st-won-bg); color: var(--ok); }
.fleet-platform-card dl, .fleet-detail-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: .8rem 0; }
.fleet-platform-card dl div, .fleet-detail-card dl div { min-width: 0; }
.fleet-platform-card dt, .fleet-detail-card dt { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .025em; }
.fleet-platform-card dd, .fleet-detail-card dd { margin: .08rem 0 0; color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.fleet-platform-card footer { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; border-top: 1px solid var(--border); padding-top: .55rem; }
.fleet-platform-card footer small { color: var(--muted); overflow-wrap: anywhere; }
.fleet-monthly-wrap { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); outline-offset: 2px; }
.fleet-monthly-table { width: 100%; min-width: 660px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fleet-monthly-table th, .fleet-monthly-table td { padding: .55rem .65rem; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.fleet-monthly-table th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--card); }
.fleet-monthly-table thead th { color: var(--muted); background: var(--surface-2); font-size: .7rem; text-transform: uppercase; letter-spacing: .025em; }
.fleet-monthly-table thead th:first-child { z-index: 2; background: var(--surface-2); }
.fleet-monthly-table tbody tr:last-child th, .fleet-monthly-table tbody tr:last-child td { border-bottom: 0; }
.fleet-monthly-table tr.is-empty { color: var(--muted); }
.fleet-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.fleet-detail-card { min-width: 0; }
.fleet-detail-card h3, .fleet-detail-card p { overflow-wrap: anywhere; }
.fleet-insights { margin-top: var(--s4); padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.fleet-insights h3 { margin: 0 0 .45rem; font-size: 1rem; }
.fleet-insights ul { margin: 0; padding-left: 1.15rem; }
.fleet-insights li + li { margin-top: .35rem; }
.fleet-empty { margin-top: var(--s3); }
.fleet-overview-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.fleet-overview-summary article { display: grid; gap: .15rem; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
.fleet-overview-summary strong { color: var(--head); font-size: 1.45rem; }.fleet-overview-summary span { color: var(--muted); font-size: .8rem; }
.calendar-head nav { display: flex; align-items: center; gap: var(--s2); }.calendar-head nav strong { min-width: 9rem; text-align: center; }
.work-calendar { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
.calendar-weekdays, .calendar-week { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); min-width: 840px; }
.calendar-weekdays span { padding: .55rem; border-bottom: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: .75rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.calendar-day { min-height: 125px; padding: .5rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }.calendar-day:last-child { border-right: 0; }.calendar-week:last-child .calendar-day { border-bottom: 0; }
.calendar-day > time { display: inline-flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; border-radius: 999px; color: var(--muted); font-size: .8rem; }.calendar-day.is-today > time { background: var(--accent); color: white; font-weight: 700; }.calendar-day.is-outside { background: var(--surface-2); opacity: .62; }
.calendar-events { display: grid; gap: .3rem; margin-top: .35rem; }.calendar-event { display: grid; padding: .35rem .45rem; border-left: 3px solid var(--accent); border-radius: var(--r); background: var(--hover); color: var(--text); text-decoration: none; }.calendar-event small { color: var(--muted); font-size: .65rem; text-transform: uppercase; }.calendar-event span { overflow: hidden; font-size: .75rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.calendar-event.is-overdue { border-left-color: var(--bad); }
.zapier-providers strong, .zapier-providers span { overflow-wrap: anywhere; }
.listing-enquiries { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.listing-enquiries > a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem .8rem; color: var(--text); border-bottom: 1px solid var(--border); }
.listing-enquiries > a:last-child { border-bottom: 0; }.listing-enquiries > a:hover { background: var(--hover); text-decoration: none; }.listing-enquiries strong, .listing-enquiries small { display: block; }.listing-enquiries small { color: var(--muted); margin-top: .12rem; }
.listing-source-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .4rem 1rem; }.listing-source-fields > div { min-width: 0; border-bottom: 1px solid var(--border); padding-bottom: .45rem; }.listing-source-fields dd { overflow-wrap: anywhere; }
.listing-board-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); margin: 0 0 var(--s3); }
.listing-status-tags { display: flex; gap: .45rem; overflow-x: auto; padding: 0 0 var(--s3); scrollbar-width: thin; }
.listing-status-tag { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .4rem; padding: .38rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted); font-size: .8rem; font-weight: 700; text-decoration: none; }
.listing-status-tag span { min-width: 1.4rem; padding: .08rem .35rem; border-radius: 999px; background: var(--chip-bg); color: var(--text); text-align: center; }
.listing-status-tag:hover, .listing-status-tag.active { border-color: var(--accent); color: var(--accent); background: var(--hover); text-decoration: none; }
.listing-bulk { display: flex; gap: var(--s2); margin: 0; }
.save-view-pop { position: relative; }.save-view-pop > summary { list-style: none; }.save-view-pop > summary::-webkit-details-marker { display: none; }
.save-view-form { position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0; display: grid; gap: var(--s2); width: min(320px, 78vw); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); }
.save-view-form label { display: grid; gap: var(--s1); }.save-view-form .check-label { display: flex; align-items: center; }
.listing-ops-table { border-collapse: separate; border-spacing: 0; }
.listing-ops-table thead th { position: sticky; top: 0; z-index: 5; background: var(--surface-2); }
.listing-ops-table .listing-sticky-boat { position: sticky; left: 0; z-index: 3; background: var(--card); box-shadow: 1px 0 0 var(--border); }
.listing-ops-table thead .listing-sticky-boat { z-index: 7; background: var(--surface-2); }
.listing-ops-table .listing-group-head th { padding: .65rem .8rem; background: var(--surface-2); box-shadow: inset 4px 0 0 var(--group-colour, var(--border)); text-align: left; }
.listing-group-head .group-label { color: var(--group-colour, var(--head)); text-transform: uppercase; letter-spacing: .035em; }
.listing-group-head .group-count { display: inline-flex; min-width: 1.6rem; justify-content: center; margin-left: .45rem; padding: .1rem .45rem; border-radius: 999px; background: var(--chip-bg); color: var(--text); }
.listing-group-menu { position: relative; display: inline-block; margin-left: .45rem; }.listing-group-menu > summary { cursor: pointer; list-style: none; color: var(--muted); }.listing-group-menu > div { position: absolute; z-index: 16; left: 0; top: calc(100% + .3rem); width: min(360px, 80vw); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); }.listing-group-menu form { display: grid; gap: var(--s2); margin: 0 0 var(--s3); }.listing-group-menu form:last-child { margin-bottom: 0; }.listing-group-menu label { display: grid; gap: var(--s1); }
.listing-status-form { margin: 0; }.listing-status-form select { width: 100%; min-width: 9rem; border: 0; cursor: pointer; }
.listing-edit-form { display: grid; gap: var(--s4); max-width: 1100px; }.listing-edit-form fieldset { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3); }.listing-edit-form legend { padding: 0 var(--s1); color: var(--head); font-weight: 700; }.listing-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }.listing-form-grid label { display: grid; align-content: start; gap: var(--s1); color: var(--muted); font-size: .82rem; }.listing-form-grid label > span { color: var(--text); font-weight: 600; }.listing-form-grid input:not([type=checkbox]), .listing-form-grid select, .listing-form-grid textarea { width: 100%; box-sizing: border-box; }.listing-form-grid input[type=checkbox] { justify-self: start; }.listing-form-wide { grid-template-columns: 1fr 1fr; }.field-error, .has-error { color: var(--bad); }.listing-history { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }.listing-history li { padding: .65rem .8rem; border-bottom: 1px solid var(--border); }.listing-history li:last-child { border: 0; }.listing-history strong, .listing-history small { display: block; }.listing-history small { margin-top: .15rem; color: var(--muted); }
.copy-block { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }.zapier-code { max-height: 34rem; overflow: auto; padding: 1rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); color: var(--text); font-size: .82rem; line-height: 1.5; }

@media (max-width: 768px) {
  .fleet-overview-summary { grid-template-columns: 1fr 1fr; }
  .calendar-head nav { width: 100%; justify-content: space-between; }.calendar-head nav strong { min-width: 0; }
  .listing-filters { display: grid; grid-template-columns: 1fr 1fr; }.listing-filters .listing-search { grid-column: 1 / -1; }.listing-filters label select { width: 100%; }
  .listing-table { min-width: 0; border: 0; box-shadow: none; background: transparent; }.listing-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }.listing-table tbody { display: grid; gap: .7rem; }
  .listing-table tr.listing-row { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); padding: .8rem; }
  .listing-table tr.listing-row td { display: block !important; padding: 0; border: 0; }.listing-table tr.listing-row td:first-child { grid-column: 1 / -1; }.listing-table tr.listing-row td:nth-child(4), .listing-table tr.listing-row td:nth-child(5) { display: none !important; }
  .listing-table tr.listing-row td:nth-child(6)::before { content: "Enquiries: "; color: var(--muted); }.listing-table tr.listing-row td:nth-child(7)::before { content: "Market age: "; color: var(--muted); }.listing-table tr.listing-row .listing-actions { grid-column: 1 / -1; display: flex !important; border-top: 1px solid var(--border); padding-top: .6rem; }
  .listing-footer { display: block; }.listing-footer td { display: flex !important; gap: .5rem; align-items: center; flex-wrap: wrap; }.listing-footer .muted { float: none; flex: 1 1 100%; }
  .listing-detail-head { align-items: flex-start; }.listing-hero-thumb { width: 76px; height: 60px; }.listing-detail-head .page-head-actions { width: 100%; flex-wrap: wrap; }.listing-detail-head .page-head-actions .btn { flex: 1 1 auto; min-width: 0; text-align: center; }
}
@media (min-width: 769px) {
  .listing-table-wrap { max-height: calc(100vh - 265px); overflow: auto; border: 1px solid var(--border); }
}
@media (max-width: 768px) {
  .listing-board-actions { align-items: stretch; }.listing-bulk { flex: 1; }.listing-bulk select { min-width: 0; flex: 1; }
  .listing-ops-table { display: block; width: 100%; }
  .listing-ops-table tbody { display: grid; width: 100%; }
  .listing-ops-table tr { width: 100%; box-sizing: border-box; }
  .listing-ops-table tr.listing-row { grid-template-columns: minmax(0, 1fr) auto; }
  .listing-ops-table tr.listing-row td.listing-sticky-boat { grid-column: 1 / -1; grid-row: 1; position: static; background: transparent; box-shadow: none; }
  .listing-ops-table tr.listing-row td:nth-child(2), .listing-ops-table tr.listing-row td:nth-child(3) { grid-column: auto; }
  .listing-ops-table tr.listing-row td:nth-child(4) { display: block !important; }
  .listing-ops-table tr.listing-row td:nth-child(5) { display: none !important; }
  .listing-ops-table tr.listing-row td:nth-child(6)::before { content: "Enquiries: "; color: var(--muted); }
  .listing-ops-table tr.listing-row td:nth-child(7)::before { content: "Market age: "; color: var(--muted); }
  .listing-ops-table tr.listing-row .listing-actions { grid-column: 1 / -1; }
  .listing-edit-form { padding: var(--s3); }.listing-form-grid, .listing-form-wide { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  .listing-board-actions { display: grid; }.listing-form-grid, .listing-form-wide { grid-template-columns: 1fr; }
}
@media (max-width: 430px) { .listing-filters { grid-template-columns: 1fr; }.listing-filters .listing-search { grid-column: auto; }.listing-hero-thumb { display: none; }.listing-metric-strip { grid-template-columns: 1fr 1fr; }.zapier-providers { grid-template-columns: 1fr; }.listing-detail-head .page-head-actions .btn { flex-basis: 100%; }.fleet-reporting .listing-section-title { display: grid; }.fleet-freshness { justify-items: start; text-align: left; }.fleet-platform-grid, .fleet-detail-grid { grid-template-columns: 1fr; }.fleet-platform-card footer { align-items: flex-start; flex-direction: column; } }
@media (max-width: 900px) { .listing-document-grid { grid-template-columns: 1fr; }.listing-documents .listing-section-title { display: grid; }.document-sync { white-space: normal; } }

/* 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; }

/* Staff pilot and Monday-cutover acceptance. */
.chip-success { background: var(--st-won-bg); color: var(--st-won-fg); }
.chip-danger { background: var(--st-over-bg); color: var(--bad); }
.pilot-page { display: grid; gap: var(--s4); min-width: 0; }
.pilot-form { max-width: 900px; }
.pilot-form h2, .pilot-readiness h2 { margin-top: 0; }
.pilot-choice, .pilot-check-grid fieldset { margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3); }
.pilot-choice legend, .pilot-check-grid legend { padding: 0 var(--s1); color: var(--head); font-weight: 700; }
.pilot-choice ul { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.pilot-choice label, .pilot-check-grid label { display: flex; align-items: flex-start; gap: var(--s2); color: var(--text); }
.pilot-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: var(--s3) 0; }
.pilot-check-grid fieldset { display: grid; gap: var(--s2); }
.pilot-blocker { display: grid; gap: var(--s1); }
.pilot-blocker textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3); background: var(--surface); color: var(--text); font: inherit; resize: vertical; }
.pilot-blocker small { color: var(--muted); }
.pilot-readiness { min-width: 0; }
.pilot-readiness-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.pilot-metrics { margin-bottom: var(--s3); }
.pilot-readiness .autom-scroll { width: 100%; max-width: 100%; min-width: 0; }
.pilot-table { min-width: 860px; }
.pilot-table td, .pilot-table th { white-space: nowrap; }
.pilot-table td:first-child, .pilot-table th:first-child { position: sticky; left: 0; z-index: 2; background: var(--card); }
.pilot-table th:first-child { background: var(--surface-2); z-index: 3; }
@media (max-width: 720px) {
  .pilot-check-grid { grid-template-columns: 1fr; }
  .pilot-choice ul { display: grid; }
  .pilot-readiness-head { display: grid; }
  table.list.pilot-table th:nth-child(n), table.list.pilot-table td:nth-child(n) { display: table-cell; }
}

/* B1: Monday-style full-cell status pills on the board */
.board-table .col-status .chip, .board-table .col-status .move-menu summary.chip,
.board-table .col-status .direct-status-select {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  border-radius: 6px; padding: 0.3rem 0.5rem; }
.direct-status-select { appearance: none; border: 0; cursor: pointer; font: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-status-select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lead-card-chips .direct-status-select { max-width: 100%; }
.compact-status-menu { position: fixed; z-index: 50; width: 220px; max-height: min(60vh, 420px);
  overflow-y: auto; 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; }
.compact-status-menu[hidden] { display: none; }
.compact-status-menu-item { width: 100%; text-align: left; background: none; border: 0; color: var(--text);
  padding: var(--s1) var(--s2); border-radius: var(--r-sm); cursor: pointer; font: inherit; }
.compact-status-menu-item:hover, .compact-status-menu-item:focus-visible { background: var(--hover); outline: none; }
.compact-status-menu-item[aria-checked="true"] { background: var(--accent-soft); color: var(--head); font-weight: 600; }
.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 { position: relative; display: inline-block; margin-left: 0.4rem; }
.note-pop > summary { cursor: pointer; list-style: none; opacity: 0.68; }
.note-pop > summary::-webkit-details-marker { display: none; }
.note-pop > summary span { text-decoration: none; }
.note-pop > summary:hover { opacity: 1; }
.note-pop[open] > summary { opacity: 1; }
.note-bubble { display: inline-grid; width: 26px; height: 26px; place-items: center;
  border-radius: 999px; color: var(--muted); }
.note-bubble:hover, .note-bubble:focus-visible { color: var(--accent); background: var(--hover);
  outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.note-bubble-icon { position: relative; display: block; width: 14px; height: 10px;
  border: 1.5px solid currentColor; border-radius: 5px; box-sizing: border-box; }
.note-bubble-icon::after { content: ""; position: absolute; left: 2px; bottom: -4px;
  width: 5px; height: 5px; border-left: 1.5px solid currentColor;
  transform: skewY(-35deg); background: var(--surface); }
.board-row:hover .note-bubble-icon::after { background: var(--hover); }
.note-pop .note-pop-form { position: fixed; z-index: 90; top: 0; left: 0; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem;
  box-shadow: 0 8px 24px var(--scrim); width: min(260px, calc(100vw - 16px)); }
.note-pop .note-pop-form.menu-up { top: auto; bottom: calc(100% + 4px); }
.note-pop .note-pop-form textarea { display: block; box-sizing: border-box; width: 100%; min-height: 70px;
  margin-bottom: 0.4rem; resize: vertical; }
.note-pop .note-pop-form button { padding: .38rem .65rem; font-size: .82rem; }

/* Keep the row-note composer inside a genuine phone viewport.  This rule must
   follow the desktop popover rule above so the cascade cannot stretch the
   fixed form from top to bottom or clip its submit button. */
@media (max-width: 430px) {
  .note-pop .note-pop-form,
  .note-pop .note-pop-form.menu-up {
    position: fixed;
    box-sizing: border-box;
    left: var(--s3);
    right: var(--s3);
    top: auto;
    bottom: var(--s3);
    width: auto;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* 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); }

/* Market intelligence assistant. */
.market-assistant { display: grid; gap: var(--s4); max-width: 1180px; margin: 0 auto; }
.market-assistant-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.market-assistant-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.market-assistant-head h1 { margin: .15rem 0 .45rem; font-size: clamp(1.7rem, 3vw, 2.45rem); }
.market-assistant-head p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.55; }
.market-eyebrow { color: var(--accent) !important; font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.market-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .6rem; }
.market-state { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: .45rem .75rem; color: var(--muted); background: var(--surface-2); font-size: .78rem; font-weight: 700; }
.market-state.is-ready { border-color: var(--st-won-fg); color: var(--st-won-fg); background: var(--st-won-bg); }
.market-state.is-stale, .market-state.is-error { border-color: var(--warn); color: var(--warn); background: var(--st-wait-bg); }
.market-source-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
.market-source-strip span { padding: .8rem 1rem; color: var(--muted); border-right: 1px solid var(--border); font-size: .82rem; }
.market-source-strip span:last-child { border-right: 0; }
.market-source-strip strong { display: block; color: var(--head); font-size: .9rem; }
.market-source-strip .is-fresh { box-shadow: inset 0 3px 0 var(--st-won-fg); }
.market-source-strip .is-stale { box-shadow: inset 0 3px 0 var(--warn); }
.market-jobs { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 2fr); gap: var(--s4); padding: 1rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--card)), var(--card) 48%); }
.market-jobs-copy { align-self: center; padding: .35rem .55rem; }
.market-jobs h2 { margin: .15rem 0 .35rem; font-size: 1.15rem; }
.market-jobs-copy > p:last-child { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.market-job-grid { display: grid; grid-template-columns: repeat(5, minmax(112px, 1fr)); gap: .55rem; }
.market-job-grid button { display: grid; grid-template-columns: auto 1fr; align-content: center; gap: .05rem .48rem; min-height: 88px; padding: .65rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.market-job-grid button:hover, .market-job-grid button:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); transform: translateY(-1px); outline: none; }
.market-job-grid button > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 11%, var(--card)); color: var(--accent); font-weight: 850; }
.market-job-grid strong { align-self: end; color: var(--head); font-size: .76rem; }
.market-job-grid small { align-self: start; color: var(--muted); font-size: .63rem; line-height: 1.25; }
.market-chat-shell { min-height: 590px; display: grid; grid-template-rows: 1fr auto auto; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.market-thread { display: grid; align-content: start; gap: var(--s4); min-height: 370px; max-height: 62vh; overflow-y: auto; padding: clamp(1rem, 3vw, 2rem); background: linear-gradient(180deg, var(--surface-2), var(--card) 34%); }
.market-message { display: flex; align-items: flex-start; gap: .7rem; width: 100%; min-width: 0; max-width: 920px; }
.market-message-user { justify-self: end; justify-content: flex-end; width: auto; max-width: min(740px, 85%); }
.scuba-avatar { position: relative; display: block; flex: 0 0 38px; width: 38px; height: 42px; }
.scuba-avatar.is-large { flex-basis: 58px; width: 58px; height: 64px; }
.scuba-head { position: absolute; left: 2px; bottom: 0; width: 34px; height: 34px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--accent) 75%, var(--head)); border-radius: 50% 50% 46% 46%; background: color-mix(in srgb, var(--accent) 78%, var(--surface)); box-shadow: inset 0 -5px 0 var(--shadow-sm), 0 2px 6px var(--scrim); }
.scuba-avatar.is-large .scuba-head { left: 3px; width: 50px; height: 50px; border-width: 3px; }
.scuba-mask { position: absolute; top: 8px; left: 4px; display: flex; align-items: center; justify-content: center; gap: 2px; width: 26px; height: 12px; border: 2px solid var(--head); border-radius: 6px; background: var(--surface); box-sizing: border-box; }
.scuba-avatar.is-large .scuba-mask { top: 12px; left: 6px; gap: 3px; width: 38px; height: 17px; border-width: 3px; border-radius: 8px; }
.scuba-mask::after { content: ""; position: absolute; left: -7px; width: 6px; height: 2px; background: var(--head); }
.scuba-mask i { width: 3px; height: 3px; border-radius: 50%; background: var(--head); }
.scuba-avatar.is-large .scuba-mask i { width: 4px; height: 4px; }
.scuba-smile { position: absolute; left: 12px; bottom: 6px; width: 9px; height: 4px; border-bottom: 2px solid var(--head); border-radius: 50%; }
.scuba-avatar.is-large .scuba-smile { left: 18px; bottom: 8px; width: 13px; height: 6px; border-bottom-width: 3px; }
.scuba-snorkel { position: absolute; z-index: 2; top: 0; right: 0; width: 8px; height: 29px; border-top: 4px solid var(--gold); border-right: 4px solid var(--gold); border-radius: 0 8px 0 0; }
.scuba-avatar.is-large .scuba-snorkel { width: 12px; height: 43px; border-top-width: 5px; border-right-width: 5px; }
.scuba-air { position: absolute; border: 2px solid color-mix(in srgb, var(--accent) 70%, var(--surface)); border-radius: 50%; opacity: .75; }
.scuba-air-one { top: 1px; right: 10px; width: 4px; height: 4px; }
.scuba-air-two { top: -7px; right: 16px; width: 6px; height: 6px; }
.scuba-avatar.is-large .scuba-air-one { right: 14px; width: 6px; height: 6px; }
.scuba-avatar.is-large .scuba-air-two { top: -9px; right: 23px; width: 9px; height: 9px; }
.market-bubble { min-width: 0; max-width: 100%; box-sizing: border-box; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; background: var(--card); box-shadow: var(--shadow-sm); overflow-wrap: anywhere; }
.market-bubble p { margin: .3rem 0 0; line-height: 1.55; }
.market-message-user .market-bubble { border: 0; border-radius: 14px 14px 4px 14px; background: var(--accent); color: white; }
.market-message.is-error .market-bubble { border-left: 3px solid var(--bad); }
.market-message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: .35rem; }
.market-message-meta > span { padding: .14rem .42rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .67rem; font-weight: 700; }
.market-message-meta .market-status-proposal_draft { background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent); }
.market-message-meta .market-status-clarification { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.market-example { color: var(--muted); font-size: .82rem; }
.market-answer p:first-child { margin-top: 0; }
.market-answer p:last-child { margin-bottom: 0; }
.market-answer { max-width: 72ch; }
.market-strength { display: grid; grid-template-columns: minmax(165px, auto) 1fr; align-items: center; gap: .8rem 1rem; margin-top: var(--s3); padding: .7rem .8rem; border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: var(--r); background: var(--surface-2); }
.market-strength > div { display: grid; gap: .08rem; }
.market-strength span { color: var(--muted); font-size: .64rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.market-strength strong { color: var(--head); font-size: .9rem; }
.market-strength p { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.4; }
.market-strength.is-strong { border-left-color: var(--st-good-fg); background: var(--st-good-bg); }
.market-strength.is-moderate { border-left-color: var(--st-warn-fg); background: var(--st-warn-bg); }
.market-strength.is-limited { border-left-color: var(--st-bad-fg); background: var(--st-bad-bg); }
.market-clarification { margin-top: var(--s3); padding: .8rem .9rem; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: var(--r); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.market-clarification ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: .55rem 0; padding: 0; list-style: none; }
.market-clarification li { padding: .28rem .55rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 999px; background: var(--card); color: var(--head); font-size: .75rem; font-weight: 750; }
.market-clarification p { color: var(--muted); font-size: .76rem; }
.market-supporting-evidence { margin-top: var(--s3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); overflow: hidden; }
.market-supporting-evidence > summary { cursor: pointer; list-style: none; padding: .65rem .8rem; color: var(--head); font-size: .76rem; font-weight: 750; }
.market-supporting-evidence > summary::-webkit-details-marker { display: none; }
.market-supporting-evidence > summary::before { content: "▸"; display: inline-block; margin-right: .42rem; color: var(--accent); }
.market-supporting-evidence[open] > summary::before { content: "▾"; }
.market-evidence-body { display: grid; gap: var(--s3); padding: .8rem; border-top: 1px solid var(--border); background: var(--card); }
.market-evidence-body .market-strength { margin-top: 0; }
.market-evidence-cards { display: grid; gap: .65rem; }
.market-evidence-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; padding: .7rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.market-evidence-card img { width: 112px; height: 78px; border-radius: calc(var(--r) - 2px); object-fit: cover; background: var(--surface); }
.market-evidence-card p { margin: .18rem 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.market-evidence-card a { display: inline-block; margin-top: .2rem; color: var(--accent); font-size: .75rem; font-weight: 750; }
.market-results-scroll { max-width: 100%; margin-top: var(--s3); overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
.market-supporting-evidence .market-results-scroll { margin-top: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--card); }
.market-search-trace dl { margin: .35rem 0 0; padding: .15rem .8rem .2rem; border-top: 1px solid var(--border); }
.market-search-trace dl > div { display: grid; grid-template-columns: minmax(115px, .35fr) 1fr; gap: .7rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.market-search-trace dl > div:last-child { border-bottom: 0; }
.market-search-trace dt { color: var(--head); font-size: .72rem; font-weight: 750; }
.market-search-trace dd { margin: 0; color: var(--muted); font-size: .72rem; }
.market-results { width: 100%; border-collapse: collapse; font-size: .8rem; }
.market-results th, .market-results td { padding: .55rem .65rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.market-results th { background: var(--surface-2); color: var(--muted); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.market-results tbody tr:last-child td { border-bottom: 0; }
.market-sources { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); font-size: .72rem; }
.market-sources span { padding: .2rem .45rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.market-evidence-summary { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); font-size: .72rem; }
.market-evidence-summary > div { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.market-evidence-summary span { padding: .28rem .5rem; border-radius: var(--r); background: var(--surface-2); color: var(--muted); }
.market-evidence-summary b { color: var(--head); }
.market-notice { color: var(--muted); font-size: .75rem; }
.market-feedback { display: grid; grid-template-columns: auto auto minmax(150px, 1fr); align-items: center; gap: .55rem; margin-top: .8rem; padding-top: .75rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .75rem; }
.market-rating { display: flex; gap: .25rem; }
.market-rating button { width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.market-rating button:hover, .market-rating button:focus-visible { border-color: var(--accent); background: var(--accent); color: white; outline: none; }
.market-feedback input[type="text"] { width: 100%; box-sizing: border-box; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; }
.market-feedback-result { margin-top: .8rem; padding: .65rem .75rem; border-radius: var(--r); background: var(--st-good-bg); color: var(--st-good-fg); font-size: .75rem; }
.market-feedback-result.is-error { background: var(--st-bad-bg); color: var(--st-bad-fg); }
.market-composer { position: sticky; bottom: 0; z-index: 2; padding: 1rem; border-top: 1px solid var(--border); background: var(--card); box-shadow: 0 -8px 24px color-mix(in srgb, var(--scrim) 45%, transparent); }
.market-composer textarea { width: 100%; min-height: 48px; max-height: 180px; resize: vertical; box-sizing: border-box; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font: inherit; line-height: 1.45; }
.market-composer textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.market-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: .65rem; }
.market-composer-foot p { margin: 0; color: var(--muted); font-size: .72rem; }
.market-composer-foot > div { display: flex; align-items: center; gap: .7rem; }
.market-thinking-message { display: none; opacity: 0; padding: 0 clamp(1rem, 3vw, 2rem) 1rem; background: var(--card); }
.market-thinking-message.htmx-request { display: flex; opacity: 1; }
.market-thought-row { display: flex; align-items: center; gap: .8rem; }
.market-thought-copy { color: var(--muted); font-size: .8rem; }
.market-thought-bubbles { display: inline-flex; align-items: center; gap: .22rem; min-width: 32px; }
.market-thought-bubbles i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: scuba-thought 1.1s ease-in-out infinite; }
.market-thought-bubbles i:nth-child(2) { animation-delay: .16s; }
.market-thought-bubbles i:nth-child(3) { animation-delay: .32s; }
@keyframes scuba-thought { 0%, 65%, 100% { transform: translateY(0); opacity: .35; } 32% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .market-thought-bubbles i { animation: none; opacity: .7; } }
@media (max-width: 520px) { .market-evidence-card { grid-template-columns: 1fr; } .market-evidence-card img { width: 100%; height: 150px; } }

/* Admin review queue for staged Scuba Steve answers. */
.market-review { display: grid; gap: var(--s4); max-width: 1080px; margin: 0 auto; }
.market-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.market-review-head h1 { margin: .15rem 0 .35rem; }
.market-review-head p { max-width: 760px; margin: 0; color: var(--muted); }
.market-review-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.market-review-filters a { padding: .42rem .72rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted); font-size: .75rem; font-weight: 750; text-decoration: none; }
.market-review-filters a.is-active { border-color: var(--accent); background: var(--accent); color: white; }
.market-review-list { display: grid; gap: var(--s4); }
.market-review-card { display: grid; gap: var(--s3); padding: clamp(1rem, 3vw, 1.35rem); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.market-review-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: .7rem; border-bottom: 1px solid var(--border); }
.market-review-kind, .market-review-status, .market-review-signals span, .market-review-signals strong { display: inline-block; padding: .25rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .67rem; }
.market-review-status.is-approved { background: var(--st-good-bg); color: var(--st-good-fg); }
.market-review-status.is-rejected { background: var(--st-bad-bg); color: var(--st-bad-fg); }
.market-review-signals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.market-review-signals strong { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.market-review-card section h2 { margin: 0 0 .35rem; color: var(--muted); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.market-review-card section p { margin: 0; line-height: 1.5; }
.market-review-answer { max-height: 300px; overflow-y: auto; padding: .75rem; border-radius: var(--r); background: var(--surface-2); font-size: .84rem; line-height: 1.5; }
.market-review-answer p:first-child { margin-top: 0; }
.market-review-answer p:last-child { margin-bottom: 0; }
.market-review-card blockquote { margin: 0; padding: .6rem .75rem; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--card)); color: var(--muted); font-size: .8rem; }
.market-review-existing { margin: 0; color: var(--muted); font-size: .78rem; }
.market-review-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .8rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.market-review-form label { color: var(--muted); font-size: .72rem; font-weight: 700; }
.market-review-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: .35rem; padding: .6rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; }
.market-review-form > div { display: flex; gap: .5rem; }
.market-review-result, .market-review-empty { padding: 1rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--st-good-bg); color: var(--st-good-fg); }
.market-review-result.is-error { background: var(--st-bad-bg); color: var(--st-bad-fg); }
.market-review-empty { background: var(--card); color: var(--text); text-align: center; }
.market-review-empty p { margin-bottom: 0; color: var(--muted); }
@media (max-width: 700px) {
  .market-assistant-head { display: grid; }
  .market-head-actions { justify-content: space-between; }
  .market-assistant-identity { align-items: flex-start; }
  .market-source-strip { grid-template-columns: 1fr; }
  .market-source-strip span { border-right: 0; border-bottom: 1px solid var(--border); }
  .market-source-strip span:last-child { border-bottom: 0; }
  .market-chat-shell { min-height: 520px; }
  .market-jobs { grid-template-columns: 1fr; }
  .market-job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-job-grid button:last-child { grid-column: 1 / -1; }
  .market-strength { grid-template-columns: 1fr; gap: .35rem; }
  .market-composer-foot { align-items: flex-end; }
  .market-composer-foot p { max-width: 55%; }
  .market-feedback { grid-template-columns: 1fr; align-items: stretch; }
  .market-thought-row { align-items: flex-start; }
  .market-review-head, .market-review-card-head { display: grid; }
  .market-review-signals { justify-content: flex-start; }
  .market-review-form { grid-template-columns: 1fr; }
  .market-review-form > div { justify-content: flex-end; }
}

/* ---------------------------------------------------------------------------
   Lead Workspace (2026-08-23). The enquiry record reuses the contact
   workspace's timeline furniture (.thread/.act/.ws-filter/.ws-pager) verbatim —
   only the lead-specific pieces are declared here, so the two records cannot
   drift apart visually.
   ------------------------------------------------------------------------ */
.lead-next-action { margin: 0.2rem 0 0.9rem; padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--accent); background: var(--card);
  border-radius: 0 6px 6px 0; font-weight: 600; }
.lead-next-action-card .next-action-form { display: flex; flex-wrap: wrap;
  align-items: flex-end; gap: 0.5rem; }
.lead-next-action-card .next-action-form .muted { flex-basis: 100%; margin: 0.2rem 0 0;
  font-size: 0.82rem; }
.lead-status-card { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); }
.lead-status-card .ws-lbl { margin: 0; }
.lead-status-select { width: min(280px, 100%); padding: .45rem .65rem; border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text); background: var(--btn-bg); font: inherit; }
.compact-action-card { padding: 0; }
.compact-action-card > summary { display: flex; justify-content: space-between; align-items: center;
  gap: var(--s3); padding: var(--s3); cursor: pointer; list-style-position: inside; }
.compact-action-card > form, .compact-action-card > p, .compact-action-card > ul {
  margin-right: var(--s3); margin-left: var(--s3); }
.compact-action-card > :last-child { margin-bottom: var(--s3); }
.lead-call-card .call-form { display: flex; flex-direction: column; gap: 0.35rem; }
.lead-call-card .call-form button { align-self: flex-start; margin-top: 0.4rem; }
.call-followup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .65fr); gap: var(--s2); }
.call-followup-grid .ws-lbl { display: grid; gap: var(--s1); margin: 0; }
.call-followup-grid select, .call-followup-grid input { box-sizing: border-box; width: 100%; }
.related-listing-row { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: .65rem; align-items: center; }
.related-listing-thumb { display: grid; width: 68px; height: 50px; place-items: center;
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.related-listing-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.related-listing-fallback { color: var(--faint); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .04em; }
.related-listing-copy { min-width: 0; }
.related-listing-copy .related-main, .related-listing-copy .related-meta { display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-golden-toolbar .loading-dot { align-self: center; }
@media (max-width: 430px) {
  .call-followup-grid { grid-template-columns: 1fr; }
  .lead-status-card { align-items: stretch; flex-direction: column; }
}
.lead-task-list { list-style: none; margin: 0.6rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem; }
.lead-task-list .lead-task { display: flex; flex-direction: column;
  padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); }
.lead-task-list .lead-task .meta { font-size: 0.8rem; }

/* Original imported values: shared CSP-safe source presentation. */
.monday-source-card { padding:1rem; overflow-wrap:anywhere; }
.monday-source-lead { margin-bottom:1rem; }
.monday-source-text { white-space:pre-wrap; }