/* Immersive Data Cleaner. Tokens and patterns copied from Immersive Studio
   (public/styles: foundation, drawers, list tables, labelled filter rows).
   Copied, not linked: nothing here reads from the Immersive app folder. */
:root {
  --bg: #f4f4f6; --panel: #ffffff; --surface-header: #e9eaee;
  --ink: #15161a; --muted: #5d606b; --subtle: #8a8d97; --line: #e1e2e7;
  --accent: #5a6dcb; --accent-strong: #4456b3; --accent-ink: #ffffff; --soft: #eceef6;
  --bad: #b3261e; --good: #1e7a46; --warn: #94570a; --hover-bg: #f0f0f0; --hover-border: #888888;
  --me: #e3e7f8;
  --bar: #5a6dcb;  /* validated: passes lightness, chroma and 3:1 contrast on the light panel */
  --bar-later: #00907f;  /* a later batch of the same source, on the timeline: validated against --bar */
  --display: "Didot", "Bodoni 72", "Bodoni Moda", "Playfair Display", Georgia, serif;
  --body: "Immersive Futura", "Futura", "Futura PT", "Jost", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --type-body: 14px; --type-small: 12px; --type-label: 11px; --type-title: 34px;
  --control-radius: 4px; --field-height: 44px; --row-height: 61px;
  /* Source badges: the pale tonal role family. */
  --crm-bg: #e0e7ff; --crm-ink: #312e81; --imessage-bg: #dbeafe; --imessage-ink: #1e3a8a;
  --whatsapp-bg: #d1fae5; --whatsapp-ink: #064e3b; --gmail-bg: #ffe4e6; --gmail-ink: #881337;
  --contacts-bg: #fef3c7; --contacts-ink: #78350f; --keep-bg: #ccfbf1; --keep-ink: #134e4a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121317; --panel: #1b1c21; --surface-header: #25272e;
    --ink: #ececf0; --muted: #a3a6b0; --subtle: #7c7f89; --line: #2c2e35;
    --accent: #8c9bea; --accent-strong: #a9b4f0; --accent-ink: #121317; --soft: #24263a;
    --bad: #ef7b72; --good: #5fc58b; --warn: #e0a24a; --hover-bg: #2b2b2b; --hover-border: #a8a8a8;
    --me: #262c48;
    --bar: #7686de;  /* dark mode: its own step, validated against the dark panel */
    --bar-later: #14a893;
    --crm-bg: #23264d; --crm-ink: #c7d2fe; --imessage-bg: #172d4d; --imessage-ink: #bfdbfe;
    --whatsapp-bg: #12382c; --whatsapp-ink: #a7f3d0; --gmail-bg: #4a1d2a; --gmail-ink: #fecdd3;
    --contacts-bg: #423316; --contacts-ink: #fde68a; --keep-bg: #123b38; --keep-ink: #99f6e4;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body);
  font-size: var(--type-body); line-height: 1.45; font-weight: 400; }  /* Futura Book, as in Immersive */
strong, b { font-weight: 500; }  /* Medium: names in tables, labels */
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--hover-border); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 16px; font-weight: 500; }
h3 { font-size: 14px; font-weight: 500; }

/* Top bar */
header.top { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5); background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5; }
.brand { font-family: var(--display); font-size: 22px; letter-spacing: .01em; }
nav.tools { display: flex; gap: var(--space-1); flex-wrap: wrap; }
nav.tools a { padding: 6px var(--space-3); border-radius: 999px; color: var(--muted); text-decoration: none; }
nav.tools a:hover { color: var(--ink); }
nav.tools a[aria-current="page"] { background: var(--ink); color: var(--panel); }
.stats { margin-left: auto; color: var(--muted); font-size: var(--type-small); }

/* Page: full width. The container owns the 16px between blocks; blocks never set margins. */
.page { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-7) var(--space-5) 80px; min-width: 0;
  max-width: 1180px; margin: 0 auto; }
