/* The Drawer. the-boardroom.css
 * DR-005. Built on the Bench token sheet (tokens.css) and bench.css's
 * shared primitives; nothing here hardcodes a colour, every value reads
 * var(--...) so the tool follows whichever skin and theme the visitor has
 * chosen, the same as every other Bench page.
 *
 * DR-023 corrected a citation and the rule it licensed. This file used to
 * hide the nav, the feedback strip and the footer on the floor, citing
 * Section 2 of the construct for "the seat rail is the only chrome".
 * Section 2 is Infrastructure and that line is not in the construct at
 * all: it is DR-005's own brief, line 33, and everything qualifying it
 * there ("seven cells across the top ... no avatars, no video tiles, no
 * waveform") argues against video call decoration inside the room. It was
 * never about the site's own chrome. Ruled on at DR-023: the floor loads
 * the bench stack like every other Thing, because a tool without it
 * exists as a URL rather than as a product.
 */

.brm-screen { display: none; }
.brm-screen.is-active { display: block; }

/* ── Door ─────────────────────────────────────────────────────────────── */

.brm-door {
  max-width: var(--stage-max);
  margin: 0 auto;
}

.brm-door-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 700;
  margin: 0 0 var(--s2);
}

.brm-door-sub {
  color: var(--ink-soft);
  margin: 0 0 var(--s4);
}

.brm-door-contract {
  margin: var(--s2) 0 0;
  font-size: var(--t-small);
  color: var(--ink-faint);
}

/* Replaces the door form outright on a real refusal (the reservation
 * genuinely spent, not a transient error), rather than sitting as a small
 * addendum below a still-live, still-enabled submit button: a form that
 * looks usable but is not is easy to miss the message next to. */
.brm-refused {
  margin-top: var(--s2);
  padding: var(--s4);
  border-left: 4px solid var(--accent);
  background: var(--panel);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
  font-style: italic;
  font-size: var(--t-lead);
}

/* ── Reading beat ─────────────────────────────────────────────────────── */

.brm-reading {
  max-width: var(--stage-max);
  margin: 0 auto;
}

.brm-reading-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 700;
  margin: 0 0 var(--s4);
}

.brm-roster {
  display: grid;
  gap: var(--s2);
}

.brm-roster-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: var(--border-w) solid var(--line);
}

.brm-roster-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lead);
  flex: 0 0 140px;
}

.brm-roster-state {
  color: var(--ink-faint);
  font-size: var(--t-small);
}

.brm-roster-row.is-ready .brm-roster-state { color: var(--good); }

.brm-roster-row.is-ready .brm-roster-dot { background: var(--good); }

.brm-roster-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint);
  flex: 0 0 auto;
}

/* ── Seat rail ────────────────────────────────────────────────────────── */

.brm-rail {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s1);
  padding: var(--s2) var(--s3);
  background: var(--panel);
  border-bottom: var(--border-w) solid var(--line);
}

/* Persistently bordered chips, not chrome that only appears once a seat
 * becomes active: the rail tells you how loud the room is before you
 * read a word of the transcript, which needs every seat visible as a
 * seat at rest, not just the ones currently doing something. */
.brm-rail-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  font: inherit;
  cursor: pointer;
  color: var(--ink);
}

.brm-rail-cell:hover { background: var(--ground-sunk); }

.brm-rail-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong);
}

.brm-rail-cell[data-state="listening"] .brm-rail-dot { background: var(--ink-faint); }
.brm-rail-cell[data-state="listening"] .brm-rail-state { color: var(--ink-faint); }

.brm-rail-cell[data-state="arguing"] { border-color: var(--line-strong); }
.brm-rail-cell[data-state="arguing"] .brm-rail-dot { background: var(--ink); }
.brm-rail-cell[data-state="arguing"] .brm-rail-state { color: var(--ink-soft); }

.brm-rail-cell[data-state="holding"] { border-color: var(--accent); background: var(--accent-soft); }
.brm-rail-cell[data-state="holding"] .brm-rail-dot {
  background: var(--accent);
  animation: benchPulse 1.1s ease-in-out infinite;
}
.brm-rail-cell[data-state="holding"] .brm-rail-state { color: var(--accent); }

