/* Blackbook Engine — CRM (crm.html) page-specific styles.
 * Residuals migrated from the page's inline <style>, converted to --ds-* tokens.
 * design-system.css provides the shell, buttons, cards, and shared primitives.
 *
 * crm.html is a bare mount point, so every class below is emitted by crm-app.js:
 * this file and the renderer move together, and reading the HTML tells you nothing
 * about the page. The screen it draws was designed for this slice
 * (docs/design/blackbook-apple-extension-c.html — local-only, never committed). */

/* ── The artifact's names for compositions the app never had ─────────────
   Declared here because Phase 0's rule is "a class one slice needs lives in that
   slice's page CSS". Slice A and meeting-intelligence declare the same two; that
   duplicate is reported as the brief §7.3 case rather than resolved here. */
.acct-list { border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  overflow: hidden; background: var(--ds-bg); }

/* ── Pipeline ─────────────────────────────────────────── */
.pipeline-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ds-space-3); }
/* The board keeps the app's own breakpoint: at 1000 the five columns are already
   narrower than a deal card can be read in. */
@media (max-width: 1000px) { .pipeline-stages { grid-template-columns: 1fr; } }
/* The column stops being a card. .stage-col was a bordered, filled panel with a
   tinted .deal-card inside it — a card inside a card. On Frost the card is the
   deal; the column is just a column. */
.stage-col { min-width: 0; }
.deal-card { border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  padding: var(--ds-space-3); background: var(--ds-bg); }
.deal-name { font-weight: 600; font-size: var(--ds-body-sm); color: var(--ds-ink); }
.deal-company { font-size: var(--ds-body-xs); color: var(--ds-ink-muted); margin-top: 2px; }
.deal-amount { font-weight: 600; font-size: var(--ds-body-md); margin-top: var(--ds-space-2);
  font-variant-numeric: tabular-nums; }
.deal-actions { display: flex; align-items: center; gap: var(--ds-space-2); margin-top: var(--ds-space-3); }
.deal-actions .select { flex: 1; min-width: 0; }

/* ── Contacts: the search row ─────────────────────────── */
/* The field is the design system's `.search-input input`; the page only has to let
   it take the row's leftover width. */
.search-wrap { display: flex; gap: 10px; align-items: center; }
.search-wrap .search-input { flex: 1; min-width: 0; }

/* ── Detail panels (contacts, companies) ──────────────── */
.detail-header { display: flex; align-items: center; gap: var(--ds-space-3); }
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-3);
  font-size: var(--ds-body-sm); margin-top: var(--ds-space-3); }
.detail-meta dt { font-family: var(--ds-font-mono); font-size: var(--ds-label-3);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ds-ink-muted); }
/* margin:0 kills the UA's 40px dd indent. Nothing in design-system.css resets it, so
   every value in this list sat 40px off its own label — in crm.css and in ads.css
   alike. The port fixes it here; ads.css is not this slice's file. */
.detail-meta dd { color: var(--ds-ink); margin: 2px 0 0; }
.note-area { width: 100%; min-height: 76px; }
/* A section's label is followed by its body at the shared gap. */
.detail-section .detail-label + *, .chart-card .detail-label + * { margin-top: var(--ds-space-3); }
.detail-section .note-composer { margin-top: var(--ds-space-3); }

/* ── Relationship memory ──────────────────────────────── */
/* A fact is a sentence with a status, not a record you open — so it is a page-local
   list rather than a shared row. */
.ledger > * + * { margin-top: var(--ds-space-3); }
.ledger-facts { list-style: none; padding: 0; margin: var(--ds-space-3) 0 0;
  display: flex; flex-direction: column; gap: var(--ds-space-2); font-size: var(--ds-body-sm); }
.ledger-fact-meta { display: flex; align-items: center; gap: var(--ds-space-2); flex-wrap: wrap; margin-top: var(--ds-space-1); }
.ledger-fact-actions { display: flex; gap: var(--ds-space-1); margin-top: var(--ds-space-1); }
.ledger-form { display: grid; grid-template-columns: auto 1fr auto; gap: var(--ds-space-2); }
/* The register is a control inside a row of chips, not a full-width field. */
.ledger-register { width: auto; }

/* ── Activity timeline ────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.timeline-item { display: flex; gap: var(--ds-space-3); }
.timeline-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.timeline-dot.email { background: var(--ds-accent); }
.timeline-dot.call { background: var(--ds-text-positive); }
.timeline-dot.note { background: var(--ds-ink-muted); }
.timeline-dot.reply { background: var(--ds-action-primary); }
.timeline-body { min-width: 0; font-size: var(--ds-body-sm); color: var(--ds-ink-secondary); }
.timeline-date { font-family: var(--ds-font-mono); font-size: var(--ds-label-3);
  color: var(--ds-ink-muted); }

/* ── Calendar ─────────────────────────────────────────── */
/* Week cells and the day view's hour rows were stated inline on every render. */
.cal-cell { min-width: 0; }
.cal-cell + .cal-cell { border-left: 1px solid var(--ds-border); }
.cal-cell.is-today { background: var(--ds-bg-accent-tint); }
.cal-cell-head { padding: 6px 8px; font-size: var(--ds-label-3); font-weight: 600;
  color: var(--ds-ink-secondary); border-bottom: 1px solid var(--ds-border); }
.cal-cell-body { padding: 6px 8px; display: flex; flex-direction: column; gap: var(--ds-space-2); }
.cal-all-day { display: flex; flex-direction: column; gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-bg); }
.cal-hour-label { display: inline-block; min-width: 3.5rem; }
/* A month cell is about 100px wide. A title longer than that has to be clipped
   rather than push the card past its own padding. */
.calendar-day .event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-hour-list { display: flex; flex-direction: column; gap: var(--ds-space-2);
  padding-bottom: var(--ds-space-2); }
/* An event's source is its left rule, and the legend wears the same three. The
   colour cannot be a token on a data attribute, so the source is a class. */
.event-card.src-graph { border-left-color: var(--ds-border-informative); }
.event-card.src-note { border-left-color: var(--ds-text-positive); }
.legend-dot.src-manual { background: var(--ds-action-primary); }
.legend-dot.src-graph { background: var(--ds-border-informative); }
.legend-dot.src-note { background: var(--ds-text-positive); }

/* ── Rows the renderer used to state inline ───────────── */
.task-due.is-overdue { color: var(--ds-text-negative); font-weight: 600; }
.task-done { text-decoration: line-through; color: var(--ds-ink-muted); }
.table-empty { text-align: center; color: var(--ds-ink-muted); padding: var(--ds-space-6); }
/* A modal body is a bare .modal, so its fields stack on the page's own gap rather
   than each one stating `margin-top`. */
.form-stack { display: flex; flex-direction: column; gap: var(--ds-space-3); }
/* Two fields side by side in a modal. .form-grid caps itself at 44rem and centres,
   which a modal body has no room for. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-3); }
.check-row { display: flex; align-items: center; gap: var(--ds-space-2);
  font-size: var(--ds-body-sm); color: var(--ds-ink-secondary); }

/* ── Search ───────────────────────────────────────────── */
/* Three of the four groups are anchors; the underline and the link colour are the
   browser's, not the row's. */
a.search-result-row { text-decoration: none; color: inherit; }

/* ── Analytics ────────────────────────────────────────── */
/* The inline grid at crm-app.js:2020, classed and unchanged: auto-fit at a 280px
   floor, so the count of columns is the window's. */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ds-space-3); margin-top: var(--ds-space-3); }