/*
 * The broker book list — one row per platform company in a staff member's own book (ISH-1218).
 *
 * Pairs with js/broker-book-list.js; every host page must load both, plus css/stage-colors.css
 * (see "What this file does not own" below). Today's host is my-brokers.html; finance-my-brokers.html
 * is the second, once ISH-1112 has merged — those two pages are deliberately the same page with a
 * different predicate (js/my-brokers-book.js and js/finance-my-brokers.js each say so in their
 * headers), so this file exists to make sure they cannot drift into two different lists.
 *
 * ── Why this is not the .report-table chassis ────────────────────────────────
 *
 * The book was rendered through css/report-table.css (ISH-896) as five columns: Broker Account,
 * Broker Company, Stage, Portal, View. Four of the five hold one or two words, and the two name
 * columns are near-duplicates on most rows — a platform company is usually named after its broker.
 * The result was a grid mostly made of the gaps between thin columns. This file draws the same
 * four facts as one row of two lines, which reads as a roster rather than a report.
 *
 * The chassis is untouched and still right for the reports that use it. This is a second shape for
 * a different kind of list, not a replacement for it.
 *
 * ── Host tokens ─────────────────────────────────────────────────────────────
 *
 * Per the shared-CSS convention, colours resolve against the host page's own :root and this file
 * declares none of them: --card-bg, --border, --border-light, --text, --text-secondary,
 * --text-label, --red, --radius-lg. A host that loads this file must NOT also declare these
 * classes locally — a page doing both is how the stage palette drifted before ISH-353.
 *
 * ── What this file deliberately does NOT own ─────────────────────────────────
 *
 * **Every colour that means a stage.** The dot is filled by css/stage-colors.css's own
 * `[data-stage] .status-dot` consumer and the stage word reads that same row's `--stage-text`, so
 * one token drives both marks and they cannot disagree — with each other, or with a stage
 * indicator anywhere else in the app. Terminal rows fade through that file's `.stage-faded`, which
 * a host applies from `BrokerApp.isTerminalStage()` rather than from a stage name, so a future
 * terminal stage inherits the fade with no edit here.
 *
 * ⚠️ A host linking this file and not css/stage-colors.css gets a list of identical grey dots and
 * uniformly grey stage words — no error, no missing element, just every row looking the same. Link
 * both.
 */

/* One bordered surface with hairline dividers, rather than a card per row. The chrome is
 * `.process-row`'s on my-implementations.html — same tokens, same radius — but JOINED, because a
 * book of twenty separate cards is twenty things to look at and one list is one. */
.book-list {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

/* The whole row is the link, and it is an `<a>` rather than a click handler on a div: it
 * navigates, so it must keep middle-click, cmd-click and "open in new tab", which a handler
 * silently takes away. That is the same reasoning the `View` cell it replaces carried. */
.book-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}

.book-row:last-child {
  border-bottom: 0;
}

.book-row:hover {
  background: #fbfbfc;
}

/* `:focus-visible` and not `:focus` — every row is a link, so a plain `:focus` ring would light up
 * on every mouse click as well. `-2px` keeps the outline inside the row, where the joined surface
 * would otherwise clip it against a neighbour. */
.book-row:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

/* Filled by css/stage-colors.css. The size is here; the colour never is. */
.book-list .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* `min-width: 0` is load-bearing: without it a long broker name pushes the chevron off the right
 * edge instead of ellipsizing. The same note `.process-row-id` carries, for the same reason. */
.book-id {
  flex: 1;
  min-width: 0;
}

