/* /broker — PRIVATE broker-portal demonstration (WO-2026-08-25-broker-portal).
 *
 * The professional register of the one Solas system: same tokens, denser
 * metrics. Head of Design ruling 2026-08-25 — a broker works a book, not a
 * journey: workbench frame, status vocabulary as the spine, keyboard-first,
 * hairlines not shadows, Ink-Blue only at the single action moment.
 * Density floors: 40px default controls · 32px dense table rows · 44px+ on
 * anything client-facing (the client-view surface keeps customer metrics).
 * No new colour tokens — every value routes through tokens.css.
 */

/* ── Shell ─────────────────────────────────────────────────────────────── */

.bp-shell {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-8);
}

/* Demo posture strip — every portal screen carries it (CCO Phase 1). */
.bp-demobar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  border: 1px solid var(--rule-strong);
  background: var(--bg-elevated);
  padding: 10px var(--space-4);
  margin: var(--space-5) 0 0;
}
.bp-demobar__badge {
  font-size: var(--size-caption);
  font-weight: var(--weight-kraftig);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.bp-demobar__line {
  font-size: var(--size-caption);
  color: var(--fg-muted);
  margin: 0;
}

/* Portal masthead — wordmark register + named hands. */
.bp-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5) 0 var(--space-4);
  border-bottom: var(--rule-ink);
}
.bp-masthead__brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.bp-masthead__wordmark {
  font-weight: var(--weight-kraftig);
  letter-spacing: var(--track-wordmark);
  font-size: var(--size-subhead);
  color: var(--fg);
}
.bp-masthead__surface {
  font-size: var(--size-caption);
  font-weight: var(--weight-kraftig);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
/* The Named Hands Rule: every session belongs to a named individual at a
   named firm — rendered permanently in the masthead, never a shared login. */
.bp-masthead__hands {
  font-size: var(--size-caption);
  color: var(--fg-muted);
  text-align: right;
}
.bp-masthead__hands strong {
  color: var(--fg);
  font-weight: var(--weight-kraftig);
}

/* Tab nav — workbench sections. Keyboard-first: real buttons, visible focus. */
.bp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: var(--rule-hairline);
  margin-bottom: var(--space-6);
}
.bp-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 12px var(--space-4);
  min-height: 40px;
  font: inherit;
  font-size: var(--size-caption);
  font-weight: var(--weight-kraftig);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  cursor: pointer;
}
.bp-tab:hover { color: var(--fg); }
.bp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bp-tab[aria-selected="true"] {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

/* ── Book (the diagnostic surface) ─────────────────────────────────────── */

.bp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.bp-toolbar__count {
  font-size: var(--size-caption);
  color: var(--fg-muted);
  margin-left: auto;
}
.bp-filter {
  appearance: none;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-2);
  min-height: 32px;
  padding: 4px var(--space-3);
  font: inherit;
  font-size: var(--size-caption);
  color: var(--fg-muted);
  cursor: pointer;
}
.bp-filter:hover { color: var(--fg); border-color: var(--fg-muted); }
.bp-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bp-filter[aria-pressed="true"] {
  color: var(--fg);
  border-color: var(--fg);
  font-weight: var(--weight-kraftig);
}

.bp-tablewrap { overflow-x: auto; }
.bp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-caption);
}
.bp-table th {
  text-align: left;
  font-weight: var(--weight-kraftig);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 8px var(--space-4) 8px 0;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
.bp-table td {
  padding: 7px var(--space-4) 7px 0;   /* 32px dense rows with line-height */
  border-bottom: var(--rule-hairline);
  vertical-align: baseline;
  white-space: nowrap;
}
.bp-table td.bp-td--wrap { white-space: normal; }
.bp-row { cursor: pointer; }
.bp-row:hover td { background: var(--bg-elevated); }
.bp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bp-num { font-variant-numeric: tabular-nums; }

/* The Status Spine — a closed set of named states; monochrome-editorial:
   label + weight + hairline carry state, never colour alone. */
.bp-chip {
  display: inline-block;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-2);
  padding: 1px 8px;
  font-size: 11px;
  font-weight: var(--weight-kraftig);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.bp-chip--attention {          /* action-needed: weight and stroke, not hue —
                                  Ink-Blue stays reserved for the screen's one
                                  primary action (The Tenth) */
  color: var(--fg);
  border-color: var(--fg);
}
.bp-chip--specimen {
  color: var(--fg-muted);
  border-style: dashed;
}

/* ── Detail panels ─────────────────────────────────────────────────────── */

.bp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 860px) { .bp-cols { grid-template-columns: 1fr; } }

