/* Document -- the meeting workflow's "what do the minutes say?" step.
 *
 * The third and last of these files. discussions.css and votes.css were extractions: their
 * rules had been JS string arrays injected into a <style> tag at runtime, unreachable by
 * /design/ and by the design-system checks, which is how 77 and 142 hardcoded colours
 * survived in them (issue #364). This one is not an extraction -- the Document tab's rules
 * were in styles.css all along, reachable and checked. It is a MOVE, made for a different
 * reason: the tab is being rebuilt onto the two-column stage Discussions uses (#448), and
 * a surface with its own layout is easier to read as its own file than as 150 lines in the
 * middle of the app's general stylesheet.
 *
 * Two groups of rules live here:
 *
 *   .mbdoc-*  new, for the stage, the video column and the side panel. Modelled on
 *             discussions.css so the two screens resolve identically -- a clerk moving
 *             between them should not be able to tell they were built separately.
 *   .mb-*     moved from styles.css: the item body box, the action line, the format bar.
 *             Same markup, same behaviour; the values are on tokens now, which is what
 *             moving them was worth doing for.
 *
 * The literals that came with the .mb-* rules resolve to SEMANTIC roles, not to whichever
 * ramp step happens to match. Following the mapping discussions.css already documents:
 *
 *   #374151  body text        -> --gv-ink-700
 *   #e5e7eb  hairline         -> --gv-border
 *   #94a3b8  gutter label     -> --gv-text-subtle   (NOT --gv-ink-500: 4.39:1, fails AA)
 *   #cbd5e1  placeholder      -> --gv-text-disabled
 *   #6366f1 / #c7d2fe / #eef2ff  indigo focus and "on" states -> the brand ramp. There is
 *            no indigo in this product; it was the same borrowed hue the AI buttons wore
 *            before DESIGN-SYSTEM.md 4 settled that question, and it sat directly beside a
 *            brand-green-and-gold nib on this very screen.
 *
 * .pm-md-body p.mb-action stays in styles.css. It draws the same ACTION label on published
 * minutes -- a page a resident reaches without signing in -- and belongs with the portal's
 * rules, not with the editor's.
 */

/* Palette scope, the shape discussions.css and votes.css use, so a rule can be read here
 * without holding the whole token list in your head. */
.mbdoc {
    --line: var(--gv-border);
    --ink: var(--gv-text);
    --ink2: var(--gv-ink-700);
    --mut: var(--gv-text-subtle);
    --mut2: var(--gv-text-disabled);
    --g: var(--gv-brand-700);
    --gd: var(--gv-brand-900);
    --gl: var(--gv-brand-50);
    --gb: var(--gv-brand-200);
    color: var(--gv-text);
}
.mbdoc .tnum { font-variant-numeric: tabular-nums; }

/* ── the stage ──────────────────────────────────────────────────────────────
 * Gone to components.css as .gv-stage (#466), and it went as THE reference: this tab's
 * numbers are the ones all five steps now share -- clamp(260px, 36%, 420px), an 18px
 * gutter, calc(100vh - 164px), 520px min-height. .mbdoc-left and .mbdoc-right went with
 * it as .gv-stage__main and .gv-stage__side, containment wall included.
 *
 * That this tab won was not a coin toss. It was already where the other three had been
 * converging -- it borrows Discussions' player and the Motions tab's transport and panel,
 * and the notes further down this file record two earlier attempts to build its own
 * instead, both reverted. The only thing it lacked was somewhere to live that was not one
 * screen's stylesheet.
 *
 * ONE RULE OF THIS TAB'S DID NOT SURVIVE. The comment here used to argue that the
 * recording must never drop below the document, which is why the column shrank to 260px
 * rather than collapsing, and why this was the one stage with no breakpoint. The shared
 * stage stacks at 1180px like the other four. What changed the answer is that the rule
 * was only ever weighed against THIS tab: on Motions, holding two columns down to 1180
 * leaves the filter bar 722px of the 760px it needs on a busy meeting, so it wraps to
 * three lines (votes.css measures this). A recording the clerk has to scroll to costs
 * less than a control bar that has come apart, and five steps behaving alike costs less
 * again than either. The reasoning is kept here rather than deleted because it is still
 * the right reasoning about this tab in isolation -- it just is not about this tab any
 * more. */


/* The document itself, and the only thing in this column that scrolls.
 *
 * THE DESK (#609). The column is a neutral surface with the pages laid on it (.mbdoc-page,
 * below). The padding is the desk showing round them, and it is inside the scroller, so it
 * scrolls away with the pages rather than standing as a strip under the filter row -- the
 * reason #603 moved the old gap in here. */
.mbdoc-doc {
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    padding: var(--gv-space-6) var(--gv-space-5) var(--gv-space-10);
    background: var(--gv-ink-100);
    border-radius: var(--gv-radius-lg);
    /* Its scrollbar is the shared .gv-scroll (components.css), which started here. */
}
/* Before anything is built there are no pages for the desk to hold, and the column carries
   only the shared start panel in its .gv-start-card (#671) — the same white card as the
   other steps'. No desk colour or desk padding around it: a grey frame round the card made
   Minutes the one step whose empty screen looked different. */
.mbdoc-doc--start {
    background: transparent;
    padding: 0;
    /* ...and the card fills the column, so it is as tall as the recording panel beside it,
       the way the start card is on Motions (.gv-stage__main > .gv-start-card). */
    display: flex;
    flex-direction: column;
}
.mbdoc-doc--start > .gv-start-card { flex: 1 0 auto; }

/* While the writing panel is on screen it IS the progress (#822): the corner card saying the
   same thing beside it would be the run reported twice. Leave the tab and the panel goes,
   and the card comes back to say the run is still going. */
body:has(#mbdoc-writing) #mb-gen-progress { display: none; }
.mbdoc #mbdoc-writing [data-mb-writing-stop] { margin-top: 0.75rem; }

/* Stable wrappers so switching what the panel shows can swap innerHTML without the video
 * between them ever being re-parented -- moving an <iframe> in the DOM reloads it, and the
 * clerk loses their place in the recording. discussions.css says the same thing about
 * #mbtv-above / #mbtv-below; this is the third surface to need it. */
/* The order down this column is fixed: recording, then its transport, then the
 * Agenda/Transcript panel -- the Motions tab's arrangement.
 *
 * The recording and its transport above the panel are the shared .gv-recvid now, which
 * never shrinks (components.css says why). The panel is the only thing here that may give
 * up space, because it is the only thing that can scroll its own content. */
#mbdoc-below { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* The two rules that made the borrowed panel scroll internally rather than push the column
 * past its bottom were here, scoped to #mbdoc-below. They are in votes.css now, keyed on
 * .gv-stage__side (#466) -- because the Recording and Speakers steps borrow the same panel
 * and are not inside #mbdoc-below, and because the panel is votes.css's to size. */

/* ── the video ──────────────────────────────────────────────────────────────
 * .gv-stage__vid and .gv-stage__noplay in components.css now (#466), taken from here
 * whole -- the 16:9 frame, the 32vh cap, and the long argument for laying the player out
 * in normal flow instead of position:absolute;inset:0. That argument is why THIS box was
 * the one promoted: .mbtv-vid and .mbmv-vid both used the absolute recipe, which is the
 * one way a child of this column can escape it and lay itself out against the viewport. */

/* ── the right column's panel and transport ───────────────────────────────
 * Neither is here. Both are the Motions tab's, from votes.css: .mbmv-tr for the transport
 * and .mbmv-pan / .mbmv-ph / .mbmv-flip / .mbmv-pb for the Agenda ⟷ Transcript panel.
 *
 * This file briefly carried its own — .mbdoc-tp with a Jump / AI / Verbatim head, a jump
 * list and a per-item transcript slice. Three views nobody else in the workflow offered,
 * beside a screen that already had the two that matter. Deleting them left #mbdoc-below
 * holding the borrowed panel directly, which is all it ever needed to do.
 */

/* ── the Word-style additions (Dom, 2026-09-21) ────────────────────────────────
 * The menu bar, the toolbar's colour buttons, the menus' icons, swatches and table picker, and
 * what they put on the page: colours and highlights (fixed palettes, editor/format.js), links,
 * horizontal lines, page breaks and tables. Dialogs: link, special characters, header and footer. */
.mbed-menubar {
    /* The left a step wider than the right (#836): with the pill gone to the right end, File
       leads the row and lines up over the toolbar's first button. */
    display: flex; align-items: center; gap: 2px; padding: 2px var(--gv-space-1) 0 var(--gv-space-2);
    /* One even step along the row (Dom, 2026-09-23): File, Insert, Format and Page sit the
       same distance apart. A menu button's side padding is this, so word-to-word comes to
       twice it plus the 2px gap. */
    --mbed-menu-pad-x: calc(var(--gv-space-1) * 1.5);
}
.mbed-menubar[hidden] { display: none; }
/* THE STATE AND ITS ONE CONTROL, JOINED (#836; mbEdMenubarHtml): "DRAFT | Approve Minutes" at the
   row's right end. Drawn by .gv-status-join in components.css (#843), which Review Agenda's
   "DRAFT | Approve Agenda" shares, so the two cannot drift apart -- its outline and both
   buttons' colours (green Approve, amber Revert to Draft) included. */
/* DRAFT ▾ while the minutes can be edited (#836): the pill is a button opening the draft's
   settings (mbDocDraftMenu). How it presses -- pointer, hover wash, focus ring, caret -- is
   .gv-status-join__pill in components.css since #863, shared with Review Agenda's APPROVED ▾.
   .mbed-menubar__pill stays on the button, unstyled, as the hook the e2e tests find it by.
   Approved, it is the plain label again. */
/* Sized to the menus beside them (Dom, 2026-09-23): Approve sat a
   size up from Insert / Format / Page and read as a second toolbar parked on the menu row.
   Half the small button's padding top and bottom, a narrower side, and the icons a notch
   down, so the row is one height. */
.mbed-menubar__end .gv-btn {
    padding: calc(var(--gv-space-1) / 2) var(--gv-space-2);
    gap: var(--gv-space-1);
    font-size: var(--gv-text-xs);
    line-height: var(--gv-leading-tight);
    /* One height whatever the button says: the words set it, so with the words gone (the
       stamp alone, below) the button dropped to the height of its icon. This is the line the
       words take, the padding above and below, and the border. */
    min-height: calc(var(--gv-text-xs) * var(--gv-leading-tight) + var(--gv-space-1) + 2 * var(--gv-border-width));
}
.mbed-menubar__end .gv-btn i { font-size: var(--gv-text-2xs); }
/* WHEN THE ROW RUNS OUT OF WIDTH (Dom, 2026-09-23), the buttons say less, in order: Approve
   Minutes becomes Approve, then Approve is its stamp alone.
   The full words stay the buttons' accessible names and tooltips. Measured against the
   toolbox, which is the row's width; the steps are what each change buys back, with room to
   spare so nothing is ever pushed off the end. */
.mbed-tbox { container: mbed-tbox / inline-size; }
@container mbed-tbox (max-width: 575px) {
    .mbed-menubar__end .gv-btn--primary .gv-btn__more,
    .mbed-menubar__end .gv-btn--warning-quiet .gv-btn__more { display: none; }
}
@container mbed-tbox (max-width: 485px) {
    .mbed-menubar__end .gv-btn--primary .gv-btn__label,
    .mbed-menubar__end .gv-btn--warning-quiet .gv-btn__label { display: none; }
}
/* THE DOCUMENT'S OWN ACTIONS, at this row's right end (Dom, 2026-09-22): Approve and
   the step's ⋯. They were at the end of the TOOLBAR and took about 200px off the formatting
   row, which mbEdToolbarFit then paid for by folding two groups into the ⋮ on any column
   narrower than a full window. This row carries three words and had the width to spare.

   The 2px the row keeps at its top is for the menu buttons; a 25px control needs its own,
   or the button sits hard against the box's edge. */
.mbed-menubar__end {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--gv-space-1);
    padding: var(--gv-space-1) var(--gv-space-1) var(--gv-space-1) var(--gv-space-2);
}
/* NO BAND ON THIS ROW (Dom, 2026-09-22). Option B gave every step's first row the header's
   tint and rule, and on this step that first row is the menu bar — so it was tinted and
   ruled like the agenda table's column names and meeting facts' head.

   It comes back off. The menu bar is part of the word processor, not part of the workspace
   chrome: Insert / Format / Page belong to the document the way they do in Word, and
   tinting them made the editor's own furniture read as the app's. Minutes is therefore the
   one step whose first row is not a band, which is the right exception — the toolbox is a
   single object and the band would have split it in two.

   The BOX still docks: no top border, no top corners, no gap above it. That is #665 and it
   is unchanged; only the tint and the rule inside it went. */
.mbed-menubar__btn {
    padding: 3px var(--mbed-menu-pad-x); border: 0; border-radius: var(--gv-radius-sm); background: transparent;
    font-size: var(--gv-text-sm); color: var(--gv-text); cursor: pointer;
}
.mbed-menubar__btn:hover, .mbed-menubar__btn[aria-expanded="true"] { background: var(--gv-surface-sunk); }
.mbed-menubar__btn.is-live { color: var(--gv-brand-900); font-weight: 600; }
.mbed-toolbar__btn { position: relative; }
.mbed-cbar { position: absolute; left: 7px; right: 7px; bottom: 4px; height: 3px; border-radius: 1px; background: var(--gv-doc-c-black); }
.mbed-toolbar__btn[title^="Highlight"] .mbed-cbar { background: transparent; box-shadow: inset 0 0 0 0.5px var(--gv-border); }
.mbed-poplist--menu { min-width: 15rem; }
/* The align dropdown: the four alignments side by side, the line's own marked (editor/format.js). */
.mbed-alignrow { display: flex; gap: 2px; padding: 2px var(--gv-space-2); }
.mbed-alignrow .mbed-toolbar__btn.is-on { background: var(--gv-brand-50); color: var(--gv-brand-800); }
/* Numbered list, lit on a numbered line or an item title with its number (highlights.js). */
/* Lit where the caret's text has it (highlights.js): the app's green, as the player's buttons are (Dom, 2026-09-24). */
.mbed-toolbar [data-cmd].is-on { background: var(--gv-brand-50); color: var(--gv-brand-800); }
/* The caret beside Numbered list, and its cards (tab/list-styles.js), as Google Docs draws them. */
/* ...and the same narrow caret beside Print, for Print and Download PDF (#836; mbDocPrintMenu). */
.mbed-toolbar__btn[data-list-styles], .mbed-toolbar__btn[data-print-menu] { width: 14px; margin-left: -4px; }
.mbed-toolbar__btn[data-list-styles] i, .mbed-toolbar__btn[data-print-menu] i { font-size: var(--gv-text-2xs); }
.mbed-lsgrid { display: grid; grid-template-columns: repeat(3, 92px); gap: 8px; padding: 8px; }
.mbed-lscard {
    display: flex; flex-direction: column; gap: 3px; padding: 8px;
    border: 1px solid var(--gv-border); border-radius: 3px; background: var(--gv-surface);
    font-size: 11px; line-height: 13px; color: var(--gv-text); text-align: left; cursor: pointer;
}
.mbed-lscard:hover { border-color: var(--gv-ink-500); }
.mbed-lscard.is-on { border: 2px solid var(--gv-ink-600, var(--gv-ink-500)); padding: 7px; }
.mbed-lscard__row { display: flex; align-items: center; gap: 4px; }
.mbed-lscard__n { min-width: 18px; text-align: right; }
.mbed-lscard__bar { flex: 1; height: 3px; border-radius: 2px; background: var(--gv-border); }
/* Decrease indent on a line already at its edge (Dom, 2026-09-24). */
.mbed-toolbar [data-cmd]:disabled { color: var(--gv-text-disabled); background: transparent; cursor: default; }
.mbed-toolbar__btn--dd { width: auto; padding: 0 4px; gap: 2px; grid-auto-flow: column; }
.mbed-toolbar__caret { font-size: var(--gv-text-2xs); color: var(--gv-ink-500); }
.mbed-poplist--colors { width: 12.5rem; }
.mbed-poplist__opt.has-icon { display: flex; align-items: center; gap: var(--gv-space-2); }
.mbed-poplist__opt.has-icon > i { width: 16px; text-align: center; color: var(--gv-ink-500); font-size: var(--gv-text-xs); }
.mbed-poplist__opt > span:first-of-type { flex: 1 1 auto; }
/* A mark that is not a Font Awesome glyph (fonts.js iconHtml: the nib on Rewrite, #847), in the icon
   column. It is a span, so the label is the next one along and takes the stretch. */
.mbed-poplist__opt > span.mbed-poplist__icon { flex: none; width: 16px; display: inline-flex; justify-content: center; }
.mbed-poplist__opt > span.mbed-poplist__icon + span { flex: 1 1 auto; }
.mbed-poplist__key { margin-left: auto; padding-left: var(--gv-space-4); color: var(--gv-text-muted); font-size: var(--gv-text-2xs); }
.mbed-swatches { display: grid; grid-template-columns: repeat(5, 20px); gap: 6px; padding: var(--gv-space-2) var(--gv-space-3); }
.mbed-swatch { width: 20px; height: 20px; padding: 0; border-radius: 4px; border: 1px solid var(--gv-border-strong, var(--gv-border)); cursor: pointer; }
.mbed-swatch:hover { transform: scale(1.12); }
.mbed-swatch.is-selected { box-shadow: 0 0 0 2px var(--gv-surface), 0 0 0 3px var(--gv-brand-700); }
/* Insert > Table's grid, drawn like Google Docs': small grey squares that turn blue up to the
 * pointer, and the size under them (editor/tables.js). */
.mbed-tgrid { padding: var(--gv-space-2) var(--gv-space-3); }
.mbed-tgrid__cells { display: grid; gap: 3px; }
.mbed-tgrid__cell { width: 16px; height: 16px; padding: 0; border: 1px solid var(--gv-ink-200); border-radius: 1px; background: var(--gv-ink-50); cursor: pointer; }
.mbed-tgrid__cell.is-on { background: var(--gv-info-border); border-color: var(--gv-info-fg); }
.mbed-tgrid__label { margin-top: var(--gv-space-2); font-size: var(--gv-text-sm); color: var(--gv-text); text-align: center; }
/* A row that opens a side menu, marked ▸ at its right, and the side menu itself. */
/* A ✓ before the current choice (Format > Line & paragraph spacing), with room kept on the rows
   without one so their names line up. */
.mbed-poplist__opt.has-check { display: flex; align-items: center; gap: var(--gv-space-2); }
.mbed-poplist__check { width: 14px; font-size: var(--gv-text-2xs); color: var(--gv-ink-700); }
.mbed-poplist__check.is-off { visibility: hidden; }
.mbed-poplist--sub .mbed-poplist__opt:not(.has-icon):not(.has-check) { display: flex; align-items: center; }
.mbed-poplist__more { margin-left: auto; padding-left: var(--gv-space-4); font-size: var(--gv-text-2xs); color: var(--gv-ink-500); }
.mbed-poplist__opt.is-open { background: var(--gv-surface-sunk); }
.mbed-poplist--sub { max-height: none; }
/* A picture in the minutes (editor/images.js): selected, it shows the corner to drag. */
.mbed-doc .mbed-img { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.mbed-doc .mbed-img.is-selected img { outline: 2px solid var(--gv-brand-600); }
.mbed-img__handle {
    display: none; position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px;
    border: 2px solid var(--gv-surface); border-radius: 2px; background: var(--gv-brand-700); cursor: nwse-resize;
}
.mbed-doc .mbed-img.is-selected .mbed-img__handle { display: block; }
/* Copy formatting is waiting for its selection. */
.mbed-host.is-painting .mbed-doc { cursor: copy; }

/* On the page. */
.mbed-doc .mb-c-black { color: var(--gv-doc-c-black); }
.mbed-doc .mb-c-dgray { color: var(--gv-doc-c-dgray); }
.mbed-doc .mb-c-gray { color: var(--gv-doc-c-gray); }
.mbed-doc .mb-c-lgray { color: var(--gv-doc-c-lgray); }
.mbed-doc .mb-c-white { color: var(--gv-doc-c-white); }
.mbed-doc .mb-c-dred { color: var(--gv-doc-c-dred); }
.mbed-doc .mb-c-red { color: var(--gv-doc-c-red); }
.mbed-doc .mb-c-orange { color: var(--gv-doc-c-orange); }
.mbed-doc .mb-c-gold { color: var(--gv-doc-c-gold); }
.mbed-doc .mb-c-green { color: var(--gv-doc-c-green); }
.mbed-doc .mb-c-dgreen { color: var(--gv-doc-c-dgreen); }
.mbed-doc .mb-c-lblue { color: var(--gv-doc-c-lblue); }
.mbed-doc .mb-c-blue { color: var(--gv-doc-c-blue); }
.mbed-doc .mb-c-dblue { color: var(--gv-doc-c-dblue); }
.mbed-doc .mb-c-purple { color: var(--gv-doc-c-purple); }
.mbed-doc .mb-hl-yellow { background-color: var(--gv-doc-hl-yellow); }
.mbed-doc .mb-hl-green { background-color: var(--gv-doc-hl-green); }
.mbed-doc .mb-hl-teal { background-color: var(--gv-doc-hl-teal); }
.mbed-doc .mb-hl-blue { background-color: var(--gv-doc-hl-blue); }
.mbed-doc .mb-hl-purple { background-color: var(--gv-doc-hl-purple); }
.mbed-doc .mb-hl-pink { background-color: var(--gv-doc-hl-pink); }
.mbed-doc .mb-hl-red { background-color: var(--gv-doc-hl-red); }
.mbed-doc .mb-hl-orange { background-color: var(--gv-doc-hl-orange); }
.mbed-doc .mb-hl-gray { background-color: var(--gv-doc-hl-gray); }
.mbed-doc a[href] { color: var(--gv-doc-link); text-decoration: underline; cursor: text; }
.mbed-doc sup, .mbed-doc sub { font-size: 0.7em; line-height: 0; }
.mbed-doc hr.mbed-hr { border: 0; border-top: 1px solid var(--gv-ink-500); margin: 8px 0; }
.mbed-doc hr.ProseMirror-selectednode { outline: 2px solid var(--gv-brand-300); }
/* A page break is not printed; on screen it is a labelled rule, like Word's. */
.mbed-doc .mb-pagebreak { position: relative; height: 18px; margin: 4px 0; border-top: 1px dashed var(--gv-ink-300); user-select: none; }
.mbed-doc .mb-pagebreak::after {
    content: 'Page break'; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    padding: 0 8px; background: var(--gv-surface); font-size: 10.667px; line-height: 14px; color: var(--gv-ink-500);
}
.mbed-doc .mb-pagebreak.ProseMirror-selectednode { border-top-color: var(--gv-brand-600); }
/* Tables: thin black rules, as a printed table has, and a cell's own lines inside it. */
.mbed-doc .tableWrapper { overflow-x: auto; margin: 6px 0; }
.mbed-doc table { border-collapse: collapse; table-layout: fixed; width: 100%; }
.mbed-doc td, .mbed-doc th { position: relative; border: 1px solid var(--gv-ink-900); padding: 3px 6px; vertical-align: top; text-align: left; }
.mbed-doc th { font-weight: 700; background: var(--gv-ink-50); }
.mbed-doc td > p, .mbed-doc th > p { padding-left: 0 !important; }
/* A row that starts the next page, in a table longer than a page (pagination.js): its cells pushed
   down by the space to the next page's top. */
.mbed-doc tr {
    --mbed-rowbrk: 0px;   /* set per row by pagination.js */
}
.mbed-doc tr.mbed-rowbrk > td, .mbed-doc tr.mbed-rowbrk > th { padding-top: calc(3px + var(--mbed-rowbrk)); }
.mbed-doc .selectedCell::after { content: ''; position: absolute; inset: 0; background: var(--gv-brand-100); opacity: 0.6; pointer-events: none; }
.mbed-doc .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: -2px; width: 4px; background: var(--gv-brand-600); pointer-events: none; }
.mbed-doc.resize-cursor { cursor: col-resize; }

/* Dialogs: link, special characters, header and footer. */
.mbed-field { display: flex; flex-direction: column; gap: var(--gv-space-1); font-size: var(--gv-text-sm); }
.mbed-chars { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gv-space-1); }
.mbed-char { height: 36px; border: 1px solid var(--gv-border); border-radius: var(--gv-radius-sm); background: var(--gv-surface); font-size: 18px; cursor: pointer; }
.mbed-char:hover { background: var(--gv-brand-50); border-color: var(--gv-brand-200); }
.mbed-hf { display: flex; flex-direction: column; gap: var(--gv-space-2); }
.mbed-hf__title { margin: var(--gv-space-2) 0 0; font-size: var(--gv-text-sm); font-weight: 600; }
.mbed-hf__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gv-space-2); }
.mbed-hf__cell { display: flex; flex-direction: column; gap: 2px; font-size: var(--gv-text-xs); color: var(--gv-text-subtle); }
.mbed-hf__check { display: flex; align-items: center; gap: var(--gv-space-2); font-size: var(--gv-text-sm); }

/* ── the transcript panel (Dom, 2026-09-17) ────────────────────────────────
 * The transcript picker from "Where was this discussed?", docked under the recording
 * (stage/source-panel.js). It takes the rest of the column and scrolls inside itself.
 *
 * The recording above it -- the video, Hide video, and the folded player card -- is the
 * shared .gv-recvid in components.css (stage/recording-video.js), used by all five steps. */

.mbdoc-src {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    border: var(--gv-border-width) solid var(--gv-border);
    border-radius: var(--gv-radius-lg);
    background: var(--gv-surface);
    overflow: hidden;
}
#mbdoc-src-in { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.mbdoc-src .gv-empty { margin: var(--gv-space-4); }
/* No smooth scroll: the panel lands on an item's stretch as the caret arrives, and a glide on
 * every click into the page reads as the column settling. */
.mbdoc-src .mbtv-tpb { flex: 1 1 auto; min-height: 0; overflow-y: auto; scroll-behavior: auto; }
/* WHO SPOKE is the column every transcript panel shares now (discussions.css, #878). This panel
 * had its own (Dom, 2026-09-17): 118px, wrapping, with its own tight leading because the page's
 * taller line height made a wrapped name stand twice as tall as its text. Once the panel was
 * dragged narrow, the name kept to one line and ended in "…", which every panel now does.
 * Nothing queries container-type since then. It stays only because taking it away changes how
 * this box sizes, and that is a change of its own. */
.mbdoc-src { container-type: inline-size; }
/* The pages scale down to the column they are in, and the toolbar folds into its ⋮ menu, so this
 * step lets the transcript side take more of the screen than the others do (Dom, 2026-09-17).
 * GV.stage reads the floor off the stage, so the drag honours it too. */
.mbdoc .gv-stage { --gv-stage-main-min: 420px; }

.mbdoc-src__head {
    display: flex; align-items: center; gap: var(--gv-space-2);
    padding: var(--gv-space-2) var(--gv-space-2);
    border-bottom: var(--gv-border-width) solid var(--gv-border);
}
.mbdoc-src__what { flex: 1 1 auto; min-width: 0; text-align: center; }
.mbdoc-src__title {
    margin: 0; font-size: var(--gv-text-sm); font-weight: 600; color: var(--gv-brand-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mbdoc-src__sub { margin: 0; font-size: var(--gv-text-xs); color: var(--gv-text-subtle); font-variant-numeric: tabular-nums; }
.mbdoc-src__step {
    flex: 0 0 auto; display: grid; place-items: center;
    width: var(--gv-control-sm); height: var(--gv-control-sm);
    border: 0; border-radius: var(--gv-radius-sm); background: transparent;
    color: var(--gv-ink-700); font-size: var(--gv-text-xs); cursor: pointer;
}
.mbdoc-src__step:hover { background: var(--gv-surface-sunk); color: var(--gv-text); }
.mbdoc-src__step.is-on { background: var(--gv-brand-50); color: var(--gv-brand-900); }
/* One header row (source-agenda.js): the Agenda / Transcript switch as two icons, and the search
 * row only once the magnifier opens it. The row is the same element either way, so the marking
 * hints under it (mbTvSearchBarHtml) still show while adjusting. */
.mbdoc-src__flip { flex: 0 0 auto; padding: 2px; }
.mbdoc-src__flip button { padding: 4px 8px; }
.mbdoc-src__flip button i { font-size: 11px; opacity: 1; }
.mbdoc-src:not(.is-searching) .mbtv-tpq { display: none; }
/* Reading or adjusting (source-panel.js). The item's time is a green pill, amber when nothing is
 * marked, lit while adjusting. Reading hides the marking instructions and the carets; the item's
 * stretch keeps its colour. */
.mbdoc-src__time {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
    padding: 1px 10px; border: 1px solid var(--gv-brand-200); border-radius: 999px;
    background: var(--gv-brand-50); color: var(--gv-brand-900);
    font: inherit; font-size: var(--gv-text-xs); font-variant-numeric: tabular-nums; cursor: pointer;
}
.mbdoc-src__time.is-unset { background: var(--gv-warning-bg); border-color: var(--gv-warning-border); color: var(--gv-warning-fg); }
/* ONE LINE (Dom, 2026-09-22; source-panel.js mbDocSrcHeadHtml): the title, the time as a small
 * pill that is not a button, and an Edit link that is. The title gives way first. */
.mbdoc-src__what.is-line { display: flex; align-items: center; justify-content: center; gap: 6px; }
.mbdoc-src__what.is-line .mbdoc-src__title { flex: 0 1 auto; min-width: 0; }
.mbdoc-src__what.is-line .mbdoc-src__time { flex: none; margin-top: 0; padding: 0 7px; font-size: 11.5px; cursor: default; }
/* The one control (Dom, 2026-09-23): the nib and the word Rewrite, in the AI register the rest of
   the AI actions use -- it opens the options and the marking together (source-rewrite.js). */
.mbdoc-src__edit {
    flex: none; display: inline-flex; align-items: center; gap: 4px;
    padding: 0 2px; border: 0; background: none; font: inherit; font-size: var(--gv-text-xs); font-weight: 600;
    color: var(--gv-ai-fg); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.mbdoc-src__edit:hover { color: var(--gv-ai-fg-hover, var(--gv-ai-fg)); text-decoration-thickness: 2px; }
/* The Rewrite band (source-rewrite.js): an item's options right under the panel's header, over
 * its stretch -- tinted in the AI register so it is the first thing seen, with a solid Rewrite:
 * the level as four pills, the instructions box, Cancel and Rewrite. */
.mbdoc-src__rw {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--gv-space-2);
    padding: var(--gv-space-2) var(--gv-space-3);
    border-bottom: var(--gv-border-width) solid var(--gv-border);
    background: var(--gv-ai-bg);
}
.mbdoc-src__rwrow { display: flex; align-items: center; gap: var(--gv-space-2); }
/* The label and the level pills wrap onto two lines when the label is the longer changed-stretch question. */
.mbdoc-src__rwrow:first-child { flex-wrap: wrap; }
.mbdoc-src__rwlbl { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: var(--gv-text-xs); font-weight: 600; color: var(--gv-ai-fg); }
.mbdoc-src__rw .gv-btn--ai { background: var(--gv-ai-fg); color: var(--gv-text-invert); --gov-ai-body: var(--gv-text-invert); --gov-ai-ink: var(--gv-text-invert); }
.mbdoc-src__rw .gv-btn--ai:hover:not(:disabled) { background: var(--gv-ai-fg-hover); color: var(--gv-text-invert); }
.mbdoc-src__lvls { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.mbdoc-src__lvl {
    padding: 2px 10px; border: 1px solid var(--gv-border); border-radius: 999px;
    background: var(--gv-surface); color: var(--gv-text); font: inherit; font-size: var(--gv-text-xs); cursor: pointer;
}
.mbdoc-src__lvl:hover { background: var(--gv-surface-sunk); }
.mbdoc-src__lvl.is-on { background: var(--gv-ai-bg); border-color: var(--gv-ai-fg); color: var(--gv-ai-fg); }
.mbdoc-src__rwextra { flex: 1 1 auto; min-width: 0; min-height: 0; resize: none; font-size: var(--gv-text-xs); padding: 4px 8px; }
.mbdoc-src__rwextra:focus { min-height: 4.5em; }
.mbdoc-src__time.is-on { cursor: default; background: var(--gv-brand-100); border-color: var(--gv-brand-600); }
/* "Edit highlight?" (source-ask.js): under a selection in the transcript while reading; it opens
 * Adjust and changes nothing itself. The time pill's look, lifted off the text. */
.mbdoc-src { position: relative; }
/* "Edit transcript reference" under a selection while reading (source-ask.js): the word pop-up's
 * own tray (.mbtv-wpop, discussions.css), placed by hand rather than against a word, with its one
 * button in the green the highlight is (Dom, 2026-09-22). */
.mbdoc-src__ask { top: auto; left: auto; z-index: var(--gv-z-dropdown); }
.mbdoc-src__ask > button.s { display: inline-flex; align-items: center; gap: 5px; background: var(--gv-brand-50); }
.mbdoc-src__ask > button.s:hover { background: var(--gv-brand-100); border-color: var(--gv-brand-900); }
.mbdoc-src__ask i { font-size: var(--gv-text-2xs); }
/* The Agenda side (source-agenda.js): the Motions step's list, scrolling inside the panel, with
 * the item the panel is on marked. */
.mbdoc-src__agenda { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--gv-space-1) var(--gv-space-1) var(--gv-space-3); }
.mbdoc-src__agenda .mbmv-ap.is-here { background: var(--gv-brand-50); }
.mbdoc-src__agenda .mbmv-ap.is-here .t { color: var(--gv-brand-900); font-weight: 600; }
.mbdoc-src:not(.is-adjusting) .mbtv-tphint { display: none; }
.mbtv-tpb.mbtv-reading .mbtv-caret { display: none; }
.mbtv-tpb.mbtv-reading .mbtv-l .tx .w { cursor: inherit; }
.mbtv-tpb.mbtv-reading .mbtv-l .tx .w:not(.in):hover { background: transparent; }
/* The item's minutes were written from its old stretch (source-rewrite.js): an amber strip under
 * the panel's header, the first thing seen, with the Rewrite. */
.mbdoc-src__stale {
    display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: var(--gv-space-2) var(--gv-space-3);
    background: var(--gv-warning-bg); color: var(--gv-warning-fg);
    border-bottom: var(--gv-border-width) solid var(--gv-warning-border);
    font-size: var(--gv-text-xs);
}
.mbdoc-src__stale span { margin-right: auto; }
.mbdoc-src__stale button {
    padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit;
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.mbdoc-src__stale button:hover { text-decoration-thickness: 2px; }
.mbdoc-src__held {
    margin: 0; padding: var(--gv-space-2) var(--gv-space-3);
    background: var(--gv-gold-bg); color: var(--gv-gold-fg);
    border-bottom: var(--gv-border-width) solid var(--gv-gold-border);
    font-size: var(--gv-text-xs);
}
/* Under the header, over the transcript (Dom, 2026-09-22): a change waiting to be saved is the
   first thing in the column, not the last. */
.mbdoc-src__foot {
    display: flex; align-items: center; gap: var(--gv-space-2); flex-wrap: wrap; flex: 0 0 auto;
    padding: var(--gv-space-2) var(--gv-space-3);
    border-bottom: var(--gv-border-width) solid var(--gv-border);
    background: var(--gv-surface);
}
.mbdoc-src__state { margin-right: auto; font-size: var(--gv-text-xs); color: var(--gv-gold-fg); font-weight: 600; }
/* Arriving from the Rewrite panel's Update discussion row: a brief ring, so the eye finds the
 * column that just changed. */
.mbdoc-src.is-flash { animation: mbdoc-src-flash 1.2s ease-out 1; }
@keyframes mbdoc-src-flash {
    0% { box-shadow: 0 0 0 3px var(--gv-brand-200); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

/* The legacy-minutes note is one of the start panel's own .gv-start__note lines now, inside
 * its card (#671). */

/* ── narrow and short ─────────────────────────────────────────────────────── */
/* Under 1040px the stage is one column and the panel goes, exactly as Discussions does it.
 * The video and its transport stay: on a narrow screen the recording is still the reason
 * this column exists, and the panel's contents are all reachable from the document itself.
 *
 * The stage also gives up its viewport lock here. A single column that is still
 * height-locked would put the document in a short scrolling box under the video with the
 * rest of the page empty below it -- the lock only earns its keep while there are two
 * columns to keep level. */
/* Both of this tab's remaining viewport rules are the shared stage's now (#466).
 *
 * The 1040px gap tweak is simply dead: the stage stacks at 1180px, so nothing reaches a
 * two-column layout at 1040 to tighten the gutter of.
 *
 * The short-viewport video cap moved to components.css and kept THIS file's number. All
 * three tabs disagreed about it -- 26vh here, 34vh on Discussions, nothing at all on
 * Motions -- and 26vh is the careful one: on a 768px-tall laptop it is the difference
 * between the transport and the panel being on screen under the player and being under
 * the fold. The tab that thought hardest about a short window is the one whose answer the
 * other four now get.
 *
 * What did NOT survive is the argument that used to sit here: that this stage must never
 * collapse to one column, because a full-width 16/9 box stops being a player beside the
 * document and becomes a banner across it. That reasoning is still sound about this tab
 * alone -- see the note at the head of this file for why it lost anyway. */

/* ── the bar is gone (#665) ───────────────────────────────────────────────
 * The step bar stood between the tab strip and the document carrying a status pill, a
 * sentence naming the button to press, one promoted action and a ⋯. Its rules went with
 * it: #mbdoc-bar (the slot), .mbdoc-facts and its four children (the minute-order row
 * under it, now a ⋯ item that opens a popover), and .mbdoc-bar__state / __say / __lead
 * (the pill-and-sentence row and the trimming that kept it to one line).
 *
 * Where each half went: the step's state and the one control that changes it are on the
 * tab row (.mw-step-actions, components.css); the document's own actions are at the right
 * end of the editor toolbar (.mbed-toolbar__end, below). .gv-barlink and .gv-subline stay
 * in components.css — they were promoted out of this file long before, and other surfaces
 * use them. */

/* ── the document (#609) ─────────────────────────────────────────────────────
 * The minutes as one free-form document on Letter pages (see "THE EDITOR" in app.js). The
 * page is laid out at full size -- 816px wide, the PDF's margins -- and zoomed to the column
 * with a transform, so a line never moves when the window does. Every size below is the
 * printed size in CSS pixels (a point is 4/3 of one); the PDF is drawn from this layout, so
 * these rules ARE the printed minutes.
 *
 * Arimo first: it is metric-compatible with Helvetica and Arial, and loaded rather than left
 * to the machine, so every clerk's pages break in the same places. */

.mbed-toolbar {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    padding: var(--gv-space-1) var(--gv-space-2);
}
/* The box the menus and the toolbar share: the menus on its top row, the buttons under them, as
   Google Docs has them (Dom, 2026-09-21). */
.mbed-tbox {
    margin: 0 0 var(--gv-space-2);
    border: var(--gv-border-width) solid var(--gv-border);
    border-radius: var(--gv-radius-md);
    background: var(--gv-surface);
}

/* ── ONE PANEL FROM THE TAB STRIP DOWN (Dom, 2026-09-22) ────────────────────
   The step was two objects with 8px of page between them — the toolbox, and the desk the
   pages lie on, each with its own border and corners — where the other five steps are one
   panel. They are the chrome and the body of one now.

   NO overflow:hidden, and this is the rule that would be reached for first. Every dropdown
   on the toolbar is absolutely positioned against it and opens BELOW it: the ⋮ overflow
   (.mbed-toolbar__over), the Find panel (.mbed-toolbar__find), the font, size, style,
   zoom, colour and align lists. Clipping the panel would cut every one of them off at the
   toolbar's own foot. The desk rounds its own bottom corners instead, below. */
.mbdoc-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 toolbox gives up its own edges to the panel: it is two rows of chrome inside it now,
   not a card above it. The margin went with the gap it was making.
   It keeps the panel's TOP corners, though (Dom, 2026-09-23). The panel cannot clip (the
   menus above hang out of it), so a square white toolbox painted straight over the
   panel's rounded corners and the card read as square-topped. */
.mbdoc-panel > .mbed-tbox {
    flex: 0 0 auto;
    margin: 0;
    border: 0;
    border-radius: var(--gv-radius-lg) var(--gv-radius-lg) 0 0;
}
/* The desk keeps its grey — a neutral field with pages laid on it is what makes this step
   read as a word processor (#609) — and gives up its top corners to sit under the toolbar,
   with a rule between the two. The bottom corners it keeps, and must: they are what the
   panel would have clipped if it could afford to. */
.mbdoc-panel > .mbdoc-doc {
    border-top: var(--gv-border-width) solid var(--gv-border);
    border-radius: 0 0 var(--gv-radius-lg) var(--gv-radius-lg);
}
.mbed-toolbar__btn {
    display: grid;
    place-items: center;
    width: var(--gv-control-sm);
    height: var(--gv-control-sm);
    padding: 0;
    border: 0;
    border-radius: var(--gv-radius-sm);
    background: transparent;
    color: var(--gv-ink-700);
    font-size: var(--gv-text-xs);
    cursor: pointer;
}
.mbed-toolbar__btn:hover { background: var(--gv-surface-sunk); color: var(--gv-text); }
.mbed-toolbar__btn:focus-visible { outline: var(--gv-focus-width) solid var(--gv-focus-color); outline-offset: 1px; }
/* Half a space step either side of each rule (#836): at a full space step the row fit a 1680px window on
   a Mac but not in an Arial-width or Linux font -- Windows, and CI -- and folded the list and indent
   buttons into the ⋮. The seven rules give back 24px. */
.mbed-toolbar__sep { width: 1px; height: 16px; margin: 0 calc(var(--gv-space-1) / 2); background: var(--gv-border); }
/* ONE ROW (Dom, 2026-09-17): the controls come in groups that do not shrink, and the groups that
 * do not fit go into the ⋮ menu (mbEdToolbarFit). The menu hangs under the ⋮ inside the toolbar. */
.mbed-toolbar__grp { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.mbed-toolbar > .mbed-toolbar__btn { flex: 0 0 auto; }
.mbed-toolbar__btn[hidden] { display: none; }
.mbed-toolbar__more[aria-expanded="true"] { background: var(--gv-brand-50); color: var(--gv-brand-900); }
.mbed-toolbar__over {
    position: absolute; top: calc(100% + 4px); z-index: 30;
    /* One row, however many groups are in it -- it grows longer, never taller, as Google Docs'
       does (Dom, 2026-09-21). */
    display: flex; flex-wrap: nowrap; align-items: center; gap: 2px;
    width: max-content;
    padding: var(--gv-space-1) var(--gv-space-2);
    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);
}
.mbed-toolbar__over[hidden] { display: none; }
.mbed-toolbar__over > .mbed-toolbar__grp:first-child > .mbed-toolbar__sep { display: none; }

.mbed-host {
    position: relative;
    --mbed-depth: 0;   /* an item's nesting on the agenda, set per heading and per region */
    /* ONE HALF-INCH GRID (Dom, 2026-09-24), as Google Docs: a Tab, a level of nesting, the room a
       number or bullet takes and the inset of an item's minutes are all the same half inch, so a
       tabbed line, a numbered or bulleted item's words and its minutes start at the same place. */
    --mbed-stop: 48px;
    /* 1 when the page's top level carries no number or bullet: everything sits a stop further left
       (#830). Written on .mbed-doc from the document (first-line.js mbEdTopLift; mount.js). */
    --mbed-lift: 0;
    /* A numbered or bulleted first line's number sits at the line's edge and its words a quarter inch
       on (#830, Ryan 2026-10-02). */
    --mbed-hang: 24px;
}
/* WHERE A BOX STARTS AND WHERE WHAT IS UNDER IT STARTS (#830, Ryan 2026-10-02): a box starts at its
   level's edge -- its number, bullet or first word there -- and everything under it (its minutes,
   lists, the box a level in) half an inch further in. --mbed-ind is the box's level, --mbed-sub the
   level of what is under it, both less the stop an unnumbered top level gives back, so under a heading
   like "Appointments" the first thing starts at the margin with the heading, and the heading's own text
   does too. Worked out on every element, so they follow the --mbed-depth each heading and region sets. */
.mbed-host, .mbed-host * {
    --mbed-ind: max(0, var(--mbed-depth, 0) - var(--mbed-lift, 0));
    --mbed-sub: max(0, var(--mbed-depth, 0) + 1 - var(--mbed-lift, 0));
}
/* Approved minutes: the caret has nowhere to go, so none is drawn. */
.mbdoc--locked .mbed-doc { caret-color: transparent; cursor: default; }
.mbed-sizer { position: relative; margin: 0 auto; }
.mbed-zoom {
    position: absolute; top: 0; left: 0; width: 816px; transform-origin: 0 0;
    --mbed-head-top: 41px;
    /* Where the margins put the footer and line numbers; mbEdApplyPage sets these from the
       minutes' own margins (editor/margins.js). */
    --mbed-foot-top: 1003px;
    --mbed-left: 96px;
    --mbed-right: 96px;
}
.mbed-pagelayer { position: absolute; inset: 0; pointer-events: none; }
/* The DRAFT watermark (editor/header-footer.js, #724): large and light across the middle of each
   page, behind the text. The PDF draws it where this puts it (output/pdf.js), so the box stays one
   line high and the font stays Arimo, whose metrics that drawing assumes. */
.mbed-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mbed-watermark > span {
    font-family: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 144px;
    line-height: 1;
    color: var(--gv-ink-200);
    white-space: nowrap;
    transform: rotate(-45deg);
}
.mbed-page {
    position: absolute;
    left: 0;
    width: 816px;
    height: 1056px;
    background: var(--gv-surface);
    box-shadow: var(--gv-shadow-sm), var(--gv-shadow-lg);
}
/* The footer, where the PDF has always printed it: a rule 10pt above the line, the board and
   meeting on the left, the page number on the right. */
.mbed-foot {
    /* In the margins the clerk set (editor/margins.js), 96px and a 1003px top by default. */
    position: absolute;
    top: var(--mbed-foot-top);
    left: var(--mbed-left);
    right: var(--mbed-right);
    /* Left, centre and right, each its own column (editor/header-footer.js). */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--gv-space-4);
    padding-top: 4px;
    border-top: 1px solid var(--gv-ink-400);
    font-family: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10.667px;
    line-height: 13px;
    color: var(--gv-ink-600);
}
.mbed-foot > span:nth-child(2), .mbed-head > span:nth-child(2) { text-align: center; }
.mbed-foot > span:nth-child(3), .mbed-head > span:nth-child(3) { text-align: right; }
/* The header, in the top margin (--mbed-head-top, editor/margins.js), with no rule. */
.mbed-head {
    position: absolute;
    top: var(--mbed-head-top);
    left: var(--mbed-left);
    right: var(--mbed-right);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--gv-space-4);
    font-family: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10.667px;
    line-height: 13px;
    color: var(--gv-ink-600);
}
/* Line numbers, when the board prints them: right-aligned in the left margin. */
.mbed-ln {
    position: absolute;
    left: 0;
    width: calc(var(--mbed-left) - 24px);
    padding-top: 4px;
    text-align: right;
    font-family: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10.667px;
    line-height: 13px;
    color: var(--gv-ink-500);
}
.mbed-root { position: relative; }

/* The text column. ProseMirror's own essentials first, then the page's type. */
.mbed-doc {
    position: relative;
    min-height: 1056px;
    padding: 85px 96px 64px;
    outline: none;
    white-space: pre-wrap;
    white-space: break-spaces;
    word-wrap: break-word;
    font-variant-ligatures: none;
    font-kerning: none;
    font-family: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13.333px;
    line-height: 18.667px;
    color: var(--gv-ink-900);
    caret-color: var(--gv-ink-900);
}
.mbed-doc li { position: relative; }
.mbed-doc p { margin: 0; }
/* Lists show their bullets and numbers. The app's Tailwind preflight sets list-style: none on
   every list, so a list made from the toolbar looked exactly like the lines it was made from. */
.mbed-doc ul,
.mbed-doc ol { margin: 0; padding-left: var(--mbed-stop, 48px); }
.mbed-doc ul { list-style: disc outside; }
.mbed-doc ul ul { list-style-type: circle; }
.mbed-doc ul ul ul { list-style-type: square; }
/* A numbered list's levels (Dom, 2026-09-24; tab/list-styles.js): the minutes' own numbering, set on
   the page (mbDocSyncListVars), or the style picked for the list (mb-ol-<key>) -- 1. a. i. when
   neither says. A line given a style of its own by a selection keeps it (mb-li-<key>). */
:is(.mbed-doc, .pm-md-body) {
    --mbed-ol-1: decimal;
    --mbed-ol-2: lower-alpha;
    --mbed-ol-3: lower-roman;
}
.mbed-doc ol { list-style: var(--mbed-ol-1, decimal) outside; }
.mbed-doc ol ol { list-style-type: var(--mbed-ol-2, lower-alpha); }
.mbed-doc ol ol ol { list-style-type: var(--mbed-ol-3, lower-roman); }
:is(.mbed-doc, .pm-md-body) .mb-ol-n { --mbed-ol-1: decimal; --mbed-ol-2: lower-alpha; --mbed-ol-3: lower-roman; }
:is(.mbed-doc, .pm-md-body) .mb-ol-ua { --mbed-ol-1: upper-alpha; --mbed-ol-2: lower-alpha; --mbed-ol-3: lower-roman; }
:is(.mbed-doc, .pm-md-body) .mb-ol-la { --mbed-ol-1: lower-alpha; --mbed-ol-2: lower-roman; --mbed-ol-3: decimal; }
:is(.mbed-doc, .pm-md-body) .mb-ol-ur { --mbed-ol-1: upper-roman; --mbed-ol-2: upper-alpha; --mbed-ol-3: decimal; }
:is(.mbed-doc, .pm-md-body) .mb-ol-lr { --mbed-ol-1: lower-roman; --mbed-ol-2: lower-alpha; --mbed-ol-3: decimal; }
:is(.mbed-doc, .pm-md-body) li.mb-li-n { list-style-type: decimal; }
:is(.mbed-doc, .pm-md-body) li.mb-li-ua { list-style-type: upper-alpha; }
:is(.mbed-doc, .pm-md-body) li.mb-li-la { list-style-type: lower-alpha; }
:is(.mbed-doc, .pm-md-body) li.mb-li-ur { list-style-type: upper-roman; }
:is(.mbed-doc, .pm-md-body) li.mb-li-lr { list-style-type: lower-roman; }
/* A picture sits in its line like a word, so the line's alignment places it -- which is how the
   toolbar's Align left / centre / right move the seal (Dom, 2026-09-16). The app's Tailwind
   preflight makes every img display:block, and a block picture ignored text-align entirely. */
.mbed-doc img { max-width: 100%; display: inline-block; vertical-align: bottom; }
.mbed-doc .ProseMirror-selectednode { outline: 2px solid var(--gv-brand-300); }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }

/* The three fonts (MB_ED_FONT_FAMILIES): the whole document's, on the editor, and a stretch of
   text's own. Each matches one of the PDF's built-in fonts width for width, so the pages break
   where the PDF does. */
.mbed-doc.mbed-font--serif { font-family: "Tinos", "Times New Roman", Times, serif; }
.mbed-doc.mbed-font--mono { font-family: "Cousine", "Courier New", Courier, monospace; }
.mbed-doc .mb-font-sans { font-family: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.mbed-doc .mb-font-serif { font-family: "Tinos", "Times New Roman", Times, serif; }
.mbed-doc .mb-font-mono { font-family: "Cousine", "Courier New", Courier, monospace; }

/* Text sizes (MB_ED_FONT_SIZES), in points: 4/3 of a pixel each, as everything on the page is. */
.mbed-doc .mb-size-8 { font-size: 10.667px; line-height: 1.4; }
.mbed-doc .mb-size-9 { font-size: 12.000px; line-height: 1.4; }
.mbed-doc .mb-size-10 { font-size: 13.333px; line-height: 1.4; }
.mbed-doc .mb-size-11 { font-size: 14.667px; line-height: 1.4; }
.mbed-doc .mb-size-12 { font-size: 16.000px; line-height: 1.4; }
.mbed-doc .mb-size-14 { font-size: 18.667px; line-height: 1.4; }
.mbed-doc .mb-size-18 { font-size: 24.000px; line-height: 1.4; }
.mbed-doc .mb-size-24 { font-size: 32.000px; line-height: 1.4; }
.mbed-doc .mb-size-30 { font-size: 40.000px; line-height: 1.4; }
.mbed-doc .mb-size-36 { font-size: 48.000px; line-height: 1.4; }
.mbed-doc .mb-size-48 { font-size: 64.000px; line-height: 1.4; }
.mbed-doc .mb-size-60 { font-size: 80.000px; line-height: 1.4; }
.mbed-doc .mb-size-72 { font-size: 96.000px; line-height: 1.4; }
.mbed-doc .mb-size-96 { font-size: 128.000px; line-height: 1.4; }

/* The font menu on the toolbar: its label is the font and size at the caret, set in that font. */
.mbed-toolbar__font {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 96px;
    height: var(--gv-control-sm);
    padding: 0 8px;
    border: var(--gv-border-width) solid transparent;
    border-radius: var(--gv-radius-sm);
    background: transparent;
    color: var(--gv-ink-700);
    font-size: var(--gv-text-sm);
    cursor: pointer;
}
/* The size control, as Google Docs draws it: − [size] +, and the list the box opens. */
.mbed-size { display: inline-flex; align-items: center; gap: 2px; }
.mbed-size__step {
    display: grid; place-items: center;
    width: 24px; height: var(--gv-control-sm);
    padding: 0; border: 0; border-radius: var(--gv-radius-sm);
    background: transparent; color: var(--gv-ink-700);
    font-size: var(--gv-text-md, 16px); line-height: 1; cursor: pointer;
}
.mbed-size__step:hover { background: var(--gv-surface-sunk); }
.mbed-size__step:focus-visible { outline: var(--gv-focus-width) solid var(--gv-focus-color); outline-offset: 1px; }
.mbed-size__box {
    width: 38px; height: 26px;
    padding: 0; text-align: center;
    border: var(--gv-border-width) solid var(--gv-ink-400); border-radius: var(--gv-radius-sm);
    background: var(--gv-surface); color: var(--gv-text);
    font: inherit; font-size: var(--gv-text-sm); font-variant-numeric: tabular-nums;
}
.mbed-size__box:focus { outline: none; border: 2px solid var(--gv-brand-600); }
.mbed-poplist {
    /* Sized and drawn like the app's other menus -- the ⋯ menus, GV.menu / .gv-picker in
       components.css -- so the toolbar's three dropdowns are the same kind of thing to look at
       (Dom, 2026-09-16). */
    position: fixed; z-index: 60;
    max-height: min(560px, 70vh); overflow-y: auto;
    padding: var(--gv-space-1) 0;
    background: var(--gv-surface);
    border: 1px solid var(--gv-border);
    border-radius: var(--gv-radius-lg);
    box-shadow: var(--gv-shadow-lg);
    font-family: var(--gv-font-ui);
}
.mbed-poplist--sizes { width: 4rem; }
.mbed-poplist--fonts { min-width: 11rem; }
.mbed-poplist__opt {
    display: block; width: 100%;
    padding: var(--gv-space-1) var(--gv-space-3); border: 0; background: transparent;
    color: var(--gv-text); font-size: var(--gv-text-xs); text-align: left; cursor: pointer;
}
.mbed-poplist--sizes .mbed-poplist__opt { text-align: center; padding: var(--gv-space-1) 0; font-variant-numeric: tabular-nums; }
.mbed-poplist__opt:hover { background: var(--gv-surface-sunk); }
.mbed-poplist__opt.is-selected { background: var(--gv-surface-sunk); color: var(--gv-brand-900); font-weight: var(--gv-weight-semibold); }
.mbed-poplist__sep { height: 1px; margin: var(--gv-space-1) 0; background: var(--gv-border); }
.mbed-poplist__head { padding: var(--gv-space-2) var(--gv-space-3) var(--gv-space-1); font-size: var(--gv-text-2xs); color: var(--gv-text-muted); }
.mbed-poplist--spacing { min-width: 15rem; }
/* The zoom box (editor/pagination.js), as narrow as its widest size. */
.mbed-toolbar__font.mbed-toolbar__zoom { min-width: 64px; margin-left: 2px; justify-content: center; }
/* Its caret beside the zoom, not at the box's far edge (#836): with the caret pushed right "Fit"
   sat apart from its own ▾. The same 64px, so the row is no wider. */
.mbed-toolbar__font.mbed-toolbar__zoom i { margin-left: 0; }
.mbed-poplist--zoom { width: 5rem; }
/* The Custom spacing dialog (editor/spacing.js): three labelled choices, one per row. */
.mbed-spacing { display: flex; flex-direction: column; gap: var(--gv-space-3); }
.mbed-spacing__row { display: flex; align-items: center; justify-content: space-between; gap: var(--gv-space-3); font-size: var(--gv-text-sm); }
.mbed-spacing__row .gv-select { width: 9rem; }
/* Page setup's paper size names are longer ("Letter (8.5\" × 11\")"). */
#mbed-pg-size { width: 12rem; }
/* The Page margins dialog (editor/margins.js): an inches box per side. */
.mbed-margin { display: inline-flex; align-items: center; gap: var(--gv-space-2); color: var(--gv-text-subtle); }
.mbed-margin .gv-input { width: 6rem; text-align: right; }
.mbed-margin__note { margin: 0; font-size: var(--gv-text-xs); color: var(--gv-text-subtle); }
.mbed-poplist__opt.is-disabled { color: var(--gv-text-disabled); cursor: default; }
.mbed-poplist__opt.is-disabled:hover { background: transparent; }
.mbed-toolbar__font i { margin-left: auto; font-size: var(--gv-text-2xs); color: var(--gv-ink-500); }
.mbed-toolbar__font:hover { background: var(--gv-surface-sunk); border-color: var(--gv-border); }
.mbed-toolbar__font:focus-visible { outline: var(--gv-focus-width) solid var(--gv-focus-color); outline-offset: 1px; }

/* Indent: half an inch a step, the way a word processor's Tab does. */
.mbed-doc .mb-indent-1 { margin-left: 48px; }
.mbed-doc .mb-indent-2 { margin-left: 96px; }
.mbed-doc .mb-indent-3 { margin-left: 144px; }
.mbed-doc .mb-indent-4 { margin-left: 192px; }
.mbed-doc .mb-indent-5 { margin-left: 240px; }
.mbed-doc .mb-indent-6 { margin-left: 288px; }
.mbed-doc .mb-indent-7 { margin-left: 336px; }
.mbed-doc .mb-indent-8 { margin-left: 384px; }
/* A first-line indent: Tab once at a line's start indents its first line only (first-line.js). */
.mbed-doc :is(p, h3.mbed-item).mb-fli { text-indent: 48px; }
/* A tab typed mid-line goes to the next half-inch stop, as in Word and Google Docs (first-line.js). */
.mbed-doc { tab-size: 48px; -moz-tab-size: 48px; }

/* The action taken: "Action: " in plain weight (a real, non-editable span, so it prints),
   then the motion in bold, 3pt below the narrative. */
.mbed-doc p.mb-action { margin-top: 4px; font-weight: 700; }
.mbed-lead { font-weight: 400; user-select: none; }

/* Seal, board, which minutes. */
/* The title lines, free text at the top of the header block: the seal's line, the board name,
   the minutes-and-date line. Their sizes only -- NO SPACE is built in under any of them (Dom,
   2026-09-16). Space between the title and the text is blank lines the clerk types, so there is
   nothing invisible to delete and nothing a click can fall through. */
.mbed-doc p.mb-t-seal { line-height: 0; margin-bottom: 0; }
.mbed-doc p.mb-t-board { font-size: 18.667px; line-height: 26.667px; font-weight: 700; margin-bottom: 0; }
.mbed-doc p.mb-t-sub { font-size: 14.667px; line-height: 20px; font-weight: 700; margin-bottom: 0; }

/* LINE AND PARAGRAPH SPACING (editor/spacing.js; Dom, 2026-09-17). A line with no spacing class is
 * "1.15" -- the page's own 1.4 line height, so no existing minutes move -- and the others scale
 * from it: Double is twice 1.15's gap, Single a little tighter. Unitless on the line AND on
 * everything in it, so a sized stretch (mb-size-*) spaces by its own size the same way. After the
 * title rules, so a title line takes them too.
 *
 * SPACE BEFORE AND AFTER ADD UP, as in Google Docs: in points, 4/3px each, drawn as PADDING rather
 * than margin. Margins between neighbouring lines collapse -- 10pt after one and 10pt before the
 * next gave 10pt, not 20 -- and padding never does. Only between paragraphs: a Shift+Enter line
 * break is inside one paragraph and gets none. */
/* A box's first line (h3.mbed-item) is spaced like any line too (Dom, 2026-09-24). */
.mbed-doc :is(p, h3.mbed-item).mb-lh-100, .mbed-doc :is(p, h3.mbed-item).mb-lh-100 * { line-height: 1.217; }
.mbed-doc :is(p, h3.mbed-item).mb-lh-125, .mbed-doc :is(p, h3.mbed-item).mb-lh-125 * { line-height: 1.522; }
.mbed-doc :is(p, h3.mbed-item).mb-lh-150, .mbed-doc :is(p, h3.mbed-item).mb-lh-150 * { line-height: 1.826; }
.mbed-doc :is(p, h3.mbed-item).mb-lh-175, .mbed-doc :is(p, h3.mbed-item).mb-lh-175 * { line-height: 2.13; }
.mbed-doc :is(p, h3.mbed-item).mb-lh-200, .mbed-doc :is(p, h3.mbed-item).mb-lh-200 * { line-height: 2.435; }
.mbed-doc :is(p, h3.mbed-item).mb-lh-250, .mbed-doc :is(p, h3.mbed-item).mb-lh-250 * { line-height: 3.043; }
.mbed-doc :is(p, h3.mbed-item).mb-lh-300, .mbed-doc :is(p, h3.mbed-item).mb-lh-300 * { line-height: 3.652; }
.mbed-doc :is(p, h3.mbed-item).mb-sb-0 { padding-top: 0.0px; }  .mbed-doc :is(p, h3.mbed-item).mb-sa-0 { padding-bottom: 0.0px; }
.mbed-doc :is(p, h3.mbed-item).mb-sb-4 { padding-top: 5.333px; }  .mbed-doc :is(p, h3.mbed-item).mb-sa-4 { padding-bottom: 5.333px; }
.mbed-doc :is(p, h3.mbed-item).mb-sb-6 { padding-top: 8.0px; }  .mbed-doc :is(p, h3.mbed-item).mb-sa-6 { padding-bottom: 8.0px; }
.mbed-doc :is(p, h3.mbed-item).mb-sb-8 { padding-top: 10.667px; }  .mbed-doc :is(p, h3.mbed-item).mb-sa-8 { padding-bottom: 10.667px; }
.mbed-doc :is(p, h3.mbed-item).mb-sb-10 { padding-top: 13.333px; }  .mbed-doc :is(p, h3.mbed-item).mb-sa-10 { padding-bottom: 13.333px; }
.mbed-doc :is(p, h3.mbed-item).mb-sb-12 { padding-top: 16.0px; }  .mbed-doc :is(p, h3.mbed-item).mb-sa-12 { padding-bottom: 16.0px; }
.mbed-doc :is(p, h3.mbed-item).mb-sb-18 { padding-top: 24.0px; }  .mbed-doc :is(p, h3.mbed-item).mb-sa-18 { padding-bottom: 24.0px; }
.mbed-doc :is(p, h3.mbed-item).mb-sb-24 { padding-top: 32.0px; }  .mbed-doc :is(p, h3.mbed-item).mb-sa-24 { padding-bottom: 32.0px; }
.mbed-doc :is(p, h3.mbed-item).mb-sb-36 { padding-top: 48.0px; }  .mbed-doc :is(p, h3.mbed-item).mb-sa-36 { padding-bottom: 48.0px; }


/* ── the blocks ──
   Each item, note and the header is a block of the document. A block takes no room of its own
   -- no padding, border or margin, so a line sits exactly where the PDF prints it -- and is
   drawn only on screen: a soft highlight under the pointer, and the same highlight with a bar
   down its left edge on the block holding the caret. Both are drawn page by page in a layer
   between the paper and the text (mbEdDrawHighlights), so a block that runs onto the next page
   still shows the page's end, its footer and the gap; they move nothing and never print. */
.mbed-blk { position: relative; }
.mbed-hilite { position: absolute; inset: 0; pointer-events: none; }
.mbed-hl { position: absolute; background: var(--gv-brand-50); }
.mbed-hl.is-top { border-top-left-radius: var(--gv-radius-md); border-top-right-radius: var(--gv-radius-md); }
/* Square where the Rewrite tab stands on it (highlights.js, row-buttons.js). */
.mbed-hl.is-top.is-tabbed { border-top-right-radius: 0; }
.mbed-hl.is-bottom { border-bottom-left-radius: var(--gv-radius-md); border-bottom-right-radius: var(--gv-radius-md); }
.mbed-hl.is-cur { box-shadow: inset 3px 0 0 var(--gv-brand-300); }
/* An item with no title: a soft amber band with an amber edge, the app's "needs attention". */
.mbed-hl.is-warn { background: var(--gv-warning-bg); box-shadow: inset 3px 0 0 var(--gv-warning); }
/* An item not written from its transcript stretch (highlights.js): the same orange, hovered or lit too. */
.mbed-hl.is-stale { background: var(--gv-warning-bg); box-shadow: inset 3px 0 0 var(--gv-warning); }
/* ...and its title's placeholder, laid over the empty title line like a text box's placeholder
   (Dom, 2026-09-16): the caret sits at its start and the first letter typed takes it away. Laid
   over, not after, because an empty title still holds a line break and anything after it fell
   to the next line. On screen only: a pseudo-element takes no text and never reaches the PDF.
   A title's hangs off the title's text, so it starts after the item's number rather than on top
   of it. */
.mbed-doc h3.mbed-item.is-untitled > .mbed-htext,
.mbed-doc p.is-empty-note { position: relative; }
.mbed-doc h3.mbed-item.is-untitled > .mbed-htext::after,
.mbed-doc p.is-empty-note::after {
    content: attr(data-ph);
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    color: var(--gv-warning-fg);
    opacity: 0.55;
    font-style: italic;
    font-weight: 400;
    text-decoration: none;
    pointer-events: none;
    user-select: none;
}
.mbed-doc h3.mbed-item.is-untitled > .mbed-htext::after { content: 'Empty text box'; }
/* An empty title over written text, with the caret elsewhere: folded away (decorations.js). */
.mbed-doc h3.mbed-item.is-bare { height: 0; min-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }

/* The meeting header: 13pt lines, 2pt between paragraphs. */
.mbed-blk--header > * { line-height: 17.333px; margin-bottom: 0; }

/* An item heading: its number, then its title, indented with the agenda's nesting. The
   agenda's level formatting (underline, italic) is on the heading's classes. */
.mbed-item {
    margin: 7px 0 4px;
    padding-left: calc(var(--mbed-ind) * var(--mbed-stop));
    font-size: 13.333px;
    line-height: 18.667px;
    font-weight: 400;
}
/* No bold, underline or italic from the style: a title's look is its own formatting now
   (mbEdTitleInnerHtml), so a clerk can take it off. */
.mbed-num { font-weight: 400; user-select: none; }
/* An item with its number taken off (add-items.js mbDocSetItemNumbered): only the number goes, and
 * its words stay where they were -- the level's indent and the room the number took -- as in
 * Google Docs after Backspace. A second Backspace takes it out to the margin (is-margin). Still
 * the same block: transcript reference, Rewrite, drag and delete. */
.mbed-item.is-plain { padding-left: calc(var(--mbed-ind) * var(--mbed-stop) + var(--mbed-hang)); }
.mbed-item.is-plain.is-margin { padding-left: 0; }
/* A NUMBERED OR BULLETED FIRST LINE HANGS (Dom, 2026-09-24): every line it wraps onto starts under its
 * words, never back under the number. The number or bullet (add-items.js mbEdTitleListCmd) starts at
 * the level's edge, flush with the heading above it, and the words a quarter inch on (#830, Ryan
 * 2026-10-02); a number too long for the quarter inch pushes the first line's words on rather than
 * running into them. */
.mbed-item:has(> .mbed-num) {
    position: relative;
    padding-left: calc(var(--mbed-ind) * var(--mbed-stop) + var(--mbed-hang));
    text-indent: calc(0px - var(--mbed-hang));
}
/* ...a bulleted box at the margin too: its bullet at the margin, not hung out past it. */
.mbed-item.is-plain.is-margin:has(> .mbed-num) { padding-left: var(--mbed-hang); }
.mbed-item > .mbed-num {
    display: inline-block;
    box-sizing: border-box;
    min-width: var(--mbed-hang);
    padding-right: 0.5em;
    text-align: left;
    text-indent: 0;
    white-space: nowrap;
}
/* ...but a centred or right-aligned one takes its number or bullet with it, right before the words,
 * as Google Docs and Word do (Dom, 2026-09-24): the two move as one line. */
.mbed-item:is([data-align="center"], [data-align="right"]):has(> .mbed-num) { text-indent: 0; }
.mbed-item:is([data-align="center"], [data-align="right"]) > .mbed-num { min-width: 0; }
.mbed-mo {
    display: block;
    text-align: right;
    font-size: 12px;
    font-weight: 400;
    color: var(--gv-ink-500);
    user-select: none;
}
/* An item's minutes start where its words do: one stop in from its heading, where a Tab from the
   heading's edge puts a line (Dom, 2026-09-24). */
.mbed-blk--item > p { padding-left: calc(var(--mbed-sub) * var(--mbed-stop)); }
/* ...unless the clerk took a line out to the heading's edge (Decrease indent, Dom 2026-09-16). */
.mbed-blk--item > p.mb-indent-out { padding-left: calc(var(--mbed-ind) * var(--mbed-stop)); }
/* ...and on out, a stop at a time, to the page's margin (Dom, 2026-09-25; first-line.js mbEdLineFloor). */
.mbed-blk--item > p.mb-indent-out-2 { padding-left: calc(max(0, var(--mbed-ind) - 1) * var(--mbed-stop)); }
.mbed-blk--item > p.mb-indent-out-3 { padding-left: calc(max(0, var(--mbed-ind) - 2) * var(--mbed-stop)); }
.mbed-blk--item > p.mb-indent-out-4 { padding-left: calc(max(0, var(--mbed-ind) - 3) * var(--mbed-stop)); }
.mbed-blk--item > p.mb-indent-out-5 { padding-left: calc(max(0, var(--mbed-ind) - 4) * var(--mbed-stop)); }
.mbed-blk--item > p.mb-indent-out-6 { padding-left: 0; }
/* A list in an item's minutes: its words at the same stop as the minutes' lines, the bullets and
   numbers hanging before them; each level in, another stop (below). */
.mbed-blk--item > ul,
.mbed-blk--item > ol { padding-left: calc(var(--mbed-sub) * var(--mbed-stop)); }
/* A text note's "See Exhibit" line sits flush with the note's text. */
.mbed-exref.mbed-exref--note { padding-left: 0; }
.mbed-exref {
    padding-left: calc(var(--mbed-sub) * var(--mbed-stop));
    font-size: 12px;
    line-height: 18.667px;
    font-style: italic;
    color: var(--gv-info-fg);
    user-select: none;
}
/* An item whose transcript reference moved after its minutes were written (Dom, 2026-09-24;
 * stage/source-rewrite.js): one amber line under them, never printed, with a Rewrite. */
.mbed-stale {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 4px;
    padding-left: calc(var(--mbed-sub) * var(--mbed-stop));
    font-family: var(--gv-font-ui); font-size: 12px; line-height: 18.667px;
    color: var(--gv-warning-fg);
    user-select: none;
}
.mbed-stale i { font-size: 11px; }
/* Under the Write options of an item "not discussed" with no stretch yet (source-rewrite.js). */
.mbdoc-src__rwneed { margin: 4px 0 0; font-family: var(--gv-font-ui); font-size: var(--gv-text-xs); color: var(--gv-text-subtle); }
.mbed-stale button {
    padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit;
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.mbed-stale button:hover { text-decoration-thickness: 2px; }
.mbed-blk--consent,
.mbed-blk--signature { font-style: italic; }
.mbed-marker { height: 0; overflow: visible; }

.mbed-siglines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    margin-top: 13px;
    user-select: none;
}
.mbed-sigline { box-sizing: border-box; height: 77.333px; padding-top: 29.333px; }
.mbed-sigline > span {
    display: block;
    padding-top: 4px;
    border-top: 1px solid var(--gv-ink-900);
    font-size: 12px;
    line-height: 16px;
    font-style: normal;
}

.mbed-exhibits { user-select: none; }
/* THE EXHIBITS AS PAGES (editor/exhibit-pages.js; Dom, 2026-09-23): after the minutes, each
 * attached file in a frame the size of a page -- the browser's PDF viewer for a PDF, the picture
 * for an image. Page furniture, not document: nothing here is editable, and the PDF appends the
 * real file rather than drawing any of this. */
.mbed-exhpage { overflow: hidden; user-select: none; }
.mbed-exhpage__band {
    position: absolute; top: 0; left: 0; right: 0; height: 22px;
    display: flex; align-items: center; padding: 0 16px;
    background: var(--gv-ink-800); color: var(--gv-text-invert);
    font-family: var(--gv-font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
.mbed-exhpage__name {
    position: absolute; top: 22px; left: 0; right: 0; padding: 4px 16px;
    font-family: var(--gv-font-ui); font-size: 11px; color: var(--gv-text-subtle);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mbed-exhpage__doc {
    position: absolute; top: 46px; left: 0; width: 100%; height: calc(100% - 46px);
    border: 0; background: var(--gv-surface);
    /* The column scrolls past it; the frame never takes the wheel (exhibit-pages.js). */
    pointer-events: none;
}
.mbed-exhpage__open {
    margin-left: auto; color: var(--gv-text-invert); font-weight: 600; text-decoration: underline;
    text-underline-offset: 2px; pointer-events: auto;
}
.mbed-exhpage__img { position: absolute; top: 46px; left: 0; width: 100%; height: calc(100% - 46px); object-fit: contain; }
.mbed-exhpage__none { position: absolute; top: 64px; left: 0; right: 0; padding: 0 16px; font-size: 12px; color: var(--gv-text-subtle); }
.mbed-exh-title { margin-bottom: 21px; text-align: center; font-size: 17.333px; line-height: 21px; font-weight: 700; }
.mbed-exh-entry { color: var(--gv-info-fg); line-height: 21.333px; }


/* A page break: the rest of the page, the gap and the next page's top margin. Nothing in it. */
.mbed-break { display: block; pointer-events: none; }

/* While the AI writes an item: said on the page, never printed. The item's minutes are
   hidden but keep their space, so nothing below moves, and the sentence types itself over
   the first of their lines with a blinking cursor (Dom, 2026-09-16). An item with no minutes
   yet has no space to lay it over, so the line keeps a line's height of its own. */
.mbed-blk--item.is-writing > :not(h3):not(.mbed-writing) { visibility: hidden; }
.mbed-writing {
    --mbed-typing-w: 19em;   /* the sentence, "…" included, with room for a wider system font */
    position: relative;
    height: 0;
    font-family: var(--gv-font-ui);
    font-size: var(--gv-text-xs);
    line-height: 18.667px;
    color: var(--gv-ai-fg);
}
.mbed-blk--item.is-writing > .mbed-writing:last-child { height: 18.667px; }
.mbed-writing__type {
    position: absolute;
    top: 0;
    left: calc(var(--mbed-sub) * var(--mbed-stop));
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    border-right: 2px solid var(--gv-ai-fg);
    animation: mbEdTyping 3.4s steps(38) infinite, mbEdTypingCaret 1.06s steps(1) infinite;
}
/* Types for 70% of the loop, then rests on the finished sentence before starting again. */
@keyframes mbEdTyping {
    0%        { width: 0; }
    70%, 100% { width: var(--mbed-typing-w); }
}
@keyframes mbEdTypingCaret {
    0%, 66%   { border-right-color: var(--gv-ai-fg); }
    67%, 100% { border-right-color: transparent; }
}
/* Reduced motion: the sentence is simply there, whole and still. */
@media (prefers-reduced-motion: reduce) {
    .mbed-writing__type { animation: none; width: var(--mbed-typing-w); border-right-color: transparent; }
}

/* Find and replace. */
.mbed-doc mark.mbdoc-hit { padding: 0; background: var(--gv-warning-border); color: inherit; }
.mbed-doc mark.mbdoc-hit.is-current { background: var(--gv-warning); }

/* ── the margin buttons ── placed by mbEdPlaceChrome, outside the zoom, at screen size. */

/* The side menu, in the left margin beside a block (editor/side-menu.js): a + and, on an item,
   the grip to drag it by -- BlockNote's (Dom, 2026-09-21). */
.mbed-side { position: absolute; z-index: 6; display: flex; align-items: center; gap: 2px; }
.mbed-side__plus, .mbed-grip {
    display: grid;
    place-items: center;
    width: 22px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--gv-radius-sm);
    background: transparent;
    color: var(--gv-ink-400);
    font-size: var(--gv-text-xs);
}
.mbed-side__plus { cursor: pointer; }
.mbed-grip { cursor: grab; }
.mbed-grip[hidden] { display: none; }
.mbed-side__plus:hover, .mbed-side__plus[aria-expanded="true"], .mbed-grip:hover { background: var(--gv-surface-sunk); color: var(--gv-ink-700); }
.mbed-side__plus:focus-visible { outline: var(--gv-focus-width) solid var(--gv-focus-color); outline-offset: 1px; }
/* The +'s menu: each option an icon in a tile, its name, and a line on what it is. */
.mbed-poplist--blocks { width: 18rem; padding: var(--gv-space-1); }
.mbed-poplist__opt.is-rich { display: flex; align-items: center; gap: var(--gv-space-3); padding: var(--gv-space-1) var(--gv-space-2); border-radius: var(--gv-radius-sm); }
/* The tile keeps its size; the name and description take the rest (the plain rows' first span
   grows, which here would stretch the tile). */
.mbed-poplist__opt.is-rich > .mbed-poplist__tile { flex: 0 0 auto; }
.mbed-poplist__opt.is-rich > .mbed-poplist__txt { flex: 1 1 auto; text-align: left; }
.mbed-poplist__tile {
    flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px;
    border: 1px solid var(--gv-border); border-radius: var(--gv-radius-sm); background: var(--gv-surface-sunk);
    color: var(--gv-ink-700); font-size: var(--gv-text-sm);
}
.mbed-poplist__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mbed-poplist__txt b { font-weight: 500; font-size: var(--gv-text-sm); color: var(--gv-text); }
.mbed-poplist__txt small { font-size: var(--gv-text-2xs); color: var(--gv-text-subtle); }
.mbed-poplist--blocks .mbed-poplist__head { padding-left: var(--gv-space-2); }
.mbed-grip:focus-visible { outline: var(--gv-focus-width) solid var(--gv-focus-color); outline-offset: 1px; }
.mbed-host.is-dragging,
.mbed-host.is-dragging * { cursor: grabbing; user-select: none; }
.mbed-host.is-dragging .mbed-tools { display: none; }
/* Where a dragged item will land. */
.mbed-drop {
    position: absolute;
    z-index: 7;
    height: 2px;
    border-radius: var(--gv-radius-full);
    background: var(--gv-brand-600);
    pointer-events: none;
}

.mbed-tools {
    position: absolute;
    z-index: 6;
    display: flex;
    /* In a row across the lit block's top edge, at its right end (row-buttons.js; Dom, 2026-09-22). */
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-family: var(--gv-font-ui);
}
.mbed-tool,
.mbed-tools > .mb-fill-anchor > .gv-btn {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    min-height: 0;
    padding: 0;
    border: var(--gv-border-width) solid var(--gv-border);
    border-radius: var(--gv-radius-sm);
    background: var(--gv-surface);
    box-shadow: var(--gv-shadow-sm);
    color: var(--gv-ink-700);
    font-size: var(--gv-text-xs);
    cursor: pointer;
}
/* A button in the row that says what it does: the page break. */
.mbed-tool.mbed-tool--label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    padding: 0 8px 0 7px;
    white-space: nowrap;
    font-weight: var(--gv-weight-semibold, 600);
}
.mbed-tool:hover,
.mbed-tools > .mb-fill-anchor > .gv-btn:hover { background: var(--gv-surface-sunk); border-color: var(--gv-border-strong); }
/* A tab standing on the lit block's top edge (row-buttons.js; Dom, 2026-09-22): white as ever,
   rounded at the top only, with no line along the bottom where it meets the block. */
.mbed-tools.is-tab { gap: 2px; }
.mbed-tools.is-tab > .mb-fill-anchor > .gv-btn,
.mbed-tools.is-tab > .mbed-tool {
    /* Smaller than the other rows' buttons (Dom, 2026-09-22): the nib is sized in em, so it
       shrinks with the words. */
    height: 20px;
    padding: 0 7px 0 5px;
    font-size: 11px;
    gap: 3px;
    border-bottom: 0;
    border-radius: var(--gv-radius-sm) var(--gv-radius-sm) 0 0;
    box-shadow: none;
}
.mbed-tool:focus-visible,
.mbed-tools > .mb-fill-anchor > .gv-btn:focus-visible { outline: var(--gv-focus-width) solid var(--gv-focus-color); outline-offset: 1px; }
/* Rewrite carries its name beside the nib (Dom, 2026-09-16): the one button in the row that
   is a word, because it is the one that replaces the item's text. The nib's ink line draws on
   hover, as on every AI action. */
.mbed-tools > .mb-fill-anchor > .gv-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    padding: 0 8px 0 6px;
    color: var(--gv-brand-700);
    font-weight: var(--gv-weight-semibold, 600);
    white-space: nowrap;
}

.mbed-marks { position: absolute; inset: 0 auto auto 0; pointer-events: none; }
.mbed-mark {
    position: absolute;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: var(--gv-border-width) dashed var(--gv-border-strong);
    border-radius: var(--gv-radius-full);
    background: var(--gv-surface);
    color: var(--gv-text-subtle);
    font-size: var(--gv-text-2xs);
    cursor: pointer;
    pointer-events: auto;
}
.mbed-mark:hover { color: var(--gv-brand-700); border-color: var(--gv-brand-300); }
.mbed-mark:focus-visible { outline: var(--gv-focus-width) solid var(--gv-focus-color); outline-offset: 1px; }
.mbed-mark > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The copy the PDF is drawn from: laid out at full size, off screen. */
.mbed-offscreen {
    position: fixed;
    top: 0;
    left: -20000px;
    width: 816px;
    pointer-events: none;
}

@media (max-width: 640px) {
    .mbdoc-doc { padding: var(--gv-space-3) var(--gv-space-2) var(--gv-space-8); }
}

/* ── the Rewrite popover ──────────────────────────────────────────────────── */
/* Anchored to the button's own wrapper. The popover existed before this change and was
 * unreachable (see mbOpenFillOptions); what is new is that it is on the design system
 * rather than in the indigo it was written in. */
.mb-fill-anchor { position: relative; display: inline-flex; }
.mb-fill-popover {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: var(--gv-space-1);
    z-index: var(--gv-z-dropdown);
    /* Wide enough for "Change where in the transcript this was discussed" to sit on two
       comfortable lines. The menu this replaced was 9.5rem, sized for four one-word levels
       and nothing else; that width cannot hold the three controls added to it. */
    min-width: 21rem;
    /* A cap is worth having: the panel is anchored under its button and does not flip, so
       a tall one scrolls inside itself instead of running past the bottom of the window. */
    max-height: min(70vh, 30rem);
    overflow-y: auto;
    /* NO HORIZONTAL PADDING. The rows run edge to edge and light up whole, the way a menu
       row does; each block below supplies its own side padding instead. A row that stops
       12px short of the panel wall does not read as a menu row. */
    padding: var(--gv-space-1) 0;
    background: var(--gv-surface);
    border: var(--gv-border-width) solid var(--gv-border);
    border-radius: var(--gv-radius-lg);
    box-shadow: var(--gv-shadow-lg);
    text-align: left;
}
/* "Level of detail" -- GV.menu's own heading treatment, since this is its arrangement. */
.mb-fill-head {
    margin: 0;
    padding: var(--gv-space-1) var(--gv-space-3);
    font-size: var(--gv-text-2xs);
    color: var(--gv-text-muted);
}
.mb-fill-sep {
    height: 1px;
    margin: var(--gv-space-1) 0;
    background: var(--gv-border);
}

.mb-fill-lbl {
    display: block;
    margin-bottom: var(--gv-space-2);
    font-size: var(--gv-text-xs);
    font-weight: var(--gv-weight-medium);
    color: var(--gv-text-subtle);
}
.mb-fill-lbl .opt { font-weight: var(--gv-weight-normal); color: var(--gv-text-disabled); }
/* The detail levels, as GV.choices wearing .gv-picker__opt's clothes.
 *
 * TWO THINGS ARE BEING HELD APART HERE. The SEMANTICS stay the component's: a radiogroup
 * with one tab stop, arrow keys between the options, Space and Enter wired -- which is what
 * these four are, four settings of one value, and what the GV.menu they replaced was not.
 * The METRICS come from .gv-picker__opt, the row GV.menu itself is built on: 4px by 12px,
 * an 8px gap, a 12px gutter for the glyph, 12px text. So the list reads as the menu a clerk
 * already knows and behaves as the control it actually is.
 *
 * Every number below is copied from that rule rather than chosen, and that is the point --
 * a second set of values for a row that is meant to look identical is the drift this
 * stylesheet exists to stop. If .gv-picker__opt moves, this should move with it.
 *
 * The component's own card treatment comes off entirely: no border, no fill, no radius, no
 * 28px badge box. The chosen row is marked the way the picker marks its chosen option --
 * brand-900 semibold label, brand-700 glyph, NO background -- so nothing is tinted before
 * the clerk has chosen anything, and what marks the choice is the same mark the rest of the
 * app uses for it. */
.mb-fill-detail .gv-choices { gap: 0; }
.mb-fill-detail .gv-choice {
    border: 0;
    background: none;
    border-radius: 0;
}
.mb-fill-detail .gv-choice:hover,
.mb-fill-detail .gv-choice.is-selected { background: none; box-shadow: none; }
.mb-fill-detail .gv-choice__pick {
    gap: var(--gv-space-2);
    padding: var(--gv-space-1) var(--gv-space-3);
    font-size: var(--gv-text-xs);
    color: var(--gv-text);
}
.mb-fill-detail .gv-choice__pick:hover { background: var(--gv-surface-sunk); }
.mb-fill-detail .gv-choice.is-selected .gv-choice__pick {
    color: var(--gv-brand-900);
    font-weight: var(--gv-weight-semibold);
}
/* The glyph gutter, not a badge box. --gv-control-sm is 28px, sized to hold a letter. */
.mb-fill-detail .gv-choice__mark--icon {
    width: var(--gv-space-3);
    height: auto;
    font-size: var(--gv-text-2xs);
    color: var(--gv-text-disabled);
}
.mb-fill-detail .gv-choice.is-selected .gv-choice__mark--icon { color: var(--gv-brand-700); }
.mb-fill-detail .gv-choice__text { font-size: inherit; font-weight: inherit; }

/* "With instructions…", the link the three-line box hides behind.
 *
 * [hidden] NEEDS THE RULE. .gv-btn sets display:inline-flex, and any author display
 * declaration outbids the UA's [hidden]{display:none} -- so without this the button stays
 * on screen after it has been pressed, under the box it just opened. .mb-fmt-actions[hidden]
 * carries the same rule for the same reason; the wrapper below needs none, being a plain
 * div with no display of its own. */
/* THE PANEL'S OTHER TWO ROWS -- "With instructions…" and "Change where this was
 * discussed" -- on the same metrics as a detail level above them.
 *
 * One rule worn by both, and the numbers are .gv-picker__opt's again (4px by 12px, an 8px
 * gap, a 12px glyph gutter, 12px text), so all six rows in this panel come from one source
 * rather than three that agree today.
 *
 * Neither is a fifth setting: one opens a field, the other opens a picker. They sit below
 * the hairline for that reason, which is exactly where GV.menu put "With instructions…"
 * and where a clerk has already met it. */
.mb-fill-rowbtn {
    display: flex;
    align-items: center;
    gap: var(--gv-space-2);
    width: 100%;
    padding: var(--gv-space-1) var(--gv-space-3);
    border: 0;
    background: none;
    font-family: var(--gv-font-ui);
    font-size: var(--gv-text-xs);
    color: var(--gv-text);
    text-align: left;
    cursor: pointer;
}
.mb-fill-rowbtn i {
    flex: 0 0 auto;
    width: var(--gv-space-3);
    font-size: var(--gv-text-2xs);
    color: var(--gv-text-disabled);
}
.mb-fill-rowbtn__t { flex: 1; min-width: 0; }
.mb-fill-rowbtn:hover { background: var(--gv-surface-sunk); }
.mb-fill-rowbtn:focus-visible {
    outline: var(--gv-focus-width) solid var(--gv-focus-color);
    outline-offset: calc(-1 * var(--gv-focus-width));
}
/* WHAT THE ITEM IS POINTED AT, under the row that changes it.
 *
 * One line: the stretch it covers and who was speaking. Indented past the glyph gutter so
 * it hangs off the row's label rather than starting a new column -- it is that row's
 * detail, not a sixth entry in the list. Nothing drawn around it: a bordered box would make
 * the panel's last group read as a card sitting under five menu rows, and this is a
 * caption, not a control.
 *
 * The middot is drawn rather than typed, so nothing is left hanging when a fact is missing
 * -- a meeting with no speaker recorded would otherwise read "7:41-25:57 ·". */
.mb-fill-ref {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gv-space-2);
    margin: 0;
    padding: 0 var(--gv-space-3) var(--gv-space-2)
             calc(var(--gv-space-3) * 2 + var(--gv-space-2));
    /* SUBTEXT, and sized as such. A step below the 11px the rows above it use, because it
       is not a row: nothing is pressed here, it is the answer the row is offering to
       change. One weight and one colour across the whole line -- the range was a shade
       darker than the speaker beside it, which made a caption look like two facts of
       different importance when they are one sentence. */
    font-size: var(--gv-text-3xs);
    line-height: var(--gv-leading-snug);
    color: var(--gv-text-disabled);
}
.mb-fill-ref > span + span::before {
    content: "\00b7";
    margin-right: var(--gv-space-2);
    color: var(--gv-border-strong);
}
.mb-fill-ref .num { font-variant-numeric: tabular-nums; }

.mb-fill-extra-toggle[hidden] { display: none; }
/* The field itself is not a menu row, so it takes the side padding back. */
.mb-fill-extra-wrap { padding: var(--gv-space-2) var(--gv-space-3) 0; }

.mb-fill-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gv-space-2);
    margin-top: var(--gv-space-3);
    padding: 0 var(--gv-space-3);
}
/* ── the re-point modal (#529) ────────────────────────────────────────────────
 * "Where was this discussed?" on an item's menu, opening the Discussions candidate
 * picker in a dialog.
 *
 * The picker brings its own appearance with it: .gv-choice from components.css, and
 * .mbtv-tpq / .mbtv-tphint / .mbtv-tpb from discussions.css, both of which app.html
 * already loads on every screen. That is the whole promise of the feature, so there is
 * deliberately NOT a rule here for a candidate card, a letter or a play control. One
 * override and the two screens stop being the same control.
 *
 * What is left is what a DIALOG needs and a two-pane layout gave for free: a height to
 * scroll inside. GV.modal appends its panel to <body>, outside .mbdoc, so these resolve
 * against the global tokens rather than this file's palette block -- the local --line and
 * --gd would come back empty out there.
 */
.mbdoc-rp {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: var(--gv-space-3);
    /* READING HEIGHT, not list height. This was sized for a candidate list -- ten short
       cards, scanned. What it holds now is the transcript, and a clerk is reading speech
       to find the line an item starts on: too short a window and they are scrolling a
       paragraph at a time through a two-hour meeting to place one mark.
       72vh leaves the dialog's own head and foot on screen at 800px tall, which is the
       shortest laptop this has to work on. */
    max-height: min(72vh, 720px);
}

/* Which item this is about. The modal's title asks the question; this answers "about
   what", which the roster row supplied on Discussions and nothing supplies here. */
.mbdoc-rp-who {
    flex: 0 0 auto;
    margin: 0;
    font-size: var(--gv-text-xs);
    font-weight: 700;
    color: var(--gv-brand-900);
}

/* The candidate list, the escape-hatch buttons and the "back to the list" control are all
   gone: this modal IS the transcript now, and never renders a list to go back to. */

/* The transcript view: a search row, a hint line and a scrolling body, stacked as one
   bordered box. On Discussions these three sit flush inside a panel that already has an
   edge; a dialog has none to borrow, so the box draws its own. */
.mbdoc-rp--tr { gap: 0; }
.mbdoc-rp--tr .mbdoc-rp-who { margin-bottom: var(--gv-space-2); }
.mbdoc-rp--tr .mbtv-tpq {
    border: var(--gv-border-width) solid var(--gv-border);
    border-radius: var(--gv-radius-sm) var(--gv-radius-sm) 0 0;
}
.mbdoc-rp--tr .mbtv-tphint {
    border: var(--gv-border-width) solid var(--gv-border);
    border-top: 0;
}
.mbdoc-rp--tr .mbtv-tpb {
    /* NO SMOOTH SCROLL HERE. .mbtv-tpb sets scroll-behavior: smooth, which is right on
       Discussions where the transcript follows the recording and a glide shows the clerk
       it moved. This modal opens already scrolled to the item's current stretch, and a
       dialog that animates its own contents into place on open reads as the page settling
       rather than as the answer being shown. */
    scroll-behavior: auto;
    border: var(--gv-border-width) solid var(--gv-border);
    border-top: 0;
    border-radius: 0 0 var(--gv-radius-sm) var(--gv-radius-sm);
    min-height: 0;
}

/* ── find and replace (#77) ───────────────────────────────────────────────────
 * The box on the filter row FINDS: it highlights every match in the document and walks
 * them. It used to narrow the document instead (#443), and the two cannot both be true --
 * narrowing drops the header, the free text and the signature blocks whole, so the matches
 * in them could be neither shown nor stepped to.
 *
 * So the controls live in two places, and which one a thing goes in is decided by what it
 * belongs to rather than by how much room is left:
 *
 *   in the search box   how many matches, the arrows, what counts as a match, and Replace.
 *                       All of it belongs to FINDING, and all of it appears only once
 *                       something has been typed -- an empty box has nothing to count.
 *   the row below       the replacement itself. Drawn only when Replace is pressed.
 */

/* The box grows once it is carrying the find controls. .gv-filterbar__search caps itself at
 * 360px, which is right for a lone input on a shared toolbar and too narrow the moment a
 * count, two arrows, two toggles and a button are inside it. Overridden here rather than in
 * components.css because it is this tab's markup that puts them there.
 *
 * A wider cap, though, not `none` (#602). `none` was safe while the chips sat beside the
 * box and took the slack off it; with the replace row taking its own line of the bar the
 * box is alone on ITS line, and unbounded it grew to the full width of the bar -- which put
 * the count, the arrows and Replace hard against the right edge, a hand's width from the
 * word they are about. 32rem is the CONTENT box, so the box draws about 530px with its
 * padding and rule -- near enough to the 481px it measured when the chips were holding it
 * in that the controls sit where a clerk has been finding them.
 *
 * The cap is on .is-finding, so it holds whether or not Replace is open. Closed, it binds
 * only on a bar wide enough that the box would have passed 530px anyway (around 950px), so
 * the row a clerk sees most of the time is unchanged; it just stops growing past the point
 * where the controls start drifting away from the word. */
.mbdoc-find.is-finding {
    max-width: 32rem;
    flex: 1 1 22rem;
    gap: var(--gv-space-1);
}

/* The count and the arrows are one control, so they wrap as one. Left loose on a row that
 * wraps, the flex line broke between them and stranded an arrow at each end. */
.mbdoc-fr__step {
    display: inline-flex; align-items: center; gap: var(--gv-space-1); flex: 0 0 auto;
}
/* Tabular so "9 of 26" and "10 of 26" do not shove the arrows sideways while the clerk is
 * pressing them, and right-aligned so the number sits against them rather than drifting. */
.mbdoc-fr__n {
    flex: 0 0 auto;
    min-width: 4.5rem;
    text-align: right;
    font-size: var(--gv-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--gv-text-subtle);
}
.mbdoc-fr__nav {
    flex: 0 0 auto;
    width: var(--gv-control-xs); height: var(--gv-control-xs);
    display: inline-flex; align-items: center; justify-content: center;
    border: var(--gv-border-width) solid transparent;
    background: transparent;
    color: var(--gv-text-subtle);
    border-radius: var(--gv-radius-sm);
    font-size: var(--gv-text-2xs);
    cursor: pointer;
}
.mbdoc-fr__opt {
    flex: 0 0 auto;
    min-width: var(--gv-control-xs); height: var(--gv-control-xs);
    padding: 0 var(--gv-space-2);
    border: var(--gv-border-width) solid transparent;
    background: transparent;
    color: var(--gv-text-subtle);
    font-size: var(--gv-text-xs); font-weight: var(--gv-weight-medium);
    border-radius: var(--gv-radius-sm);
    cursor: pointer;
}
.mbdoc-fr__nav:hover, .mbdoc-fr__opt:hover {
    background: var(--gv-surface-sunk);
    color: var(--gv-ink-700);
}
.mbdoc-fr__opt.is-on {
    border-color: var(--gv-brand-border);
    background: var(--gv-brand-bg);
    color: var(--gv-brand-fg);
}
/* Replace, at the end of the box. Ruled off from the find controls beside it because it is
 * the one thing in there that does not answer "where is this word" -- it is what to do
 * next, and a clerk scanning the box should be able to see the join. */
.mbdoc-frt {
    display: inline-flex; align-items: center; gap: var(--gv-space-1); flex: 0 0 auto;
    height: var(--gv-control-xs);
    margin-left: var(--gv-space-1);
    padding: 0 var(--gv-space-2);
    border: var(--gv-border-width) solid transparent;
    border-left: var(--gv-border-width) solid var(--gv-border);
    border-radius: 0 var(--gv-radius-sm) var(--gv-radius-sm) 0;
    background: transparent;
    color: var(--gv-text-subtle);
    font-size: var(--gv-text-xs); font-weight: var(--gv-weight-medium);
    white-space: nowrap;
    cursor: pointer;
}
.mbdoc-frt:hover { background: var(--gv-surface-sunk); color: var(--gv-ink-700); }
/* Pressed is the brand, not the gold: the gold is spoken for by the matches themselves, and
 * a toggle wearing the same colour as the thing it reveals reads as one more match. */
.mbdoc-frt.is-on {
    background: var(--gv-brand-bg);
    color: var(--gv-brand-fg);
}
.mbdoc-frt:focus-visible,
.mbdoc-fr__opt:focus-visible,
.mbdoc-fr__nav:focus-visible,
.mbdoc-fr__btn:focus-visible,
.mbdoc-fr__x:focus-visible,
.mbdoc-fr__undo:focus-visible {
    outline: var(--gv-focus-width) solid var(--gv-focus-color);
    outline-offset: var(--gv-focus-offset);
}

