/* CRM layer over the Supplier Pipeline.
 *
 * Namespaced crm-, checked against the site's body classes so no bare
 * component class restyles the document.
 *
 * On the look: this is a €89–199/month tool used by people who are deciding
 * where to put real money, so it earns its keep by being precise rather than
 * decorated. Hairlines instead of borders, one accent used only for the thing
 * that needs attention, tabular numerals everywhere a figure or date appears,
 * and the soft gold halo the decision cockpit already uses for emphasis.
 * Restraint is the expensive-looking choice here; more colour would not be.
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * Follow-ups — a briefing, not a list
 * ═══════════════════════════════════════════════════════════════════════════ */
.crm-fu {
   background:
      linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 58%),
      var(--bg-card, #1F1F2A);
   border: 1px solid var(--border, rgba(255, 255, 255, .07));
   border-radius: var(--radius-lg, 16px);
   padding: 20px 22px 8px;
   margin-bottom: 22px;
   box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
}

/* The old .crm-fu__head is gone — the head is now .crm-brief__head, which
   carries the position read rather than a bare count. */
.crm-fu__empty {
   padding: 4px 0 16px;
   font-size: 13px;
   line-height: 1.65;
   color: var(--dim, #5A5A72);
   max-width: 62ch;
}

.crm-fu__list { list-style: none; margin: 0; padding: 0; }

/* Hairline-separated rows rather than a stack of cards: at a glance this is
   one briefing, not eight competing objects. */
.crm-fu__item {
   position: relative;
   display: grid;
   grid-template-columns: 15px 128px minmax(0, 1.1fr) minmax(0, 1.5fr) 96px;
   align-items: baseline;
   gap: 12px;
   padding: 13px 10px 13px 4px;
   margin: 0 -10px;
   border-bottom: 1px solid rgba(255, 255, 255, .04);
   border-radius: 8px;
   cursor: pointer;
   font-size: 13px;
   transition: background 160ms cubic-bezier(.22, 1, .36, 1);
}
.crm-fu__item:last-child { border-bottom: 0; }
.crm-fu__item:hover { background: rgba(255, 255, 255, .028); }
.crm-fu__item:focus-visible { outline: 2px solid var(--gold, #F0A51E); outline-offset: -2px; }

/* Severity as a small signal dot. A chunky left border on every row makes the
   whole panel shout; a dot lets the one urgent row actually stand out. */
.crm-fu__item::before {
   content: '';
   grid-column: 1;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--dim, #5A5A72);
   align-self: center;
   transition: box-shadow 200ms ease;
}
.crm-fu__item.is-over::before { background: var(--red, #D42B1E); box-shadow: 0 0 0 4px rgba(212, 43, 30, .13); }
.crm-fu__item.is-today::before { background: var(--gold, #F0A51E); box-shadow: 0 0 0 4px rgba(240, 165, 30, .13); }
.crm-fu__item.is-soon::before { background: var(--slate, #5B7E99); }
.crm-fu__item.is-quiet::before { background: rgba(255, 255, 255, .22); }

.crm-fu__when {
   font-weight: 650;
   font-size: 12.5px;
   color: var(--mid, #9A9AAE);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}
.crm-fu__item.is-over .crm-fu__when { color: #FF8A7A; }
.crm-fu__item.is-today .crm-fu__when { color: var(--gold-t, #F5BC45); }

/* A flex row so the name can truncate while the stage chip survives it. */
.crm-fu__who {
   display: flex;
   align-items: baseline;
   min-width: 0;
   font-weight: 650;
   font-size: 13.5px;
   color: var(--bright, #F0F0F5);
   letter-spacing: -.01em;
}
.crm-fu__name {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.crm-fu__what {
   color: var(--dim, #5A5A72);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Supplier drawer
 * ═══════════════════════════════════════════════════════════════════════════ */
.crm-drawer { position: fixed; inset: 0; z-index: 9995; display: flex; justify-content: flex-end; }
.crm-drawer[hidden] { display: none; }
.crm-drawer__scrim {
   position: absolute;
   inset: 0;
   background: rgba(4, 4, 8, .66);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   animation: crm-fade 220ms ease both;
}
@keyframes crm-fade { from { opacity: 0; } to { opacity: 1; } }

.crm-drawer__panel {
   position: relative;
   width: min(580px, 100%);
   height: 100%;
   overflow-y: auto;
   overscroll-behavior: contain;
   background: var(--bg-dark, #111116);
   /* A hairline of light down the leading edge, so the panel reads as lifted
      off the page rather than pasted onto it. */
   border-left: 1px solid rgba(255, 255, 255, .09);
   box-shadow: -1px 0 0 rgba(255, 255, 255, .04) inset, -32px 0 70px rgba(0, 0, 0, .55);
   animation: crm-slide 260ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes crm-slide {
   from { transform: translateX(32px); opacity: 0; }
   to { transform: none; opacity: 1; }
}

.crm-drawer__head {
   position: sticky;
   top: 0;
   z-index: 2;
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 24px 26px 18px;
   background:
      linear-gradient(180deg, rgba(240, 165, 30, .055), transparent 78%),
      var(--bg-dark, #111116);
   border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.crm-drawer__eyebrow {
   display: block;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--gold, #F0A51E);
   margin-bottom: 6px;
}
.crm-drawer__head h3 {
   margin: 0;
   font-family: var(--font-display, inherit);
   font-size: 21px;
   font-weight: 700;
   letter-spacing: -.028em;
   line-height: 1.2;
   color: var(--bright, #F0F0F5);
}
.crm-drawer__x {
   margin-left: auto;
   flex: none;
   width: 34px;
   height: 34px;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 9px;
   background: rgba(255, 255, 255, .02);
   color: var(--mid, #9A9AAE);
   font-size: 19px;
   line-height: 1;
   cursor: pointer;
   transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.crm-drawer__x:hover {
   color: var(--bright, #F0F0F5);
   border-color: rgba(255, 255, 255, .2);
   background: rgba(255, 255, 255, .05);
}

.crm-drawer__body { padding: 22px 26px 48px; display: grid; gap: 30px; }

.crm-block h4 {
   margin: 0 0 14px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--mid, #9A9AAE);
}
.crm-block h4 small {
   display: block;
   margin-top: 5px;
   font-weight: 500;
   font-size: 12px;
   letter-spacing: 0;
   text-transform: none;
   color: var(--dim, #5A5A72);
}

/* ── From the decision report ───────────────────────────────────────────── */
/* Set apart from the client's own fields by a gold rule rather than a card,
   because it is a quotation from the analyst, not another thing to fill in.
   Read-only by construction: the column behind it is never client-writable. */
.crm-report-notes {
   margin: 0;
   padding: 2px 0 2px 14px;
   border-left: 2px solid var(--gold, #E8B33A);
   font-size: 13.5px;
   line-height: 1.62;
   color: var(--bright, #E8E8F0);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
}

/* ── Next action ────────────────────────────────────────────────────────── */
.crm-next { display: flex; gap: 9px; flex-wrap: wrap; }
.crm-next input { flex: 1 1 190px; min-width: 0; }
.crm-next input[type=date] { flex: 0 1 152px; font-variant-numeric: tabular-nums; }

.crm-drawer input,
.crm-drawer select,
.crm-drawer textarea {
   background: rgba(0, 0, 0, .28);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 10px;
   padding: 10px 12px;
   color: var(--bright, #F0F0F5);
   font: inherit;
   font-size: 13.5px;
   width: 100%;
   transition: border-color 150ms ease, box-shadow 150ms ease;
}
.crm-drawer input::placeholder,
.crm-drawer textarea::placeholder { color: rgba(255, 255, 255, .26); }
/* Pointer focus gets the cockpit's soft halo, so emphasis reads the same
   everywhere. Keyboard focus keeps a real ring: this rule outranks the site's
   global `input:focus-visible` outline, and a 9%-opacity halo is nowhere near
   a usable focus indicator for someone tabbing through. */
.crm-drawer input:focus,
.crm-drawer select:focus,
.crm-drawer textarea:focus {
   outline: none;
   border-color: rgba(240, 165, 30, .5);
   box-shadow: 0 0 0 4px rgba(240, 165, 30, .09);
}
.crm-drawer input:focus-visible,
.crm-drawer select:focus-visible,
.crm-drawer textarea:focus-visible {
   outline: 2px solid var(--gold, #F0A51E);
   outline-offset: 2px;
}

/* ── Contacts ───────────────────────────────────────────────────────────── */
.crm-contacts { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.crm-contact {
   position: relative;
   padding: 13px 40px 13px 15px;
   background: rgba(255, 255, 255, .022);
   border: 1px solid rgba(255, 255, 255, .06);
   border-radius: 11px;
   font-size: 13px;
   transition: border-color 150ms ease, background 150ms ease;
}
.crm-contact:hover { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .035); }
.crm-contact strong {
   color: var(--bright, #F0F0F5);
   font-size: 13.5px;
   font-weight: 650;
   letter-spacing: -.01em;
}
.crm-pill {
   margin-left: 8px;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--gold-t, #F5BC45);
   background: rgba(240, 165, 30, .1);
   border: 1px solid rgba(240, 165, 30, .26);
   border-radius: 100px;
   padding: 2px 8px;
   vertical-align: 1px;
}
.crm-contact__role {
   display: block;
   margin-top: 3px;
   color: var(--dim, #5A5A72);
   font-size: 12px;
}
.crm-contact__ways {
   display: flex;
   gap: 7px;
   flex-wrap: wrap;
   margin-top: 9px;
}
/* Contact methods as quiet chips: scannable, and none of them shouts. */
.crm-contact__ways a,
.crm-contact__ways span {
   font-size: 11.5px;
   color: var(--mid, #9A9AAE);
   background: rgba(255, 255, 255, .035);
   border: 1px solid rgba(255, 255, 255, .06);
   border-radius: 7px;
   padding: 3px 8px;
   text-decoration: none;
}
.crm-contact__ways a { color: var(--gold-t, #F5BC45); border-color: rgba(240, 165, 30, .2); }
.crm-contact__ways a:hover { background: rgba(240, 165, 30, .1); }

.crm-contact__del {
   position: absolute;
   top: 11px;
   right: 11px;
   width: 24px;
   height: 24px;
   border: 1px solid transparent;
   border-radius: 7px;
   background: transparent;
   color: rgba(255, 255, 255, .22);
   font-size: 15px;
   line-height: 1;
   cursor: pointer;
   transition: color 140ms ease, border-color 140ms ease;
}
.crm-contact:hover .crm-contact__del { color: var(--dim, #5A5A72); }
.crm-contact__del:hover { color: #FF8A7A; border-color: rgba(212, 43, 30, .3); }

/* ── Add forms ──────────────────────────────────────────────────────────── */
.crm-add { margin-bottom: 4px; }
.crm-add summary {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   cursor: pointer;
   font-size: 12px;
   font-weight: 650;
   letter-spacing: .01em;
   color: var(--gold-t, #F5BC45);
   list-style: none;
   padding: 6px 11px;
   border: 1px solid rgba(240, 165, 30, .22);
   border-radius: 100px;
   transition: background 150ms ease, border-color 150ms ease;
}
.crm-add summary::-webkit-details-marker { display: none; }
.crm-add summary:hover { background: rgba(240, 165, 30, .08); border-color: rgba(240, 165, 30, .4); }
.crm-add[open] summary { margin-bottom: 4px; }
.crm-add__grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
   gap: 9px;
   margin: 12px 0;
}
.crm-add textarea { margin-bottom: 11px; }
.crm-add__primary {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 12.5px;
   color: var(--mid, #9A9AAE);
}
.crm-add__primary input { width: auto; }

/* ── Timeline ───────────────────────────────────────────────────────────── */
/* A real spine. The point of a history is that it reads as continuous, and a
   stack of separate cards does not. */
.crm-timeline {
   list-style: none;
   margin: 18px 0 0;
   padding: 0 0 0 20px;
   position: relative;
}
.crm-timeline::before {
   content: '';
   position: absolute;
   left: 4px;
   top: 6px;
   bottom: 6px;
   width: 1px;
   background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
}
.crm-event {
   position: relative;
   padding: 0 0 20px;
   font-size: 13px;
}
.crm-event:last-child { padding-bottom: 0; }
.crm-event::before {
   content: '';
   position: absolute;
   left: -20px;
   top: 5px;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--bg-dark, #111116);
   border: 2px solid var(--slate, #5B7E99);
}
.crm-event.is-issue::before { border-color: var(--red, #D42B1E); }
.crm-event.is-order::before,
.crm-event.is-decision::before { border-color: #22C55E; }
.crm-event.is-quote::before,
.crm-event.is-sample::before { border-color: var(--gold, #F0A51E); }

.crm-event__meta { display: flex; gap: 9px; align-items: baseline; margin-bottom: 4px; }
.crm-event__kind {
   font-size: 9.5px;
   font-weight: 700;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: var(--mid, #9A9AAE);
}
.crm-event__meta time {
   font-size: 11.5px;
   color: var(--dim, #5A5A72);
   font-variant-numeric: tabular-nums;
   letter-spacing: .01em;
}
.crm-event strong {
   display: block;
   color: var(--bright, #F0F0F5);
   font-size: 13.5px;
   font-weight: 650;
   letter-spacing: -.01em;
   line-height: 1.45;
}
.crm-event p {
   margin: 6px 0 0;
   color: var(--mid, #9A9AAE);
   line-height: 1.65;
   white-space: pre-line;
   max-width: 60ch;
}

.crm-empty {
   font-size: 12.5px;
   line-height: 1.7;
   color: var(--dim, #5A5A72);
   max-width: 56ch;
}
.crm-timeline .crm-empty { padding-bottom: 0; }

/* The pipeline card becomes the way in. */
.pipe-card { cursor: pointer; }

@media (max-width: 640px) {
   .crm-fu { padding: 16px 16px 4px; }
   .crm-fu__item {
      grid-template-columns: 15px minmax(0, 1fr);
      gap: 4px 10px;
      padding: 12px 8px;
   }
   .crm-fu__when { grid-column: 2; }
   .crm-fu__who { grid-column: 2; }
   .crm-fu__what { grid-column: 2; }
   .crm-drawer__panel { width: 100%; }
   .crm-drawer__head { padding: 18px 18px 14px; }
   .crm-drawer__body { padding: 18px 18px 40px; gap: 24px; }
}

/* Performance reviews are part of the supplier record, not a second supplier
   database. The report score remains the reviewed baseline; these dated rows
   capture what the client learns from quotes, samples and execution. */
.crm-score-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-mid);
  color: var(--dim);
  font-size: 11px;
}
.crm-score-summary > strong { color: var(--bright); font-size: 20px; }
.crm-score-summary > strong small { margin-left: 2px; color: var(--dim); font-size: 10px; }
.crm-score-stars { display: inline-flex; gap: 1px; color: var(--dim); }
.crm-score-stars .is-filled { color: var(--gold-t); }
.crm-score-summary__empty { color: var(--mid); }
.crm-review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 9px;
}
.crm-review-grid label { color: var(--dim); font-size: 10px; font-weight: 750; }
.crm-review-grid select,
.crm-review-grid input {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid var(--border-m);
  border-radius: 8px;
  background: var(--bg-mid);
  color: var(--bright);
  font: inherit;
}
.crm-review-date { grid-column: 1 / -1; }
.crm-score-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.crm-score {
  position: relative;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-mid);
}
.crm-score__head { display: flex; justify-content: space-between; gap: 12px; }
.crm-score__head strong { color: var(--gold-t); font-size: 14px; }
.crm-score__head time { color: var(--dim); font-size: 10px; }
.crm-score__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin-top: 8px; }
.crm-score__metrics span { display: flex; justify-content: space-between; color: var(--dim); font-size: 10px; }
.crm-score__metrics b { color: var(--bright); }
.crm-score p { margin: 9px 0 0; color: var(--mid); font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.crm-score > button { margin-top: 9px; border: 0; background: transparent; color: var(--dim); font: inherit; font-size: 10px; cursor: pointer; }
.crm-score > button:hover { color: var(--bright); }

@media (max-width: 560px) {
  .crm-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
   .crm-drawer__panel,
   .crm-drawer__scrim { animation: none; }
   .crm-fu__item,
   .crm-contact,
   .crm-drawer__x,
   .crm-add summary,
   .crm-drawer input,
   .crm-drawer select,
   .crm-drawer textarea { transition: none; }
}

/* "Edit details" — the raw-field form, still reachable now that a card click
   opens this drawer instead. Deliberately quiet: the record is the point, the
   field editor is the escape hatch. */
.crm-drawer__edit {
   margin-left: auto;
   flex: none;
   align-self: center;
   padding: 7px 13px;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 8px;
   background: rgba(255, 255, 255, .02);
   color: var(--mid, #9A9AAE);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .01em;
   cursor: pointer;
   white-space: nowrap;
   transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.crm-drawer__edit:hover {
   color: var(--bright, #F0F0F5);
   border-color: rgba(255, 255, 255, .22);
   background: rgba(255, 255, 255, .05);
}
/* The close button already carried margin-left:auto to push itself right;
   with a sibling ahead of it that would double the gap. */
.crm-drawer__edit ~ .crm-drawer__x { margin-left: 8px; }

/* On Overview the strip follows the recorded next action, so the two read as
   one block: the project-level commitment, then the supplier-level ones. */
.crm-fu--dash { margin-top: 18px; }

.crm-drawer__edit[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * The briefing: position first, queue second
 *
 * A list of names with dates on it is a to-do list. What a sourcing lead needs
 * before deciding anything is where their suppliers are massed, what is going
 * to land on them over the next fortnight, and whether anything has moved at
 * all — so those go above the queue, and the queue reads as the consequence.
 *
 * Everything here is drawn in the same two greys and one gold the panel already
 * uses. The charts earn attention by being accurate and small, not by being
 * coloured in; a dashboard that reaches for a second hue per metric stops
 * looking like instrumentation and starts looking like a pitch deck.
 * ═══════════════════════════════════════════════════════════════════════════ */
.crm-brief__head {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding-bottom: 16px;
   border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.crm-brief__eyebrow {
   display: block;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--gold, #F0A51E);
   margin-bottom: 7px;
}
/* The read. Long enough to be a sentence, quiet enough not to shout it. */
.crm-brief__read {
   margin: 0;
   font-size: 13.5px;
   line-height: 1.5;
   color: var(--bright, #F0F0F5);
   letter-spacing: -.008em;
   font-variant-numeric: tabular-nums;
   max-width: 66ch;
}
.crm-brief__count {
   margin-left: auto;
   flex: none;
   align-self: center;
   padding: 5px 11px;
   border: 1px solid rgba(240, 165, 30, .28);
   border-radius: 999px;
   background: rgba(240, 165, 30, .07);
   color: var(--gold-t, #F5BC45);
   font-size: 11.5px;
   font-weight: 650;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
}

.crm-brief__grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
   gap: 30px;
   padding: 20px 0 18px;
   border-bottom: 1px solid rgba(255, 255, 255, .05);
}
@media (max-width: 760px) {
   .crm-brief__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
.crm-brief__label {
   margin: 0 0 12px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--dim, #5A5A72);
}

/* ── Funnel ─────────────────────────────────────────────────────────────
   Scaled against the largest stage, not the total, so a pipeline of three
   still has readable proportions instead of five near-invisible slivers. */
.crm-fn__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.crm-fn__row {
   display: grid;
   grid-template-columns: 78px minmax(0, 1fr) 20px;
   align-items: center;
   gap: 10px;
   font-size: 12px;
}
.crm-fn__label { color: var(--mid, #9A9AAE); letter-spacing: -.005em; }
.crm-fn__track {
   height: 5px;
   border-radius: 3px;
   background: rgba(255, 255, 255, .045);
   overflow: hidden;
}
.crm-fn__bar {
   display: block;
   height: 100%;
   border-radius: 3px;
   background: linear-gradient(90deg, rgba(240, 165, 30, .85), rgba(240, 165, 30, .38));
   transition: width 420ms cubic-bezier(.22, 1, .36, 1);
}
.crm-fn__n {
   text-align: right;
   font-weight: 650;
   color: var(--bright, #F0F0F5);
   font-variant-numeric: tabular-nums;
}
/* An empty stage is information — it is where movement stopped. Dimmed rather
   than hidden, so the gap in the funnel is visible as a gap. */
.crm-fn__row.is-empty .crm-fn__label,
.crm-fn__row.is-empty .crm-fn__n { color: var(--dim, #5A5A72); }
.crm-fn__foot {
   margin: 12px 0 0;
   font-size: 11.5px;
   color: var(--dim, #5A5A72);
   font-variant-numeric: tabular-nums;
}

/* ── Horizon ────────────────────────────────────────────────────────────
   Commitments placed on time rather than described in words, so a fortnight
   that is quiet and one that is stacked look different at a glance. */
.crm-hz__band { display: flex; align-items: center; gap: 12px; }
.crm-hz__late {
   flex: none;
   padding: 4px 9px;
   border-radius: 6px;
   background: rgba(212, 43, 30, .13);
   border: 1px solid rgba(212, 43, 30, .3);
   color: #FF8A7A;
   font-size: 11px;
   font-weight: 650;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
}
.crm-hz__late.is-clear {
   background: rgba(255, 255, 255, .03);
   border-color: rgba(255, 255, 255, .09);
   color: var(--dim, #5A5A72);
   font-weight: 600;
}
.crm-hz__track {
   position: relative;
   flex: 1 1 auto;
   height: 26px;
   border-radius: 4px;
   /* Week gridlines, so a position on the track is readable as a date rather
      than a vague sense of "soon". */
   background:
      linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px) 50% 0 / 50% 100% repeat-x,
      rgba(255, 255, 255, .028);
}
.crm-hz__today {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 2px;
   border-radius: 2px;
   background: var(--gold, #F0A51E);
   box-shadow: 0 0 0 3px rgba(240, 165, 30, .12);
}
.crm-hz__dot {
   position: absolute;
   top: 50%;
   width: 9px;
   height: 9px;
   margin: -4.5px 0 0 -4.5px;
   border-radius: 50%;
   background: var(--slate, #5B7E99);
   border: 2px solid var(--bg-card, #1F1F2A);
}
.crm-hz__dot.is-today { background: var(--gold, #F0A51E); }
.crm-hz__dot.is-soon { background: var(--slate, #5B7E99); }
.crm-hz__dot.is-quiet { background: rgba(255, 255, 255, .3); }
.crm-hz__scale {
   display: flex;
   justify-content: space-between;
   margin-top: 7px;
   padding-left: 62px;
   font-size: 10px;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--dim, #5A5A72);
}

/* ── Row context ────────────────────────────────────────────────────────
   The stage a supplier is in, and how long since anyone spoke to them. Both
   change what an overdue action means: chasing a quote from someone you talked
   to yesterday is not the same job as chasing one from silence. */
.crm-fu__stage {
   display: inline-block;
   margin-left: 9px;
   padding: 2px 7px;
   border-radius: 4px;
   background: rgba(255, 255, 255, .045);
   color: var(--dim, #5A5A72);
   font-size: 9.5px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   vertical-align: 1px;
}
.crm-fu__age {
   text-align: right;
   font-size: 11.5px;
   color: var(--dim, #5A5A72);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}
@media (max-width: 760px) {
   .crm-fu__item { grid-template-columns: 15px 116px minmax(0, 1fr); }
   .crm-fu__what, .crm-fu__age { display: none; }
}

.crm-fu__stage { flex: none; }

/* Removing a timeline entry is a correction, not a routine action, so the
   control stays out of the way until the entry is hovered or focused within.
   Kept in the DOM at all times so keyboard users can reach it. */
.crm-event { position: relative; }
.crm-event__del {
   position: absolute;
   top: 10px;
   right: 0;
   padding: 3px 8px;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 6px;
   background: var(--bg-dark, #111116);
   color: var(--dim, #5A5A72);
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: .02em;
   cursor: pointer;
   opacity: 0;
   transition: opacity 140ms ease, color 140ms ease, border-color 140ms ease;
}
.crm-event:hover .crm-event__del,
.crm-event:focus-within .crm-event__del { opacity: 1; }
.crm-event__del:hover { color: #FF8A7A; border-color: rgba(212, 43, 30, .4); }
.crm-event__del:focus-visible {
   opacity: 1;
   outline: 2px solid var(--gold, #F0A51E);
   outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Workspace mode
 *
 * Two jobs, one panel. A segmented control rather than a dropdown, because
 * there are exactly two states and both should be readable without opening
 * anything — and because which one you are in changes what the whole panel
 * means, so it needs to be visible at all times, not tucked into a menu.
 * ═══════════════════════════════════════════════════════════════════════════ */
.crm-brief__tools { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.crm-brief__count { margin-left: 0; }

.crm-mode {
   display: inline-flex;
   padding: 3px;
   border: 1px solid rgba(255, 255, 255, .09);
   border-radius: 9px;
   background: rgba(0, 0, 0, .25);
}
.crm-mode__btn {
   padding: 5px 12px;
   border: 0;
   border-radius: 6px;
   background: transparent;
   color: var(--dim, #5A5A72);
   font: inherit;
   font-size: 11.5px;
   font-weight: 650;
   letter-spacing: .01em;
   cursor: pointer;
   white-space: nowrap;
   transition: color 150ms ease, background 150ms ease;
}
.crm-mode__btn:hover { color: var(--mid, #9A9AAE); }
.crm-mode__btn.is-on {
   background: rgba(240, 165, 30, .13);
   color: var(--gold-t, #F5BC45);
   box-shadow: 0 0 0 1px rgba(240, 165, 30, .22) inset;
}
.crm-mode__btn:focus-visible { outline: 2px solid var(--gold, #F0A51E); outline-offset: 1px; }

/* ── Running-supplier figures ───────────────────────────────────────────
   Four counts, sized so the number is what you read first. Semantic colour
   only where a figure means something is wrong — a grid where every cell is
   tinted tells you nothing about which one to look at. */
.crm-ops__grid {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
}
.crm-ops__cell {
   padding: 11px 13px;
   border: 1px solid rgba(255, 255, 255, .06);
   border-radius: 10px;
   background: rgba(255, 255, 255, .018);
}
.crm-ops__n {
   display: block;
   font-size: 21px;
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -.03em;
   color: var(--bright, #F0F0F5);
   font-variant-numeric: tabular-nums;
}
.crm-ops__label {
   display: block;
   margin-top: 4px;
   font-size: 11px;
   color: var(--dim, #5A5A72);
   letter-spacing: .01em;
}
.crm-ops__cell.is-bad {
   border-color: rgba(212, 43, 30, .3);
   background: rgba(212, 43, 30, .07);
}
.crm-ops__cell.is-bad .crm-ops__n { color: #FF8A7A; }
.crm-ops__cell.is-warn { border-color: rgba(240, 165, 30, .24); }
.crm-ops__cell.is-warn .crm-ops__n { color: var(--gold-t, #F5BC45); }

/* The decision rail walks from SCOPE to DECISION. Once suppliers are running,
   it is a diagram of a question already answered — so it stands down in
   running mode rather than occupying the top of the workspace. Everything
   else on the dashboard stays exactly where it was. */
#panel-dashboard.is-mode-manage #decisionStages { display: none; }

@media (max-width: 620px) {
   .crm-brief__head { flex-wrap: wrap; }
   .crm-brief__tools { margin-left: 0; width: 100%; }
}