.bp-panel {
  border: var(--rule-hairline);
  background: var(--bg);
  padding: var(--space-5);
}
.bp-panel--well { background: var(--bg-elevated); }
.bp-panel__eyebrow {
  font-size: var(--size-caption);
  font-weight: var(--weight-kraftig);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
}
.bp-panel h3 {
  font-size: var(--size-body);
  font-weight: var(--weight-kraftig);
  margin: 0 0 var(--space-3);
}

.bp-kv { margin: 0; }
.bp-kv > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 6px 0;
  border-bottom: var(--rule-hairline);
  font-size: var(--size-caption);
}
.bp-kv > div:last-child { border-bottom: none; }
.bp-kv dt { color: var(--fg-muted); }
.bp-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* The Provenance Rule: received / derived / missing — never silently dropped. */
.bp-prov { list-style: none; margin: 0; padding: 0; }
.bp-prov li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 6px 0;
  border-bottom: var(--rule-hairline);
  font-size: var(--size-caption);
}
.bp-prov li:last-child { border-bottom: none; }
.bp-prov .bp-prov__src { color: var(--fg-muted); white-space: nowrap; }

/* MTA difference view — before → after, the delta named. */
.bp-delta { width: 100%; border-collapse: collapse; font-size: var(--size-caption); }
.bp-delta th {
  text-align: left; font-weight: var(--weight-kraftig); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--fg-muted); padding: 6px var(--space-4) 6px 0;
  border-bottom: 1px solid var(--rule-strong);
}
.bp-delta td { padding: 6px var(--space-4) 6px 0; border-bottom: var(--rule-hairline); font-variant-numeric: tabular-nums; }
.bp-delta td.bp-delta__changed { font-weight: var(--weight-kraftig); }

/* Referral thread */
.bp-thread { list-style: none; margin: 0; padding: 0; }
.bp-thread li { padding: var(--space-3) 0; border-bottom: var(--rule-hairline); font-size: var(--size-caption); }
.bp-thread li:last-child { border-bottom: none; }
.bp-thread .bp-thread__who { font-weight: var(--weight-kraftig); }
.bp-thread .bp-thread__when { color: var(--fg-muted); font-size: var(--size-caption); }

/* ── Forms (dense register: 40px controls) ─────────────────────────────── */

.bp-form { display: flex; flex-direction: column; gap: var(--space-4); }
.bp-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.bp-field { display: flex; flex-direction: column; gap: 4px; }
.bp-field__lbl {
  font-size: var(--size-caption);
  font-weight: var(--weight-kraftig);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
/* Visible labels always on professional data entry — no sr-only fields here. */
.bp-field input,
.bp-field select {
  min-height: 40px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-2);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: var(--size-caption);
  padding: 6px var(--space-3);
}
.bp-field input:focus-visible,
.bp-field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.bp-field__hint { font-size: var(--size-caption); color: var(--fg-muted); }

.bp-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* ── Client view (customer register inside the demo) ───────────────────── */

.bp-clientframe {
  max-width: 560px;
  margin: 0 auto;
  border: var(--rule-hairline);
  background: var(--bg);
  padding: var(--space-6) var(--space-6) var(--space-7);
}
.bp-clientframe .bp-client__wordmark {
  font-weight: var(--weight-kraftig);
  letter-spacing: var(--track-wordmark);
  font-size: var(--size-subhead);
}
.bp-client__prepared {
  font-size: var(--size-caption);
  color: var(--fg-muted);
  margin: 4px 0 var(--space-5);
}
.bp-client__premium {
  font-size: var(--size-heading);
  font-weight: var(--weight-kraftig);
  letter-spacing: var(--track-heading);
  font-variant-numeric: tabular-nums;
  margin: var(--space-4) 0 0;
}
.bp-client__qualifier { font-size: var(--size-caption); color: var(--fg-muted); }
.bp-clientframe .btn { min-height: 44px; }   /* client-facing touch floor */

/* ── Utilities ─────────────────────────────────────────────────────────── */

.bp-note { font-size: var(--size-caption); color: var(--fg-muted); max-width: var(--measure); }
.bp-backlink {
  appearance: none; background: none; border: none; padding: 0;
  font: inherit; font-size: var(--size-caption); color: var(--accent);
  cursor: pointer; min-height: 32px;
}
.bp-backlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bp-section + .bp-section { margin-top: var(--space-6); }