/* 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}
.mbtv-roster{display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;flex:1 1 auto;padding-right:2px}
/* 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. Bottom
   padding stays — that gap is doing work, separating the controls from the list. */
.mbtv-filter{display:flex;align-items:center;gap:var(--gv-space-3);flex-wrap:nowrap;overflow-x:auto;padding:0 0 var(--gv-space-3)}
.mbtv-filter .mbtv-rq{flex:1 1 8rem;min-width:6rem;max-width:22rem}
/* 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}
.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 choices. A lettered list, because that is what a multiple choice looks */
/* like and the letter is also the keyboard shortcut. */
.mbtv-picks{display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;flex:0 1 auto;padding-right:2px}
/* 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}
.mbtv-tphint{padding:6px 12px;border-bottom:1px solid var(--line);background:#fbfcfd;font-size:11px;color:var(--mut2)}
.mbtv-tphint b{color:var(--gd);font-weight:700}
.mbtv-l.hit{background:#fffbea;box-shadow:inset 0 0 0 1.5px #f0d67a}
.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. */
.mbtv-edge{flex:0 0 auto;display:flex;gap:5px;align-self:flex-start;opacity:0;transition:opacity .1s}
.mbtv-l:hover .mbtv-edge,.mbtv-hit:hover .mbtv-edge{opacity:1}
.mbtv-edge button{border:1px solid var(--line);background:#fff;border-radius:6px;font-size:10.5px;font-weight:600;padding:3px 8px;cursor:pointer;white-space:nowrap}
.mbtv-edge .s{color:var(--gd)}
.mbtv-edge .s:hover{border-color:var(--gd);background:var(--gl)}
.mbtv-edge .e{color:var(--am)}
.mbtv-edge .e:hover{border-color:var(--am);background:var(--aml)}
.mbtv-hit .hm .mbtv-edge{margin-left:auto}
.mbtv-div .cp a{color:inherit;text-decoration:underline;cursor:pointer}
/* 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:10px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
/* 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}
.mbtv-l:hover{background:#f7f9fa}
.mbtv-l.cur{background:var(--gl)}
.mbtv-l.out{opacity:.38}
.mbtv-l .m{flex:0 0 auto;width:70px}
.mbtv-l .sp{font-size:11px;font-weight:700;line-height:1.3;display:flex;align-items:center;gap:5px;color:var(--ink2)}
.spd{width:7px;height:7px;border-radius:2px;flex:0 0 auto;display:inline-block}
.mbtv-l .tm{font-size:10px;color:var(--mut2);display:block;margin-top:2px}
.mbtv-l .tx{font-size:13px;color:var(--ink2);line-height:1.55;flex:1}
.mbtv-div{display:flex;align-items:center;gap:9px;padding:11px 13px 7px}
.mbtv-div .ln{flex:1;height:0;border-top:1.5px dashed var(--gb)}
.mbtv-div .cp{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gd);background:var(--gl);border:1px solid var(--gb);padding:3px 9px;border-radius:5px;white-space:nowrap}
/* 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. */