.page.wide { max-width: none; }  /* Contacts: the CRM table uses the whole screen */
.page > *, .stack > *, .card > *, .drawer-content > *, .tab-panel > *, .card form > * { margin: 0; }
.stack, .card, .tab-panel, .card form { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
/* Rows are always as tall as their content. Without this, when a drawer's content is taller than
   the drawer, the grid squeezes blocks that scroll sideways (tab bar, tables) down to nothing. */
.page, .stack, .card, .tab-panel, .card form, .drawer-content { grid-auto-rows: max-content; }
.page-head { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.page-head h1 { font-family: var(--display); font-weight: 400; font-size: var(--type-title); line-height: 1.1; }
.page-head p { margin-top: 6px; color: var(--muted); max-width: 680px; }
.page-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-inline-start: auto; }
.cols { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); padding: var(--space-6); }
.hint { font-size: var(--type-small); color: var(--muted); line-height: 1.6; }
.error { color: var(--bad); }

/* Labelled filter / form row */
.bar { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
label.f { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
label.f > span { font-size: var(--type-small); color: var(--muted); }
label.f.grow { flex: 1 1 320px; }
label.f.check { display: flex; align-items: center; gap: var(--space-2); }
input:is(:not([type]), [type=text], [type=search], [type=password], [type=email]), select {
  width: 100%; height: var(--field-height); border: 1px solid var(--line); background: var(--bg);
  border-radius: var(--control-radius); padding: 10px var(--space-3); min-width: 0; }
select { appearance: none; padding-right: 42px; min-width: 180px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c7f89' stroke-width='1.7'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
input[type=search] { background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c7f89' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") no-repeat 16px center / 16px;
  padding-left: 42px; border-radius: 999px; min-width: 260px; transition: box-shadow .15s ease; }
input[type=search]:hover { box-shadow: 0 1px 6px rgba(32, 33, 36, .16); }
input[type=search]:focus { outline: none; border-color: transparent; box-shadow: 0 1px 8px rgba(32, 33, 36, .24); }
input[type=file] { max-width: 100%; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
  padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--control-radius);
  background: var(--panel); color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.danger { color: var(--bad); }
.btn.mini { font-size: var(--type-small); min-height: 30px; padding: var(--space-1) 9px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* List tables: one pattern, every row the same height, sans-serif. */
.table-wrap { overflow-x: auto; min-width: 0; }
table.list { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); }
table.list th { font-size: var(--type-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  font-weight: 500; text-align: left; padding: 10px var(--space-3); border-bottom: 1px solid var(--line);
  background: var(--surface-header); white-space: nowrap; }
table.list td { height: var(--row-height); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line);
  vertical-align: middle; overflow-wrap: anywhere; }
table.list tr:last-child td { border-bottom: 0; }
table.list tr.click { cursor: pointer; }
table.list tr.click:hover td { background: var(--hover-bg); }
table.list tr.on td { background: var(--soft); }
table.list .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sub { display: block; color: var(--muted); font-size: var(--type-small); font-weight: 400; }
/* Row actions: one group at the end of the row, every button the same size. */
table.list .actions { width: 1%; white-space: nowrap; }
table.list .actions .bar { justify-content: flex-end; flex-wrap: nowrap; }
table.list .actions .btn { min-width: 104px; }
table.list td > div + div { margin-top: var(--space-4); }  /* several loads listed in one cell */
/* Date coverage: a thin bar from 2013 (left) to today (right). */
.span-bar { position: relative; height: 6px; border-radius: 3px; background: var(--surface-header); max-width: 360px; }
.span-bar > span { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.sub.warn, .flag { color: var(--warn); }
/* Segmented switch (Immersive .seg): Chats / Groups inside an app tab. */
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 999px; justify-self: start; }
.seg button { border: 0; background: none; padding: 6px var(--space-3); cursor: pointer; color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.seg button:disabled { opacity: .45; cursor: default; }
/* Overview: CRM coverage bars. One series, one colour; 4px rounded data end, anchored left. */
.bar-col { width: 45%; }
.hbar { height: 12px; }
.hbar > span { display: block; height: 100%; min-width: 2px; background: var(--bar); border-radius: 0 4px 4px 0; }
table.list tr.total td { font-weight: 500; background: var(--surface-header); }
.chart-tip { position: fixed; z-index: 20; pointer-events: none; padding: 6px 10px; border-radius: var(--control-radius);
  background: var(--ink); color: var(--panel); font-size: var(--type-small); max-width: 320px; }
.footer { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.footer .hint { margin-inline-end: auto; }
.scroll { max-height: 55vh; overflow-y: auto; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--ink);
  font-size: var(--type-small); white-space: nowrap; }
.badge { padding: 2px 8px; border-radius: 999px; font-size: var(--type-label); letter-spacing: .04em; white-space: nowrap; }
.badge.crm { background: var(--crm-bg); color: var(--crm-ink); }
.badge.imessage { background: var(--imessage-bg); color: var(--imessage-ink); }
.badge.whatsapp { background: var(--whatsapp-bg); color: var(--whatsapp-ink); }
.badge.gmail { background: var(--gmail-bg); color: var(--gmail-ink); }
.badge.contacts { background: var(--contacts-bg); color: var(--contacts-ink); }
.badge.keep { background: var(--keep-bg); color: var(--keep-ink); }
.badge.owner { background: var(--ink); color: var(--panel); }

/* Review pairs */
.pair { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
.pair .who { display: grid; gap: var(--space-4); align-content: start; grid-auto-rows: max-content; min-width: 0; }
.pair .who > * { margin: 0; }
.chip.same { background: var(--accent); color: var(--accent-ink); }  /* a detail both records have */
.chip.role { background: none; border: 1px solid var(--line); color: var(--muted); }  /* CRM roles: outlined, not a source */
td .chips.roles { margin-top: var(--space-1); }  /* under the name in a table row */
td.nowrap { white-space: nowrap; }  /* a phone number stays on one line */
.quote { overflow-wrap: anywhere; }
/* Review clues: what the data says for or against "same person" */
.suggest { font-weight: 500; }
.suggest.same { color: var(--good); }
.suggest.different { color: var(--bad); }
ul.clues { padding-left: 20px; display: grid; gap: var(--space-2); }
ul.clues li.for::marker { color: var(--good); }
ul.clues li.against::marker { color: var(--bad); }
.card form.bar { display: flex; }  /* a one-line form inside a card stays a row */
/* Tasks */
.task-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.count-left { font-weight: 500; white-space: nowrap; }
.count-done { color: var(--good); font-weight: 500; }
ol.steps, ul.steps { padding-left: 20px; display: grid; gap: var(--space-2); line-height: 1.6; }
li > ul.steps { margin-top: var(--space-2); }  /* a list inside a list item */
/* Overview: the letter to Rhys reads as prose */
.card.letter p { font-size: 15px; line-height: 1.65; max-width: 72ch; }
.pair .who h3 { font-size: 16px; }
@media (max-width: 700px) { .pair { grid-template-columns: 1fr; } }

/* Right-side drawer (Immersive .side-drawer). */
.side-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(680px, 100vw); height: 100dvh;
  max-width: 100vw; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--line);
  background: var(--panel); color: var(--ink); overflow: hidden; }
.side-drawer[open] { display: flex; animation: drawer-enter .32s cubic-bezier(.22, .61, .36, 1) both; }
/* The cover fades in with the slide, and out with it (Immersive drawers.css). */
.side-drawer::backdrop { background: #15161a55; opacity: 1; transition: opacity .32s ease-out; }
.side-drawer.is-preparing::backdrop { opacity: 0; }
.side-drawer.is-closing::backdrop { opacity: 0; transition-duration: .2s; transition-timing-function: ease-in; }
.side-drawer[open].is-closing { animation: drawer-exit .2s ease-in both; pointer-events: none; }
.drawer-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; }
/* Second drawer (Immersive drawers.css): the drawer widens, the first pane glides left,
   the second slides in beside it. Opening another record replaces it without a new slide. */
.side-drawer.has-child { width: min(1360px, 100vw); background: transparent; border-left: 0; }
.side-drawer.has-child > .drawer-pane { width: 50%; flex: 0 0 50%; background: var(--panel); }
.side-drawer.has-child > .drawer-pane:first-child { border-left: 1px solid var(--line); }
.drawer-child { border-left: 1px solid var(--line); background: var(--panel); animation: drawer-enter .32s cubic-bezier(.22, .61, .36, 1) both; }
.drawer-child.is-replacing { animation: none; }
.side-drawer.child-closing > .drawer-child { animation: drawer-exit .2s ease-in both; pointer-events: none; }
@media (max-width: 760px) {
  .side-drawer.has-child > .drawer-pane:first-child { display: none; }
  .side-drawer.has-child > .drawer-child { width: 100%; flex-basis: 100%; border-left: 0; }
}
@keyframes drawer-exit { from { transform: none; } to { transform: translate3d(100%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .side-drawer[open], .drawer-child { animation: none !important; } .side-drawer::backdrop { transition: none; } }
@keyframes drawer-enter { from { transform: translate3d(100%, 0, 0); } to { transform: none; } }
.drawer-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-7) var(--space-8); border-bottom: 1px solid var(--line); flex: none; }
.drawer-heading h2 { font-family: var(--display); font-size: 32px; line-height: 1.15; font-weight: 400;
  margin-top: 6px; overflow-wrap: anywhere; }
.eyebrow { color: var(--muted); font-size: var(--type-label); text-transform: uppercase; letter-spacing: .12em; }
.dialog-close { appearance: none; border: 0; background: transparent; font-size: 26px; line-height: 1;
  cursor: pointer; color: var(--muted); padding: 0; }
.dialog-close:hover { color: var(--ink); }
.dialog-close:focus { outline: none; }  /* the dialog focuses it on open; no ring for that */
.dialog-close:focus-visible { color: var(--accent-strong); }
.drawer-content { display: grid; gap: var(--space-4); align-content: start; overflow: auto; flex: 1; min-height: 0;
  padding: var(--space-6) var(--space-8) var(--space-8); overscroll-behavior: contain; }
.drawer-tabs, .page-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--line); overflow-x: auto; }
.drawer-tabs button { font-weight: 500; border: 0; border-bottom: 2px solid transparent; background: none;
  padding: var(--space-3) 0; color: var(--muted); cursor: pointer; white-space: nowrap; }
.drawer-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
/* Page-level tabs (Messages): the drawer tab look, as links. */
.page-tabs a { font-weight: 500; border-bottom: 2px solid transparent; padding: var(--space-3) 0; color: var(--muted);
  white-space: nowrap; text-decoration: none; }
.page-tabs a:hover { color: var(--ink); text-decoration: none; }
.page-tabs a[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
dl.facts { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; border: 1px solid var(--line); }
dl.facts dt, dl.facts dd { margin: 0; padding: var(--space-3); border-bottom: 1px solid var(--line); }
dl.facts dt { color: var(--muted); font-size: var(--type-small); background: var(--surface-header); }
dl.facts dt:nth-last-of-type(1), dl.facts dd:last-child { border-bottom: 0; }

/* Message thread */
.thread { display: grid; gap: var(--space-2); }
.day { text-align: center; color: var(--muted); font-size: var(--type-small); padding-top: var(--space-2); }
.thread .loading { text-align: center; }
.msg { justify-self: start; max-width: 78%; padding: var(--space-2) var(--space-3); border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.mine { justify-self: end; background: var(--me); border-color: transparent; }
.msg .meta { display: block; font-size: var(--type-label); color: var(--muted); }
.msg .att { display: block; font-style: italic; color: var(--muted); }
.reaction { justify-self: start; max-width: 78%; font-size: var(--type-small); color: var(--muted); padding: 0 var(--space-3);
  overflow-wrap: anywhere; }
.reaction.mine { justify-self: end; text-align: right; }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.card.note { padding: var(--space-4); }  /* compact padding; the 16px gap between label and text stays */
.card.note.deleted { opacity: .6; }

/* Sign-in (online only): one narrow column */
.page.sign-in { max-width: 460px; margin: 0 auto; align-content: center;
  min-height: calc(100vh - 57px); padding-top: 0; padding-bottom: 12vh; }  /* centred, a touch above the middle */
.signed-in { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--type-small); color: var(--muted); }

/* The "Add to base" window: one centred card over everything, the drawer included */
dialog.modal { border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: var(--space-6);
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
dialog.modal::backdrop { background: rgba(10, 11, 14, .45); }
dialog.modal > form { display: grid; gap: var(--space-4); grid-auto-rows: max-content; }
dialog.modal > form > * { margin: 0; }
dialog.modal.wide { width: min(720px, calc(100vw - 32px)); }
/* A group chat's people: under the title, outside the scrolling chat */
.drawer-heading .group-bar { margin-top: var(--space-4); align-items: center; }

/* In the base or not: a pill on every row, card and list */
.base-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--type-label); white-space: nowrap; border: 1px solid transparent; }
.base-pill.in { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.base-pill.waiting { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.base-pill.out { border-color: var(--line); color: var(--muted); }
.base-pill.left { background: var(--surface-header); color: var(--ink); }  /* decided: out, with a reason */
.base-state { color: var(--muted); }
/* Roles to choose in the Add to base window */
.role-picker .chip.pick { cursor: pointer; font: inherit; font-size: var(--type-small); }
.role-picker .chip.pick[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.role-picker .chip.pick:disabled { cursor: default; background: var(--ink); border-color: var(--ink); color: var(--panel); }
a.base-pill:hover { text-decoration: none; filter: brightness(.95); }

/* Overview: the time each source covers. Label column, then one month per column from 2013 to a year past today. */
.cov { --label: 240px; }
.cov-body { position: relative; display: grid; gap: var(--space-4); }
.cov-row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); gap: var(--space-4); align-items: end; }
.cov-name { display: grid; gap: 2px; min-width: 0; }
.cov-name .good { color: var(--good); }
.cov-strip, .cov-axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 1px; }
.cov-strip { height: 48px; align-items: end; border-bottom: 1px solid var(--line); }
.cov-strip i { display: block; background: var(--bar); border-radius: 1px 1px 0 0; }
.cov-strip i.none { height: 100%; background: transparent; }
/* A long list, closed until wanted. */
.more > summary { cursor: pointer; color: var(--accent-strong); font-weight: 500; }
.more[open] > summary { margin-bottom: var(--space-4); }
.cov-batches { display: grid; gap: 2px; margin-top: 2px; }
.cov-batches span { display: flex; gap: 6px; align-items: baseline; color: var(--subtle); font-size: var(--type-label); }
.cov-batches i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--bar); }
.cov-batches i.later { background: var(--bar-later); }
.cov-strip i.gap { height: 100%; border-radius: 0;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 45%, transparent) 0 2px, transparent 2px 5px); }
.cov-strip i.live { height: 100%; border-radius: 0; background: var(--soft); }
.cov-axis { font-size: var(--type-label); color: var(--subtle); letter-spacing: 0.04em; }
.cov-axis span { border-left: 1px solid var(--line); padding-left: 4px; overflow: hidden; white-space: nowrap; }
.cov-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--ink); pointer-events: none;
  left: calc(var(--label) + var(--space-4) + (100% - var(--label) - var(--space-4)) * var(--at)); }
