/* =============================================================================
   crm-workspace.css — the CRM workspace
   Loaded only by crm-workspace.html. Everything here is page-scoped; shared components
   (card, table, badge, switch, fchip, subtab) come from css/app.css untouched.

   Two ideas drive the visual language on this page:

   1. A rep must be able to tell, without reading a word, what a human asserted
      from what the system inferred. That is `.crm-card--soft` versus
      `.crm-card--derived` — different header rule, different layer tag.
   2. A derived claim never appears without the evidence under it. `.crm-ev` is
      the carrier for that, and it is deliberately quiet rather than hidden.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Page header — role switch
   -------------------------------------------------------------------------- */
.crm-role { display: flex; align-items: center; gap: 8px; }
.crm-role__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted); white-space: nowrap;
}

/* A row of buttons in a card header. Replaces a repeated inline gap. */
.crm-hd-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* -----------------------------------------------------------------------------
   Signal feed
   -------------------------------------------------------------------------- */
.crm-feedbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 7px;
}
.crm-feedbar__glance { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--color-text-muted); }
.crm-feedbar__note { margin-left: auto; font-size: 12px; color: var(--color-text-subtle); }

.crm-feed { display: flex; flex-direction: column; gap: 10px; }

.sig {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 210px; gap: 14px;
  padding: 14px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-border-strong);
  border-radius: 7px; transition: border-color 120ms, box-shadow 120ms;
}
.sig:hover { box-shadow: var(--shadow-sm); }
.sig--urgent { border-left-color: var(--color-danger); }
.sig--done { border-left-color: var(--color-success); background: var(--color-surface-alt); }

.sig__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border-radius: 7px;
  background: var(--color-primary-50); color: var(--color-primary-700);
}
.sig__ico svg { width: 17px; height: 17px; }
.sig--urgent .sig__ico { background: var(--color-danger-50); color: #B91C1C; }
.sig--done .sig__ico { background: var(--color-success-50); color: #047857; }

.sig__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.sig__kind { font-size: 11px; color: var(--color-text-subtle); letter-spacing: 0.02em; }
.sig__due { font-size: 11px; color: var(--color-text-muted); font-weight: 600; }
.sig__score {
  font-size: 11px; font-weight: 700; color: var(--color-primary-700);
  background: var(--color-primary-50); border-radius: 5px; padding: 1px 6px;
}
.sig__title { margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.sig__acct {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-primary-700); font-weight: 700;
}
.sig__acct:hover { color: var(--color-primary); }
.sig__why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.sig__evidence {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 6px 0 0; font-size: 11px; color: var(--color-text-subtle);
}
.sig__evidence svg { width: 13px; height: 13px; flex: none; }

.sig__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sig__side .btn { width: 100%; justify-content: center; }

/* Small money / confidence qualifiers that ride inside a sentence. */
.crm-band { color: var(--color-success); font-weight: 600; }
.crm-tentative {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  color: #B45309; background: var(--color-warn-50); border-radius: 5px; padding: 1px 5px;
}
.crm-above {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--color-text-subtle);
}
.crm-above svg { width: 12px; height: 12px; }
.crm-masked { color: var(--color-text-subtle); }

/* -----------------------------------------------------------------------------
   Collapsible reference blocks (archive, weights)
   -------------------------------------------------------------------------- */
.crm-archive {
  margin-top: 14px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 7px;
}
.crm-archive > summary {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; list-style: none;
}
.crm-archive > summary::-webkit-details-marker { display: none; }
.crm-archive > summary svg { width: 15px; height: 15px; color: var(--color-text-subtle); }
.crm-archive[open] > summary { border-bottom: 1px solid var(--color-border); }
.crm-archive__body { padding: 14px; }
.crm-archive__body > .table-wrap { margin-top: 10px; }

.crm-inline-details > summary {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; list-style: none;
  color: var(--color-primary-700);
}
.crm-inline-details > summary::-webkit-details-marker { display: none; }
.crm-inline-details > .table-wrap { margin-top: 10px; }

/* -----------------------------------------------------------------------------
   Filters, pickers, links
   -------------------------------------------------------------------------- */
.crm-filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.crm-filters .fg-label { margin-bottom: 0; }
.crm-filters__sep { width: 1px; height: 20px; background: var(--color-border-strong); }

.crm-acctbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.crm-acctbar .fg-label { margin-bottom: 0; }
.crm-acctbar .spacer { flex: 1; }
/* `.subtabs` carries its own bottom margin for when it sits on a band of its own.
   On these bars it is one control among several, so the bar owns the spacing. */
.crm-acctbar .subtabs,
.crm-filters .subtabs { margin-bottom: 0; }

.crm-link {
  background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer;
  color: var(--color-primary-700); font-weight: 500;
}
.crm-link:hover { color: var(--color-primary); font-weight: 600; }

/* Add-row control in a table header — the fixed place an add action lives when
   the table is a section inside a card rather than a page with its own toolbar. */
.add-row-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: 6px; vertical-align: -6px;
  border: 0; border-radius: 5px; cursor: pointer;
  background: var(--color-primary); color: #fff;
}
.add-row-btn:hover { background: var(--color-primary-600); }
.add-row-btn svg { width: 15px; height: 15px; stroke-width: 2.6; }