/* The replace row, BESIDE the search box rather than under it (#602). It used to be a
 * standalone block below the whole bar -- a sunk, ruled panel, so it read as something
 * opened over the minutes rather than as more of the toolbar. That was the right treatment
 * for a block sitting on the paper. Inline it is a box drawn inside a box, and the border
 * it needed to separate itself from the document now only separates it from the toolbar it
 * is part of.
 *
 * So: no fill, no border, no radius, no padding of its own -- one rule on the left, the
 * same device already dividing Replace from the find controls inside the search box
 * (.mbdoc-frt). The row still says "this half is different from that half"; it just says
 * it at the weight the distance now calls for.
 *
 * `flex: 1 1 24rem` is what puts it on that line. 24rem is the smallest the group reads at
 * -- a 100px input floor, Replace, Replace all, the close -- so the bar can hold both it
 * and the search box down to about 770px, and under that the line cannot take both and the
 * row wraps beneath the search box on its own. That wrap IS the narrow layout; there is no
 * breakpoint here to keep true, and the row it falls back to is the one this started as.
 *
 * box-sizing stays, and not optionally: this app has no border-box reset, so once the row
 * is wrapped and growing into a whole line its padding and rule would be added ON TOP of
 * that line -- overflow hanging off the right edge of a column that keeps a 2px gutter so
 * the document does not miss its edges by even that much (.mbdoc-doc's 2px gutter).
 *
 * No margin-bottom: the toolbar's own gap is a ROW-gap as well as a column one, and the
 * 8px under the group is the document scroller's padding-top (#603 moved it off the bar
 * so it scrolls away), so the margin this row carried as a standalone block below would
 * now be spacing on top of spacing. */
.mbdoc-fr {
    display: flex; align-items: center; gap: var(--gv-space-2); flex-wrap: wrap;
    flex: 1 1 24rem;
    box-sizing: border-box;
    margin-left: var(--gv-space-1);
    padding-left: var(--gv-space-3);
    border-left: var(--gv-border-width) solid var(--gv-border);
}

/* Find and replace, as a panel that drops down under the toolbar's magnifying glass at its left
 * end, the way Google Docs does it (Dom, 2026-09-17). Inline in the toolbar the count, the arrows
 * and Replace ran over the buttons beside the box. The search box takes the panel's first line
 * with the X beside it; the Replace row, when open, takes a line of its own under it. */
.mbed-toolbar__find {
    /* Drawn like the toolbar's other dropdowns (.mbed-poplist): the same border, corner, shadow
       and type size, hanging 4px under the button that opened it -- mbEdToolbarOpenFind sets
       top and left from the magnifying glass (Dom, 2026-09-17). */
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 31;
    display: none; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--gv-space-1);
    /* Sized to a word or two until there is a search running; then wide enough for the count,
       the arrows and Replace beside it (Dom, 2026-09-17: it was too long empty). */
    width: min(18rem, 100%);
    padding: var(--gv-space-1) var(--gv-space-1) var(--gv-space-1) var(--gv-space-2);
    border: 1px solid var(--gv-border);
    border-radius: var(--gv-radius-lg);
    background: var(--gv-surface);
    box-shadow: var(--gv-shadow-lg);
    font-family: var(--gv-font-ui);
    font-size: var(--gv-text-xs);
    box-sizing: border-box;
}
.mbed-toolbar.is-find-open .mbed-toolbar__find { display: flex; }
.mbed-toolbar__find:has(.is-finding) { width: min(30rem, 100%); }
/* One height, empty or searching: the count, the arrows and Replace are 24px controls, taller than
 * the bare input, so the box grew as the first letter was typed (Dom, 2026-09-17). */
.mbed-toolbar__find > .gv-filterbar__search {
    min-width: 0; flex: 1 1 0; max-width: none;
    height: var(--gv-control-sm); box-sizing: border-box; padding-top: 0; padding-bottom: 0;
}
.mbed-toolbar__find > .gv-filterbar__search input { font-size: var(--gv-text-xs); }
.mbed-toolbar__find > .mbdoc-fr { flex: 1 1 100%; margin-left: 0; padding-left: 0; border-left: 0; }
.mbed-toolbar__findbtn { flex: 0 0 auto; }
.mbed-toolbar.is-find-open .mbed-toolbar__findbtn { background: var(--gv-brand-50); color: var(--gv-brand-900); }
.mbdoc-find__close {
    flex: 0 0 auto; display: grid; place-items: center;
    width: var(--gv-control-sm); height: var(--gv-control-sm);
    border: 0; border-radius: var(--gv-radius-sm); background: transparent;
    color: var(--gv-ink-700); cursor: pointer;
}
.mbdoc-find__close:hover { background: var(--gv-surface-sunk); color: var(--gv-text); }
/* THE STEP'S ⋯ AT THE FAR RIGHT, on the one screen with no menu row to put it on (Dom,
 * 2026-09-22): approved minutes, and a view-only member. Both get a toolbar that is Find
 * alone and no menu bar at all, so the step's overflow would otherwise have nowhere to
 * live. While the document can be edited this group is not drawn here — the ⋯ is on .mbed-menubar__end, which is what gave the formatting row its width back.
 *
 * Outside .mbed-toolbar__grp on purpose — mbEdToolbarFit folds the GROUPS into the ⋮ menu
 * as the column narrows, and this is never folded away. */
.mbed-toolbar__end {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--gv-space-1);
    padding-left: var(--gv-space-2);
}
/* Shaped like the find box above it on purpose: one is what you are looking for and the
 * other is what to put in its place, and two halves of one job should not look like two
 * different kinds of control. */
.mbdoc-fr__in {
    display: flex; align-items: center; gap: var(--gv-space-2);
    border: var(--gv-border-width) solid var(--gv-border);
    background: var(--gv-surface);
    border-radius: var(--gv-radius-md);
    padding: var(--gv-space-1) var(--gv-space-2);
    flex: 1 1 120px; min-width: 5rem; max-width: 360px;
}
.mbdoc-fr__in i { color: var(--gv-text-disabled); font-size: var(--gv-text-xs); }
.mbdoc-fr__q {
    border: 0; outline: 0; background: transparent;
    font: inherit; font-size: var(--gv-text-sm); flex: 1; min-width: 0; color: var(--gv-text);
}
.mbdoc-fr__btn {
    flex: 0 0 auto;
    height: var(--gv-control-xs);
    padding: 0 var(--gv-space-3);
    border: var(--gv-border-width) solid var(--gv-border);
    background: var(--gv-surface);
    color: var(--gv-ink-700);
    font-size: var(--gv-text-xs); font-weight: var(--gv-weight-medium);
    border-radius: var(--gv-radius-sm);
    cursor: pointer;
}
.mbdoc-fr__btn:hover { border-color: var(--gv-border-strong); color: var(--gv-text); }
/* Disabled rather than dropped. A row whose buttons come and go as the count changes
 * teaches nobody where anything is, and the count beside them already says why. */
.mbdoc-fr__nav:disabled, .mbdoc-fr__btn:disabled {
    color: var(--gv-text-disabled);
    border-color: var(--gv-border);
    background: transparent;
    cursor: default;
}
.mbdoc-fr__btn:disabled { background: var(--gv-surface); }
.mbdoc-fr__x {
    margin-left: auto; flex: 0 0 auto;
    width: var(--gv-control-xs); height: var(--gv-control-xs);
    display: inline-flex; align-items: center; justify-content: center;
    border: var(--gv-border-width) solid transparent;
    background: transparent;
    color: var(--gv-text-disabled);
    border-radius: var(--gv-radius-md);
    cursor: pointer;
}
.mbdoc-fr__x:hover { border-color: var(--gv-border); background: var(--gv-surface); color: var(--gv-ink-700); }
/* The result of a press that has already happened, not another control to reach for -- but
 * ON the row, not under it (#602). `flex: 1 0 100%` gave this a line of its own inside
 * .mbdoc-fr, which cost nothing while the row was a block below the whole bar -- it grew
 * downward into space nothing else wanted. Inline in the bar, that same line pushes the
 * filter chips down and the document with them, so a clerk pressing Replace watched the
 * paragraph they were reading walk down the screen. Nothing about replacing a word should
 * move the words around it.
 *
 * nowrap because the count and Undo are one statement -- this many changed, and here is the
 * way back -- and a break between them leaves an Undo attached to nothing. It does not grow
 * either: the width it is not taking belongs to the replacement field. */
.mbdoc-fr__res {
    flex: 0 1 auto;
    display: flex; align-items: center; gap: var(--gv-space-2);
    white-space: nowrap;
    font-size: var(--gv-text-xs);
    color: var(--gv-text-subtle);
}
.mbdoc-fr__undo {
    border: 0; background: transparent; padding: 0;
    color: var(--gv-brand-fg);
    font-size: var(--gv-text-xs); font-weight: var(--gv-weight-medium);
    text-decoration: underline;
    cursor: pointer;
}

/* The match itself. Gold, because amber down this screen already means "this item still
 * owes minutes" and a second amber in the prose would be two different warnings in one
 * column. The current one is the solid stop, so a document with forty matches still shows
 * which of them the arrows are standing on. */
.mbdoc-hit {
    background: var(--gv-gold-border);
    border-radius: var(--gv-radius-sm);
    padding: 0 1px;
    color: inherit;
}
.mbdoc-hit.is-current {
    background: var(--gv-gold);
    color: var(--gv-ink-900);
    box-shadow: 0 0 0 2px var(--gv-gold);
}


/* Rewrite > Rewrite items… (#847, rewrite/items.js): the agenda lines to tick, the level and the
   instructions, in a GV modal. The list scrolls on its own so the level and the button stay in
   reach on a long agenda. */
.mb-rw { display: flex; flex-direction: column; gap: 0.5rem; }
.mb-rw__bar { display: flex; align-items: center; gap: 0.25rem; }
.mb-rw__bar .mb-rw__head { margin-right: auto; }
.mb-rw__head { font-size: 0.8125rem; font-weight: 600; color: var(--gv-text); }
.mb-rw__list {
    max-height: 18rem; overflow-y: auto;
    border: var(--gv-border-width) solid var(--gv-border); border-radius: var(--gv-radius-sm); padding: 0.25rem 0;
}
.mb-rw__row {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding-top: 0.3rem; padding-bottom: 0.3rem; padding-right: 0.75rem;
    margin-left: 0.75rem; font-size: 0.8125rem; cursor: pointer;
}
.mb-rw__row input { flex: none; position: relative; top: 0.1rem; }
.mb-rw__num { flex: none; color: var(--gv-text-muted); font-variant-numeric: tabular-nums; }
.mb-rw__title { min-width: 0; }
.mb-rw__band { border: var(--gv-border-width) solid var(--gv-border); border-radius: var(--gv-radius-sm); }
/* The menu bar's Rewrite carries the nib, so it reads as the AI's menu before it is opened (#847). */
.mbed-menubar__btn .gov-ai-icon { margin-right: 4px; vertical-align: -0.15em; }
.mb-rw__note { font-size: 0.75rem; color: var(--gv-text-muted); margin: 0; }