/* Contact detail — a record header and two columns on one surface.

   No cards. A record page is a page you read, and a bordered box around every
   group of five fields put the frame of a component between you and each
   value — four of them stacked in a narrow column is what made this cluttered.
   A section is a small heading and its rows, with a hairline where one group
   ends. Adding a section is still adding one call to sec().

   Built on tokens throughout, so it is dark-ready without a second pass; the
   few literal colours carry meaning rather than surface and are restated
   under body.theme-dark at the end. See docs/DESIGN-SYSTEM.md. */

/* The record replaces the contacts table inside #page-contacts — not inside
   .main, which also holds the app's own topbar: the sidebar toggle, the page
   title, Dialer and AI Assist. Mounting a level up covered all of it, and a
   page that hides the app's header reads as having navigated out of the app.

   The positioning context is created only while the record is open, rather
   than changing #page-contacts for every screen. */
body.cd-open #page-contacts{position:relative}
.cd-page{position:absolute;inset:0;z-index:40;background:var(--surface-alt);
  display:flex;flex-direction:column;overflow:hidden}
body.cd-open #page-contacts > *:not(.cd-page){visibility:hidden}

/* ---- the bar ---- */
.cd-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;height:48px;padding:0 24px;
  background:var(--surface);border-bottom:1px solid var(--border)}
.cd-crumb{display:flex;align-items:center;gap:7px;min-width:0;font:500 13px/1 'Inter',sans-serif}
.cd-crumb-b{border:0;background:transparent;padding:0;cursor:pointer;font:inherit;color:var(--text-secondary)}
.cd-crumb-b:hover{color:var(--text-primary)}
.cd-crumb-sep{color:var(--text-tertiary)}
.cd-crumb-now{color:var(--text-primary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-pager{margin-left:auto;display:flex;align-items:center;gap:4px;flex:0 0 auto}
.cd-pager-n{margin-right:4px;font:500 12px/1 'Inter',sans-serif;color:var(--text-tertiary);
  font-variant-numeric:tabular-nums}
.cd-pager-b{width:26px;height:26px;display:grid;place-items:center;padding:0;
  border:1px solid var(--border);background:var(--surface);border-radius:7px;cursor:pointer;
  color:var(--text-secondary);transition:background .13s ease,color .13s ease}
.cd-pager-b svg{width:13px;height:13px;display:block}
.cd-pager-b:hover:not(:disabled){background:var(--surface-panel);color:var(--text-primary)}
.cd-pager-b:disabled{opacity:.35;cursor:not-allowed}

/* ---- the page ----
   One card, and it is the record itself. Everything under it is content on
   the page, divided by a rule rather than boxed: three bordered panels made
   three frames to read past before reaching a phone number, and the columns
   stopped agreeing on where their edges were.

   Everything still shares one 24px gutter, which is what stops it drifting. */
.cd-body{flex:1 1 auto;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;padding:0;background:var(--surface)}
.cd-cols{flex:1 1 auto;min-height:0;display:grid;
  grid-template-columns:328px minmax(0,1fr);align-items:stretch}
.cd-left{border-right:1px solid var(--border);border-top:1px solid var(--border);
  padding-bottom:40px;overflow:visible}
.cd-main{border-top:1px solid var(--border)}

/* ---- the record card ---- */
.cd-rec{display:flex;align-items:center;gap:16px;padding:20px 24px}
.cd-av{position:relative;width:52px;height:52px;border-radius:50%;overflow:visible;
  flex:0 0 52px;display:block;line-height:0}
.cd-av svg{width:100%;height:100%;display:block;border-radius:50%}
.cd-rec-b{flex:1 1 auto;min-width:0}
.cd-rec-n{margin:0;font:650 20px/1.25 'Inter',sans-serif;color:var(--text-primary);letter-spacing:-.02em}
/* Tight to the name. The 20px name already carries 2.5px of leading below its
   glyphs, so 9px on top of that read as two separate rows rather than as one
   identity block. */
.cd-rec-r{margin-top:4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Flag then digits, nothing round them. The pill made a phone number look
   like a tag, and it is the one fact in this header that is not one. */
.cd-flag{width:16px;height:16px;border-radius:50%;overflow:hidden;flex:0 0 16px;
  box-shadow:0 0 0 1px rgba(16,24,40,.10)}
.cd-flag svg{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.5)}
.cd-num{display:inline-flex;align-items:center;gap:7px;
  font:500 12.5px/1 'Inter',sans-serif;color:var(--text-secondary);
  font-variant-numeric:tabular-nums}

/* ── wired to ──
   The apps this record also lives in, beside the number because they are the
   same kind of fact. A row of marks, not an overlapped stack: a stack cannot
   say which app is which, which is the only thing you want from it. */
.cd-rec-sep{width:1px;height:14px;background:var(--border);flex:0 0 1px}
.cd-wired{display:inline-flex;align-items:center;gap:6px}
.cd-wired-i{width:24px;height:24px;flex:0 0 24px;padding:3px;box-sizing:border-box;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--border);border-radius:7px;background:var(--surface);
  transition:border-color .13s ease,background .13s ease}
.cd-wired-i:hover{border-color:var(--border-strong);background:var(--surface-alt)}
.cd-wired-i .cd-app,.cd-wired-i .cd-app-fb{width:100%;height:100%;flex:none;
  border:0;padding:0;background:none;border-radius:4px}
.cd-tag-add{width:22px;height:22px;display:grid;place-items:center;padding:0;
  border:1px dashed var(--border-strong);border-radius:6px;background:transparent;
  color:var(--text-tertiary);cursor:pointer;transition:color .13s ease,border-color .13s ease}
.cd-tag-add svg{width:12px;height:12px;display:block}
.cd-tag-add:hover{color:var(--text-primary);border-color:var(--text-tertiary)}

/* Four actions of roughly equal weight read as a toolbar, so that is what
   they are. Only Call carries an accent; a filled blue button beside a name
   is the loudest thing on a page whose job is to be read. */
.cd-app-fb{width:26px;height:26px;border-radius:7px;display:inline-grid;place-items:center;
  background:var(--surface-panel);border:1px solid var(--border);margin-left:-6px;
  font:700 10.5px/1 'Inter',sans-serif;color:var(--text-secondary)}

/* The buttons are .jc-btn and the menu is .jc-dd — see styles/button.css.
   The header had its own 36px button with its own type and radius, so the one
   place on this page with three buttons was the one place that did not match
   the note composer sitting a few hundred pixels below it. The only thing left
   here is the menu's square, brought up to the row's 32. */
.cd-acts{flex:0 0 auto}
.cd-acts .cd-ib{width:32px;padding:0;color:var(--text-secondary)}
.cd-acts .cd-ib:hover:not([disabled]){color:var(--text-primary)}
.cd-acts .cd-more{width:32px;height:32px;flex:0 0 32px;border-radius:var(--btn-radius)}

/* ---- field groups ----
   The panel read as muted for three reasons, and all three were mine: a label
   column as wide as the value, a stroked box round every value, and a section
   heading at 11px tertiary that the eye slid off. The value is the thing you
   came to read, so it gets the weight; the label shrinks to what it needs.

   Twenty and Midday both do it this way — plain values, the field revealed on
   interaction rather than drawn all the time. */
.cd-sec{position:relative;padding:0 24px}
.cd-sec + .cd-sec{border-top:1px solid #F0F2F5}
.cd-sec-h{display:flex;align-items:center;gap:8px;padding:18px 0 10px}
.cd-sec-t{margin:0;font:600 13.5px/1 'Inter',sans-serif;color:var(--text-primary);
  letter-spacing:-.01em}
.cd-sec-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:6px;background:var(--surface-panel);color:var(--text-tertiary);
  font:600 11px/1 'Inter',sans-serif}
.cd-sec-b{display:flex;flex-direction:column;padding-bottom:16px}

/* The label was too faint and the value too heavy — the pair read as a
   shout and a whisper rather than as a row. The label comes up a step, the
   value comes down one. No rule between rows: at ten fields a hairline every
   36px turned a list of facts into a ledger, and the label column already
   gives the block all the rhythm it needs. */
.cd-f{display:flex;align-items:center;gap:10px;min-height:34px}
.cd-f-ic{flex:0 0 15px;width:15px;height:15px;color:var(--text-tertiary);margin-right:-4px}
.cd-f-ic svg{width:15px;height:15px;display:block}
.cd-f.has-ic .cd-f-v.is-field{margin-left:-7px}
.cd-f-k{flex:0 0 104px;font:400 12.5px/1.5 'Inter',sans-serif;color:var(--text-secondary)}
.cd-f-v{flex:1 1 auto;min-width:0;font:400 13px/1.5 'Inter',sans-serif;
  color:var(--text-primary);word-break:break-word;display:flex;align-items:center;gap:8px}

/* An editable value is plain text until you reach for it. The box is drawn on
   hover and held on focus, so the panel is quiet at rest and the field is
   still obviously a field the moment you go near it. Same box either way, so
   nothing shifts when it appears. */
.cd-f-v.is-field{display:block;width:100%;box-sizing:border-box;
  padding:5px 9px;margin-left:-9px;
  border:1px solid transparent;border-radius:8px;background:transparent;
  font:400 13px/1.5 'Inter',sans-serif;color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none;
  transition:border-color .12s ease,background .12s ease}
.cd-f-v.is-field:hover{border-color:var(--border);background:var(--surface-alt)}
.cd-f-v.is-field:focus{border-color:var(--border-strong);background:var(--surface)}

.cd-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;
  background:var(--surface-panel);color:var(--text-secondary);
  font:500 12px/1 'Inter',sans-serif}
.cd-badge.is-stage{background:var(--brand-blue-soft);color:var(--brand-blue)}
.cd-f-v .jc-cmp-cell{display:inline-flex;align-items:center;gap:8px;min-width:0}
.cd-f-v .jc-cmp-logo{width:18px;height:18px;border-radius:4px;flex:0 0 18px;object-fit:contain}
.cd-f-v .jc-cmp-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A score has a size, so it is drawn at one. */
.cd-score{flex:0 0 56px;height:5px;border-radius:999px;background:var(--surface-panel);
  overflow:hidden;display:block}
.cd-score i{display:block;height:100%;border-radius:999px}
.cd-score.is-ok i{background:#17B26A}
.cd-score.is-warn i{background:#F79009}
.cd-score.is-low i{background:#F04438}
.cd-score-n{font:500 13px/1 'Inter',sans-serif;color:var(--text-primary);
  font-variant-numeric:tabular-nums}

.cd-owner{display:inline-flex;align-items:center;gap:7px}
.cd-owner-m{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-panel);color:var(--text-secondary);font:600 9.5px/1 'Inter',sans-serif}

/* ---- tabs ---- */
.cd-main{min-width:0;display:flex;flex-direction:column}
.cd-tabs{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:0 16px;
  border-bottom:1px solid var(--border)}
.cd-tab{position:relative;display:inline-flex;align-items:center;gap:7px;height:46px;padding:0 12px;
  border:0;background:transparent;cursor:pointer;
  font:500 13.5px/1 'Inter',sans-serif;color:var(--text-secondary)}
.cd-tab:hover{color:var(--text-primary)}
.cd-tab.on{color:var(--brand-blue);font-weight:600}
.cd-tab.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  border-radius:2px 2px 0 0;background:var(--brand-blue)}
.cd-tab-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:6px;background:var(--surface-panel);color:var(--text-tertiary);
  font:600 11px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums}
