/* 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); }
/* Contact rows are their own cards so the warm shadow is not clipped by
   the list. Company rows that are not people stay inside the list frame. */
.acct-list:has(.person-card) {
  overflow: visible;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.people-row.person-card,
.arow.person-card,
.detail-section.person-card {
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  box-shadow: var(--ds-contact-shadow);
}

/* People section labels are wider than a phone. Scroll the row so Calendar
   stays reachable; .seg's own overflow:hidden would clip it. */
.crm-sections {
  display: flex;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: thin;
}
body[data-page="crm"] .page-head { min-width: 0; max-width: 100%; }
.crm-sections button { flex: 0 0 auto; white-space: nowrap; }

/* ── 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; }
.people-find { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; }
.people-find-label {
  font-family: var(--ds-font-label); font-weight: 600;
  font-size: calc(0.75rem * 1.2); letter-spacing: 0.12em;
  text-transform: lowercase; color: var(--ds-ink-secondary);
}
.people-find .search-input { width: 100%; max-width: none; }
.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-label); font-weight: 600; font-size: calc(var(--ds-label-3) * 1.2);
  letter-spacing: 0.12em; text-transform: lowercase; 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); }

/* Warm surfaces for the classes this page owns. Shared buttons, fields, and
   modals are restyled in design-system.css under the same gate. */
body.is-customer-ux[data-page="crm"] .acct-list,
body.is-customer-ux[data-page="crm"] .deal-card,
body.is-customer-ux[data-page="crm"] .cal-all-day {
  background: var(--ds-book-card);
  border-color: var(--ds-book-line);
}
body.is-customer-ux[data-page="crm"] .people-row.person-card,
body.is-customer-ux[data-page="crm"] .arow.person-card,
body.is-customer-ux[data-page="crm"] .detail-section.person-card {
  background: var(--ds-book-card);
  border-color: var(--ds-book-line);
  box-shadow: var(--ds-contact-shadow);
}
body.is-customer-ux[data-page="crm"] .ux-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.is-customer-ux[data-page="crm"] .ux-stage {
  border: 1px solid var(--ds-book-line-strong);
  background: var(--ds-book-card);
  color: var(--ds-book-ink);
  border-radius: var(--ds-pill);
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease;
}
/* Desktop keeps the chips in the row. display:contents lets .st-end still
   push the ladder pill to the end. The phone rule below makes this a row. */
body[data-page="crm"] .contact-chips { display: contents; }

/* On a phone the source chip used to sit in the same row as the name and
   squeeze the headline to one word a line. Stack the card: avatar and name
   on the first row, the headline full width under them, chips on their own
   row. Stage filters scroll instead of wrapping into tall pills.
   .qbody is display:contents so the name and headline join this grid.
   Desktop stays the flex row above this query. */
@media (max-width: 600px) {
  body[data-page="crm"] .screen { min-width: 0; max-width: 100%; }
  body[data-page="crm"] .people-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "avatar name"
      "headline headline"
      "chips chips";
    align-items: center;
    column-gap: 11px;
    row-gap: 6px;
    min-width: 0;
    width: 100%;
  }
  body[data-page="crm"] .people-row .qbody {
    display: contents;
  }
  body[data-page="crm"] .people-row .qav {
    grid-area: avatar;
    align-self: center;
  }
  body[data-page="crm"] .people-row .qhead {
    grid-area: name;
    min-width: 0;
    flex-wrap: nowrap;
  }
  body[data-page="crm"] .people-row .qnm,
  body[data-page="crm"] .people-row .qnm a {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  body[data-page="crm"] .people-row .qco {
    grid-area: headline;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    line-height: 1.35;
    min-width: 0;
    max-width: 100%;
  }
  body[data-page="crm"] .people-row .contact-chips {
    grid-area: chips;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  body[data-page="crm"] .people-row .contact-chips .st-end { margin-left: 0; }
  body[data-page="crm"] .people-row .contact-chips .st,
  body[data-page="crm"] .people-row .contact-chips .qtag {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  body.is-customer-ux[data-page="crm"] .ux-stages {
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    gap: 8px;
    scrollbar-width: thin;
  }
  body.is-customer-ux[data-page="crm"] .ux-stage {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
  }
}
body.is-customer-ux[data-page="crm"] .ux-stage.on {
  background: var(--ds-book-ribbon);
  border-color: var(--ds-book-ribbon);
  color: var(--ds-book-on-leather);
}
body.is-customer-ux[data-page="crm"] .ux-intel-row,
body.is-customer-ux[data-page="crm"] .ux-note {
  padding: 12px 0;
  border-top: 1px solid var(--ds-book-line);
}
body.is-customer-ux[data-page="crm"] .ux-intel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
body.is-customer-ux[data-page="crm"] .ux-intel-fact {
  margin-top: 8px;
}
#buying-roles .lg-fact.is-focus {
  box-shadow: inset 3px 0 0 var(--ds-book-ribbon);
  padding-left: var(--ds-space-3);
}