/*
 * Broker card stat sidebar — the coloured strip of numbers down the right edge of a
 * `.broker-card`: unresolved flags, and one section per open process (Sales,
 * Implementation, Pilot).
 *
 * Single source of truth for `.broker-card-sidebar` / `.broker-card-stat*`. These rules
 * lived in brokers.html's inline <style> until ISH-482, when sales-pipeline.html's board
 * cards grew the same strip — so they moved here rather than being copied, the same reason
 * css/stage-colors.css, css/portal-rail.css and css/broker-flags-rail.css exist. Values are
 * brokers.html's verbatim apart from the new Pilot section; the move was intended to be
 * visually identical on that page. **Don't re-declare any of these in a page's inline
 * <style>** — that is how the stage palette drifted before ISH-353.
 *
 * The markup is emitted by each page's own card renderer (`renderCard()` in js/brokers.js,
 * `renderBrokerCard()` in js/sales-pipeline.js), which build it from
 * `BrokerApp.brokerProcessProgress()`. There is no shared JS module here — unlike the flag
 * rail, the strip is four spans and the two pages disagree about which broker set they
 * render, so only the styling is worth sharing.
 *
 * The card itself is NOT here. `.broker-card` and `.broker-card-main` stay in each host's
 * <style>: the two cards diverged deliberately at ISH-466 (see .docs/AGENT_GUIDE.md §O.2d)
 * and only their right-hand strip is common. A host must give `.broker-card`
 * `display: flex` and `.broker-card-main` `flex: 1; min-width: 0` for this strip to sit
 * beside the content rather than under it; both current hosts already did before ISH-482.
 *
 * Colours resolve against each host's own :root tokens (--red, --border). Both declare
 * them identically.
 */

/* Only present when a broker has flags or an open process — neither page renders an empty
   strip, so a card with nothing to report is the plain full-width card it always was. */
.broker-card-sidebar {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  min-width: 54px;
  width: 54px;
  flex-shrink: 0;
}

.broker-card-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0.5rem 0.4rem;
  text-align: center;
  gap: 0.1rem;
}

.broker-card-stat + .broker-card-stat {
  border-top: 1px solid var(--border);
}

.broker-card-stat-value {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.broker-card-stat-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-top: 0.1rem;
}

/* ── The four sections ──────────────────────────────────────────────────────
 *
 * Red for flags, blue for sales, purple for implementation-side work. The hues are the
 * card's own and deliberately NOT the ten-stage gradient in css/stage-colors.css: a stage
 * says where a broker is in its lifecycle, these say what work is open on it right now, and
 * a card carries both at once (the stage pill sits in the title row a few pixels away).
 * Borrowing the stage palette here would make the two read as one scale.
 *
 * ⚠️ The tint alpha is 0.04 on three of the four, not a mid-strength wash. At a 54px column
 * each section is a tall block of colour beside the card's content — the number carries the
 * hue and the fill only has to hint at it. Pilot below is the deliberate exception and says
 * why. */

/* Flags — red. */
.broker-card-stat.stat-flags {
  background: rgba(166, 38, 38, 0.04);
}

.broker-card-stat.stat-flags .broker-card-stat-value {
  color: var(--red);
}

.broker-card-stat.stat-flags .broker-card-stat-label {
  color: rgba(166, 38, 38, 0.65);
}

/* Sales — blue. */
.broker-card-stat.stat-sales {
  background: rgba(26, 111, 196, 0.04);
}

.broker-card-stat.stat-sales .broker-card-stat-value {
  color: #1a6fc4;
}

.broker-card-stat.stat-sales .broker-card-stat-label {
  color: rgba(26, 111, 196, 0.65);
}

/* Implementation — purple. */
.broker-card-stat.stat-impl {
  background: rgba(124, 58, 237, 0.04);
}

.broker-card-stat.stat-impl .broker-card-stat-value {
  color: #7c3aed;
}

.broker-card-stat.stat-impl .broker-card-stat-label {
  color: rgba(124, 58, 237, 0.65);
}

/* Pilot — purple too (ISH-482), because a Pilot is implementation-side work: the same
   delivery team, the same kind of checklist, just the trial run of it. A fourth unrelated
   hue would have said it belongs to a fourth department.
   Distinguished from Implementation by weight rather than by hue, since a broker can have
   both open at once and the two sections then sit directly on top of each other: Impl keeps
   its near-white 0.04 fill with a violet-600 number, Pilot gets a visibly lavender 0.13 fill
   with a violet-700 number. Both are unmistakably purple; which is which is legible without
   reading the label.
   ⚠️ The value colour is #6d28d9 and not the lighter #a78bfa the fill is mixed from — at
   1.05rem/800 the number is below the WCAG "large text" threshold, so it needs 4.5:1 and
   #a78bfa gives 2.2:1. #6d28d9 on this fill is 6.2:1. Keep any future recolour above 4.5:1
   against the composited background, not against bare white. */
.broker-card-stat.stat-pilot {
  background: rgba(167, 139, 250, 0.13);
}

.broker-card-stat.stat-pilot .broker-card-stat-value {
  color: #6d28d9;
}

.broker-card-stat.stat-pilot .broker-card-stat-label {
  color: rgba(109, 40, 217, 0.7);
}