.cov-axis span.live { color: var(--accent-strong); font-weight: 500; border-left: 0; }
.warn { color: var(--warn); }
@media (max-width: 760px) {
  .cov { --label: 0px; }
  .cov-row { grid-template-columns: minmax(0, 1fr); }
  .cov-row > span:empty { display: none; }
  .cov-axis span:nth-child(even):not(.live) { visibility: hidden; }
  .cov-today { display: none; }  /* names sit above the bars here; the shaded live stretch marks today */
}

/* Review list: an answered row steps back; the reason under the suggestion wraps, the names don't. */
table.list tr.answered td { color: var(--muted); }
table.list tr.answered td strong { font-weight: 400; }
table.list .sub.why { color: var(--muted); max-width: 560px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Match meter on the Review list: five pips, green leaning same, red leaning different, grey when nothing leans. */
.meter { display: grid; gap: 2px; }
.meter .pips { display: inline-flex; gap: 3px; }
.meter .pips i { width: 12px; height: 6px; border-radius: 2px; background: var(--line); }
.meter.same .pips i.on { background: var(--good); }
.meter.different .pips i.on { background: var(--bad); }
.meter.same .sub { color: var(--good); }
.meter.different .sub { color: var(--bad); }

/* Contacts: engagement level, and one bar per app (colour per app, the number always beside it). */
table.contacts td.none { color: var(--subtle); }
strong.level { font-weight: 500; }
strong.level.l1, strong.level.l2 { color: var(--ink); }
strong.level.l3, strong.level.l4 { color: var(--muted); }
strong.level.l5, strong.level.l6 { color: var(--subtle); font-weight: 400; }
/* Contacts fits a laptop width: names keep their line, row buttons size to their words. */
table.list td:first-child { min-width: 170px; }
table.list td.actions .btn { min-width: 0; }
/* Contacts columns: Company has room for a real name; a long email ends in "…" (full on hover) instead of breaking letter by letter. */
table.contacts td:nth-child(2) { min-width: 180px; max-width: 240px; font-size: var(--type-small); }
/* A smaller laptop: narrower buttons, so they never fall off the edge. */
@media (max-width: 1380px) { table.contacts td.actions .btn { min-width: 84px; } }
table.contacts td:nth-child(4) { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.contacts td:first-child { min-width: 220px; overflow-wrap: anywhere; }
table.contacts td:first-child strong { word-break: normal; }
/* Contacts rows: names a touch smaller; the two buttons the same width, with room after them. */
table.contacts td:first-child strong { font-size: 13px; }
table.contacts td.actions { padding: var(--space-2) var(--space-4); border-left: 1px solid var(--line); }
table.contacts th.actions { padding: var(--space-2) var(--space-4); border-left: 1px solid var(--line); text-align: center; }
table.contacts td.actions .bar { justify-content: center; }
table.contacts td.actions .btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
table.contacts td.actions .btn:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
table.contacts td.actions .btn { justify-content: center; }
@media (min-width: 1381px) { table.contacts td.actions .btn { min-width: 108px; } }
/* Contacts: the tabs, and on the same line at the right the last few clicks to undo. */
.tabs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
.tabs-row .page-tabs { border-bottom: 0; min-width: 0; }
.undo-bar { display: flex; align-items: center; gap: var(--space-1); min-width: 0; margin-left: auto; padding-bottom: var(--space-1); }
.undo-note { color: var(--muted); font-size: var(--type-small); max-width: 280px; margin-right: var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ink); cursor: pointer; }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover:not(:disabled) { background: var(--hover-bg); border-color: var(--line); }
.icon-btn:disabled { color: var(--subtle); opacity: .5; cursor: default; }
/* Loading skeleton: grey rows the width of the table, gently pulsing. */
.skeleton { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.skeleton i { display: block; height: 61px; background: var(--panel); }
.skeleton i:first-child { height: 44px; background: var(--surface-header); }
@media (prefers-reduced-motion: no-preference) { .skeleton i { animation: skeleton-pulse 1.4s ease-in-out infinite; } }
@keyframes skeleton-pulse { 50% { opacity: .55; } }
/* Contacts: the column names stay in view while scrolling, just under the top bar (whose height the
   page sets in --top-h). The wrapper clips instead of scrolling, so the header sticks to the page. */
.table-wrap:has(> table.contacts) { overflow-x: clip; }
table.contacts thead th { position: sticky; top: var(--top-h, 57px); z-index: 2; background: var(--surface-header); }
.note-text { white-space: pre-wrap; margin: 0; }
/* The front page search: one wide box, then results that read like a search engine's. */
.search-box { display: flex; gap: var(--space-2); }
.search-box input { flex: 1; min-width: 0; font-size: 18px; min-height: 52px; padding-inline: var(--space-4); }
.search-box .btn { min-height: 52px; padding-inline: var(--space-5, 20px); }
.search-hits { display: grid; background: var(--panel); border: 1px solid var(--line); }
.search-hit { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.search-hit:first-child { border-top: 0; }
.search-hit:hover { background: var(--hover-bg); text-decoration: none; }
.search-snippet { margin-top: 2px; line-height: 1.5; }
.search-snippet mark { background: var(--soft); color: inherit; font-weight: 600; }
/* Duplicates: one main record beside everyone who may be them. */
.dupe-set { padding: var(--space-4); }
.dupe-cols { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.dupe-main { display: grid; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--accent); overflow-wrap: anywhere; }
.dupe-main > * { margin: 0; }
.dupe-list { border: 1px solid var(--line); min-width: 0; }
.dupe-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-3); border-top: 1px solid var(--line); align-items: start; overflow-wrap: anywhere; }
.dupe-row:first-child { border-top: 0; }
.dupe-actions { display: grid; gap: var(--space-1); }
.dupe-row input { margin-top: 3px; }
.dupe-row.off strong { color: var(--muted); }
.dupe-why { display: block; margin-top: var(--space-1); color: var(--good); font-size: var(--type-small); }
.dupe-why.weak { color: var(--warn); }
@media (max-width: 760px) { .dupe-cols { grid-template-columns: minmax(0, 1fr); } }
/* A safety net: long text in a name or company cell stops at two lines ("…"); the full text is on hover and in the drawer. */
table.contacts td:first-child strong, table.contacts .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }