/* ==========================================================================
   v2-contacts.css - the Contacts page and its profile panel (ruling b9w).

   EVERY SELECTOR IS PREFIXED `ct`, except .status-dot, which is GL-003 § 6.2's
   recipe and was never in v2's CSS. The grid chassis (table.grid, .toolbar,
   .th-inner, .funnel, .gridfoot, .pager), the pills, the drawer and the column
   menu come from v2.css and are not restated.

   COLOURS, RADII AND SHADOWS ARE TOKENS, AND SIZES ARE NOT ALL. Font sizes
   (11px, 12px), line heights, small gaps and paddings (1px to 8px), the bar
   height (10px), the header funnel reserve (26px) and the bar label column
   (96px to 128px) are literals, set the way v2.css sets its own. The larger
   spaces use the --space-* tokens.

   STRICT CSP: the only dynamic value is a bar width, and it arrives as the
   custom property --w written through CSSOM by cc2-dom.js.
   ========================================================================== */

/* ---------------- page frame ---------------- */
.ctpage { display: flex; flex-direction: column; gap: var(--space-lg); }
.ctpage .pagehead { margin-bottom: 0; }
.ctpage .pillstrip { margin-bottom: 0; flex-wrap: wrap; }
.ctrule { margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); max-width: 120ch; }
.ctrule b { color: var(--color-text-strong); }
.ctempty { margin: 0; padding: var(--space-lg); font-size: 12px; color: var(--color-text-muted); }
.ctmuted { color: var(--color-text-muted); }
.ctnowrap { white-space: nowrap; }
.ctnone { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }

/* ---------------- the status dot, GL-003 § 6.2 ---------------- */
.status-dot {
  display: inline-block; width: var(--status-dot-size); height: var(--status-dot-size);
  border-radius: var(--radius-pill); background: var(--dot, var(--color-text-muted));
  flex: 0 0 auto; align-self: center;
}

/* ---------------- pills ---------------- */
.ctpill__sub { font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
.pill-stage.is-on .ctpill__sub { color: var(--color-accent-ink); }
.ctpill--quiet { border-color: var(--color-border-strong); }
.ctpill--quiet .status-dot { --dot: var(--mark-watch); }

/* ---------------- the grid ---------------- */
/* One line per contact, as LOI Deals keeps its rows. The header may wrap; a
   body cell ellipsizes and carries its whole text in a title. */
table.grid.ctgrid td { white-space: nowrap; }
/* The label clears the whole 24px funnel box, which sits 2px in from the edge.
   v2.css reserves 20px for it; this grid reserves 26px. Numeric headers sit
   right, over their right-aligned figures. */
table.grid.ctgrid .th-inner { padding-right: 26px; }
table.grid.ctgrid th.is-num .th-inner { justify-content: flex-end; }
table.grid.ctgrid th.is-num .th-inner span { text-align: right; }
table.grid.ctgrid tbody tr { cursor: pointer; }
table.grid.ctgrid td .cdtrigger {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: left;
}
/* The selection cue is Closed Deals' .cdrowsel, carried onto the grid's cells. */
table.grid.ctgrid tbody tr.ctsel td {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}
table.grid.ctgrid tbody tr.ctsel td:first-child { box-shadow: inset 3px 0 0 var(--color-accent-ink); }

/* ---------------- profile ---------------- */
.ctprof .drawer__body > * + * { margin-top: var(--space-lg); }
.ctprof .drawer__body > :first-child { margin-top: var(--space-lg); }
.ctprof__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.ctsec__head {
  display: flex; align-items: baseline; gap: var(--space-sm); margin: 0 0 var(--space-sm);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking); color: var(--color-text-muted);
}
.ctsec__hint { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; }
.ctstats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md) var(--space-sm);
}
.ctstat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctstat__val {
  font-size: var(--text-metric-sm); font-weight: 700; color: var(--color-text-strong);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ctstat__val--quiet { color: var(--color-text-muted); }
.ctstat__label { font-size: 12px; color: var(--color-text-muted); }

/* ---------------- timeline ---------------- */
.cttl { display: block; width: 100%; height: auto; overflow: visible; }
.cttl__grid { stroke: var(--viz-grid); stroke-width: 1; }
.cttl__axis { fill: var(--color-text-muted); font-size: 11px; font-weight: 600; }
.cttl__year { fill: var(--color-text); font-size: 11px; font-weight: 700; }
.cttl__won { fill: var(--color-success); }
.cttl__lost { stroke: var(--color-danger); stroke-width: 2; stroke-linecap: round; fill: none; }
.cttl__open { fill: var(--color-surface); stroke: var(--color-info); stroke-width: 2; }
.cttl__ex { fill: var(--color-text-muted); }
.cttl__touch { stroke: var(--mark-watch); stroke-width: 2; stroke-dasharray: 3 3; }
.ctkey {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md);
  margin: var(--space-sm) 0 0; padding: 0; list-style: none;
}
.ctkey li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text); }
.ctkey svg { flex: 0 0 auto; }

/* ---------------- bars and lists ---------------- */
.ctbars { display: flex; flex-direction: column; gap: 6px; }
.ctbar {
  display: grid; grid-template-columns: minmax(96px, 128px) minmax(0, 1fr) auto;
  gap: var(--space-sm); align-items: center; font-size: 12px;
}
.ctbar__label { color: var(--color-text); }
.ctbar__track {
  position: relative; height: 10px; border-radius: var(--radius-xs); background: var(--color-surface-2);
}
.ctbar__fill {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); min-width: 2px;
  border-radius: var(--radius-xs); background: var(--brand-ramp-4);
}
/* GL-003 § 2.3b: a ramp fill on the dark canvas takes the ink-derived inset hairline. */
:root[data-theme="dark"] .ctbar__fill {
  outline: 1px solid color-mix(in srgb, var(--brand-ramp-4-ink) 35%, transparent);
  outline-offset: -1px;
}
.ctbar__val { color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctcounts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.ctcounts li {
  padding: 1px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  font-size: 12px; color: var(--color-text); background: var(--color-surface);
}
.ctcounts b { font-variant-numeric: tabular-nums; }
.ctreasons { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ctreasons > li { font-size: 12px; color: var(--color-text); }
.ctreasons summary { cursor: pointer; }
.ctreasons b { font-variant-numeric: tabular-nums; margin-right: 6px; color: var(--color-text-strong); }
.ctreasons ul { margin: 4px 0 0; padding-left: var(--space-lg); color: var(--color-text-muted); }
.ctreasons li li { overflow-wrap: anywhere; }
.ctfund {
  margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
}
.ctfund li { display: flex; gap: var(--space-sm); color: var(--color-text); font-variant-numeric: tabular-nums; }
.ctfund__days { margin-left: auto; font-weight: 700; color: var(--color-text-strong); }

/* ---------------- HubSpot block ---------------- */
.cths { width: 100%; border-collapse: collapse; font-size: 12px; }
.cths th, .cths td {
  padding: 5px 0; border-bottom: 1px solid var(--color-border); text-align: left; font-weight: 400;
}
.cths th { color: var(--color-text-muted); font-weight: 600; }
.cths td.num {
  text-align: right; font-weight: 700; color: var(--color-text-strong); font-variant-numeric: tabular-nums;
}
.cths td.ctasof {
  text-align: right; color: var(--color-text-muted); padding-left: var(--space-md); white-space: nowrap;
}
.ctbox {
  padding: var(--space-md); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.5; color: var(--color-text);
}