/* Discussions -- the meeting workflow's "where was this discussed?" step.
 *
 * These rules lived as a JS string array inside mbTvInjectCss() in app.js, injected into
 * a <style> tag at runtime. Nothing could reach them: not a stylesheet, not /design/, and
 * not the design-system checks -- which is how 77 hardcoded colours and a private
 * 21-variable palette survived here while the rest of the repo moved onto tokens.
 * See issue 364.
 *
 * Moved as-is. The palette block now points at --gv-* tokens instead of repeating their
 * values. Most are exact renames; the neutrals resolve to SEMANTIC roles rather than raw
 * ramp steps, which moves two of them slightly:
 *
 *   --mut  #6b7280 -> --gv-text-subtle    4.83:1 -> 5.16:1 on white
 *   --ink  #111827 -> --gv-text          17.74:1 -> 18.44:1
 *
 * Mapping --mut onto --gv-ink-500 instead would have dropped it to 4.39:1 and FAILED AA.
 * tokens.css says so at the ramp itself, and --gv-text-subtle exists for exactly this
 * case. A near-miss is worth resolving to the token, not enshrining as a new one.
 *
 * The .mbtv-pick rules are gone rather than moved -- the choice list is the design
 * system's gv-choice now.
 */

/* Govably's palette, not a generic emerald SaaS one: --gv-brand-900 is the brand green */
/* the rest of the app is built on, with brand-700 for accents, brand-50/200 for */
/* tints, and the brand's gold for anything to do with the running order. */
.mbtv{--g:var(--gv-brand-700);--gd:var(--gv-brand-900);--gdh:#0a5b42;--gl:var(--gv-brand-50);--gb:var(--gv-brand-200);--ink:var(--gv-text);--ink2:var(--gv-ink-700);--mut:var(--gv-text-subtle);--mut2:var(--gv-text-disabled);--line:var(--gv-border);--am:var(--gv-gold-fg);--aml:var(--gv-gold-bg);--amb:var(--gv-gold-border);--au:var(--gv-gold-fg);--aul:var(--gv-gold-bg);--aub:var(--gv-gold-border);--tl:#dcebd2;--tlw:var(--gv-gold);color:var(--gv-text)}
.mbtv .tnum{font-variant-numeric:tabular-nums}
/* intro + done */
.mbtv-fine{margin-top:18px;font-size:12.5px;color:var(--mut2)}
/* bars + buttons */
.mbtv-bar{display:flex;align-items:center;gap:16px;padding:18px 0 16px;border-bottom:1px solid var(--line);margin-bottom:26px}
.mbtv-bar h3{font-size:19px;font-weight:600;letter-spacing:-.02em}
.mbtv-bar .sub{font-size:13.5px;color:var(--mut);margin-top:2px}
.mbtv-btn{border:1px solid var(--line);background:#fff;color:var(--ink2);font-size:13.5px;font-weight:600;padding:9px 15px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.mbtv-btn:hover{border-color:#d1d5db;background:#fafbfc}
.mbtv-btn.p{background:var(--gd);border-color:var(--gd);color:#fff}
.mbtv-btn.p:hover{background:var(--gdh);border-color:var(--gdh)}
.mbtv-btn.ghost{border-color:transparent;background:transparent;color:var(--mut)}
.mbtv-btn.ghost:hover{background:#f1f3f5}
/* picker — bulk selection row */
.mbtv-bulklbl{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut2);margin-left:8px}
/* confirm layout — the whole step is locked to one viewport. Nothing scrolls */
/* except the choice list and the side panel, so the Confirm button is never */
/* somewhere you have to go and find. The timeline rail used to cost ~60px above */
/* this; with it gone the stage takes the height back. */
/* The stage is .gv-stage in components.css now (#466). This screen's grid was one of
   four: minmax(460px,42%) against Motions' minmax(420px,36%) and the Document tab's
   clamp(260px,36%,420px), so the recording changed width on every tab change. The
   Document tab's numbers won -- see the note over .gv-stage. .mbtv-left/.mbtv-right
   went with it; they are .gv-stage__main and .gv-stage__side. */
/* ── the roster ─────────────────────────────────────────────────────────── */
/* One row per agenda item, in agenda order. A row carries its state in its */
/* border and its answer on the right; nothing here scrolls away or reorders */
/* under the clerk while they work. */
/* Same 2px the roster keeps clear for its scrollbar, so the bar and the rows */
/* below it line up on the right edge exactly rather than 2px apart. */
#mbtv-bar{flex:0 0 auto;padding-right:2px}
/* padding-top is the 12px .mbtv-filter used to keep under itself, moved inside the scroller
   so a scrolled roster runs right up to the filter row instead of vanishing 12px below it (#603). */
/* ONE PANEL FROM THE TAB STRIP DOWN (Dom, 2026-09-22), the same object Speakers and
   Motions are. The filter band and the roster were two things loose on the page: a band
   with no left or right edge, and a list of rows sitting straight on the background.

   A flex COLUMN that gives its remaining height to .mbtv-roster, so the band stays and the
   list scrolls — which is what makes the filter row fixed here without a sticky. No
   overflow:hidden: a row's menus open past the panel's edge, and the top corners are
   squared by .mw-dock rather than clipped. */
.mbtv-panel{
    display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
    background:var(--gv-surface);
    border:var(--gv-border-width) solid var(--gv-border);
    border-radius:var(--gv-radius-lg);
}
/* The band reaches the panel's edges; the list below carries the inset. Its 2px right
   gutter stays — that is for the scrollbar, which sits outside the padding. */
.mbtv-panel > #mbtv-filter-w{flex:0 0 auto}
.mbtv-panel > .mbtv-roster{padding-left:var(--gv-space-4);padding-right:calc(var(--gv-space-4) - 2px)}

.mbtv-roster{display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;flex:1 1 auto;padding-right:2px;padding-top:var(--gv-space-3)}
/* A positioning wrapper, not a card. .gv-row draws the border, the radius, the
   background and every state tint; this used to draw them too, which showed up as a
   double outline and, when open, a 3px green ring around a row that already had one.
   All it owes now is the outline depth it carries in --gv-row-depth. */
.mbtv-item{flex:0 0 auto}
/* Search and chips on one line above the list. The search shrinks first: the chips
   carry counts a clerk reads at a glance, and wrapping them under the box to keep a
   wide input costs more than a narrower input does. */
/* No top padding: the toolbar above already carries a 16px bottom margin (mb-4 in
   MW_TOOLBAR_CARD_CLASS — that card is still a Tailwind string, shared by every
   workflow step), and the two together left the filter floating 28px clear of the
   bar it belongs with. No bottom padding either, since #603: the 12px separating the
   controls from the list is still there, but as .mbtv-roster's padding-top, so it
   scrolls away with the roster instead of standing as a strip of page under the filters. */
.mbtv-filter{display:flex;align-items:center;gap:var(--gv-space-3);flex-wrap:nowrap;overflow-x:auto;padding:0}
/* Room for the focus ring (Dom, 2026-09-23). overflow-x:auto clips everything at this box's
   edge, and with no padding the filter box's green ring was cut off along its top and left —
   a stray green edge poking out beside the box. The padding gives the ring its room and the
   matching negative margin keeps the row exactly where it was. */
#mbtv-filter-w .mbtv-filter{padding:var(--gv-space-1);margin:calc(-1 * var(--gv-space-1))}
.mbtv-filter .mbtv-rq{flex:1 1 8rem;min-width:6rem;max-width:22rem}
/* A NARROW LEFT COLUMN (Dom, 2026-09-23). The chips refused to wrap and were allowed to
   shrink, so they slid under Place Items; and the filter box shrank until "Filter the agenda"
   read "Filter the agen". Now the box never gets narrower than its own placeholder and the
   chips never shrink. mbTvFitFilter measures the row and, only while it genuinely does not
   fit, takes one step at a time: Place Items becomes "Place" with the nib (.is-short), then the
   nib alone (.is-icon), and last the row wraps onto a second line (.is-wrap) -- so nothing is
   ever pushed out of sight. The full words stay the button's tooltip and accessible name. */
#mbtv-filter-w .mbtv-rq{min-width:9rem}
.mbtv-chipbar #mbtv-chips{flex-shrink:0}
.mbtv-filter.is-short #mbtv-act .gv-btn__more,
.mbtv-filter.is-short #mbtv-act .gv-btn__swap-ghost{display:none}
.mbtv-filter.is-icon #mbtv-act .gv-btn__swap{display:none}
.mbtv-filter.is-icon #mbtv-act .gv-btn{padding-left:var(--gv-space-2);padding-right:var(--gv-space-2)}
.mbtv-filter.is-wrap,
.mbtv-filter.is-wrap .mbtv-chipbar,
.mbtv-filter.is-wrap .gv-chips{flex-wrap:wrap;row-gap:var(--gv-space-2)}
/* An agenda title is a case number, a map-and-lot, two names and a street address, and it
 * wraps to four lines or more. gv-row centres its head, which is right where a title is
 * one line -- but on a tall row it floated the play control and the action into the
 * vertical middle of the text, level with nothing. They belong beside the FIRST line, which
 * is where the row starts and where the eye is.
 *
 * align-self on the aside alone, not align-items on the head: the caret and the number
 * already sit at the title's top, and moving the whole head would be a bigger change than
 * this needs. Scoped to the roster, because it is these titles that wrap. */
.mbtv-item .gv-row__aside{align-self:flex-start}
/* The menu rides WITH the pills rather than being a third item in the bar. Pushed to the
 * far end with margin-left:auto it dropped to a line of its own as soon as the pills grew
 * past the bar's width -- 502px of pills in a 515px bar leaves 13, and the trigger needs
 * 34 with its gap. Sharing their box keeps it on their line at any width.
 *
 * min-width:0 so the pills, not the trigger, are what gives way when space runs out. */
.mbtv-chipbar{display:flex;align-items:center;gap:var(--gv-space-2);flex:0 1 auto;min-width:0}
/* THE ⋯ ON THE RIGHT EDGE, where the other steps put theirs (Dom, 2026-09-22). Motions pins
   it with .gv-filterbar__more's own margin-left:auto and Speakers with the same rule on its
   trailing control; this row had nothing, so the menu sat wherever the chips happened to
   end. It showed the moment the chips went from five to three and the row stopped filling
   itself — the same gap that appeared on Speakers, from the same cause.

   The chipbar has to GROW for the auto margin to have anything to push into: at flex:0 1
   auto it is only as wide as its contents and there is no slack inside it. The chips stay
   beside the search, and Place Items stays beside the chips — those counts are what decide
   the run's scope, which is the whole reason it is in this row and not on the tab row.

   Only what is trailing: with no bulk actions to offer, mbTvRosterMenuHtml renders nothing
   and Place Items simply keeps its place rather than being flung to an edge on its own. */
.mbtv-panel .mbtv-chipbar{flex:1 1 auto}
.mbtv-panel .mbtv-chipbar > .mbtv-menu{margin-left:auto}
.mbtv-chipbar #mbtv-chips{min-width:0}
.mbtv-chipbar .gv-chips{flex-wrap:nowrap}
/* The wrapper, and only the wrapper. GV.menu returns the trigger button alone, and this
 * is what stops it stretching in the filter row (#430).
 *
 * __pop, __head and __n went with the hand-rolled menu they styled. They were not merely
 * similar to the design system's rules -- they were the same declarations: 17rem against
 * .gv-menu's 17rem, and .gv-menu__head and .gv-menu__n match theirs property for property
 * (the head adds only a font-family this inherited anyway). That is why the port is a
 * no-op to look at, and it was measured rather than assumed. */
.mbtv-menu{flex:0 0 auto}

/* An unanswered row carries an amber EDGE on a white fill, the way an unclaimed */
/* motion is drawn on the Votes tab (.mbmv-uc). Amber fill is reserved for picking */
/* a few flagged rows out of many (.mbtv-trow.flag) — before a run every row here is */
/* unanswered, so a tint would colour the default state rather than the exception. */
/* The stretch of recording this item occupies, as the Votes tab does it: the time */
/* IS the play control (.mbmv-ch .at), so a row carries one thing where it used to */
/* carry a timestamp and a Play button saying the same thing twice. */
/* The candidate list, opened in place under the row it belongs to. */
/* .mbtv-right is .gv-stage__side (#466). */
/* Stable wrappers so an item change can swap their contents without the video */
/* between them ever being re-parented (which would reload the iframe). */
#mbtv-above{display:flex;flex-direction:column;min-height:0;flex:0 1 auto}
#mbtv-below{flex:0 0 auto}
/* ── the question, and the answer ────────────────────────────────────────── */
/* The question and its actions render in the shared workspace toolbar card now */
/* (MW_TOOLBAR_CARD_CLASS / MW_TOOLBAR_BTN_CLASS) — the same bar Review Agenda and */
/* Speakers use — so this step has no toolbar styles of its own any more. */
/* Where the item currently runs. A statement, not a control. */
.mbtv-clock{font-size:12px;color:var(--mut2);font-variant-numeric:tabular-nums;margin-left:4px;white-space:nowrap}
/* THE OPEN ITEM'S TRANSCRIPT IS THE SIDE PANEL (#865): the Minutes tab's panel, .mbdoc-src
   (document.css, which loads on every page), drawn inside this column's own bordered box -- so
   the inner box drops its edge rather than draw a second one inside the first. The open row
   above it stays one line; it held the transcript itself until #865 (#598 put it there). */
.mbtv-tp > .mbtv-src{border:0;border-radius:0}
/* The open row's panel is empty now; its padding alone would leave a blank band under the row. */
.mbtv-item .gv-row__panel:empty{display:none}
/* SELECTED, NOT EXPANDED (#865, Vinny 2026-10-06). Nothing opens under a row, so no chevron
   promising it does: GV.row draws one on every row, and this roster alone hides it (a set-aside
   row's blank column with it, so the titles still line up). The row the panel is showing is
   tinted instead, the way a list marks the one picked. */
.mbtv-item .gv-row__caret{display:none}
.mbtv-item>.gv-row.is-open{background:var(--gv-brand-50)}
/* ITEM COLOURS (MBTV_ITEM_HUES in app.js), in the transcript of the item being checked. Every
   agenda item's stretch wears a hue of its own, by agenda position: muted for the items around
   the open one, turned up for the open one. Words more than one item claims wear a split band,
   one hue over the other. A categorical set, not the brand ramp -- six hues a clerk can tell
   apart at a glance -- so it is defined here as rgb triplets rather than --gv-* tokens, the way
   MBTV_COLORS carries the speaker colours. Each ink is the darkest stop of its hue, for the item's name tag.

   --mbtv-open is the open item's hue, set by an mbtv-open-hN class on #mbtv-tpb; each other
   item's words and carets carry an mbtv-hN class for theirs, and a shared word an mbtv-kN for
   its second. Placed BEFORE the .w.in rules below, which share the plain shades' specificity
   and must win in end-choosing mode, where the preview paints .in over a neighbour's words.
   This renders in the Document tab's modal too, outside .mbtv. */
.mbtv-tpb{--mbtv-h0:29,158,117;--mbtv-h0-ink:#085041;--mbtv-h1:127,119,221;--mbtv-h1-ink:#3C3489;--mbtv-h2:216,90,48;--mbtv-h2-ink:#712B13;--mbtv-h3:55,138,221;--mbtv-h3-ink:#0C447C;--mbtv-h4:212,83,126;--mbtv-h4-ink:#72243E;--mbtv-h5:186,117,23;--mbtv-h5-ink:#633806;--mbtv-open:90,147,38;--mbtv-open-ink:var(--gv-brand-900);--hue:90,147,38;--hue-ink:var(--gv-brand-900)}
.mbtv-open-h0{--mbtv-open:var(--mbtv-h0);--mbtv-open-ink:var(--mbtv-h0-ink)}
.mbtv-h0{--hue:var(--mbtv-h0);--hue-ink:var(--mbtv-h0-ink)}
.mbtv-k0{--hue2:var(--mbtv-h0)}
.mbtv-j0{--hue3:var(--mbtv-h0)}
.mbtv-open-h1{--mbtv-open:var(--mbtv-h1);--mbtv-open-ink:var(--mbtv-h1-ink)}
.mbtv-h1{--hue:var(--mbtv-h1);--hue-ink:var(--mbtv-h1-ink)}
.mbtv-k1{--hue2:var(--mbtv-h1)}
.mbtv-j1{--hue3:var(--mbtv-h1)}
.mbtv-open-h2{--mbtv-open:var(--mbtv-h2);--mbtv-open-ink:var(--mbtv-h2-ink)}
.mbtv-h2{--hue:var(--mbtv-h2);--hue-ink:var(--mbtv-h2-ink)}
.mbtv-k2{--hue2:var(--mbtv-h2)}
.mbtv-j2{--hue3:var(--mbtv-h2)}
.mbtv-open-h3{--mbtv-open:var(--mbtv-h3);--mbtv-open-ink:var(--mbtv-h3-ink)}
.mbtv-h3{--hue:var(--mbtv-h3);--hue-ink:var(--mbtv-h3-ink)}
.mbtv-k3{--hue2:var(--mbtv-h3)}
.mbtv-j3{--hue3:var(--mbtv-h3)}
.mbtv-open-h4{--mbtv-open:var(--mbtv-h4);--mbtv-open-ink:var(--mbtv-h4-ink)}
.mbtv-h4{--hue:var(--mbtv-h4);--hue-ink:var(--mbtv-h4-ink)}
.mbtv-k4{--hue2:var(--mbtv-h4)}
.mbtv-j4{--hue3:var(--mbtv-h4)}
.mbtv-open-h5{--mbtv-open:var(--mbtv-h5);--mbtv-open-ink:var(--mbtv-h5-ink)}
.mbtv-h5{--hue:var(--mbtv-h5);--hue-ink:var(--mbtv-h5-ink)}
.mbtv-k5{--hue2:var(--mbtv-h5)}
.mbtv-j5{--hue3:var(--mbtv-h5)}
.mbtv-l .tx .w.oth{background:rgba(var(--hue),.11)}
.mbtv-l .tx .w.oth:hover{background:rgba(var(--hue),.26)}
/* SHARED WORDS, A SPLIT BAND (design option 3 of 4, #598 review): the highlight top half in one
   item's colour and bottom half in the other's -- the open item's on top when it is one of them,
   otherwise whichever starts first. Replaced diagonal stripes, which read as noise on a long
   shared stretch. */
.mbtv-l .tx .w.in.sh{background:linear-gradient(to bottom,rgba(var(--mbtv-open),.48) 0 50%,rgba(var(--hue2),.2) 50% 100%)}
.mbtv-l .tx .w.oth.sh{background:linear-gradient(to bottom,rgba(var(--hue),.17) 0 50%,rgba(var(--hue2),.17) 50% 100%)}
.mbtv-l .tx .w.oth.sh:hover{background:rgba(var(--hue),.3)}
/* Three items on one word: a stripe each, in thirds (Dom, 2026-09-21). --hue3 from mbtv-jN. */
.mbtv-l .tx .w.in.sh.sh3{background:linear-gradient(to bottom,rgba(var(--mbtv-open),.48) 0 34%,rgba(var(--hue2),.2) 34% 67%,rgba(var(--hue3),.2) 67% 100%)}
.mbtv-l .tx .w.oth.sh.sh3{background:linear-gradient(to bottom,rgba(var(--hue),.17) 0 34%,rgba(var(--hue2),.17) 34% 67%,rgba(var(--hue3),.17) 67% 100%)}
/* Each other item's edges: the same caret this item's Start here / End here draw, in the item's
   own colour, the tag naming the item. Under this item's own carets where the two meet. The tag
   takes the pointer so its title can show a name the ellipsis cut short. */
.mbtv-caret.o{z-index:2}
.mbtv-caret.o i{background:rgb(var(--hue))}
.mbtv-caret.o b{max-width:22em;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--hue-ink);pointer-events:auto;cursor:default}
/* CROWDED CARETS, STACKED FLAGS (mbTvStackCarets). Where tags would cover each other, each one
   starts at its own cursor instead of centring on it, square on the corner by the cursor, and
   hangs --lvl rows further out on a stem in the cursor's colour. The spacer makes that visual
   line tall enough for the rows. */
.mbtv-caret.stk b{transform:none;left:-1px}
.mbtv-caret.s.stk b{bottom:calc(100% + .35em + var(--lvl) * 20px);border-bottom-left-radius:0}
.mbtv-caret.e.stk b{top:calc(100% + .5em + var(--lvl) * 20px);border-top-left-radius:0}
.mbtv-caret.stk::after{content:"";position:absolute;left:-1px;width:2px;height:calc(.15em + var(--lvl) * 20px);background:var(--mbtv-open-ink)}
.mbtv-caret.o.stk::after{background:rgb(var(--hue))}
.mbtv-caret.s.stk::after{bottom:calc(100% + .2em)}
.mbtv-caret.e.stk::after{top:calc(100% + .35em)}
.mbtv-stackpad{display:inline-block;width:0}
.mbtv-reading .mbtv-stackpad{display:none}
/* Selection has to be unmissable — not knowing which one is chosen was the */
/* single loudest complaint about the old screen. */
/* The 99%-of-the-time answer, marked as such rather than left to be found. */
/* search: step through matches, everything else stays put */
.mbtv-tpq .hits{flex:0 0 auto;font-size:10.5px;color:var(--mut2);font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
/* Read as instructions: body-size text in ink, the action itself in bold. Global tokens,
   because this also renders in the Document tab's dialog, outside .mbtv. */
.mbtv-tphint{padding:8px 12px;border-bottom:1px solid var(--gv-border);background:#fbfcfd;font-size:12.5px;line-height:1.45;color:var(--gv-ink-700)}
.mbtv-tphint b{color:var(--gv-brand-900);font-weight:600}
.mbtv-tphint .none{color:var(--gv-gold-fg);font-weight:600}
.mbtv-tphint.pick{background:var(--gv-brand-50)}
/* Choosing an end (mbTvPickHover): the pointer is the End here line, so it shows as the
   text I-beam -- the same thin vertical stroke as the caret -- and words drop their own
   hover tint: the only green on the page is the preview. */
.mbtv-tpb.mbtv-picking .mbtv-l .tx .w{cursor:text}
.mbtv-tpb.mbtv-picking .mbtv-l .tx .w:hover{background:transparent}
.mbtv-tpb.mbtv-picking .mbtv-l .tx .w.in,.mbtv-tpb.mbtv-picking .mbtv-l .tx .w.in:hover{background:rgba(var(--mbtv-open),.36)}
.mbtv-l.hit{background:#fffbea;box-shadow:inset 0 0 0 1.5px #f0d67a}
/* The speaker's name matched the search (app.js mbTvSearchHits; Dom, 2026-09-23). */
.mbtv-l.namehit .sp{background:var(--gv-gold-bg);border-radius:4px;box-shadow:0 0 0 2px var(--gv-gold-bg)}
.mbtv-tpnone{padding:24px;text-align:center;color:var(--mut2);font-size:12.5px;line-height:1.5}
/* the finish screen — a statement, not another toolbar */
/* One row, one height, one weight. These were three different sizes of button */
/* sitting at three different visual volumes, and the arrow on the primary was */
/* mid-green on dark green. */
/* Choosing: the answer is STAMPED, not zoomed. A scale pop made the whole row */
/* lurch, which is a lot of movement for a confirmation; this fills the row from */
/* the left, ticks the badge and lets the rest recede — and it takes long enough */
/* to actually be seen. */
@keyframes mbtvfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mbtvtick{from{opacity:0}to{opacity:1}}
.mbtv-more{flex:0 0 auto;border:1px dashed var(--line);background:#fff;color:var(--mut);font-size:12px;font-weight:600;padding:8px 12px;border-radius:8px;cursor:pointer;text-align:left}
.mbtv-more:hover{border-color:var(--g);color:var(--gd);background:var(--gl)}
/* the agenda panel — same shell as the transcript, so the side never jumps */
.mbtv-sidex{border:0;background:transparent;color:var(--mut2);font-size:11.5px;cursor:pointer;margin-left:auto;padding:0}
.mbtv-sidex:hover{color:var(--gd);text-decoration:underline}
.mbtv-ag{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 0;border-radius:7px;cursor:default;transition:.12s;min-width:0}
.mbtv-ag.go{cursor:pointer}
.mbtv-ag.go:hover{background:#f7f9fa}
.mbtv-ag .t{flex:1;min-width:0;font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbtv-ag .w{flex:0 0 auto;font-size:11px;color:var(--mut2)}
.mbtv-ag.here{background:var(--gl);box-shadow:inset 2px 0 0 var(--gd)}
.mbtv-ag.here .t{font-weight:700;color:var(--gd)}
.mbtv-ag.off .t{color:var(--mut2);text-decoration:line-through;text-decoration-color:#d1d5db}
/* Start here / End here, on every transcript line. Revealed on hover so the */
/* transcript still reads as a transcript. */
/* the decision row */
.mbtv-read i{font-style:normal;display:block;font-size:11px;color:var(--mut2);font-weight:500;margin-top:1px}
.mbtv-idline{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0;padding:1px 0 8px}
.mbtv-idline .kick{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--g);background:var(--gl);border:1px solid var(--gb);padding:3px 7px;border-radius:5px;flex:0 0 auto}
.mbtv-idline .kick.warn{color:var(--am);background:var(--aml);border-color:var(--amb)}
.mbtv-idline .kick.ooo{color:var(--au);background:var(--aul);border-color:var(--aub)}
.mbtv-idline .ttl{font-size:16px;font-weight:600;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
/* one line of evidence, in place of the card that used to sit here */
/* The video takes whatever height is left over — that is what keeps the step */
/* on one screen regardless of how tall the evidence banner turns out to be. */
/* Full width, fixed height — the 16:9-and-centred version left a gutter down the */
/* side of the column and threw the spacing out. Letterboxing inside a wide box */
/* is the lesser evil, and the clerk can just make the box taller. */
/* The video box is .gv-stage__vid and its empty state .gv-stage__noplay (#466). Two
   things changed in the move. The cap is 32vh, not 44vh -- the Motions and Document
   tabs' number, so the recording is the same height on all five steps rather than
   noticeably taller here. And the child is laid out in normal flow instead of
   position:absolute;inset:0, which is what stops a player escaping its column when a
   rule goes missing; document.css records that failure at length. */
/* scrubber */
/* Nothing placed yet — the bar is the control, so make it look like one. */
/* The items either side, shown but visibly not-yours, so the boundary you are */
/* judging has context instead of floating in space. */
/* Who is talking, and for how long — the shape of the discussion at a glance. */
/* transport + decision share ONE row, so the Yes button is always on screen */
.mbtv-actions{display:flex;align-items:center;gap:8px;margin-top:11px;flex:0 0 auto}
.mbtv-read{font-size:12.5px;color:var(--mut);margin-left:6px;white-space:nowrap}
.mbtv-read b{color:var(--ink);font-weight:600}
/* evidence / "couldn't place" banner — sits ABOVE the video, capped so a long */
/* candidate list scrolls inside itself instead of pushing the page taller */
/* Capped tight: this banner and the video compete for the same height, and a long */
/* candidate list would otherwise starve the video down to its 110px floor. */
.mbtv-ev{background:var(--gl);border-color:var(--gb)}
.mbtv-ev .mbtv-ch{color:var(--gd)}
.mbtv-ev .q{font-size:13.5px;line-height:1.45;color:#14532d;font-weight:500}
.mbtv-ev .w{font-size:11px;color:var(--g);margin-top:4px;font-weight:600}
/* Where else the meeting turned to something new. */
/* the question this screen is asking, in plain words */
/* where this item sits in the agenda — the items either side, clickable */
.mbtv-agenda{display:flex;align-items:center;gap:6px;flex:0 0 auto;min-width:0;max-width:46%}
.mbtv-agenda .lb{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mut2);flex:0 0 auto}
.mbtv-agenda button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;border-radius:6px;padding:3px 8px;cursor:pointer;color:var(--mut);font-size:11px;min-width:0;max-width:150px;transition:.14s}
.mbtv-agenda button:hover{border-color:var(--g);background:var(--gl);color:var(--gd)}
.mbtv-agenda button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbtv-agenda button s{text-decoration:none;color:var(--mut2);font-variant-numeric:tabular-nums;flex:0 0 auto}
.mbtv-agenda .none{font-size:11.5px;color:var(--mut2);font-style:italic}
/* transcript — fills the stage, scrolls internally */
.mbtv-tp{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;display:flex;flex-direction:column;flex:1 1 auto;min-height:180px}
.mbtv-tph{padding:var(--gv-space-2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--gv-space-2)}
/* The Minutes panel's size (Dom, 2026-09-23): see .mbmv-ph in votes.css. */
.mbtv-tph .mbtv-flip{padding:2px}
.mbtv-tph .mbtv-flip button{padding:4px 8px;font-size:var(--gv-text-xs);line-height:var(--gv-leading-tight);gap:6px}
.mbtv-tph .mbtv-flip button i{font-size:11px;opacity:1}
/* Search sits behind the header's magnifier, as on the other four steps. */
.mbtv-tph:not(.is-searching) + .mbtv-tpq{display:none}
/* A two-position switch. Both sides are always visible and always clickable, so */
/* the panel reads as something you flip rather than a page with an exit link. */
.mbtv-flip{display:inline-flex;background:#f1f3f5;border-radius:9px;padding:3px;gap:2px;flex:0 0 auto}
.mbtv-flip button{border:0;background:transparent;color:var(--mut);font-size:13px;font-weight:600;padding:6px 14px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.16s;white-space:nowrap}
.mbtv-flip button i{font-size:11px;opacity:.75}
.mbtv-flip button:hover{color:var(--ink2)}
.mbtv-flip button.on{background:#fff;color:var(--gd);box-shadow:0 1px 2px rgba(15,23,42,.10)}
.mbtv-flip button.on i{opacity:1}
.mbtv-tph .t{font-size:12.5px;font-weight:600}
.mbtv-tph .s{font-size:11.5px;color:var(--mut2);margin-left:auto}
.mbtv-tpb{overflow-y:auto;flex:1;padding:8px 6px 20px;scroll-behavior:smooth}
/* search over the whole recording */
.mbtv-tpq{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:#fbfcfd}
.mbtv-tpq i{color:var(--gv-text-disabled);font-size:11.5px;flex:0 0 auto}
.mbtv-tpq input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:12.5px;outline:none;color:inherit}
.mbtv-tpq input::-webkit-search-cancel-button{display:none}
.mbtv-tpq button{flex:0 0 auto;border:0;background:transparent;color:var(--gv-text-disabled);font-size:11px;cursor:pointer;padding:2px 4px}
.mbtv-tpq button:hover{color:var(--mut)}
.mbtv-hit{padding:9px 11px;border-bottom:1px solid #f1f3f5;cursor:pointer}
.mbtv-hit:hover{background:#f8fafc}
.mbtv-hit .hm{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.mbtv-hit .sp{font-size:11px;font-weight:600;color:var(--ink2);display:inline-flex;align-items:center;gap:5px}
.mbtv-hit .tm{font-size:10.5px;color:var(--mut2)}
.mbtv-hit .hp{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:6px;font-size:10.5px;font-weight:600;color:var(--g);padding:3px 8px;cursor:pointer;opacity:0;transition:opacity .1s}
.mbtv-hit:hover .hp{opacity:1}
.mbtv-hit .hp:hover{border-color:var(--g);background:#f0fdf4}
.mbtv-hit .ht{font-size:12.5px;line-height:1.45;color:var(--mut)}
.mbtv-hit mark{background:#fef08a;color:inherit;border-radius:2px;padding:0 1px}
.mbtv-l{display:flex;gap:11px;padding:8px 12px;border-radius:7px;cursor:pointer;transition:.12s}
/* The item's span is tinted green; everything outside it reads at full strength.
   It used to be the other way round (.out at 38% opacity, .in unstyled), which made
   the lines a clerk needs to read to correct a boundary the hardest ones to read. */
/* The tint sits on the WORDS, like a marker drawn through the text, not on the row --
   so the speaker column stays plain and a boundary that falls mid-line reads the same
   way as one that falls between lines. */
/* No horizontal padding or margin: the span must not move the text by even a fraction
   of a pixel, or the paragraph changes shape as the highlight moves (see mbTvWordsHtml). */
.mbtv-l .tx .w{position:relative;padding:1px 0;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mbtv-l .tx .w:hover{background:var(--gv-brand-100)}
.mbtv-l .tx .w.in{background:rgba(var(--mbtv-open),.46)}
.mbtv-l .tx .w.in:hover{background:rgba(var(--mbtv-open),.58)}
/* The carets at either end of the highlighted text: a thin line at the exact word the
   item begins and ends on, with a small tag -- "Start here" above the first, "End here"
   below the last, so neither tag lands on the wrapped line of text next to it. Zero
   width, so nothing reflows. Global tokens only: this also renders inside the Document
   tab's re-point dialog, which sits outside .mbtv where --gd and --line are empty. */
/* z-index: the words are positioned too and paint in DOM order, so without it the
   start caret sat UNDER the green of the word after it and all but vanished. */
.mbtv-caret{position:relative;display:inline-block;width:0;height:1em;vertical-align:baseline;z-index:3}
/* The name tags and carets are marks on the transcript, not part of it: a swept selection lights the words only (Dom, 2026-09-22). */
.mbtv-caret,.mbtv-caret *{-webkit-user-select:none;user-select:none}
.mbtv-caret i{position:absolute;left:-1px;top:-.25em;bottom:-.4em;width:2px;background:var(--gv-brand-900);border-radius:1px}
.mbtv-caret b{position:absolute;left:0;transform:translateX(-50%);font-size:9.5px;line-height:1;font-weight:600;color:var(--gv-ink-700);background:#fff;border:1px solid var(--gv-border);padding:3px 6px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.08);white-space:nowrap;pointer-events:none}
.mbtv-caret.s b{bottom:calc(100% + .35em)}
.mbtv-caret.e b{top:calc(100% + .5em)}
/* A start caret inside its word (mbTvWordsHtml): out of the line's flow, pinned to the word's left
   edge, so it wraps with the word and never gives the line a place to break. */
.mbtv-l .tx .w>.mbtv-caret{position:absolute;left:0;top:1px;bottom:1px;height:auto}
.mbtv-l .tx .w>.mbtv-caret i{top:-.1em;bottom:-.15em}
/* This item's own carets (mbTvOwnCaret): a label in the item's own colour, naming it where the
   other items' tags are about -- a label, not a button (#911): no border, no shadow, the item's
   tint on an opaque white so the line it hangs over doesn't run through the words, and bold ink
   on it so it stands out from them. A thicker cursor in the same ink. The name cuts short with "…". The pointer passes through it
   (pointer-events stay none): the tag hangs over the words next to it, and in end-choosing mode
   it follows the pointer, so catching it stopped the preview and the click. Other items' tags
   stay outlined, and their words a step quieter than this item's (C, Dom, 2026-09-21) -- still in
   their own colours, so the items not being edited stay told apart. */
.mbtv-caret:not(.o) i{background:var(--mbtv-open-ink);width:3px;left:-1.5px}
.mbtv-caret:not(.o) b{background:linear-gradient(rgba(var(--mbtv-open),.24),rgba(var(--mbtv-open),.24)),#fff;border:0;box-shadow:none;padding:3px 6px;border-radius:4px;font-size:10px;color:var(--mbtv-open-ink);font-weight:700;display:inline-flex;align-items:center;gap:4px}
.mbtv-caret:not(.o) b .nm{max-width:18em;overflow:hidden;text-overflow:ellipsis}
/* The label and its buttons as one row (.mbtv-caret__tag), starting at the cursor and running
   right -- not centred on it, which hung half the row over the speaker column. Stacked, it hangs
   off its stem like the other flags. mbTvPlaceOwnTag keeps it in the box: slid left just far
   enough for Undo to sit at the right edge (--mbtv-dx; the order never changes), or over to the
   line's other side (.is-flip-y, where the stem has nothing to reach). */
.mbtv-caret__tag{position:absolute;left:4px;display:flex;align-items:center;gap:0;white-space:nowrap;pointer-events:none;transform:translateX(var(--mbtv-dx,0px));max-width:var(--mbtv-max,none)}
.mbtv-caret.s .mbtv-caret__tag{bottom:calc(100% + .35em)}
.mbtv-caret.e .mbtv-caret__tag{top:calc(100% + .5em)}
/* Held to a width (--mbtv-max), the name gives way, never the buttons. With Save and Undo the
   label butts straight onto them, square where they meet, and as tall as they are (Vinny, 2026-10-08). */
.mbtv-caret__tag b{position:static;transform:none;flex:0 1 auto;min-width:0;overflow:hidden;align-self:stretch}
.mbtv-caret__tag b:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.mbtv-caret__tag b .nm{min-width:0}
.mbtv-caret__acts{flex:0 0 auto}
.mbtv-caret.stk .mbtv-caret__tag{left:-1px}
.mbtv-caret.s.stk .mbtv-caret__tag{bottom:calc(100% + .35em + var(--lvl) * 20px)}
.mbtv-caret.e.stk .mbtv-caret__tag{top:calc(100% + .5em + var(--lvl) * 20px)}
.mbtv-caret.s.is-flip-y .mbtv-caret__tag{bottom:auto;top:calc(100% + .5em)}
.mbtv-caret.e.is-flip-y .mbtv-caret__tag{top:auto;bottom:calc(100% + .35em)}
.mbtv-caret.is-flip-y::after{display:none}
/* Save and Undo, while a change waits (mbTvCaretHeld, #865): one joined pair of real buttons
   beside the label, never inside it (#911), so nothing about them reads as part of it. Pressable
   even where the tag isn't (it passes the pointer through while an end is being chosen), and
   never a drag handle. */
.mbtv-caret__acts{display:inline-flex;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.15);pointer-events:none}
.mbtv-caret__act{display:inline-flex;align-items:center;gap:3px;padding:3px 7px;font-size:9.5px;line-height:1;font-weight:600;font-family:inherit;color:#fff;background:var(--mbtv-open-ink);border:1px solid var(--mbtv-open-ink);border-radius:0;cursor:pointer;pointer-events:auto}
.mbtv-caret__act:first-child{border-radius:0}
.mbtv-caret__act:last-child{border-radius:0 4px 4px 0}
.mbtv-caret__act+.mbtv-caret__act{border-left-color:rgba(255,255,255,.45)}
.mbtv-caret__act .fas{font-size:8px}
.mbtv-caret__act:hover,.mbtv-caret__act:focus-visible{filter:brightness(.85);outline:none}
/* Dragging an edge (mbTvEdgeDragStart, Dom 2026-09-24): this item's own tag and cursor can be
   picked up -- except while choosing an end, where the tag rides the pointer (above) -- with a
   wider invisible grip on the 3px cursor. While dragging, nothing in the transcript catches the
   pointer but the words under it, and nothing selects. */
.mbtv-tpb:not(.mbtv-picking):not(.mbtv-reading) .mbtv-caret:not(.o) b,
.mbtv-tpb:not(.mbtv-picking):not(.mbtv-reading) .mbtv-caret:not(.o) i{pointer-events:auto;cursor:col-resize;touch-action:none}
.mbtv-tpb:not(.mbtv-picking):not(.mbtv-reading) .mbtv-caret:not(.o) i::before{content:"";position:absolute;top:0;bottom:0;left:-5px;right:-5px}
.mbtv-tpb.mbtv-dragging,.mbtv-tpb.mbtv-dragging *{cursor:col-resize !important;-webkit-user-select:none;user-select:none}
.mbtv-tpb.mbtv-dragging .mbtv-caret *{pointer-events:none !important}
/* No glide while dragging: .mbtv-tpb scrolls smoothly, and a smooth scroll started every frame
   at the edge stuttered; the lines' hover fade lagged behind the pointer the same way. */
.mbtv-tpb.mbtv-dragging{scroll-behavior:auto !important}
.mbtv-tpb.mbtv-dragging .mbtv-l{transition:none}
/* The line the player is on: a stripe down its left edge, and nothing else (Vinny, 2026-10-06,
   #873). #594 took the mark away because a green fill on the line competed with the green on the
   words, which is the item. That left a click moving the recording and the clock with nothing on
   the line to say so, here and in the Minutes panel, while every other step marks it. The stripe
   is the mark Speakers and Motions draw (.mbmv-ln.cur, votes.css) without their fill, so the
   item's words keep the only fill on the line. mbTvFollow sets .cur. A search match on the
   current line keeps its gold ring as well. */
.mbtv-tpb .mbtv-l.cur{box-shadow:inset 2px 0 0 var(--gv-brand-900)}
.mbtv-tpb .mbtv-l.hit.cur{box-shadow:inset 2px 0 0 var(--gv-brand-900),inset 0 0 0 1.5px #f0d67a}
.mbtv-l .tx .w.pick{background:var(--gv-brand-200);box-shadow:0 0 0 1px var(--gv-brand-200);border-radius:3px}
.mbtv-wpop{position:absolute;left:0;top:100%;margin-top:4px;z-index:6;display:flex;gap:4px;padding:4px;background:#fff;border:1px solid var(--gv-border);border-radius:7px;box-shadow:0 4px 14px rgba(0,0,0,.12);white-space:nowrap;cursor:default}
.mbtv-wpop.up{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}
.mbtv-wpop button{border:1px solid var(--gv-border);background:#fff;border-radius:6px;font-size:10.5px;font-weight:600;padding:3px 8px;cursor:pointer}
.mbtv-wpop .s{color:var(--gv-brand-900)}
.mbtv-wpop .s:hover{border-color:var(--gv-brand-900);background:var(--gv-brand-50)}
/* ON THE WORDS, IN THE OPEN ITEM'S COLOUR (Vinny, 2026-10-06). Start here, End here and Use
   selection plant this item's own tags, which wear its ink (--mbtv-open-ink, from the mbtv-open-hN
   class on the box), so the buttons do too. Start was green and End gold since #594: a start/end
   coding nothing else on the screen kept, in the gold the app keeps for AI. Scoped to the
   transcript box, so the Minutes panel's "Edit transcript reference" tray (.mbdoc-src__ask, outside
   it) keeps the green rules above. */
.mbtv-tpb .mbtv-wpop .s,.mbtv-tpb .mbtv-wpop .e{color:var(--mbtv-open-ink)}
.mbtv-tpb .mbtv-wpop .s:hover,.mbtv-tpb .mbtv-wpop .e:hover{border-color:var(--mbtv-open-ink);background:rgba(var(--mbtv-open),.1)}
.mbtv-wpop .tnum{color:var(--gv-text-subtle);font-weight:500;margin-left:4px}
/* WHO SPOKE: one column for every transcript panel (#878). Discussions and Minutes
   (.mbtv-l) and Recording, Speakers and Motions (.mbmv-ln) build the cell in mbTxSpeakerHtml,
   and these rules are its only look. votes.css and document.css used to carry their own, which
   is how one tab cut "Commissioner" to "Commissio…" while the next wrapped it over three lines
   (#821).
   Until the clerk drags it, 132px at the panel's usual width, so "Commissioner Smith" and "County
   Judge Duke" fit beside the square; narrower panels give it a third of the line, never less than
   86px. The clerk can drag its edge (#896), and that width is --mbtx-who, written on <html> by
   mbTxColSet and shared by all five tabs. It is set at runtime and must never be DECLARED in a
   stylesheet: a declaration on any element here would beat the inherited value and the drag would
   silently do nothing, which is exactly how --gv-stage-side once failed (check-design-tokens.js).
   Whatever was set, the column stays between 64px (the square and a few letters) and half the
   line, so a width chosen on a wide panel can't crowd the speech out of a narrow one.
   The line height is set here, not inherited, because the Minutes page carries a taller one.
   Relative, for the grip on its edge.
   Not selectable: sweeping out a stretch of speech (mbTvSelectionPick) shouldn't pick up
   the speaker names and times in the margin along the way. */
.mbtv-l .m,.mbmv-ln .m{flex:0 0 auto;position:relative;width:clamp(64px,var(--mbtx-who,clamp(86px,34%,132px)),50%);min-width:0;line-height:1.3;user-select:none;-webkit-user-select:none}
/* THE COLUMN'S EDGE (#896): a strip down the gap between the name and the speech, the whole height
   of the line, on every line, so the boundary can be grabbed anywhere down the panel. Dragging is
   mbTxColDragStart's. The hairline inside it shows on the line under the pointer, and on every
   line at once while a drag is live (.mbtx-col-dragging, on <body>) or while the keyboard's
   handle has focus, so the clerk sees the one boundary they are moving. The lines' gaps are 10px
   (Motions) and 11px (Discussions); 9px out and 8px wide sits in the middle of both, clear of
   the speech.
   Its hover is the recording rail's (.gv-stage__rail, components.css): the same green, arriving
   over the same --gv-dur-fast, and the keyboard's focus is the focus ring's colour and width, so
   the two edges a clerk can drag on these tabs answer the pointer alike. */
.mbtx-grip{position:absolute;top:-8px;bottom:-8px;right:-9px;width:8px;cursor:col-resize;touch-action:none}
.mbtx-grip::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%);background:transparent;transition:background var(--gv-dur-fast) var(--gv-ease)}
.mbtx-grip:hover::after,.mbtx-col-dragging .mbtx-grip::after{background:var(--gv-brand-600)}
.mbtx-col-dragging,.mbtx-col-dragging *{cursor:col-resize !important;-webkit-user-select:none;user-select:none}
/* The same boundary for a clerk without a pointer: one separator, the first thing in the
   transcript (mbTxColKeyHtml), reached with Tab and moved with the arrow keys. Sticky and no
   height, so it is always in view at the top of the panel and focusing it never scrolls the
   transcript. Its focus ring is the boundary itself, lit on every line after it. A sibling
   selector rather than a class set on focus: a redraw that replaces the handle takes its focus
   with it, and a class would have stayed behind. */
.mbtx-colkey{position:sticky;top:0;display:block;height:0;overflow:hidden;outline:none}
.mbtx-colkey:focus~* .mbtx-grip::after{width:var(--gv-focus-width);background:var(--gv-focus-color)}
/* THE SPEAKER FILTER (#904): other people's lines fold into one row a run (mbTxGapHtml), on all five
   tabs. A slim dashed row the width of the line, quieter than any line, so the chosen people's
   speech is what reads; a fold is something to open, not something to read. Not selectable, so
   sweeping out a stretch of speech doesn't pick up "6 lines from 3 others".
   It carries the marks a line would: the playhead's stripe (.cur, as .mbtv-l.cur), the gold of a
   search match folded inside it (.has-hits), and on Discussions and Minutes the open item's colour
   where the item's stretch runs through it (.in, .part), so a stretch reads as one through a fold.
   An open fold's lines hang under it on a dashed rule (.is-ctx), at full strength: they are
   context, and dimming them would make them harder to read than the lines around them. */
.mbtx-gap{display:flex;align-items:center;gap:var(--gv-space-2);width:100%;margin:2px 0;padding:3px 10px;border:1px dashed var(--gv-border);border-radius:var(--gv-radius-sm);background:transparent;color:var(--gv-text-subtle);font:inherit;font-size:var(--gv-text-xs);text-align:left;cursor:pointer;user-select:none;-webkit-user-select:none}
.mbtx-gap:hover{background:var(--gv-surface-sunk);border-color:var(--gv-border-strong);color:var(--gv-text)}
.mbtx-gap:focus-visible{outline:var(--gv-focus-width) solid var(--gv-focus-color);outline-offset:1px}
.mbtx-gap__caret{font-size:var(--gv-text-2xs);transition:transform var(--gv-dur-fast) var(--gv-ease)}
.mbtx-gap.is-open .mbtx-gap__caret{transform:rotate(90deg)}
.mbtx-gap__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbtx-gap__hits{flex:0 0 auto;padding:0 6px;border-radius:var(--gv-radius-sm);background:#fffbea;box-shadow:inset 0 0 0 1px #f0d67a;color:var(--gv-gold-fg);font-weight:var(--gv-weight-semibold)}
.mbtx-gap.cur{box-shadow:inset 2px 0 0 var(--gv-brand-900)}
.mbtx-gap.hit-cur{background:#fffbea;border-color:#f0d67a}
.mbtv-tpb .mbtx-gap.in{background:rgba(var(--mbtv-open),.14)}
.mbtv-tpb .mbtx-gap.part{background:linear-gradient(90deg,rgba(var(--mbtv-open),.14),transparent)}
.mbmv-pb .mbtx-gap.in{background:rgba(var(--mbmv-open),.2)}
.mbtv-l.is-ctx,.mbmv-ln.is-ctx{margin-left:6px;border-left:1px dashed var(--gv-border-strong);border-top-left-radius:0;border-bottom-left-radius:0}
@media (prefers-reduced-motion:reduce){.mbtx-gap__caret{transition:none}}
/* The button beside the magnifier, lit with a count while something is picked, and the strip under
   the header that says what is showing (mbTxFltBtnHtml, mbTxFltStripHtml). */
.mbtx-fltbtn{position:relative}
.mbtx-fltbtn__n{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--gv-brand-900);color:#fff;font-size:9.5px;font-weight:700;line-height:15px;text-align:center}
.mbtx-flt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gv-space-1) var(--gv-space-2);padding:6px 12px;border-bottom:1px solid var(--gv-border);background:var(--gv-surface-sunk);font-size:var(--gv-text-xs);color:var(--gv-text-subtle)}
.mbtx-flt[hidden]{display:none}
.mbtx-flt .gv-chips{gap:var(--gv-space-1)}
.mbtx-flt__n{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.mbtx-flt.is-suspended{color:var(--gv-text)}
/* The checklist (mbTxFltToggle): the picker's parts on <body>, as the Dashboard's column filter.
   A group's row is its heading and its tick at once; its people sit under it, indented. */
.mbtx-flt__menu{position:fixed;width:17rem}
.mbtx-flt__top{display:flex;align-items:center;justify-content:space-between;gap:var(--gv-space-2);padding-right:var(--gv-space-2)}
.mbtx-flt__top [hidden]{display:none}
.mbtx-flt__list{max-height:20rem}
.mbtx-flt__grp{font-weight:var(--gv-weight-semibold);color:var(--gv-text)}
.mbtx-flt__opt{padding-left:calc(var(--gv-space-3) + 18px)}
.mbtx-flt__opt:has(input:disabled){color:var(--gv-text-subtle);cursor:default}
.mbtx-flt__foot{margin:0;padding:6px 12px 8px;border-top:1px solid var(--gv-border);font-size:var(--gv-text-xs);color:var(--gv-text-subtle)}
.mbtx-flt__none{margin:0;padding:10px 12px;font-size:var(--gv-text-xs);color:var(--gv-text-subtle)}
.mbtv-caret,.mbtv-wpop{user-select:none;-webkit-user-select:none}
/* One line. A name that doesn't fit ends in "…", and the whole of it is the name's tooltip
   (GV.tip, only when it is cut: #896).
   It used to wrap, so a long name stood three lines tall beside one line of speech. Before that,
   as a flex row, "Selectwoman" ran out of the column and under the speech, because nothing in
   the row could shrink. Now the name is its own .spn that shrinks and clips, and the square
   beside it doesn't. Inline-flex, so the search's gold ring (.namehit) hugs the name rather
   than filling the column. */
.mbtv-l .sp,.mbmv-ln .sp{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-width:0;vertical-align:top;font-size:11px;font-weight:700;color:var(--ink2)}
.mbtv-l .spn,.mbmv-ln .spn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spd{width:7px;height:7px;border-radius:2px;flex:0 0 auto;display:inline-block}
.mbtv-l .tm,.mbmv-ln .tm{font-size:10px;color:var(--mut2);display:block;margin-top:2px;font-variant-numeric:tabular-nums}
.mbtv-l .tx{font-size:13px;color:var(--ink2);line-height:1.55;flex:1}
/* decide */
.mbtv-kbd{font-size:11px;color:var(--mut2);white-space:nowrap}
.mbtv-kbd kbd{font-family:inherit;font-size:10.5px;font-weight:600;background:#f1f3f5;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:2px 6px;color:var(--mut)}
/* summary table — every placement, scannable, each row a way back in */
.mbtv-trow{display:flex;align-items:center;gap:13px;width:100%;padding:10px 15px;border:none;border-bottom:1px solid #f1f3f5;background:#fff;cursor:pointer;text-align:left;transition:.12s}
.mbtv-trow:last-child{border-bottom:none}
.mbtv-trow:hover{background:#f7f9fa}
.mbtv-trow.flag{background:var(--aml)}
.mbtv-trow.flag:hover{background:#faf2dc}
.mbtv-trow .tm{font-size:12px;font-weight:600;color:var(--mut);width:56px;flex:0 0 auto}
.mbtv-trow .ti{font-size:13.5px;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbtv-trow .tg{font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:5px;flex:0 0 auto;white-space:nowrap}
.mbtv-trow .tg.ok{color:var(--gd);background:var(--gl)}
.mbtv-trow .tg.warn{color:var(--am);background:var(--aml)}
.mbtv-trow .tg.quiet{color:var(--mut2);background:#f1f3f5;font-weight:600}
.mbtv-trow .tg.ooo{color:var(--au);background:var(--aul)}
/* ── the meeting on one bar ──────────────────────────────────────────────── */
/* The same component on the loading screen, the summary and the review step, */
/* where it pins to the top. Sized so it costs one thin line of the screen. */
/* Amber over the item's own colour: the one thing worth spotting from across */
/* the bar is which stretches still need a human. */
/* A flat amber wash over the item's colour, not diagonal stripes — the stripes */
/* read as a hazard pattern and made a calm bar look like a construction sign. */
/* background-IMAGE, so it layers over the inline background-color. */
/* Where the board changed its running order — marked ON the timeline, since */
/* "when did they jump" is a question about the clock, not about a list. */
/* The track clips its overflow, so the marker has to live INSIDE it — hung off */
/* the top edge, where it reads against whatever colour the item happens to be. */
/* one thin line of status, instead of a screenful of prose */
.mbtv-oneline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 0 4px}
.mbtv-oneline h3{font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0}
.mbtv-oneline .dot{width:4px;height:4px;border-radius:50%;background:#d1d5db;flex:0 0 auto}
.mbtv-oneline .st{font-size:15px;color:var(--mut)}
.mbtv-oneline .st b{font-weight:600;color:var(--ink)}
.mbtv-oneline .st.warn b{color:var(--am)}
.mbtv-oneline .st.ooo b{color:var(--au)}
.mbtv-oneline .acts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* Empty state: the bar you are about to fill, so the starting screen looks like */
/* a screen rather than a blank page with one button on it. */
.mbtv-facts{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;margin-top:14px}
.mbtv-facts div{flex:1 1 130px;padding:12px 18px;border-right:1px solid #f1f3f5}
.mbtv-facts div:last-child{border-right:none}
.mbtv-facts .v{font-size:17px;font-weight:600;letter-spacing:-.02em;display:block;color:var(--ink)}
.mbtv-facts .k{font-size:10.5px;color:var(--mut2);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-top:2px;display:block}
.mbtv-steps{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.mbtv-steps div{flex:1 1 220px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:13px 15px}
.mbtv-steps i{color:var(--g);font-size:12px}
.mbtv-steps b{display:block;font-size:13px;font-weight:600;margin:7px 0 3px;color:var(--ink)}
.mbtv-steps span{font-size:12px;color:var(--mut);line-height:1.45}
/* live run: progress bar + what it is noticing as it goes */
.mbtv-prog{height:8px;border-radius:4px;background:#eef0f2;overflow:hidden;margin:8px 0 0}
.mbtv-prog i{display:block;height:100%;background:var(--gd);border-radius:4px;transition:width .5s cubic-bezier(.22,1,.36,1)}
.mbtv-feed{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:#fff;max-height:min(58vh,620px);overflow-y:auto}
.mbtv-fl{display:flex;align-items:flex-start;gap:12px;padding:13px 17px;border-bottom:1px solid #f4f5f7;font-size:14.5px;color:var(--ink2);line-height:1.5;animation:mbtvin .28s ease both}
.mbtv-fl:last-child{border-bottom:none}
.mbtv-fl .ic{flex:0 0 auto;width:18px;text-align:center;font-size:12px;color:var(--mut2);padding-top:3px}
.mbtv-fl.placed .ic{color:var(--g)}
.mbtv-fl.found .ic{color:var(--g)}
.mbtv-fl.reorder{background:var(--aul)}
.mbtv-fl.reorder .ic{color:var(--au)}
.mbtv-fl.warn{background:var(--aml)}
.mbtv-fl.warn .ic{color:var(--am)}
.mbtv-fl .tm{margin-left:auto;flex:0 0 auto;font-size:12px;color:var(--mut2);font-variant-numeric:tabular-nums}
@keyframes mbtvin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* the out-of-order question, asked once, with the words that prompted it */
.mbtv-load{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--mut2);padding:12px 0 0}
.mbtv-spin{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--gd);border-radius:50%;animation:mbtvspin .7s linear infinite;flex:0 0 auto}
@keyframes mbtvspin{to{transform:rotate(360deg)}}
/* Narrow: drop the transcript column rather than stacking it, so the video and */
/* the Yes button still fit one screen. */
/* Stacking is .gv-stage's, at one shared 1180px for all five steps (#466). This was
   1040px, and it also HID the transcript panel below that width -- the Motions tab kept
   its panel and merely gave it a floor. Keeping the hide would have left a band between
   1040 and 1180 where this screen stacked with its panel and then lost it, so the panel
   now survives at every width, the way the other two steps' panels always have. */
@media(max-width:1180px){.mbtv-tp{min-height:300px}}
/* Short laptop screens: claw height back from the chrome so the video stays */
/* usable rather than collapsing to its floor. */
/* The short-viewport cap is gone with .mbtv-vid: 34vh existed to pull a 44vh video back
   on a laptop, and the shared box is 32vh at every height (#466). */

/* ---------- "Default to Not Discussed" — the org's rules, edited from the toolbar ----- */
/* A three-column list: what the rule is, which boards it applies to, and the one control
   that belongs to it. NOTE: these use the global --gv-* tokens, not the --ink2/--mut2
   aliases the rest of this file uses. Those aliases are declared on `.mbtv` (line 27) and
   a GV modal is appended to document.body — OUTSIDE .mbtv — so every one of them would
   resolve to nothing here and the rows would render unstyled. See mbTvDefaultsModal. */
/* Give the panel a floor so a two-rule org does not get a letterbox. It is a settings
   screen, and one that resizes every time a row is added reads as unstable. Capped in vh
   so a short laptop screen still fits the whole dialog, and the room underneath is where
   an open board panel goes instead of being clipped. */
#mbtv-defaults .gv-modal__panel{min-height:min(30rem,82vh)}
.mbtv-def-lede{font-size:var(--gv-text-sm);color:var(--gv-ink-700);line-height:1.5;margin:0 0 9px}
/* The reassurance, and the scope. Quieter than the sentence above it — a clerk reads the
   first to know what the list is, and this one only when she wonders what it costs her. */
.mbtv-def-lede--note{color:var(--gv-text-subtle);margin-bottom:var(--gv-space-4)}
.mbtv-def-tbl{border:var(--gv-border-width) solid var(--gv-border);border-radius:var(--gv-radius-md);overflow:visible}
.mbtv-def-hd,.mbtv-def-r{display:grid;grid-template-columns:minmax(0,1fr) 72px 76px;align-items:center;gap:10px}
.mbtv-def-hd{padding:7px 13px;border-radius:7px 7px 0 0;font-size:var(--gv-text-3xs);font-weight:var(--gv-weight-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--gv-text-subtle);background:var(--gv-surface-sunk);border-bottom:var(--gv-border-width) solid var(--gv-border)}
.mbtv-def-r{padding:var(--gv-space-2) 13px;border-bottom:var(--gv-border-width) solid var(--gv-border)}
.mbtv-def-title{font-size:var(--gv-text-sm);color:var(--gv-text);min-width:0;overflow-wrap:anywhere}
/* The preset's reasoning lives here rather than in a paragraph under every row: the list
   stays scannable, and the clerk who wants the why can ask for it. */
.mbtv-def-help{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:3px;width:15px;height:15px;border:var(--gv-border-width) solid var(--gv-border);border-radius:var(--gv-radius-full);background:transparent;color:var(--gv-text-subtle);font-size:9.5px;line-height:1;cursor:help;padding:0}
.mbtv-def-help:hover,.mbtv-def-help.is-open{color:var(--gv-text);border-color:var(--gv-text-subtle);background:var(--gv-surface-sunk)}
/* The blurb. Shown on hover, on keyboard focus, and pinned by a click (.is-open) — a
   title attribute is none of those on a touch screen, and cannot hold two paragraphs. */
.mbtv-def-helpw{position:relative;display:inline-block;vertical-align:middle}
.mbtv-def-tip{display:none;position:absolute;z-index:6;top:calc(100% + 6px);left:-8px;width:min(300px,72vw);padding:10px var(--gv-space-3);border:var(--gv-border-width) solid var(--gv-border);border-radius:var(--gv-radius-md);background:var(--gv-surface);box-shadow:var(--gv-shadow-lg);font-size:var(--gv-text-xs);font-weight:var(--gv-weight-normal);line-height:1.5;color:var(--gv-ink-700);text-transform:none;letter-spacing:normal;white-space:normal}
.mbtv-def-tip-p{display:block}
.mbtv-def-tip-p+.mbtv-def-tip-p{margin-top:var(--gv-space-2)}
.mbtv-def-helpw:hover .mbtv-def-tip,.mbtv-def-helpw:focus-within .mbtv-def-tip,.mbtv-def-help.is-open+.mbtv-def-tip{display:block}

/* the exceptions to the heading rule: a label beside the ?, and its small editor */
.mbtv-def-exc{display:inline-flex;align-items:center;gap:4px;margin-left:var(--gv-space-2);padding:1px var(--gv-space-1);border:0;background:transparent;font-size:var(--gv-text-xs);font-weight:var(--gv-weight-semibold);color:var(--gv-brand-fg);cursor:pointer;border-radius:5px;vertical-align:middle}
.mbtv-def-exc:hover{background:var(--gv-brand-bg)}
.mbtv-def-exc i{font-size:9px}
/* overflow VISIBLE, not hidden: the header carries a ? whose blurb is absolutely
   positioned, and hidden would clip it to the panel. The corners are kept by giving the
   header and the add row their own radii instead. */
.mbtv-def-excpop{position:fixed;z-index:var(--gv-z-toast);width:min(340px,86vw);border:var(--gv-border-width) solid var(--gv-border);border-radius:10px;background:var(--gv-surface);box-shadow:var(--gv-shadow-xl)}
/* Just the ? — the blurb behind it is the panel's explanation, so there is no label text
   here to inherit from. The dialog's own aria-label names it for a screen reader. */
.mbtv-def-exch{display:flex;align-items:center;padding:7px 11px;border-radius:9px 9px 0 0;border-bottom:var(--gv-border-width) solid var(--gv-border);background:var(--gv-surface-sunk)}
.mbtv-def-excl{max-height:220px;overflow-y:auto}
.mbtv-def-excr{display:flex;align-items:center;gap:10px;padding:var(--gv-space-2) 9px var(--gv-space-2) 13px;border-bottom:var(--gv-border-width) solid var(--gv-border);background:var(--gv-surface)}
.mbtv-def-excw{flex:1 1 auto;min-width:0;font-size:var(--gv-text-sm);color:var(--gv-text);overflow-wrap:anywhere}
/* What this word catches on the meeting behind the modal — the reason to open this panel
   before committing to a word, rather than after. */
.mbtv-def-excn{flex:0 0 auto;font-size:var(--gv-text-2xs);color:var(--gv-text-subtle);white-space:nowrap}
.mbtv-def-excempty{padding:var(--gv-space-3) 13px;margin:0;font-size:var(--gv-text-xs);color:var(--gv-text-subtle);line-height:1.5}
.mbtv-def-excadd{display:flex;gap:8px;align-items:center;padding:9px 13px;border-radius:0 0 9px 9px;background:var(--gv-surface-sunk)}
.mbtv-def-excadd .gv-input{flex:1 1 auto;min-width:0;font-size:var(--gv-text-xs);padding:5px 9px}
.mbtv-def-act{display:flex;justify-content:flex-end;align-items:center}
.mbtv-def-bcell{display:flex;justify-content:flex-end}
.mbtv-def-tag{font-size:9.5px;font-weight:var(--gv-weight-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--gv-text-subtle);background:var(--gv-surface-sunk);border-radius:5px;padding:2px 6px;white-space:nowrap}
.mbtv-def-x{width:var(--gv-control-xs);height:var(--gv-control-xs);border:0;background:transparent;color:var(--gv-text-subtle);border-radius:var(--gv-radius-sm);cursor:pointer;font-size:var(--gv-text-xs)}
.mbtv-def-x:hover{background:var(--gv-danger-bg);color:var(--gv-danger-fg)}

/* The built-in rule's switch, where the board scope used to be. Only that rule has one —
   a title row is on by definition, and removing it is how you turn it off. */
.mbtv-def-sw{display:inline-flex;align-items:center;gap:7px;padding:3px var(--gv-space-1);border:0;background:transparent;cursor:pointer;font-size:var(--gv-text-xs);font-weight:var(--gv-weight-semibold);color:var(--gv-text-subtle)}
.mbtv-def-sw.is-on{color:var(--gv-brand-fg)}
.mbtv-def-swt{position:relative;flex:0 0 auto;width:30px;height:17px;border-radius:9px;background:var(--gv-border-strong);transition:background var(--gv-dur-base) var(--gv-ease)}
.mbtv-def-swt::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--gv-surface);box-shadow:var(--gv-shadow-sm);transition:transform var(--gv-dur-base) var(--gv-ease)}
.mbtv-def-sw.is-on .mbtv-def-swt{background:var(--gv-brand-700)}
.mbtv-def-sw.is-on .mbtv-def-swt::after{transform:translateX(13px)}
.mbtv-def-sw:focus-visible{outline:var(--gv-focus-width) solid var(--gv-focus-color);outline-offset:2px;border-radius:var(--gv-radius-sm)}
.mbtv-def-scope.is-ro{font-size:var(--gv-text-xs);color:var(--gv-text-subtle)}

/* Reads as the table's footer rather than a control floating under it. */
.mbtv-def-add{display:flex;gap:var(--gv-space-2);align-items:center;padding:9px 13px;background:var(--gv-surface-sunk);border-radius:0 0 7px 7px}
/* The add field matches the rows it sits under, not the app's default input size. */
.mbtv-def-add .gv-input{font-size:var(--gv-text-xs);padding:5px 9px}
.mbtv-def-add .gv-input{flex:1 1 auto;min-width:0}
/* Narrow: the boards column is the one that can afford to shrink. */
@media(max-width:460px){.mbtv-def-hd,.mbtv-def-r{grid-template-columns:minmax(0,1fr) 60px 68px;gap:8px}}

/* ---------- The roster toolbar's icon-only defaults button ---------------------------- */
/* .gv-btn--icon's own size is 22px — right for a ghost control tucked inside a row, four
   short of the toolbar's own buttons. Square at --gv-control-md so it lines up with
   Place Items beside it rather than floating short in the middle of the row. */
/* .gv-btn.mbtv-defaults-btn, not .mbtv-defaults-btn alone: .gv-btn.gv-btn--icon sets the
   size at two classes, so a single class loses however late this file loads. */
.gv-btn.mbtv-defaults-btn{width:var(--gv-control-md);min-width:var(--gv-control-md);height:var(--gv-control-md)}
/* No tooltip rules. This button labels itself with `title`, the way every other icon-only
   button in the app does -- the roster's own ... menu right beside it included. It used to
   draw its own ::after from its own grey at its own size and timing, which is how one
   control on this toolbar ended up looking like it came from a different app.
   position:relative went with it: nothing is anchored to this button any more. */
/* The same glyph, named in the sentence on the left so the unlabelled button is findable.
   Inherits the line's size; ink-700 to match the bolded words it sits between, since a
   muted-grey icon reads as decoration and this one is a pointer at a control. */
/* The bar sentence's live references and its second line moved to components.css
 * (#448): .gv-barlink / .gv-barlink--icon / .gv-barlink__icon / .gv-subline. The
 * Document tab wanted the same treatment, and a second copy under a second prefix is
 * how this app ended up with three chip sets and four transports. Drawn from the
 * component now; nothing here styles it. */