/* -----------------------------------------------------------------------------
   Confidence tiers
   -------------------------------------------------------------------------- */
.crm-tier {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 5px; border: 1px solid transparent;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.crm-tier--established { background: var(--color-success-50); color: #047857; border-color: #A7F3D0; }
.crm-tier--emerging    { background: var(--color-warn-50);    color: #B45309; border-color: #FDE68A; }
.crm-tier--insufficient{ background: #F1F5F9;                 color: #475569; border-color: #E2E8F0; }

/* -----------------------------------------------------------------------------
   The two layers
   -------------------------------------------------------------------------- */
.crm-card--soft > .card-header { border-bottom-width: 2px; border-bottom-color: var(--color-primary); }
.crm-card--derived > .card-header { border-bottom-width: 2px; border-bottom-style: dashed; border-bottom-color: var(--color-secondary); }
.crm-card--exceptions > .card-header { border-bottom-width: 2px; border-bottom-color: var(--color-danger); }

.crm-layer {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 9px; border-radius: 7px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.crm-layer svg { width: 13px; height: 13px; }
.crm-layer--soft    { background: var(--color-primary-50); color: var(--color-primary-700); }
.crm-layer--derived { background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px dashed var(--color-border-strong); }
.crm-layer--gated   { background: var(--color-warn-50); color: #B45309; }

/* -----------------------------------------------------------------------------
   Subsections inside a card
   -------------------------------------------------------------------------- */
.crm-sub-h {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px; font-size: 14px; font-weight: 600;
}
.card-body > .crm-sub-h:not(:first-child) { margin-top: 4px; }
.crm-note { margin: 0 0 10px; font-size: 12px; line-height: 1.55; color: var(--color-text-muted); }
.crm-freeform {
  margin: 0 0 10px; padding: 11px 13px; font-size: 13px; line-height: 1.6;
  background: var(--color-surface-alt); border-radius: 7px; color: var(--color-text);
}
.card-body > .table-wrap + .divider,
.card-body > .crm-freeform + .btn { margin-top: 0; }
.card-body > .btn + .divider { margin-top: 14px; }

/* -----------------------------------------------------------------------------
   Important dates
   -------------------------------------------------------------------------- */
.crm-dates { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.crm-dates li {
  position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; font-size: 13px;
}
.crm-dates li::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 50%; height: 1px; background: var(--color-border-strong);
}
.crm-dates li:last-child::after { content: none; }
.crm-dates__k { flex: none; min-width: 130px; font-size: 11px; color: var(--color-text-subtle); }
.crm-dates__v { flex: 0 1 auto; font-weight: 500; }
.crm-dates__d { flex: none; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */
.crm-prefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; }
.crm-prefs__col { display: flex; flex-direction: column; gap: 6px; }
.crm-prefs__h {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.crm-prefs__h svg { width: 14px; height: 14px; }
.crm-prefs__h--like { color: var(--color-success); }
.crm-prefs__h--dislike { color: var(--color-danger); }
.crm-hardex {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: none;
  color: #B91C1C; background: var(--color-danger-50); border-radius: 5px; padding: 1px 5px;
}

.crm-pref {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 7px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  font-size: 13px;
}
.crm-pref--dislike { border-color: #E7C4BD; }
.crm-pref__type { flex: none; min-width: 108px; font-size: 11px; color: var(--color-text-subtle); }
.crm-pref__val { flex: none; min-width: 0; font-weight: 600; }
.crm-pref__src { flex: none; font-size: 11px; color: var(--color-text-subtle); }
.crm-pref__src--derived { color: var(--color-text-muted); font-style: italic; }

/* Strength 1..5 — five marks, the unset ones hollow. */
.crm-str { display: inline-flex; gap: 3px; flex: none; }
.crm-str i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); display: inline-block; }
.crm-str i.off { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.crm-pref--dislike .crm-str i { background: var(--color-danger); }

.crm-unstructured {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 12px; padding: 10px 12px; border-radius: 7px;
  background: var(--color-warn-50); border: 1px solid #FDE68A;
  font-size: 12px; line-height: 1.55; color: #92400E;
}
.crm-unstructured svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* -----------------------------------------------------------------------------
   Derived layer
   -------------------------------------------------------------------------- */
.crm-tierbar {
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 14px; padding: 11px 13px; border-radius: 7px;
  font-size: 13px; line-height: 1.55; border: 1px solid transparent;
}
.crm-tierbar svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.crm-tierbar--established { background: var(--color-success-50); border-color: #A7F3D0; color: #065F46; }
.crm-tierbar--emerging    { background: var(--color-warn-50);    border-color: #FDE68A; color: #92400E; }
.crm-tierbar--insufficient{ background: var(--color-surface-alt); border-color: var(--color-border-strong); color: var(--color-text-muted); }

.crm-suppressed { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.crm-suppressed__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 7px;
  background: var(--color-surface-alt); border: 1px dashed var(--color-border-strong);
  font-size: 12px; color: var(--color-text-subtle);
}
.crm-suppressed__item svg { width: 13px; height: 13px; }

.crm-dists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-bottom: 10px; }
.crm-dist__k {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-family: 'Hanken Grotesk', sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500;
  color: var(--color-text-muted);
}
.crm-dist__rows { display: flex; flex-direction: column; gap: 5px; }
.crm-dist__row { display: grid; grid-template-columns: 116px 1fr 42px; align-items: center; gap: 10px; }
.crm-dist__lbl { font-size: 13px; }
.crm-dist__bar { height: 7px; border-radius: 5px; background: var(--color-surface-alt); overflow: hidden; }
.crm-dist__bar > span { display: block; height: 100%; background: var(--color-primary); border-radius: 5px; }
.crm-dist__pct { font-size: 12px; color: var(--color-text-muted); text-align: right; }

.crm-months { display: flex; align-items: flex-end; gap: 6px; height: 86px; margin-bottom: 10px; }
.crm-month { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; flex: 1; height: 100%; }
.crm-month__bar { display: block; width: 100%; max-width: 34px; background: var(--color-primary-50); border-radius: 5px 5px 0 0; }
.crm-month--peak .crm-month__bar { background: var(--color-primary); }
.crm-month__l { font-size: 11px; color: var(--color-text-subtle); }

.crm-claim { margin: 0 0 6px; font-size: 14px; }
.crm-ev {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0; font-size: 11px; color: var(--color-text-subtle);
}
.crm-ev svg { width: 13px; height: 13px; flex: none; }

.crm-derived-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.crm-stat { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; }
.crm-stat__v { font-size: 20px; font-weight: 700; color: var(--color-value-tnum, var(--color-primary-700)); }
.crm-stat__l { font-size: 12px; color: var(--color-text-muted); }
.crm-derived-cols .crm-ev { margin-top: 6px; }

/* An edited interaction says so, and says who. */
.crm-ver {
  margin-left: 6px; padding: 1px 5px; border-radius: 5px;
  background: var(--color-warn-50); color: #B45309;
  font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
}
.crm-foot-ico { width: 13px; height: 13px; vertical-align: -2px; }

.crm-row--masked td { background: var(--color-surface-alt); }
.crm-row--total td { background: var(--color-table-head); font-weight: 700; }

/* -----------------------------------------------------------------------------
   Match engine
   -------------------------------------------------------------------------- */
.crm-scope {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 12px; padding: 10px 13px; border-radius: 7px;
  background: var(--color-info-50); border: 1px solid #BFDBFE;
  font-size: 13px; color: #1E40AF;
}
.crm-scope svg { width: 16px; height: 16px; flex: none; }
.crm-dirs { margin-bottom: 12px; }

.crm-subject { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.crm-subject > .thumb, .crm-subject > .avatar { width: 54px; height: 54px; flex: none; }
.crm-subject__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 220px; }
.crm-subject__title { font-size: 15px; font-weight: 700; }
.crm-subject__sub { font-size: 12px; color: var(--color-text-muted); }
.crm-subject__attrs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.crm-attr {
  padding: 2px 7px; border-radius: 5px; font-size: 11px;
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.crm-attr--like { background: var(--color-success-50); border-color: #A7F3D0; color: #047857; }
.crm-attr--dislike { background: var(--color-danger-50); border-color: #FECACA; color: #B91C1C; }

.crm-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mres {
  display: grid; grid-template-columns: 32px 62px minmax(0, 1fr) 190px; gap: 14px; align-items: start;
  padding: 12px 14px; border-radius: 7px;
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.mres--excluded { background: var(--color-surface-alt); border-style: dashed; }
.mres__rank { font-size: 15px; font-weight: 700; color: var(--color-text-subtle); text-align: center; }
.mres__rank svg { width: 16px; height: 16px; color: var(--color-danger); }
.mres__score { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mres__num { font-size: 19px; font-weight: 700; color: var(--color-primary-700); }
.mres__num--out { color: var(--color-text-subtle); }
.mres__meter { display: block; width: 100%; height: 5px; border-radius: 5px; background: var(--color-surface-alt); overflow: hidden; }
.mres__meter > span { display: block; height: 100%; background: var(--color-primary); border-radius: 5px; }
.mres__title { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.mres__why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.mres__hist {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 6px 0 0; font-size: 11px; color: var(--color-text-subtle);
}
.mres__hist svg { width: 13px; height: 13px; flex: none; }
.mres__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mres__owner { font-size: 13px; font-weight: 600; }
.mres__quiet, .mres__avail { font-size: 11px; color: var(--color-text-subtle); }
.mres__avail { display: inline-flex; align-items: center; gap: 5px; }
.mres__side .btn { margin-top: 4px; }

/* -----------------------------------------------------------------------------
   Goals
   -------------------------------------------------------------------------- */
.crm-periodbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 7px;
}
.crm-periodbar__label { font-size: 14px; font-weight: 600; }
.crm-periodbar__day { font-size: 12px; color: var(--color-text-muted); }
.crm-periodbar .spacer { flex: 1; }
.crm-modechip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 7px;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-strong);
  font-size: 12px; color: var(--color-text-muted);
}
.crm-modechip svg { width: 13px; height: 13px; }
.crm-attain-total { font-size: 15px; font-weight: 700; color: var(--color-primary-700); }
/* `.stock-bar` sets a height but no display, so it only draws as a block-level
   box. It is a <span> in these cells because it sits inside a table cell. */
span.stock-bar { display: block; }
.crm-target { width: 62px; text-align: right; }

/* -----------------------------------------------------------------------------
   Switch rows (subscriptions, mandates, delivery, metric set)
   -------------------------------------------------------------------------- */
.crm-subs { display: flex; flex-direction: column; }
.crm-subs--inline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.crm-sub-row {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 0; cursor: pointer;
}
.crm-sub-row::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 50%; height: 1px; background: var(--color-border-strong);
}
.crm-sub-row:last-child::after { content: none; }
.crm-sub-row > .switch { flex: none; margin-top: 1px; }
.crm-sub-row.is-locked { cursor: default; opacity: 0.9; }
.crm-sub-row.is-locked > .switch { opacity: 0.55; pointer-events: none; }
.crm-sub-row__text { display: flex; flex-direction: column; gap: 3px; flex: 0 1 auto; min-width: 0; }
.crm-sub-row__name { font-size: 13px; font-weight: 400; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.crm-sub-row__name .mono { font-size: 11px; color: var(--color-text-subtle); }
.crm-sub-row__desc { font-size: 11px; line-height: 1.5; color: var(--color-text-muted); }
.crm-locked {
  display: inline-flex; align-items: center; gap: 5px; flex: none; align-self: center;
  padding: 3px 8px; border-radius: 7px;
  background: var(--color-danger-50); color: #B91C1C;
  font-size: 11px; font-weight: 600;
}
.crm-locked svg { width: 12px; height: 12px; }
.card-header > .crm-locked { align-self: flex-start; }

/* -----------------------------------------------------------------------------
   Manager digest
   -------------------------------------------------------------------------- */
.crm-digestbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary); border-radius: 7px;
}
.crm-digestbar__main { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 260px; font-size: 13px; }
.crm-digestbar__main svg { width: 17px; height: 17px; color: var(--color-primary); flex: none; }

.crm-exc { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; }
.crm-exc li {
  position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0;
}
.crm-exc li::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 50%; height: 1px; background: var(--color-border-strong);
}
.crm-exc li:last-child::after { content: none; }
.crm-exc__ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--color-warn-50); color: #B45309;
}
.crm-exc__ico svg { width: 14px; height: 14px; }
.crm-exc__ico--bad { background: var(--color-danger-50); color: #B91C1C; }
.crm-exc__text { flex: 0 1 auto; min-width: 0; font-size: 13px; line-height: 1.5; }
.crm-exc .btn { flex: none; }

.crm-group { margin-bottom: 10px; }
.crm-group__h {
  display: block; margin-bottom: 2px;
  font-size: 12px; font-family: 'Hanken Grotesk', sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500;
  color: var(--color-text-muted);
}

/* No exceptions is said plainly, not padded out. */
.crm-clear {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 10px 12px; border-radius: 7px;
  background: var(--color-success-50); border: 1px solid #A7F3D0;
  font-size: 13px; color: #065F46;
}
.crm-clear svg { width: 16px; height: 16px; flex: none; }

.crm-unowned { display: inline-flex; align-items: center; gap: 5px; color: var(--color-danger); font-weight: 600; }
.crm-unowned svg { width: 14px; height: 14px; }

/* -----------------------------------------------------------------------------
   Module settings
   -------------------------------------------------------------------------- */
.crm-setting {
  position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 13px 0;
}
.crm-setting::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 50%; height: 1px; background: var(--color-border-strong);
}
.crm-setting:last-child::after { content: none; }
.crm-setting__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; }
.crm-setting__name { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.crm-setting__desc { font-size: 11px; line-height: 1.55; color: var(--color-text-muted); }
.crm-setting__ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; }
.crm-setting__unit { font-size: 12px; color: var(--color-text-muted); }
.crm-num { width: 68px; text-align: right; }

.crm-modes { display: flex; flex-direction: column; gap: 8px; }
.crm-modes .assign-opt { align-items: flex-start; gap: 10px; }
.crm-modes__text { font-size: 13px; line-height: 1.55; }

/* Selects sized to their content, not to the row. */
.crm-scope-sel { width: 128px; }
.crm-day-sel, .crm-time { width: 148px; }

.crm-picklist {
  display: flex; flex-direction: column; margin-top: 10px;
  border: 1px solid var(--color-border); border-radius: 7px; overflow: hidden;
}
.crm-pickrow {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; background: var(--color-surface); border: 0;
  border-bottom: 1px solid var(--color-border); font: inherit;
}
.crm-pickrow:last-child { border-bottom: 0; }
.crm-pickrow:hover { background: var(--color-primary-50); }

.crm-prefill {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 14px; padding: 10px 12px; border-radius: 7px;
  background: var(--color-primary-50); border: 1px solid #D6E2FA;
  font-size: 12px; color: var(--color-primary-700);
}
.crm-prefill svg { width: 15px; height: 15px; flex: none; }

/* =============================================================================
   Table column widths
   Percentages plus the inherited `table-layout: fixed`, so every column keeps
   its share of the table as the viewport changes and none of them resize with
   the length of the data inside them.
   ========================================================================== */
.crm-tbl-archive .col-kind   { width: 26%; }
.crm-tbl-archive .col-acct   { width: 30%; }
.crm-tbl-archive .col-when   { width: 20%; }
.crm-tbl-archive .col-state  { width: 24%; }

.crm-tbl-accounts .col-acct   { width: 21%; }
.crm-tbl-accounts .col-type   { width: 10%; }
.crm-tbl-accounts .col-owner  { width: 9%; }
.crm-tbl-accounts .col-last   { width: 15%; }
.crm-tbl-accounts .col-order  { width: 11%; }
.crm-tbl-accounts .col-value  { width: 12%; }
.crm-tbl-accounts .col-conf   { width: 11%; }
.crm-tbl-accounts .col-status { width: 11%; }

.crm-tbl-assign .col-rep    { width: 22%; }
.crm-tbl-assign .col-by     { width: 26%; }
.crm-tbl-assign .col-reason { width: 26%; }
.crm-tbl-assign .col-period { width: 26%; }

.crm-tbl-contacts .col-name    { width: 17%; }
.crm-tbl-contacts .col-role    { width: 15%; }
.crm-tbl-contacts .col-reach   { width: 24%; }
.crm-tbl-contacts .col-dob     { width: 12%; }
.crm-tbl-contacts .col-note    { width: 22%; }
.crm-tbl-contacts .col-primary { width: 10%; }

.crm-tbl-inter .col-when    { width: 12%; }
.crm-tbl-inter .col-type    { width: 13%; }
.crm-tbl-inter .col-who     { width: 11%; }
.crm-tbl-inter .col-detail  { width: 34%; }
.crm-tbl-inter .col-link    { width: 9%; }
.crm-tbl-inter .col-follow  { width: 10%; }
.crm-tbl-inter .col-outcome { width: 11%; }

.crm-tbl-price .col-date { width: 11%; }
.crm-tbl-price .col-mat  { width: 31%; }
.crm-tbl-price .col-qty  { width: 10%; }
.crm-tbl-price .col-list { width: 9%; }
.crm-tbl-price .col-paid { width: 9%; }
.crm-tbl-price .col-doc  { width: 11%; }
.crm-tbl-price .col-disc { width: 19%; }

.crm-tbl-raworders .col-date { width: 15%; }
.crm-tbl-raworders .col-mat  { width: 42%; }
.crm-tbl-raworders .col-qty  { width: 12%; }
.crm-tbl-raworders .col-doc  { width: 15%; }
.crm-tbl-raworders .col-val  { width: 16%; }

.crm-tbl-weights .col-input  { width: 34%; }
.crm-tbl-weights .col-notes  { width: 48%; }
.crm-tbl-weights .col-weight { width: 18%; }

.crm-tbl-goals .col-metric { width: 30%; }
.crm-tbl-goals .col-target { width: 12%; }
.crm-tbl-goals .col-actual { width: 12%; }
.crm-tbl-goals .col-bar    { width: 30%; }
.crm-tbl-goals .col-pct    { width: 16%; }

.crm-tbl-hist .col-period { width: 20%; }
.crm-tbl-hist .col-visits,
.crm-tbl-hist .col-calls,
.crm-tbl-hist .col-fu,
.crm-tbl-hist .col-new,
.crm-tbl-hist .col-walk,
.crm-tbl-hist .col-samp   { width: 11%; }
.crm-tbl-hist .col-res    { width: 14%; }

.crm-tbl-attain .col-rep { width: 17%; }
.crm-tbl-attain .col-visits,
.crm-tbl-attain .col-calls,
.crm-tbl-attain .col-fu,
.crm-tbl-attain .col-new,
.crm-tbl-attain .col-walk,
.crm-tbl-attain .col-samp { width: 11%; }
.crm-tbl-attain .col-att { width: 17%; }

.crm-tbl-targets .col-rep { width: 17%; }
.crm-tbl-targets .col-visits,
.crm-tbl-targets .col-calls,
.crm-tbl-targets .col-fu,
.crm-tbl-targets .col-new,
.crm-tbl-targets .col-walk,
.crm-tbl-targets .col-samp { width: 11%; }
.crm-tbl-targets .col-att { width: 17%; }

.crm-tbl-cover .col-rep     { width: 18%; }
.crm-tbl-cover .col-accts   { width: 12%; }
.crm-tbl-cover .col-touched { width: 18%; }
.crm-tbl-cover .col-never   { width: 22%; }
.crm-tbl-cover .col-bar     { width: 18%; }
.crm-tbl-cover .col-pct     { width: 12%; }

.crm-tbl-book .col-check  { width: 4%; }
.crm-tbl-book .col-acct   { width: 22%; }
.crm-tbl-book .col-type   { width: 11%; }
.crm-tbl-book .col-owner  { width: 12%; }
.crm-tbl-book .col-since  { width: 12%; }
.crm-tbl-book .col-last   { width: 12%; }
.crm-tbl-book .col-value  { width: 13%; }
.crm-tbl-book .col-status { width: 14%; }

.crm-tbl-mandates .col-sig   { width: 24%; }
.crm-tbl-mandates .col-mand  { width: 11%; }
.crm-tbl-mandates .col-scope { width: 17%; }
.crm-tbl-mandates .col-subs  { width: 15%; }
.crm-tbl-mandates .col-dism  { width: 18%; }
.crm-tbl-mandates .col-state { width: 15%; }

.crm-tbl-mmatch .col-acct  { width: 18%; }
.crm-tbl-mmatch .col-why   { width: 25%; }
.crm-tbl-mmatch .col-comp  { width: 14%; }
.crm-tbl-mmatch .col-list  { width: 8%; }
.crm-tbl-mmatch .col-paid  { width: 8%; }
.crm-tbl-mmatch .col-disc  { width: 9%; }
.crm-tbl-mmatch .col-owner { width: 10%; }
.crm-tbl-mmatch .col-score { width: 8%; }

.crm-tbl-types .col-name  { width: 34%; }
.crm-tbl-types .col-slug  { width: 26%; }
.crm-tbl-types .col-count { width: 18%; }
.crm-tbl-types .col-state { width: 22%; }

.crm-tbl-perms .col-cap { width: 43%; }
.crm-tbl-perms .col-rep { width: 19%; }
.crm-tbl-perms .col-mgr { width: 19%; }
.crm-tbl-perms .col-adm { width: 19%; }

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .sig { grid-template-columns: 34px minmax(0, 1fr); }
  .sig__side { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .sig__side .btn { width: auto; }
  .mres { grid-template-columns: 26px 62px minmax(0, 1fr); }
  .mres__side { grid-column: 3; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
  .mres__side .btn { margin-top: 0; }
  .crm-subs--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .tabs[data-tabs] { overflow-x: auto; flex-wrap: nowrap; }
  .tabs[data-tabs] .tab { flex: 0 0 auto; white-space: nowrap; }
  .crm-prefs,
  .crm-dists,
  .crm-derived-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  /* The role switch takes its own row rather than being squeezed into what is
     left of the actions row, where its two labels clip against each other. */
  .page-header { flex-wrap: wrap; }
  .page-actions { flex-wrap: wrap; }
  .crm-role { order: 1; width: 100%; }
  .crm-role .subtabs--choice { width: 100%; max-width: none; flex: 1; }
  .crm-role .subtab { min-width: 0; }
  /* A card header is a title against its actions; at this width they are two
     rows, not one row with the actions pushed off the edge. */
  .page .card-header { flex-wrap: wrap; gap: 10px; }
  .page .card-header > .crm-hd-actions { width: 100%; }
  .page .card-header > .crm-hd-actions .btn { flex: 1; justify-content: center; }
  /* The account picker wraps instead of running past the right edge, and the
     spacer that pushed the back link away goes with it. */
  .crm-acctbar .subtabs--inline { flex: 1 1 100%; flex-wrap: wrap; }
  .crm-acctbar .spacer { display: none; }
  .crm-periodbar .spacer,
  .toolbar .spacer { display: none; }
  .crm-feedbar__note { margin-left: 0; }
  .sig { grid-template-columns: minmax(0, 1fr); }
  .sig__ico { display: none; }
  .sig__side { grid-column: 1; }
  .mres { grid-template-columns: 52px minmax(0, 1fr); }
  .mres__rank { display: none; }
  .mres__side { grid-column: 2; }
  .crm-subs--inline { grid-template-columns: minmax(0, 1fr); }
  .crm-setting { gap: 10px; }
  .crm-setting__ctl { width: 100%; }
  .crm-months { height: 66px; }
  .crm-dates__k { min-width: 0; }
  /* Touch targets — nothing tappable drops under 44px on a phone. The add-row
     control keeps its place in the first <th> and takes the taller header row
     with it; the table scrolls horizontally at this width anyway. */
  .page .btn,
  .page .fchip,
  .page .subtab,
  .crm-pickrow { min-height: 44px; }
  .add-row-btn { width: 44px; height: 44px; vertical-align: -14px; }
  .add-row-btn svg { width: 18px; height: 18px; }
}

@media (max-width: 480px) {
  .crm-feedbar { gap: 8px; }
  .crm-dist__row { grid-template-columns: 88px 1fr 38px; gap: 8px; }
  .crm-stat__v { font-size: 18px; }
  .crm-subject > .thumb, .crm-subject > .avatar { width: 44px; height: 44px; }
  .crm-periodbar { gap: 6px; }
  .crm-num, .crm-target { width: 58px; }
}

/* -----------------------------------------------------------------------------
   Card rhythm
   Sibling cards carry no gap of their own in app.css, so this page states one.
   Anything already inside a flex .stack keeps the stack gap instead of both.
   -------------------------------------------------------------------------- */
.page .card + .card { margin-top: 16px; }
.page .stack > .card + .card { margin-top: 0; }
.page .toolbar + .card,
.page .crm-filters + .card,
.page .crm-scope + .card,
.page .crm-dirs + .card,
.page .crm-periodbar + .card,
.page .crm-digestbar + .card,
.page .crm-acctbar + .card { margin-top: 0; }

/* =============================================================================
   Slide-overs

   Every dialog in this module is a panel. A dialog is a box that has to justify
   its height before it has said anything; a panel has the room, so a form can
   breathe and a list can be the length it is.
   ========================================================================== */
/* The walkthrough is the one panel sized by its content rather than its form. */
.so-video .slideover { width: min(880px, 100%); }
.so-video .video-embed { margin: 0; }
/* A note under a form row is the row's own footnote, not the next row — it takes
   less than the 14px between rows, and more than nothing. */
.slideover-body :is(.field, .field-grid, .form-row, .fchips) + .crm-note { margin-top: 12px; }