.cd-tab.on .cd-tab-n{background:var(--brand-blue-soft);color:var(--brand-blue)}
.cd-panel{padding:18px 24px 40px}

/* ---- timeline filters ---- */
/* Pills. A row of bare words with numbers after them read as a sentence you
   had to parse; a pill is a thing you press, and the selected one says so. */
.cd-fil{display:flex;align-items:center;gap:6px;padding-bottom:4px;margin-bottom:8px}
.cd-fil-b{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer;
  font:500 12.5px/1 'Inter',sans-serif;color:var(--text-secondary);
  transition:background .13s ease,border-color .13s ease,color .13s ease}
.cd-fil-b:hover{background:var(--surface-alt);color:var(--text-primary)}
.cd-fil-b.on{background:var(--brand-blue-soft);border-color:#C6D6FF;color:var(--brand-blue);
  font-weight:600}
.cd-fil-n{font-size:11.5px;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.cd-fil-b.on .cd-fil-n{color:var(--brand-blue);opacity:.75}

/* ---- panel rows ----------------------------------------------------------
   Segments and Campaigns used to be a name, a glyph and a status pill — the
   campaigns table's answer, restated on a page you did not open to read the
   campaigns table. A row here carries the two things the list could not say:
   why this contact is in it, and what it did to them. */
.cd-pane-h{display:flex;align-items:flex-start;gap:20px;padding-bottom:16px;
  border-bottom:1px solid var(--border);margin-bottom:2px}
.cd-pane-s{margin:0;flex:1 1 auto;max-width:64ch;
  font:400 13px/1.6 'Inter',sans-serif;color:var(--text-secondary)}
.cd-pane-s b{font-weight:600;color:var(--text-primary)}

.cd-rows{list-style:none;margin:0;padding:0}
.cd-row{display:flex;align-items:flex-start;gap:13px;padding:16px 0;
  border-bottom:1px solid var(--border)}
.cd-row:last-child{border-bottom:0}
.cd-row-ic{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;
  place-items:center;background:var(--surface-alt);border:1px solid var(--border);
  color:var(--text-secondary)}
/* The segment marks ship with a padded viewBox (-1 -1 26 26), so at the same
   px they draw smaller than the channel icons beside them. One up. */
.cd-row-ic svg{width:15px;height:15px;display:block}
.cd-row:not(.is-camp) .cd-row-ic svg{width:17px;height:17px}
.cd-row-b{flex:1 1 auto;min-width:0}
.cd-row-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cd-row-t{font:600 13.5px/1.4 'Inter',sans-serif;color:var(--text-primary)}
.cd-row-p{margin:4px 0 0;font:400 12.5px/1.55 'Inter',sans-serif;
  color:var(--text-secondary);max-width:72ch}
.cd-row-m{margin-top:6px;display:flex;align-items:center;flex-wrap:wrap;
  font:400 12px/1.6 'Inter',sans-serif;color:var(--text-tertiary)}

/* Actions arrive on hover. Four rows each showing an open and a remove button
   at rest is eight controls competing with the content they belong to. */
.cd-row-a{flex:0 0 auto;display:flex;align-items:center;gap:2px;
  opacity:0;transition:opacity .13s ease}
.cd-row:hover .cd-row-a,.cd-row:focus-within .cd-row-a{opacity:1}
.cd-row-b2{width:28px;height:28px;display:grid;place-items:center;padding:0;
  border:0;border-radius:7px;background:transparent;color:var(--text-tertiary);cursor:pointer}
.cd-row-b2 svg{width:14px;height:14px;display:block}
.cd-row-b2:hover{background:var(--surface-alt);color:var(--text-primary)}
.cd-row-b2:last-child:hover{color:#D92D20}
.cd-row:not(.is-camp) .cd-row-b2:first-child:hover{color:var(--brand-blue)}

/* What kind of segment. A rule will put this contact back tomorrow; a list
   will not — which is the difference that matters when you remove them. */
.cd-kind{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;
  font:500 11px/1 'Inter',sans-serif;border:1px solid var(--border);
  background:var(--surface-alt);color:var(--text-secondary)}
.cd-kind.is-smart{background:#F4F3FF;border-color:#E4DFFE;color:#5925DC}
.cd-kind.is-static{background:#F0F9FF;border-color:#B9E6FE;color:#026AA2}

/* The two facts a campaign row exists to carry, side by side and equal. */
.cd-camp-g{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.cd-camp-c{display:flex;flex-direction:column;gap:4px;min-width:0}
.cd-camp-c + .cd-camp-c{padding-left:28px;border-left:1px solid var(--border)}
.cd-camp-k{font:500 10.5px/1 'Inter',sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-tertiary)}
.cd-camp-v{display:flex;align-items:center;font:500 13px/1.3 'Inter',sans-serif;
  color:var(--text-primary);font-variant-numeric:tabular-nums}
.cd-camp-v em{font-style:normal;font-weight:600}
.cd-camp-v em.is-ok{color:#067647}
.cd-camp-v em.is-warn{color:#B54708}
.cd-camp-s{font:400 12px/1.4 'Inter',sans-serif;color:var(--text-tertiary)}
.cd-camp-bar{display:block;height:5px;border-radius:3px;background:#EFF1F4;overflow:hidden}
.cd-camp-bar i{display:block;height:100%;border-radius:3px;background:var(--brand-blue)}
.cd-camp-bar.is-stopped i{background:var(--text-tertiary)}
@media (max-width:900px){
  .cd-camp-g{grid-template-columns:1fr;gap:12px}
  .cd-camp-c + .cd-camp-c{padding-left:0;border-left:0}
}

.cd-add{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;
  border:1px dashed var(--border-strong);border-radius:9px;background:transparent;
  color:var(--text-secondary);font:600 12.5px/1 'Inter',sans-serif;cursor:pointer;
  white-space:nowrap}
.cd-add svg{width:13px;height:13px}
.cd-add:hover{border-color:var(--text-tertiary);color:var(--text-primary)}
.cd-add.is-inline{flex:0 0 auto;margin-top:-2px}

.cd-blank{padding:32px 0 20px;max-width:56ch;
  font:400 13px/1.65 'Inter',sans-serif;color:var(--text-tertiary)}

.cd-tagwrap{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 0 4px}
.cd-tagwrap .jc-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border-radius:7px;font:500 12px/1 'Inter',sans-serif;border:1px solid transparent}
.cd-tagwrap .jc-tag:not([class*="t-"]){border-color:var(--border);
  background:var(--surface-panel);color:var(--text-secondary)}

/* An app's mark, wherever one is shown. */
.cd-app,.cd-app-fb{width:24px;height:24px;flex:0 0 24px;border-radius:7px;
  object-fit:contain;background:var(--surface);border:1px solid var(--border);
  padding:3px;box-sizing:border-box}
.cd-app-fb{display:inline-grid;place-items:center;padding:0;background:var(--surface-panel);
  font:700 10.5px/1 'Inter',sans-serif;color:var(--text-secondary)}

body.theme-dark .cd-bar{background:var(--surface);border-bottom-color:var(--border)}
body.theme-dark .cd-body{background:var(--surface)}
body.theme-dark .cd-left{border-right-color:var(--border);border-top-color:var(--border)}
body.theme-dark .cd-main{border-top-color:var(--border)}
body.theme-dark .cd-card{background:var(--surface);border-color:var(--border)}

body.theme-dark .cd-act{background:#2A2D33;border-color:#3A3F47;color:#D1D5DB}
body.theme-dark .cd-act.is-accent{background:#26314A;border-color:#3A5490;color:#9EC0FF}
body.theme-dark .cd-f{border-bottom-color:#2A2D33}
body.theme-dark .cd-sec + .cd-sec{border-top-color:#2A2D33}
body.theme-dark .cd-phone{background:#31353C;color:#F4F4F5}
body.theme-dark .cd-badge{background:#31353C;color:#D1D5DB}
body.theme-dark .cd-badge.is-stage{background:#26314A;color:#9EC0FF}
body.theme-dark .cd-app,body.theme-dark .cd-app-fb{background:#2A2D33;border-color:#3A3F47}
body.theme-dark .cd-wired-i{background:#26292F;border-color:#3A3F47}
body.theme-dark .cd-wired-i:hover{background:#2A2D33}
body.theme-dark .cd-wired-i .cd-app,body.theme-dark .cd-wired-i .cd-app-fb{background:none;border:0}
body.theme-dark .cd-score{background:#31353C}
/* theme-customiser.css paints every input in dark with an !important border
   and ground, so at rest the panel showed five boxed fields — the opposite of
   "the box is drawn on hover". Only !important takes it back. */
body.theme-dark .cd-f-v.is-field{border-color:transparent !important;
  background:transparent !important;color:#F4F4F5}
body.theme-dark .cd-f-v.is-field:hover{border-color:#3A3F47 !important;
  background:#26292F !important}
body.theme-dark .cd-f-v.is-field:focus{border-color:#4A5160 !important;
  background:var(--surface) !important}
body.theme-dark .cd-left .cd-sec .cd-sec-t{color:#F4F4F5 !important}
body.theme-dark body.theme-dark .cd-sec-n,body.theme-dark .cd-tab-n{background:#31353C;color:#9AA1AC}
body.theme-dark .cd-fil-b.on,body.theme-dark .cd-fil-b:hover{background:#2A2D33}
body.theme-dark .cd-owner-m{background:#31353C;color:#D1D5DB}
body.theme-dark body.theme-dark .cd-left .cd-sec .cd-f .cd-f-k{color:#9AA1AC !important}
body.theme-dark .cd-left .cd-sec .cd-sec-t{color:#8A9099 !important}
body.theme-dark .cd-left .cd-sec .cd-f .cd-f-v{color:#F4F4F5 !important}
body.theme-dark .cd-main .cd-tab{color:#9AA1AC}
body.theme-dark .cd-main .cd-tab.on{color:#F4F4F5}
body.theme-dark .cd-tab.on{color:#9EC0FF}
body.theme-dark .cd-tab.on::after{background:#9EC0FF}
body.theme-dark .cd-tab.on .cd-tab-n{background:#26314A;color:#9EC0FF}
body.theme-dark .cd-fil-b{background:#26292F;border-color:#3A3F47}
body.theme-dark .cd-fil-b.on{background:#26314A;border-color:#3A5490;color:#9EC0FF}

/* ---- the timeline ----
   A rail with nodes on it. The list hangs off one left edge — node, title,
   meta, body — so twenty events read as one column instead of twenty loose
   blocks. The rail is drawn by the list, not by each row, which is what stops
   it breaking between days. */
/* The day is a marker on the same rail the events hang from, not a heading
   floating above them — it was the break in the line that made the column
   look like it had come apart. */
.cd-day{position:relative;margin:0;padding:20px 0 8px 34px;
  font:600 11px/1 'Inter',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-tertiary)}
.cd-day::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:1.5px;
  background:var(--border)}
.cd-day:first-child{padding-top:6px}
.cd-day:first-child::before{top:14px}
.cd-tl{position:relative;list-style:none;margin:0;padding:0 0 0 34px}
.cd-tl::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:1.5px;
  background:var(--border)}
.cd-tl:last-child::before{bottom:auto;height:28px}
.cd-ev{position:relative;padding:8px 0 12px}
/* A call is a module: outcome, recording and reading inside one edge, so the
   column reads as light rows punctuated by the things that mattered. */
.cd-ev.is-rich .cd-ev-b{padding:12px 14px 14px;border:1px solid var(--border);
  border-radius:12px;background:var(--surface)}
.cd-ev.is-rich{padding-bottom:16px}
/* The node sits on the rail and covers it, which is what makes it read as a
   point on a line rather than a badge beside one. */
/* Smaller and filled rather than ringed — a ringed circle every 60px was the
   thing that dated it. */
.cd-ev-node{position:absolute;left:-31px;top:9px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-panel);
  box-shadow:0 0 0 3px var(--surface);color:var(--text-tertiary)}
.cd-ev-node svg{width:11px;height:11px;display:block}
.cd-ev.is-rich .cd-ev-node{top:19px}
/* What happened, at a glance — the same three tones Call Logs gives a
   direction icon, so a connected call looks connected in both places. */
.cd-ev.is-ok .cd-ev-node{color:#067647;background:#D1FADF;box-shadow:0 0 0 3px var(--surface)}
.cd-ev.is-miss .cd-ev-node{color:#B42318;background:#FEE4E2;box-shadow:0 0 0 3px var(--surface)}
.cd-ev.is-msg .cd-ev-node{color:#175CD3;background:#D1E9FF;box-shadow:0 0 0 3px var(--surface)}
.cd-ev-b{min-width:0}
.cd-ev-h{display:flex;align-items:baseline;gap:9px;min-height:20px}
.cd-ev-title{font:600 13.5px/1.4 'Inter',sans-serif;color:var(--text-primary)}
.cd-ev-by{font:400 12.5px/1.4 'Inter',sans-serif;color:var(--text-tertiary);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-ev-when{margin-left:auto;flex:0 0 auto;font:400 12px/1.4 'Inter',sans-serif;
  color:var(--text-tertiary);font-variant-numeric:tabular-nums}

/* The facts of a call as one line, the way a person would say them: three
   coloured chips was three shapes for three facts of equal weight, and a
   column of them read as badges rather than as a history. */
.cd-ev-meta{margin-top:4px;display:flex;align-items:center;flex-wrap:wrap;
  font:400 12.5px/1.6 'Inter',sans-serif;color:var(--text-secondary)}
.cd-ev-meta .is-ok{color:#067647;font-weight:500}
.cd-ev-meta .is-warn{color:#B54708;font-weight:500}
/* The separator between meta facts. It had no rule at all, so the <i> rendered
   at zero width and the row read "Connected2m 18sHot Leads" — four facts run
   into one word. */
.cd-dot{display:inline-block;width:3px;height:3px;border-radius:50%;margin:0 8px;
  background:var(--text-tertiary);opacity:.65;flex:0 0 3px}

/* The recording, sitting on the page rather than in a box of its own. */
.cd-play{margin-top:10px;display:inline-flex;align-items:center;gap:11px;
  padding:7px 13px 7px 8px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface-alt);max-width:100%}
.cd-play-b{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center;padding:0;
  border:0;border-radius:50%;background:var(--brand-blue);
  color:#fff;cursor:pointer;transition:background .13s ease}
.cd-play-b:hover{background:var(--brand-blue-strong)}
.cd-play-b svg{width:11px;height:11px;display:block;margin-left:1px}
.cd-play-b:hover{color:var(--text-primary);border-color:var(--text-tertiary)}
.cd-wave{flex:1 1 auto;min-width:0;max-width:340px;height:20px;display:flex;align-items:center;gap:2px}
.cd-wave i{flex:1 1 0;min-width:2px;border-radius:2px;background:var(--border-strong);opacity:.5}
.cd-wave i.on{background:var(--brand-blue);opacity:.85}
.cd-play-d{flex:0 0 auto;font:400 12px/1 'Inter',sans-serif;color:var(--text-tertiary);
  font-variant-numeric:tabular-nums}

/* What the AI heard — set apart because it is a reading of the call rather
   than a fact about it, and that difference matters when someone acts on it. */
.cd-ai{margin-top:12px;padding:12px 14px;border:1px solid #E9D7FE;border-radius:10px;
  background:#FCFAFF}
.cd-ai-h{display:flex;align-items:center;gap:6px;font:600 10.5px/1 'Inter',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:#6941C6}
.cd-ai-h svg{width:13px;height:13px;flex:0 0 13px}
.cd-ai-p{margin:9px 0 0;font:400 13px/1.6 'Inter',sans-serif;color:var(--text-secondary)}
.cd-ai-tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.cd-ai-tags span{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;
  background:#F4F3FF;border:1px solid #E4DFFE;
  color:#5925DC;font:500 11.5px/1 'Inter',sans-serif}

/* What was said, quoted. */
/* What was said, set as text rather than in a box. Five boxed quotes down a
   column was five cards for five sentences. */
.cd-said{margin:5px 0 0;font:400 13.5px/1.6 'Inter',sans-serif;color:var(--text-secondary)}

.cd-tl-empty{padding:44px 0;text-align:center;font:400 13px/1.5 'Inter',sans-serif;
  color:var(--text-tertiary)}
.cd-link{color:var(--text-primary);text-decoration:none}
.cd-link:hover{color:var(--brand-blue)}

/* ---- the note composer ----
   At the head of the timeline now, not behind a tab. Laid out as a row so at
   rest it reads as one line you can type on rather than as an empty box: the
   glyph says what it is, and the button only arrives once there is something
   to add. */
.cd-note{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;
  padding:11px 14px;margin-bottom:18px;
  border:1px solid var(--border);border-radius:11px;background:var(--surface);
  transition:border-color .14s ease}
.cd-note:focus-within{border-color:var(--border-strong)}
.cd-note-ic{grid-column:1;width:16px;height:16px;margin-top:2px;color:var(--text-tertiary)}
.cd-note-ic svg{width:16px;height:16px;display:block}
.cd-note-t{grid-column:2;width:100%;border:0;background:transparent;resize:none;overflow:hidden;
  font:400 13.5px/1.55 'Inter',sans-serif;color:var(--text-primary);outline:none;padding:0;min-height:20px}
.cd-note-t::placeholder{color:var(--text-tertiary)}
.cd-note-f{grid-column:2;display:none;justify-content:flex-end;padding-top:8px}
.cd-note:focus-within .cd-note-f,
.cd-note:has(.cd-note-t:not(:placeholder-shown)) .cd-note-f{display:flex}

body.theme-dark .cd-tl::before{background:#3A3F47}
body.theme-dark .cd-ev-node{background:var(--surface);box-shadow:0 0 0 1.5px #3A3F47 inset}
body.theme-dark .cd-ev-call .cd-ev-node{color:#9EC0FF;box-shadow:0 0 0 1.5px #3A5490 inset}
body.theme-dark .cd-ev-meta .is-ok{color:#75E0A7}
body.theme-dark .cd-ev-meta .is-warn{color:#FDB022}
body.theme-dark .cd-ai{background:#241E38;border-color:#4B3A73}
body.theme-dark .cd-ai-h{color:#C3A6FF}
body.theme-dark .cd-ai-tags span{background:#2E2545;border-color:#4B3A73;color:#C3A6FF}
body.theme-dark .cd-ev.is-ok .cd-ev-node{color:#75E0A7;box-shadow:0 0 0 1.5px #1C5236 inset;background:#0E2C1D}
body.theme-dark .cd-ev.is-miss .cd-ev-node{color:#FDA29B;box-shadow:0 0 0 1.5px #5C2B27 inset;background:#3A1E1C}
body.theme-dark .cd-ev.is-msg .cd-ev-node{color:#9EC0FF;box-shadow:0 0 0 1.5px #3A5490 inset;background:#26314A}
body.theme-dark .cd-ev.is-rich .cd-ev-b{background:#26292F;border-color:#3A3F47}
body.theme-dark .cd-ev-node{background:#31353C;box-shadow:0 0 0 3px var(--surface)}
body.theme-dark .cd-ev.is-ok .cd-ev-node{background:#0E2C1D;color:#75E0A7}
body.theme-dark .cd-ev.is-miss .cd-ev-node{background:#3A1E1C;color:#FDA29B}
body.theme-dark .cd-ev.is-msg .cd-ev-node{background:#26314A;color:#9EC0FF}
body.theme-dark .cd-play{background:#26292F;border-color:#3A3F47}

body.theme-dark .cd-note{background:#26292F;border-color:#3A3F47}
body.theme-dark .cd-row,body.theme-dark .cd-pane-h,
body.theme-dark .cd-camp-c + .cd-camp-c{border-color:#2A2D33}
body.theme-dark .cd-row-ic{background:#26292F;border-color:#3A3F47}
body.theme-dark .cd-kind{background:#26292F;border-color:#3A3F47}
body.theme-dark .cd-kind.is-smart{background:rgba(139,92,246,.18);border-color:transparent;color:#D6BBFB}
body.theme-dark .cd-kind.is-static{background:rgba(14,165,233,.18);border-color:transparent;color:#7CD4FD}
body.theme-dark .cd-camp-bar{background:#31353C}
/* The inherit sweep again — see the note above. */
body.theme-dark .cd-rows .cd-row-m,
body.theme-dark .cd-rows .cd-camp-k,
body.theme-dark .cd-rows .cd-camp-s{color:var(--text-tertiary)}
body.theme-dark .cd-rows .cd-row-p,
body.theme-dark .cd-main .cd-pane-s{color:var(--text-secondary)}
body.theme-dark .cd-rows .cd-camp-v em.is-ok{color:#75E0A7}
body.theme-dark .cd-rows .cd-camp-v em.is-warn{color:#FDB022}

/* ---- Overview ----------------------------------------------------------
   A brief, in the order it is asked in: the answer, then what to do, then
   what is still open, then the evidence. Everything hangs off two x values —
   the panel's left edge and one 132px label column — so the block reads as
   one document rather than four unrelated widgets.

   The score used to be a 76px dial with a paragraph beside it, which made the
   loudest thing on the page the one number you cannot act on. It is a phrase
   in the brief's header now. */
/* End to end. The 860px cap left half the panel empty on a wide screen while
   the tab strip, the timeline and the two list tabs all ran the full width —
   so Overview was the one tab that stopped short. The structure fills; only
   the prose keeps a measure, because a 200-character line is unreadable no
   matter how much room there is for it. */
.cd-ov{display:flex;flex-direction:column;gap:0}

/* ── the brief ──
   One tinted ground, no border on three sides fighting the tint, and a 3px
   band on the left in the health colour — the only place the band is spent,
   so it reads as a status rather than as decoration. */
.cd-brief{position:relative;padding:16px 20px 18px;border-radius:12px;
  background:var(--surface-alt);border:1px solid var(--border);overflow:hidden}
.cd-brief::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--success,#12B76A)}
.cd-brief.is-warn::before{background:#F79009}
.cd-brief.is-risk::before{background:#F04438}

.cd-brief-h{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.cd-brief-t{display:inline-flex;align-items:center;gap:6px;
  font:600 12px/1 'Inter',sans-serif;letter-spacing:.04em;text-transform:uppercase;
  color:#6941C6}
.cd-brief-t svg{width:14px;height:14px;flex:0 0 14px}
.cd-brief-s{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.cd-brief-band{display:inline-flex;align-items:center;height:22px;padding:0 9px;
  border-radius:6px;font:600 12px/1 'Inter',sans-serif;
  background:#ECFDF3;color:#067647}
.cd-brief.is-warn .cd-brief-band{background:#FFFAEB;color:#B54708}
.cd-brief.is-risk .cd-brief-band{background:#FEF3F2;color:#B42318}
.cd-brief-n{font:650 15px/1 'Inter',sans-serif;color:var(--text-primary);
  font-variant-numeric:tabular-nums}
.cd-brief-n em{font-style:normal;font-weight:500;font-size:12px;color:var(--text-tertiary)}

.cd-brief-p{margin:0;font:400 13.5px/1.65 'Inter',sans-serif;color:var(--text-primary);
  max-width:68ch}

/* Highlights. Label over value, no boxes — five facts in the width three
   bordered tiles used, and the eye reads a row of them in one pass. */
.cd-hl{display:flex;flex-wrap:wrap;gap:8px 32px;margin:16px 0 0;
  padding-top:14px;border-top:1px solid var(--border)}
.cd-hl-i{min-width:0}
.cd-hl dt{margin:0;font:500 10.5px/1 'Inter',sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-tertiary)}
.cd-hl dd{margin:5px 0 0;font:500 13px/1.3 'Inter',sans-serif;color:var(--text-primary)}

/* ── two up ──
   Suggested steps and open items are the same kind of thing — a short list you
   act on — so they sit side by side and the evidence below runs full width. */
.cd-ov-two{display:grid;grid-template-columns:1fr 1fr;gap:0 33px;align-items:stretch}
/* A rule down the gutter. Without it the two lists were two things floating
   next to each other, and the hairlines between their own rows read louder
   than the boundary between the lists — sub-structure beating structure. */
.cd-ov-two > section + section{padding-left:33px;border-left:1px solid var(--border)}
@media (max-width:1080px){
  .cd-ov-two{grid-template-columns:1fr}
  .cd-ov-two > section + section{padding-left:0;border-left:0;
    padding-top:20px;border-top:1px solid var(--border)}
}

/* Each block sits in its own band. The gap alone left them floating; a rule
   above and equal air either side of it makes the page read as four sections
   rather than as one column of loose paragraphs. */
.cd-ov > .cd-ov-sec,.cd-ov > .cd-ov-two{
  margin-top:22px;padding-top:22px;border-top:1px solid var(--border)}
.cd-ov > .cd-brief + *{margin-top:24px}

.cd-ov-sec h4{margin:0 0 12px;display:flex;align-items:center;gap:8px;
  font:600 13px/1 'Inter',sans-serif;color:var(--text-primary)}
.cd-ov-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:5px;background:var(--surface-alt);border:1px solid var(--border);
  font:500 11px/1 'Inter',sans-serif;color:var(--text-secondary)}

/* ── suggested next steps ──
   A dot for urgency, the sentence, and the channel and timing on the right in
   one muted run. No CTA per row: every one of these is done somewhere else in
   the product, and a button that only looks like one is worse than none. */
.cd-sug{list-style:none;margin:0;padding:0}
.cd-sug-i{display:flex;align-items:baseline;gap:10px;padding:9px 0;
  border-bottom:1px solid #F4F6F8}
.cd-sug-i:last-child{border-bottom:0}
.cd-sug-d{flex:0 0 6px;width:6px;height:6px;border-radius:50%;position:relative;top:-1px;
  background:var(--text-tertiary)}
.cd-sug-i.is-urgent .cd-sug-d{background:#F04438}
.cd-sug-i.is-watch  .cd-sug-d{background:#F79009}
.cd-sug-i.is-info   .cd-sug-d{background:#98A2B3}
.cd-sug-t{flex:1 1 auto;min-width:0;font:400 13px/1.5 'Inter',sans-serif;
  color:var(--text-primary)}
.cd-sug-m{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  font:500 11.5px/1 'Inter',sans-serif;color:var(--text-tertiary);white-space:nowrap}
.cd-sug-m i{font-style:normal;opacity:.5}

/* ── open items ── */
.cd-todo{list-style:none;margin:0;padding:0}
.cd-todo-i label{display:flex;align-items:flex-start;gap:10px;padding:9px 0;cursor:pointer}
.cd-todo-i{border-bottom:1px solid #F4F6F8}
.cd-todo-i:last-child{border-bottom:0}
.cd-todo-i input{position:absolute;opacity:0;width:0;height:0}
.cd-todo-b{flex:0 0 16px;width:16px;height:16px;margin-top:1px;border-radius:5px;
  border:1.5px solid var(--border-strong);display:grid;place-items:center;
  color:transparent;transition:background .12s ease,border-color .12s ease}
.cd-todo-b svg{width:10px;height:10px;display:block}
.cd-todo-i label:hover .cd-todo-b{border-color:var(--text-tertiary)}
.cd-todo-i.is-done .cd-todo-b{background:var(--brand-blue);border-color:var(--brand-blue);
  color:#fff}
.cd-todo-t{flex:1 1 auto;min-width:0;font:400 13px/1.5 'Inter',sans-serif;
  color:var(--text-primary)}
.cd-todo-i.is-done .cd-todo-t{color:var(--text-tertiary);text-decoration:line-through}

/* ── what drives the score ──
   Four stat blocks, not four label-bar-value rows. Each one now carries the
   thing it counted underneath it, because a number called "Warmth 9.2" with
   nothing beside it is a number you have to be told the meaning of — and
   being asked what it means is the whole answer about whether it worked.
   Label and value on a line, the bar under them at full width, the evidence
   under that. It also closes the 120px of dead space the old row had between
   a short label and the start of its track. */
.cd-fac{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px}
.cd-fac-i{display:grid;grid-template-columns:1fr auto;gap:7px 10px;align-items:center}
.cd-fac-k{font:500 12.5px/1.3 'Inter',sans-serif;color:var(--text-primary)}
.cd-fac-v{text-align:right;font:600 12.5px/1.3 'Inter',sans-serif;
  color:var(--text-primary);font-variant-numeric:tabular-nums}
.cd-fac-b{grid-column:1 / -1;height:5px;border-radius:3px;background:#EFF1F4;overflow:hidden}
.cd-fac-b i{display:block;height:100%;border-radius:3px;background:#12B76A}
.cd-fac-b.is-warn i{background:#F79009}
.cd-fac-b.is-risk i{background:#F04438}
.cd-fac-w{grid-column:1 / -1;font:400 12px/1.4 'Inter',sans-serif;color:var(--text-tertiary)}

/* A heading can carry the one sentence that makes its block checkable. */
.cd-ov-note{margin-left:auto;font:400 12px/1 'Inter',sans-serif;
  color:var(--text-tertiary);font-weight:400}

/* ── worth knowing ── */
.cd-sig{list-style:none;margin:0;padding:0}
.cd-sig li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
  border-bottom:1px solid #F4F6F8}
.cd-sig li:last-child{border-bottom:0}
.cd-sig-d{flex:0 0 6px;width:6px;height:6px;margin-top:6px;border-radius:50%;
  background:#12B76A}
.cd-sig li.is-warn .cd-sig-d{background:#F79009}
.cd-sig strong{display:block;font:600 13px/1.4 'Inter',sans-serif;color:var(--text-primary)}
.cd-sig p{margin:2px 0 0;font:400 12.5px/1.55 'Inter',sans-serif;color:var(--text-secondary);
  max-width:76ch}

/* Where it came from. An AI panel that will not say what it read is asking to
   be trusted on nothing. */
.cd-ov-foot{display:flex;align-items:center;gap:7px;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--border);
  font:400 12px/1.5 'Inter',sans-serif;color:var(--text-tertiary)}
.cd-ov-foot svg{width:13px;height:13px;flex:0 0 13px;color:#6941C6}

body.theme-dark .cd-brief{background:#26292F;border-color:var(--border)}
body.theme-dark .cd-brief-band{background:#0E2C1D;color:#75E0A7}
body.theme-dark .cd-brief.is-warn .cd-brief-band{background:#3A2E14;color:#FDB022}
body.theme-dark .cd-brief.is-risk .cd-brief-band{background:#3A1E1C;color:#FDA29B}
body.theme-dark .cd-hl{border-top-color:#3A3F47}
body.theme-dark .cd-ov-n{background:#26292F;border-color:#3A3F47}
body.theme-dark .cd-sug-i,
body.theme-dark .cd-todo-i,
body.theme-dark .cd-sig li{border-bottom-color:#2A2D33}
body.theme-dark .cd-fac-b{background:#31353C}
body.theme-dark .cd-ov > .cd-ov-sec,
body.theme-dark .cd-ov > .cd-ov-two,
body.theme-dark .cd-ov-foot,
body.theme-dark .cd-ov-two > section + section{border-color:#2A2D33}
body.theme-dark .cd-todo-b{border-color:#4A505A}

/* theme-customiser.css line 115 sets color:inherit on every p/span/div/li/dd/dt
   in dark mode. It is (0,1,1) and it loads after this file, so a single-class
   rule here loses and every muted tone in the panel flattens to the body's
   #E5E7EB — which is exactly the hierarchy this tab is built on. Two classes
   deep clears it. Say the muted tones again rather than fight the sweep. */
body.theme-dark .cd-ov .cd-hl dt,
body.theme-dark .cd-ov .cd-sug-m,
body.theme-dark .cd-ov .cd-ov-foot,
body.theme-dark .cd-ov .cd-todo-i.is-done .cd-todo-t{color:var(--text-tertiary)}
body.theme-dark .cd-ov .cd-fac-v,
body.theme-dark .cd-ov .cd-sig p,
body.theme-dark .cd-ov .cd-ov-n{color:var(--text-secondary)}
body.theme-dark .cd-ov .cd-fac-w,
body.theme-dark .cd-ov .cd-ov-note{color:var(--text-tertiary)}
body.theme-dark .cd-ov .cd-brief-t{color:#B692F6}
body.theme-dark .cd-ov .cd-brief-n em{color:var(--text-tertiary)}
body.theme-dark .cd-rec .cd-num{color:var(--text-secondary)}
body.theme-dark .cd-sec .cd-f-k{color:var(--text-secondary)}