.brm-rail-name {
  font-size: var(--t-small);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.brm-rail-state {
  font-size: 10px;
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
}

.brm-rail-cell.brm-rail-user {
  border-style: dashed;
  color: var(--ink-soft);
  cursor: default;
}

.brm-rail-cell.brm-rail-user[data-state="handup"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.brm-rail-cell.brm-rail-user[data-state="handup"] .brm-rail-state { color: var(--accent); }

/* ── The floor ────────────────────────────────────────────────────────── */

.brm-floor-wrap {
  max-width: var(--frame-max);
  margin: 0 auto;
  padding: var(--s4) var(--s3) var(--s4);
}

/* DR-023 step 1: the composer is a fixed bar whose height changes with
 * its own state, and the floor used to clear it with a fixed guess of
 * 340px (400 on a phone). The held panel and the held line push it past
 * that guess, so the one state the room exists to make you notice, a
 * member waiting on you, was the state the clearance stopped working in,
 * and a line was cut off mid word behind the box. The clearance is now
 * measured from the composer itself, in brmSyncComposerClearance, and it
 * sits on the body rather than on the floor so the feedback strip and the
 * footer clear it too now that the floor carries the whole bench stack. */
body[data-brm-screen="floor"] {
  padding-bottom: var(--brm-composer-clearance, 340px);
}

/* DR-023 step 4: the name column holds the lens label as well as the
 * name, and the label is the wider of the two. "Holds positioning" set in
 * uppercase at 11px measures 145px in workshop and 134px in office, so
 * every density was narrower than the longest label and the label wrapped
 * onto two lines, reading as HOLDS then the lens. The label does not
 * shrink with density, since it is a fixed size, so the column cannot
 * either: one width, measured to fit the longest label in the wider of
 * the two registers, at every density. Density still carries the body,
 * the name and the rhythm, which is what it was for. */
.brm-floor {
  --brm-body: 19px; --brm-name: 23px; --brm-gap: 30px; --brm-namecol: 152px;
}

.brm-floor[data-density="2"] { --brm-body: 17px; --brm-name: 21px; --brm-gap: 24px; --brm-namecol: 152px; }
.brm-floor[data-density="3"] { --brm-body: 16px; --brm-name: 19px; --brm-gap: 19px; --brm-namecol: 152px; }
.brm-floor[data-density="6"] { --brm-body: 15px; --brm-name: 18px; --brm-gap: 13px; --brm-namecol: 152px; }

.brm-block {
  display: grid;
  grid-template-columns: var(--brm-namecol) 1fr;
  gap: var(--s3);
  margin-top: var(--brm-gap);
}

.brm-block:first-child { margin-top: 0; }

.brm-block--run {
  margin-top: calc(var(--brm-gap) * -0.4);
}

.brm-block--run .brm-block-name { visibility: hidden; }

.brm-block-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--brm-name);
  line-height: 1.15;
}

/* Held on one line on purpose. A label that outgrows the column now
 * shows as overflow rather than silently wrapping, which is how this one
 * went unnoticed. */
.brm-block-seat {
  display: block;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-micro);
  color: var(--ink-faint);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  margin-top: 2px;
}

.brm-block-body {
  font-size: var(--brm-body);
  line-height: 1.55;
}

.brm-block--user .brm-block-body { color: var(--ink); font-style: italic; }
.brm-block--user .brm-block-name { color: var(--ink-soft); }

.brm-block--streaming .brm-block-body::after {
  content: '';
  display: inline-block;
  width: 7px; height: 1em;
  margin-left: 2px;
  background: var(--ink-faint);
  vertical-align: text-bottom;
  animation: benchPulse .9s ease-in-out infinite;
}

.brm-block--cut .brm-block-body {
  color: var(--ink-faint);
}

.brm-block--addresses-user {
  padding-left: var(--s2);
  margin-left: calc(var(--s2) * -1);
  border-left: 3px solid var(--accent);
}

.brm-addresses-user-tag {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--accent);
  margin-bottom: 4px;
}

/* A labelled divider, not an aside: the mockup shows a cut as damage to
 * the transcript itself, a small accent-coloured rule the room has to
 * read past, not a quiet italic footnote easy to skim over. */
.brm-cut-note {
  margin-top: 10px;
  padding-top: 8px;
  border-top: var(--border-w) solid var(--accent);
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--accent);
}

.brm-handup-note {
  margin-top: 4px;
  font-size: var(--t-small);
  color: var(--ink-faint);
  font-style: italic;
}

.brm-block--overlap-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-top: var(--brm-gap);
}

.brm-overlap-label {
  grid-column: 1 / -1;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.brm-overlap-lane .brm-block-name { font-size: var(--brm-name); }
.brm-overlap-lane .brm-block-body { font-size: var(--brm-body); }

.brm-overlap-note {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: var(--t-small);
  color: var(--ink-faint);
  font-style: italic;
}

.brm-handup-line {
  margin-top: var(--brm-gap);
  color: var(--ink-faint);
  font-style: italic;
  font-size: var(--t-small);
}

/* ── Close beat ───────────────────────────────────────────────────────── */

/* The close beat replaces the composer in the same slot and holds two
 * buttons the person acts on, so it takes the same treatment: the same
 * fault, the same argument, and fixing one and not the other would leave
 * the bell cutting the close's own controls (DR-025 step 2). */
.brm-close-beat {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--bench-bar-pad, 40px);
  background: var(--panel-raised);
  border-top: var(--border-w-heavy) solid var(--line-strong);
  padding: var(--s3);
  box-shadow: var(--shadow-lift);
  z-index: 520;
}

.brm-close-beat-inner {
  max-width: var(--stage-max);
  margin: 0 auto;
}

.brm-close-prompt {
  margin: 0 0 var(--s2);
  font-size: var(--t-lead);
}

.brm-close-note-input {
  width: 100%;
  margin-bottom: var(--s2);
}

.brm-close-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* ── Composer / interject ─────────────────────────────────────────────── */

/* DR-025 step 2: the composer wins the bottom edge, in both senses. The
 * presence bar is injected onto the body at z-index 500 and fixed to the
 * bottom, so it was drawn over the pull bar and the hand up control: a
 * control the person can act on was losing to an ambient status strip.
 * Raising the composer alone would have buried the strip outright, since
 * this wrap carries an opaque ground and runs the full width, so it also
 * sits above the bar's own height rather than at zero. Nothing draws over
 * the composer, the pull bar is never cut, and the strip stays visible
 * and usable. The bar's height comes from bench.js's own measurement, and
 * the fallback matches the one bench.css uses on the front door. */
.brm-composer-wrap {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--bench-bar-pad, 40px);
  z-index: 520;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s3) var(--s3);
  pointer-events: none;

  /* DR-023 step 1: the wrap carries the page's own ground rather than
   * being transparent. The pull track is mostly empty by design, and
   * with the bench stack now on the floor there is something behind it
   * to read through: the feedback strip's own buttons were arriving in
   * the middle of the track and colliding with its labels. The ground
   * and the pattern are the body's, so nothing about how this reads
   * changes, and the pattern is pinned to the viewport because the wrap
   * is too. */
  background: var(--ground);
  background-image: var(--pattern);
  background-size: var(--pattern-size);
  background-attachment: fixed;
}

/* The text row: always the primary, always-visible control. Hand up
 * (queue) is the button here at rest; once a hand is already up it swaps
 * to Cut in plus a separate Put it down, matching the mockup's own
 * contextual swap rather than one static pair of buttons that never
 * changes regardless of state. */
.brm-composer-row {
  width: min(100%, var(--stage-max));
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
  background: var(--panel-raised);
  border: var(--border-w-heavy) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  pointer-events: auto;
  transition: border-color .2s ease;
}

/* You have a real answer path when a member asks you something directly,
 * not just a note sitting back in the transcript: the composer itself
 * picks up the accent for as long as that stands as the latest turn. */
.brm-composer-row.is-invited { border-color: var(--accent); }

.brm-composer-input {
  flex: 1;
  border: 0;
  background: none;
  resize: none;
  font: inherit;
  font-size: var(--t-body);
  color: inherit;
  outline: none;
  min-height: 40px;
}

.brm-composer-input::placeholder { color: var(--ink-faint); }

.brm-composer-primary-btn { flex: 0 0 auto; }

/* The pull track: a graduated alternative to the buttons, not a
 * replacement for them. Both destination labels sit in the track at all
 * times, so the gesture's shape is visible before it is ever touched,
 * rather than only revealing the current position as you drag. */
.brm-composer-track {
  position: relative;
  width: min(100%, var(--stage-max));
  height: 140px;
  pointer-events: none;
}

/* DR-023 step 3: these used to sit at the track's left edge, in the same
 * gutter the chair's margin runs down, so two unrelated systems shared
 * one column. They belong to the notched track and now sit against it on
 * the right, clear of the margin above them. */
.brm-composer-zone {
  position: absolute;
  right: var(--s3);
  display: flex;
  align-items: center;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  pointer-events: none;
}

/* Bottom anchored to line up exactly with the notches: cut in now sits
 * above the second notch, at the next gap between the two, so both read
 * as belonging to the track rather than floating near it. */
.brm-composer-zone--cut { bottom: 62%; height: 38%; }
.brm-composer-zone--queue { bottom: 22%; height: 40%; }

.brm-composer-notch {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px dashed var(--line-strong);
  pointer-events: none;
}

.brm-composer-bar {
  position: absolute;
  left: var(--s3); right: var(--s3);
  bottom: 12px;
  min-height: 34px;
  background: var(--panel-raised);
  border: var(--border-w-heavy) solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lift);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--s3);
  pointer-events: auto;
  transition: background .12s ease, color .12s ease;
}

.brm-composer-bar.is-queued { background: var(--mark-soft); }
.brm-composer-bar.is-cutting { background: var(--accent); color: var(--accent-ink); }

.brm-composer-handle {
  flex: 0 0 auto;
  font-size: var(--t-body);
  color: inherit;
  touch-action: none;
  cursor: grab;
  padding: var(--s1) 4px;
  margin: calc(var(--s1) * -1) -4px;
}

.brm-composer-label {
  flex: 0 0 auto;
  font-size: var(--t-small);
  white-space: nowrap;
}

.brm-held-panel {
  width: min(100%, var(--stage-max));
  background: var(--panel);
  border-left: 4px solid var(--line-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s2) var(--s3);
  pointer-events: none;
}

.brm-held-label {
  display: block;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  margin-bottom: 4px;
}

.brm-held-text {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: var(--t-small);
}

/* ── Bio card ─────────────────────────────────────────────────────────── */

.brm-bio-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: var(--s3);
}

.brm-bio-card {
  background: var(--panel-raised);
  border: var(--border-w-heavy) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  max-width: 480px;
  width: 100%;
  padding: var(--s4);
  max-height: 82vh;
  overflow-y: auto;
}

.brm-bio-name {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 700;
  margin: 0;
}

.brm-bio-seat {
  color: var(--ink-faint);
  font-size: var(--t-small);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  margin: 2px 0 var(--s3);
}

.brm-bio-row { margin: 0 0 var(--s3); }
.brm-bio-row dt { font-size: var(--t-micro); color: var(--ink-faint); text-transform: var(--label-case); letter-spacing: var(--label-track); margin-bottom: 4px; }
.brm-bio-row dd { margin: 0; }
.brm-bio-row ul { margin: 0; padding-left: 18px; }

.brm-bio-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s3);
}

/* ── Minute book ──────────────────────────────────────────────────────── */

.brm-book { max-width: var(--frame-max); margin: 0 auto; }

.brm-book-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 700;
  margin: 0 0 var(--s4);
}

.brm-book-row {
  display: grid;
  grid-template-columns: 90px 1fr 130px;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: var(--border-w) solid var(--line);
  cursor: pointer;
}

.brm-book-date { color: var(--ink-faint); font-size: var(--t-small); }

.brm-book-question {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  margin: 0 0 6px;
}

.brm-book-split-line { color: var(--ink-soft); font-size: var(--t-small); margin: 0 0 var(--s2); }

.brm-airtime-bar {
  display: flex;
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--ground-sunk);
  margin-bottom: 4px;
}

/* Colour draws the eye to who actually ran the meeting, not to a six-way
 * legend: the dominant segment's background comes from JS (var(--accent)),
 * every other segment a neutral grey scaled by its own share, darkest for
 * the least. A rainbow of six distinct colours reads as decoration; one
 * accent against grey reads as a fact. */
.brm-airtime-seg {
  height: 100%;
}

.brm-airtime-names {
  display: flex;
  font-size: 10px;
  color: var(--ink-faint);
}

.brm-airtime-names span { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brm-airtime-caption {
  display: none;
  margin-top: var(--s2);
  gap: 4px;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.brm-book-row.is-newest .brm-airtime-caption { display: grid; }
.brm-book-row:hover .brm-airtime-caption { display: grid; }

.brm-book-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

.brm-read-btn { white-space: nowrap; font-size: var(--t-small); }


.brm-book-summary {
  margin: 0 0 var(--s3);
  font-size: var(--t-small);
  color: var(--ink-faint);
}

.brm-book-empty { color: var(--ink-faint); padding: var(--s4) 0; }

.brm-book-cta { margin-top: var(--s5); padding-top: var(--s4); border-top: var(--border-w) solid var(--line); }

/* Touch: hover does not exist, tap opens the same content as a sheet */
.brm-caption-sheet {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 60;
  display: flex;
  align-items: flex-end;
}

.brm-caption-sheet-inner {
  background: var(--panel-raised);
  border-top: var(--border-w-heavy) solid var(--line-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--s4);
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
}

/* ── Minute page ──────────────────────────────────────────────────────── */

.brm-minute { max-width: var(--stage-max); margin: 0 auto; }

.brm-minute-tag { margin-bottom: var(--s3); }

.brm-minute-row { margin: 0 0 var(--s4); }
.brm-minute-row dt {
  font-size: var(--t-micro); color: var(--ink-faint);
  text-transform: var(--label-case); letter-spacing: var(--label-track);
  margin-bottom: 6px;
}
.brm-minute-row dd { margin: 0; font-size: var(--t-lead); }

.brm-minute-transcript {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: var(--border-w) solid var(--line);
}

.brm-minute-transcript .brm-floor { --brm-body: 16px; --brm-name: 19px; --brm-gap: 19px; --brm-namecol: 152px; }

@media (max-width: 900px) {
  .brm-block, .brm-block--overlap-wrap { grid-template-columns: 1fr; gap: 4px; }
  .brm-block-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .brm-block-seat { margin-top: 0; white-space: normal; }
  .brm-rail { grid-template-columns: repeat(4, 1fr); }
  .brm-book-row { grid-template-columns: 1fr; }
  .brm-book-meta { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }

  /* The textarea plus two buttons (Cut in, Put it down) has no room to
   * sit on one line at phone widths; the textarea keeps the full row to
   * itself and the buttons wrap to their own row below it. */
  .brm-composer-row { flex-wrap: wrap; }
  .brm-composer-input { flex-basis: 100%; }
}

/* ── DR-009 step 2: ruling capture and the memo block ─────────────────── */

/* A closed row is either ruled or visibly waiting. Unruled carries the
 * accent so the list admits the meeting is waiting on you; ruled settles
 * back into the ink. */
.brm-ruled-flag {
  display: inline-block;
  margin-left: var(--s2);
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--accent);
}
.brm-ruled-flag.is-ruled { color: var(--ink-faint); }

/* DR-023 step 5: a meeting still running says so in the same slot and at
 * the same weight as ruled and unruled, rather than relying on a faint
 * outcome tag to carry a state it was not describing. */
.brm-ruled-flag.is-open { color: var(--accent); font-weight: var(--label-weight); }

/* DR-023 step 5: back and copy share the minute's top row. Copy is the
 * thing that was being done by hand after every meeting, so it sits with
 * the control that leaves the page rather than buried under the
 * transcript it copies. */
.brm-minute-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

#brm-minute-memo, #brm-minute-ruling {
  margin: var(--s5) 0 0;
  padding-top: var(--s4);
  border-top: var(--border-w) solid var(--line);
}