.book-name {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.book-name b {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The SECOND, smaller name on the line — the two columns the table always carried, on one line.
 * Rendered by the module only when it says something the bold one does not.
 *
 * ⚠️ The class name predates the order it describes. Which name lands here is the host's
 * `nameOrder` option (ISH-1316), and both live books now lead with the platform company, so this
 * rule styles the Broker ACCOUNT on every page that ships today. It is not renamed because the
 * option can put either name in either slot and a class called `.book-account` would be exactly as
 * wrong the other way. Read it as "the follower", not as "the company". */
.book-company {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-sub {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-label);
  margin-top: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The stage word carries that stage's own text colour, which is what lets stage lose its column
 * without losing its distinctness. The fallback matters: an unrecognised stage degrades to
 * readable secondary text rather than disappearing, exactly as css/stage-colors.css's consumers do. */
.book-sub .stage-word {
  color: var(--stage-text, var(--text-secondary));
  font-weight: 600;
}

.book-go {
  display: flex;
  flex-shrink: 0;
  color: var(--text-label);
}

.book-row:hover .book-go {
  color: var(--red);
}

/* The empty state. Two different sentences live in the host — "nothing matches" and "you cover
 * nothing" are different facts — and this file only gives them somewhere to sit. */
.book-empty {
  padding: 1.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Below this the chevron is the first thing worth losing: it is an affordance for a row that is
 * already entirely tappable. The name and the sub-line both keep their full width. */
@media (max-width: 600px) {
  .book-row {
    gap: 0.75rem;
    padding: 0.875rem 1rem;
  }

  .book-go {
    display: none;
  }
}

/* ── The optional per-row measure (ISH-959) ──────────────────────────────────
 *
 * Rendered by a host's `rowMetric`, between the identity and the chevron. `my-brokers.html` shows
 * one of three measures per row depending on the broker's stage; `finance-my-brokers.html` passes
 * no `rowMetric` and none of this applies to it.
 *
 * ⚠️ Fixed width and right-aligned, which is the whole reason it is usable. Left to size itself the
 * value sits wherever each broker's name happens to stop, and three different measures at three
 * different x-positions cannot be compared down a list — which is the only reason to put a number
 * on every row in the first place.
 */
.book-metric {
  flex-shrink: 0;
  width: 6.5rem;
  text-align: right;
}

.book-metric-val {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  /* Tabular figures so the numbers form a straight column rather than jittering between 9, 46 and
     100 — the same reason `.process-row-pct` on my-implementations.html carries them. */
  font-variant-numeric: tabular-nums;
}

.book-metric-cap {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-label);
  margin-top: 0.05rem;
  white-space: nowrap;
}

/* css/broker-utilization-table.css's `.bpu-bar` geometry, narrowed to fit a list row. */
.book-bar {
  width: 2.6rem;
  height: 5px;
  border-radius: 3px;
  background: #ededed;
  overflow: hidden;
  flex-shrink: 0;
}

.book-bar i {
  display: block;
  height: 100%;
  background: #9aa4b2;
}

/* ⚠️ **Only the utilization score is coloured, and that asymmetry is deliberate.**
 *
 * The report's bands (`<60 Needs review`, `<85 Watch`, else `Healthy`) are a VERDICT, so colour
 * carries meaning there. A 46% implementation is not a bad 46 — it is a process halfway through —
 * and painting it red would invent a judgement nobody made. Progress bars therefore keep the one
 * neutral fill above at every value, and only `.is-ok` / `.is-warn` / `.is-bad` repaint.
 *
 * Values are css/broker-utilization-table.css's, so a row and the report agree about a 59.
 */
.book-metric.is-ok .book-bar i {
  background: #28a745;
}

.book-metric.is-warn .book-bar i {
  background: #fd7e14;
}

.book-metric.is-bad .book-bar i {
  background: var(--red);
}

.book-metric.is-bad .book-metric-val {
  color: var(--red);
}

/* ⚠️ **A null score is "not measured", never 0.** `functions/lib/bigquery/brokerUtilization.js`:
 * "A broker that cleared no floor has not scored badly — it has not been measured. Zero is a real,
 * terrible score and the two must never render the same." Wording and treatment are
 * `.bpu-noscore`'s, so the row says what the report says. */
.book-noscore {
  font-size: 0.75rem;
  font-style: italic;
  color: #a9a9a9;
}

/* ── The score dial (ISH-1238) ───────────────────────────────────────────────
 *
 * Only the utilization score gets one. The two progress measures keep their bars, and that is the
 * point rather than an oversight: a score is a **verdict** out of 100 and a ring swept round reads
 * as one, while a percentage is a **position in a sequence** and a bar reads as that. It is the
 * same asymmetry the colour rule above makes.
 *
 * ⚠️ **Copied from `.bpu-dial` on `feature/ish-1236-brokers-tab-cards`, not re-derived.** The
 * Broker Platform Utilization report's Brokers tab is becoming cards and its card carries this
 * dial; that branch was unmerged when this shipped, so this could neither import it nor wait for
 * it. The sweep formula, the `#ededed` track and the three band fills are that file's, so the two
 * agree the day they meet.
 *
 * ⚠️ **This duplication is deliberate and is meant to be closed** — two conic dials with the same
 * three colours in two stylesheets is precisely the drift `css/stage-colors.css` exists to prevent.
 * A follow-up promotes one to a shared file once that PR lands. Do not add a THIRD copy in the
 * meantime; take whichever of these two is nearest and move it.
 */
.book-dial {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* ⚠️ `--book-sweep` is set INLINE by the renderer, and it is the only inline custom property on
     the row: it is per-row data rather than a theme value. The `0deg` fallback matters — a dial
     whose sweep never arrives reads as an empty ring, which is the honest state, rather than as a
     full one. */
  background: conic-gradient(#28a745 var(--book-sweep, 0deg), #ededed 0);
}

.book-metric.is-warn .book-dial {
  background: conic-gradient(#fd7e14 var(--book-sweep, 0deg), #ededed 0);
}

.book-metric.is-bad .book-dial {
  background: conic-gradient(var(--red) var(--book-sweep, 0deg), #ededed 0);
}

/* ⚠️ Not scorable: a FLAT track with no sweep at all. A 0deg conic gradient would render the same
   thing, but stating it means the not-measured case cannot accidentally inherit a band's colour if
   one is ever applied by mistake — and it is the case this component most needs to keep separate
   from a real low score. */
.book-metric.is-none .book-dial {
  background: #ededed;
}

/* The inner face punches the ring out of the middle. `--card-bg` rather than white, so the dial
   sits on the row's own surface and the ring stays a ring on a hovered row too. */
.book-dial-face {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.book-metric.is-bad .book-dial-face {
  color: var(--red);
}

/* The em-dash of a not-scorable company, which must never look like a number. */
.book-metric.is-none .book-dial-face {
  color: #8a8a8a;
}

/* ⚠️ The dial sits where the number-and-bar did, so the slot's own `text-align: right` has to
   become a flex end-alignment — a circle is not text and does not right-align. */
.book-metric.has-dial {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}