.brm-memo-head {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 700;
  margin: 0 0 var(--s1);
}

.brm-memo-byline {
  color: var(--ink-faint);
  font-size: var(--t-small);
  margin: 0 0 var(--s3);
}

.brm-memo-para { margin: 0 0 var(--s3); font-size: var(--t-lead); }

.brm-memo-missing { color: var(--ink-soft); margin: 0 0 var(--s3); }

.brm-memo-line { margin: 0 0 var(--s2); }

.brm-memo-label {
  display: block;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  margin: 0 0 var(--s1);
}

.brm-memo-flags { margin: 0 0 var(--s3); padding-left: 1.2em; }
.brm-memo-flags li { margin: 0 0 var(--s1); }

.brm-ruling-sub { color: var(--ink-soft); margin: 0 0 var(--s3); }

.brm-ruling-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--ground-sunk);
  color: var(--ink);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  padding: var(--s2);
  font: inherit;
  resize: vertical;
}

.brm-ruling-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin: var(--s3) 0 0;
}

.brm-ruling-note { color: var(--ink-faint); font-size: var(--t-small); }

.brm-ruling-text { font-size: var(--t-lead); margin: 0 0 var(--s2); }

.brm-ruling-date {
  color: var(--ink-faint);
  font-size: var(--t-small);
  margin: 0;
}

/* ── DR-009 step 4: the chair's margin ────────────────────────────────── */

/* Grey ink, a narrow column of its own, never the transcript body. On a
 * desktop floor it sits left of the transcript with its own scroll; on a
 * phone it compresses to a shallow strip above the floor, still its own
 * scroll, still never inside the flow. */
/* DR-023 step 3: 196px against the frame read as a quarter of the width
 * holding a chip and one line. Coburn's column is sized for what she
 * actually writes, a chip and an occasional note, and DR-021 consumed
 * both of her allowed moments, so it renders empty in most meetings now.
 * That is the honest result and the column stays. */
body[data-brm-screen="floor"] .brm-floor-wrap {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--s3);
  align-items: start;
}

.brm-chair-margin {
  position: sticky;
  top: var(--s3);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  border-right: var(--border-w) solid var(--line);
  padding-right: var(--s3);
}

@media (max-width: 900px) {
  body[data-brm-screen="floor"] .brm-floor-wrap { display: block; }
  .brm-chair-margin {
    position: static;
    max-height: 168px;
    border-right: 0;
    padding-right: 0;
    border-bottom: var(--border-w) solid var(--line);
    padding-bottom: var(--s2);
    margin-bottom: var(--s3);
  }
}

.brm-chair-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  border: var(--border-w) solid var(--line);
  padding: 5px 10px;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  margin-bottom: var(--s3);
}

.brm-chair-dot {
  width: 5px;
  height: 5px;
  background: var(--warn);
  flex: 0 0 auto;
}

.brm-chair-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.brm-chair-note { display: flex; flex-direction: column; gap: 3px; }

.brm-chair-note-kind {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
}

.brm-chair-note-text {
  font-size: var(--t-small);
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* The one chair line allowed in the flow, and only for a handoff. It
 * keeps the block grid so the label sits where a name would, but in
 * label ink, no display font: no name attached to a seat. */
.brm-chair-flow-line {
  display: grid;
  grid-template-columns: var(--brm-namecol) 1fr;
  gap: var(--s3);
  margin-top: calc(var(--brm-gap) * 0.6);
}

.brm-chair-flow-label {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  align-self: baseline;
}

.brm-chair-flow-text {
  font-size: var(--t-small);
  font-style: italic;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ── DR-009 step 6: the memo's writing state ──────────────────────────── */

.brm-memo-waiting {
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 var(--s3);
}

/* ── DR-020: the held floor ───────────────────────────────────────────── */

/* The room asked something and stopped. The line sits where the hand up
 * line already sits, above the composer that answers it, so nothing in
 * the layout moves for it. */
.brm-hold-line {
  margin: 0 0 var(--s2);
  font-size: var(--t-small);
  color: var(--accent);
}