/* The page's scrollbar must not re-centre the layout when a step gets taller: the dots moved 3 px
   between Demands and Sorting (2026-09-04). */
html { scrollbar-gutter: stable; overflow-y: scroll; }
/* BatesFlow design system v2 — quiet chambers. Component classes are
   intentionally bf-prefixed so this layer can coexist with Tailwind. */
:root {
  --bf-navy: #0e1b2c; --bf-navy-2: #16263b; --bf-navy-line: #24354c;
  --bf-ink: #1c2430; --bf-slate: #667380;
  --bf-stone: #d9d6ce; --bf-stone-2: #ece8df;
  --bf-ground: #f7f4ee; --bf-surface: #fff; --bf-surface-2: #fbf9f4;
  /* .bf-page-foot: 14 px padding top and bottom, a 36 px button, a 1 px top border. */
  --bf-page-foot-h: 65px;
  --bf-gold: #b8a06a; --bf-gold-deep: #8e7a4a; --bf-gold-soft: #f1ead8;
  --bf-brand-gold: #d4a847; --bf-success: #2f6b4f; --bf-success-soft: #e4efe8;
  --bf-warning: #9a6b10; --bf-warning-soft: #f6ebd2;
  --bf-danger: #b42318; --bf-danger-soft: #f9e3e0;
  --bf-info: #3a5da8; --bf-info-soft: #e5ebf6;
  --bf-focus: rgba(184, 160, 106, .45); --bf-radius: 6px; --bf-radius-lg: 12px;
  --bf-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --bf-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bf-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bf-shadow-pop: 0 12px 32px rgba(14, 27, 44, .12), 0 1px 2px rgba(14, 27, 44, .06);
  --bf-workspace-max: 1800px; --bf-workspace-gutter: 56px;
}

body.bf-app-ground { margin: 0; background: var(--bf-ground); color: var(--bf-ink); font-family: var(--bf-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.bf-num { font-variant-numeric: tabular-nums; }
.bf-serif { font-family: var(--bf-serif); }
.bf-mono { font-family: var(--bf-mono); }
.bf-artboard { width: 1440px; min-height: 900px; background: var(--bf-ground); display: flex; flex-direction: column; position: relative; }

.bf-topbar { height: 56px; background: var(--bf-navy); color: #f6f3ec; display: flex; align-items: center; gap: 24px; padding: 0 40px; border-bottom: 1px solid var(--bf-navy-line); position: fixed; inset: 0 0 auto; z-index: 40; }
.bf-topbar .bf-wordmark { min-height: 34px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; gap: 10px; font-family: var(--bf-serif); font-size: 22px; font-weight: 600; color: #f6f3ec; cursor: pointer; }
.bf-topbar .bf-tb-link { min-height: 34px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: rgba(246, 243, 236, .72); }
.bf-topbar .bf-tb-link.bf-active, .bf-topbar .bf-tb-link:hover { color: #f6f3ec; }
.bf-topbar .bf-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.bf-topbar .bf-avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--bf-gold); color: var(--bf-navy); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.bf-topbar .bf-who { display: flex; flex-direction: column; line-height: 1.2; }
.bf-topbar .bf-who .bf-n { font-size: 13px; font-weight: 600; color: #f6f3ec; }
.bf-topbar .bf-who .bf-r { font-size: 13px; color: rgba(246, 243, 236, .55); }

.bf-case-head { padding: 26px max(var(--bf-workspace-gutter), calc((100% - var(--bf-workspace-max)) / 2 + var(--bf-workspace-gutter))) 0; border-bottom: 1px solid var(--bf-stone); background: var(--bf-ground); }
.bf-case-head .bf-crumbs { min-height: 34px; padding: 0; border: 0; background: transparent; font-size: 13px; color: var(--bf-slate); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; cursor: pointer; }
.bf-case-head .bf-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.bf-case-head .bf-name { font-family: var(--bf-serif); font-size: 36px; font-weight: 600; line-height: 1.05; color: var(--bf-ink); margin: 0; }
.bf-case-head .bf-name em { font-style: italic; font-weight: 500; }
.bf-case-head .bf-name-wrap { position: relative; }
.bf-case-head .bf-name-trigger { display: inline-flex; align-items: baseline; gap: 12px; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* The title stays calm: the chevron is a hover/focus affordance, not chrome. */
.bf-name-chevron { flex: 0 0 auto; font-size: 15px; line-height: 1; color: var(--bf-slate); opacity: 0; transition: opacity .12s ease; }
.bf-name-chevron::after { content: '\25be'; }
.bf-name-trigger:hover .bf-name-chevron, .bf-name-trigger:focus-visible .bf-name-chevron,
.bf-name-trigger[aria-expanded='true'] .bf-name-chevron { opacity: 1; }
/* Sized from the viewport, not from the case name: anchoring to the title made
   the popover collapse onto its 420 px floor behind a short name. */
/* Outranks the .bf-popover base rule, which is declared later and would
   otherwise hold the switcher at the menu width of 240 px. */
.bf-case-head .bf-case-switcher { top: calc(100% + 8px); left: 0; width: min(640px, calc(100vw - 80px)); min-width: 0; padding: 10px; }
.bf-case-head .bf-case-switcher .bf-search { box-sizing: border-box; width: 100%; min-width: 0; margin-bottom: 8px; }
.bf-switch-list { max-height: 372px; overflow-y: auto; }
.bf-switch-opt { min-height: 44px; padding: 0 10px; border-radius: var(--bf-radius); display: flex; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; }
.bf-switch-opt:hover, .bf-switch-opt.bf-active { background: var(--bf-surface-2); }
.bf-switch-name { flex: 1 1 60%; min-width: 220px; font-family: var(--bf-serif); font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-switch-name em { font-style: italic; font-weight: 500; }
/* The name is the row; the parties line yields to it rather than the reverse. */
.bf-switch-meta { flex: 0 1 auto; min-width: 0; max-width: 32%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-switch-opt .bf-status { flex: 0 0 auto; margin-left: auto; font-size: 13px; }
.bf-switch-current { background: var(--bf-surface-2); }
.bf-switch-check { flex: 0 0 auto; color: var(--bf-gold-deep); font-size: 13px; }
.bf-switch-empty, .bf-switch-more { margin: 8px 0 4px; padding: 0 10px; }
.bf-switch-all { min-height: 40px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bf-stone-2); border-radius: 0; color: var(--bf-gold-deep); font-weight: 600; }
.bf-case-head .bf-parties { font-size: 15px; color: var(--bf-slate); margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bf-case-head .bf-parties .bf-dot { width: 3px; height: 3px; border-radius: 999px; background: #b5b0a5; display: inline-block; }
/* I23 §2: the one progress indicator. A line and, under it, a two-tone bar
   the width of the header's text column — never the width of the page, and
   never tall enough to move anything below it.
   2026-09-03 (Michael): the line says one thing — "Adding 52 documents" —
   and the bar does the rest. No spinner: the bar is the motion. It is
   gold-deep while working and ink once it is a statement of what was done. */
.bf-case-head .bf-live { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 28px; margin-top: 10px; font-size: 14px; color: var(--bf-gold-deep); font-weight: 500; transition: opacity .5s ease; }
.bf-case-head .bf-live.bf-live-done { color: var(--bf-ink); }
/* `display: flex` above outranks Tailwind's hidden class, so a quiet header was
   drawing a faint 560 px track under the parties line on every page. The
   room stays reserved — a header that grows by 28 px when a drop starts and
   shrinks when it ends would move the tabs and the table under a person's
   hand (I23: "pushes nothing around") — but nothing in it is drawn. */
.bf-case-head .bf-live.bf-live-quiet { visibility: hidden; }
.bf-case-head .bf-live.bf-live-fade { opacity: 0; }
.bf-live-line { display: inline-flex; align-items: center; gap: 8px; min-height: 18px; line-height: 18px; }
/* The sentence runs at its natural width; only the bar is capped, so it is
   the width of a column of text and never the width of the page. */
.bf-live-bar { position: relative; display: block; width: 100%; max-width: 560px; height: 4px; border-radius: 999px; background: var(--bf-stone-2); overflow: hidden; }
/* The script eases each segment toward its target every frame (uploads land
   in eights and the sort poll answers every four seconds, so a CSS transition
   would sprint and stall); the stylesheet must not add a second easing. */
.bf-live-bar i { position: absolute; left: 0; top: 0; bottom: 0; display: block; width: 0; border-radius: 999px; transition: none; }
/* Light: bytes on the wire. Solid: documents the pipeline has finished with.
   The solid segment is drawn second so it reads as the filled part of the
   lighter one, which is what it is. Both have to clear the track behind them:
   gold-soft against stone-2 is invisible at three pixels. */
.bf-live-bar-sent { background: #e8d9b0; }
.bf-live-bar-sorted { background: var(--bf-gold-deep); }
/* Nothing to measure yet (the first second of a drop, a queue with no worker
   on it): a short gold segment travels the track so the bar still says
   "working" without inventing a number. */
.bf-live-bar.bf-live-bar-waiting::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 999px; background: var(--bf-gold); animation: bf-notice-travel 1.1s ease-in-out infinite; }
.bf-case-head .bf-actions { display: flex; align-items: flex-start; gap: 8px; padding-top: 6px; position: relative; }
.bf-case-tabs { display: flex; gap: 28px; margin-top: 22px; overflow: visible; }
.bf-case-tab { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 15px; font-weight: 500; color: var(--bf-slate); white-space: nowrap; cursor: pointer; transform-origin: center; transition: padding .48s cubic-bezier(.18, 1.4, .28, 1), color .2s, border-color .2s; }
.bf-case-tab.bf-active { color: var(--bf-ink); font-weight: 600; border-bottom-color: var(--bf-gold); padding-left: 4px; padding-right: 4px; }

.bf-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bf-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 30px 40px 20px; border-bottom: 1px solid var(--bf-stone); }
.bf-page-head.bf-plain { border-bottom: 0; padding-bottom: 8px; }
.bf-page-head h1 { font-family: var(--bf-serif); font-size: 30px; font-weight: 600; line-height: 1.15; margin: 0; color: var(--bf-ink); }
.bf-page-head .bf-desc { margin: 6px 0 0; font-size: 15px; color: var(--bf-slate); }
.bf-page-head .bf-actions { display: flex; align-items: center; gap: 8px; }
.bf-body { box-sizing: border-box; padding: 28px var(--bf-workspace-gutter) 56px; width: 100%; max-width: var(--bf-workspace-max); margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.bf-section { display: flex; flex-direction: column; gap: 14px; }
.bf-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--bf-stone); }
.bf-section-head h2 { font-family: var(--bf-serif); font-size: 23px; font-weight: 600; margin: 0; line-height: 1.2; }
.bf-label { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-slate); }
.bf-meta { font-size: 13px; color: var(--bf-slate); }
.bf-small { font-size: 14px; color: var(--bf-slate); }
.bf-muted { color: var(--bf-slate); }
.bf-hr { height: 1px; background: var(--bf-stone); }
.bf-two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 40px; align-items: start; }

.bf-btn { min-height: 40px; padding: 0 16px; border-radius: var(--bf-radius); border: 1px solid var(--bf-stone); background: var(--bf-surface); color: var(--bf-ink); font: 600 14px var(--bf-sans); display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; cursor: pointer; }
.bf-btn:hover { background: var(--bf-surface-2); border-color: #c9c5bc; }
.bf-btn-primary { background: var(--bf-navy); border-color: var(--bf-navy); color: #f6f3ec; }
.bf-btn-primary:hover { background: var(--bf-navy-2); border-color: var(--bf-navy-2); }
.bf-btn-ghost { background: transparent; border-color: transparent; color: var(--bf-slate); }
.bf-btn-ghost:hover { background: var(--bf-stone-2); color: var(--bf-ink); }
.bf-btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.bf-btn-link { min-height: 34px; background: none; border: 0; padding: 0 4px; color: var(--bf-gold-deep); font-weight: 600; font-size: 14px; cursor: pointer; }
.bf-btn-link:hover { text-decoration: underline; }
.bf-btn[disabled], .bf-btn.bf-disabled, .bf-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.bf-icon-btn { width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--bf-radius); background: transparent; color: var(--bf-slate); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bf-icon-btn:hover { color: var(--bf-ink); background: var(--bf-stone-2); }
.bf-select, .bf-input, .bf-search { box-sizing: border-box; height: 40px; border-radius: var(--bf-radius); border: 1px solid var(--bf-stone); background-color: var(--bf-surface); color: var(--bf-ink); font: 14px var(--bf-sans); }
.bf-input, .bf-search { padding: 0 12px; }
textarea.bf-input.bf-texas-court { height: auto; min-height: 6em; padding: 10px 12px; line-height: 1.5; }
.bf-input::placeholder, .bf-search::placeholder { color: var(--bf-slate); opacity: 1; }
.bf-select { appearance: none; -webkit-appearance: none; padding: 0 36px 0 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23667380' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px 16px; }
.bf-select::-ms-expand { display: none; }
.bf-search { min-width: 280px; }
.bf-checkbox, .bf-radio { box-sizing: border-box; width: 16px; height: 16px; margin: 0; accent-color: var(--bf-navy); flex: 0 0 16px; vertical-align: middle; }
/* WebKit on macOS paints a native radio sized to exactly 16px wider than its box and
   clips the circle at the box edge (Safari 18, FPX F3 fix 1), so the radio draws itself:
   the same look in Safari and Chrome, a navy disc with a white centre when chosen. */
.bf-radio { appearance: none; -webkit-appearance: none; display: inline-block; padding: 0; border: 1px solid var(--bf-slate); border-radius: 50%; background: var(--bf-surface); cursor: pointer; }
.bf-radio:checked { border-color: var(--bf-navy); background: radial-gradient(circle at center, var(--bf-surface) 0 2.75px, var(--bf-navy) 3.25px); }
.bf-radio:not(:disabled):not(:checked):hover { border-color: var(--bf-navy); }
.bf-radio:disabled { opacity: .45; cursor: default; }
@media (forced-colors: active) { .bf-radio { appearance: auto; -webkit-appearance: auto; } }
.bf-toggle { box-sizing: border-box; height: 40px; display: inline-flex; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface); padding: 2px; gap: 2px; }
.bf-toggle .bf-opt { height: 34px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--bf-slate); cursor: pointer; transform-origin: center; transition: padding .48s cubic-bezier(.18, 1.4, .28, 1), background .2s, color .2s; }
.bf-toggle .bf-opt.bf-active, .bf-toggle .bf-opt[aria-pressed="true"] { background: var(--bf-navy); color: #f6f3ec; padding-left: 18px; padding-right: 18px; }

.bf-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--bf-stone); overflow: visible; }
.bf-tab { min-height: 38px; padding: 0 0 10px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 14px; color: var(--bf-slate); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; transform-origin: center; transition: padding .48s cubic-bezier(.18, 1.4, .28, 1), color .2s, border-color .2s; }
.bf-tab.bf-active { color: var(--bf-ink); font-weight: 600; border-bottom-color: var(--bf-navy); padding-left: 4px; padding-right: 4px; }
/* A count is a numeral, not a status: no pill, no tint (Michael, 2026-09-02).
   It sits after its label in slate and takes ink when the label is active. */
.bf-cnt, .bf-count { margin-left: 6px; color: var(--bf-slate); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; display: inline; }
.bf-active .bf-cnt, .bf-active .bf-count, [aria-selected='true'] .bf-cnt, [aria-selected='true'] .bf-count { color: var(--bf-ink); }
.bf-cnt.bf-warn, .bf-count.bf-warn, .bf-cnt.bf-info, .bf-count.bf-info { background: none; color: inherit; }

.bf-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bf-ink); white-space: nowrap; }
.bf-status::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--bf-slate); flex-shrink: 0; }
.bf-status.bf-ready::before { background: var(--bf-success); }
.bf-status.bf-analyzing::before { background: var(--bf-info); }
.bf-status.bf-needs::before { background: var(--bf-warning); }
.bf-status.bf-failed::before { background: var(--bf-danger); }
.bf-status.bf-failed { color: var(--bf-danger); }
.bf-status.bf-muted::before { background: var(--bf-stone); }
.bf-status.bf-pending::before { background: var(--bf-info); }
.bf-status.bf-gold::before { background: var(--bf-gold); }

.bf-cat { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.bf-cat::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--bf-slate); flex-shrink: 0; }
.bf-cat.bf-cat-bank::before { background: #3a5da8; } .bf-cat.bf-cat-card::before { background: #a87b2f; } .bf-cat.bf-cat-tax::before { background: #2e8a5c; }
.bf-cat.bf-cat-retire::before { background: #6b5fa8; } .bf-cat.bf-cat-edu::before { background: #9c5290; } .bf-cat.bf-cat-mortgage::before { background: #2b7a8c; }
.bf-cat.bf-cat-loan::before { background: #8a6d3b; } .bf-cat.bf-cat-w2::before { background: #4f8a3e; } .bf-cat.bf-cat-pay::before { background: #5e7c99; }
.bf-cat.bf-cat-corr::before { background: #b26a3c; } .bf-cat.bf-cat-brokerage::before { background: #7b4fa8; } .bf-cat.bf-cat-none::before { background: var(--bf-stone); }
.bf-ftype { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 22px; border-radius: 4px; font-size: 13px; font-weight: 700; border: 1px solid var(--bf-stone); color: var(--bf-slate); background: var(--bf-surface); }
.bf-ftype.bf-pdf { color: var(--bf-danger); border-color: #ebc7c2; }

.bf-table-wrap { background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); overflow: visible; }
.bf-table { width: 100%; border-collapse: collapse; }
.bf-table th { text-align: left; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--bf-slate); padding: 12px 14px; border-bottom: 1px solid var(--bf-stone); white-space: nowrap; background: var(--bf-surface); }
.bf-table th.bf-sortable { cursor: pointer; } .bf-table th .bf-sort { display: inline-block; margin-left: 4px; color: var(--bf-ink); }
/* U9 — a column head IS the control for its column: the whole cell is the hit
   target, it lights up on hover, and it carries a chevron (sort) or a funnel
   (filter) that is faint until the column is hovered or actually in use. */
.bf-table th.bf-th { padding: 0; position: relative; }
.bf-th-button { box-sizing: border-box; width: 100%; min-height: 44px; padding: 12px 14px; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bf-th-button:hover { background: var(--bf-surface-2); color: var(--bf-ink); }
.bf-th-button[aria-expanded='true'] { background: var(--bf-surface-2); color: var(--bf-ink); }
.bf-th-glyph { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 1; color: var(--bf-slate); opacity: 0; transition: opacity .12s ease; }
.bf-th-button:hover .bf-th-glyph, .bf-th-button:focus-visible .bf-th-glyph { opacity: .5; }
.bf-th-glyph.bf-on { opacity: 1; color: var(--bf-ink); }
/* The menu itself never scrolls: the option list does, so Clear and Done stay
   visible however long the list is. */
.bf-th-menu { top: calc(100% - 4px); left: 8px; max-height: 380px; display: flex; flex-direction: column; overflow: hidden; font: 400 14px var(--bf-sans); letter-spacing: normal; text-transform: none; color: var(--bf-ink); }
.bf-th-menu-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bf-th-menu .bf-opt { justify-content: flex-start; }
.bf-th-menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-th-menu-count { margin-left: auto; flex: 0 0 auto; }
.bf-th-menu-search { flex: 0 0 auto; width: 100%; height: 34px; margin-bottom: 6px; }
.bf-th-menu-empty { padding: 8px 10px; color: var(--bf-slate); font-size: 13px; }
.bf-th-menu-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--bf-stone-2); background: var(--bf-surface); }
.bf-table td { padding: 13px 14px; border-bottom: 1px solid var(--bf-stone-2); font-size: 14px; vertical-align: middle; }
.bf-table tr:last-child td { border-bottom: 0; }
.bf-table tbody tr:hover td, .bf-table tbody tr:focus td { background: var(--bf-surface-2); }
.bf-table .bf-t { font-size: 15px; font-weight: 600; color: var(--bf-ink); }
.bf-table .bf-m { font-size: 13px; color: var(--bf-slate); margin-top: 2px; }
.bf-table .bf-child td { background: var(--bf-surface-2); }
.bf-connector { display: inline-block; width: 14px; height: 14px; border-left: 1.5px solid var(--bf-gold); border-bottom: 1.5px solid var(--bf-gold); border-bottom-left-radius: 3px; margin: 0 6px 0 10px; vertical-align: middle; opacity: .8; }
.bf-table-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--bf-stone-2); font-size: 13px; color: var(--bf-slate); }
.bf-conf { font-variant-numeric: tabular-nums; white-space: nowrap; } .bf-conf.bf-low { color: var(--bf-warning); font-weight: 600; }
.bf-conf-pct { color: var(--bf-slate); font-size: 13px; font-weight: 400; }
.bf-conf.bf-low .bf-conf-pct { color: var(--bf-warning); }

.bf-checklist { display: flex; flex-direction: column; }
.bf-ck { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--bf-stone-2); }
.bf-ck:last-child { border-bottom: 0; }
.bf-ck .bf-n { width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--bf-stone); background: var(--bf-surface); font-size: 13px; font-weight: 600; color: var(--bf-slate); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bf-ck .bf-txt { flex: 1 1 auto; font-size: 15px; font-weight: 600; }
.bf-ck .bf-txt .bf-sub { display: block; font-size: 13px; font-weight: 400; color: var(--bf-slate); margin-top: 3px; }
.bf-ck.bf-done .bf-n { background: var(--bf-success-soft); border-color: var(--bf-success-soft); color: var(--bf-success); }
.bf-ck.bf-done .bf-txt { color: var(--bf-slate); font-weight: 500; }
.bf-ck.bf-live .bf-n { border-color: var(--bf-info-soft); background: var(--bf-info-soft); color: var(--bf-info); }
.bf-ck.bf-next .bf-n { border-color: var(--bf-ink); background: var(--bf-ink); color: #f6f3ec; }
.bf-ck.bf-next .bf-txt { color: var(--bf-ink); }
.bf-ck.bf-blocked { opacity: .72; }
.bf-facts { display: grid; grid-template-columns: max-content 1fr; column-gap: 24px; row-gap: 10px; align-items: baseline; }
.bf-facts .bf-k { font-size: 13px; color: var(--bf-slate); }
.bf-facts .bf-v { font-size: 15px; color: var(--bf-ink); }

.bf-acc { border-top: 1px solid var(--bf-stone-2); } .bf-acc:last-child { border-bottom: 1px solid var(--bf-stone-2); }
.bf-acc-sum { display: flex; align-items: center; gap: 14px; padding: 12px 8px; cursor: pointer; }
.bf-acc-sum:hover { background: var(--bf-surface-2); }
.bf-acc-sum .bf-num { width: 34px; font-size: 13px; color: var(--bf-slate); font-weight: 600; }
.bf-acc-sum .bf-text { flex: 1 1 auto; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-acc-body { padding: 6px 8px 20px 56px; } .bf-chev { width: 16px; height: 16px; color: var(--bf-slate); flex-shrink: 0; }

.bf-popover { position: absolute; z-index: 50; background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-pop); padding: 8px; width: 240px; }
.bf-popover .bf-opt { min-height: 36px; width: 100%; padding: 0 10px; border: 0; border-radius: var(--bf-radius); background: transparent; display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.bf-popover .bf-opt:hover, .bf-popover .bf-opt.bf-selected { background: var(--bf-gold-soft); }

/* U10 — the enhanced <select>. The trigger wears the closed control's own
   `.bf-select` box (40 px, stone border, chevron, gold focus ring); the list
   below is ours, so the OS never paints a grey panel mid-screen. The menu is
   appended to <body> and positioned `fixed` by the select enhancer, which is
   what keeps it out of a scrolling modal body's clip. */
.bf-select-trigger { display: inline-flex; align-items: center; text-align: left; cursor: pointer; }
.bf-select-trigger .bf-select-value { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-select-trigger[disabled] { opacity: .55; cursor: default; }
.bf-select-menu { position: fixed; z-index: 200; width: auto; min-width: 220px; max-width: calc(100vw - 16px); padding: 6px; }
.bf-select-menu[hidden] { display: none; }
.bf-select-menu .bf-select-search { box-sizing: border-box; width: 100%; min-width: 0; margin-bottom: 6px; }
.bf-select-list { max-height: 320px; overflow-y: auto; }
.bf-select-group { padding: 10px 10px 4px; }
.bf-select-opt { box-sizing: border-box; min-height: 36px; padding: 0 10px; border-radius: var(--bf-radius); display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--bf-ink); cursor: pointer; }
.bf-select-opt-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-select-opt:hover, .bf-select-opt.bf-active { background: var(--bf-surface-2); }
.bf-select-opt[aria-selected="true"] { background: var(--bf-gold-soft); }
.bf-select-list { position: relative; }
.bf-select-hi { position: absolute; left: 0; right: 0; z-index: 0; border-radius: var(--bf-radius); background: var(--bf-surface-2); pointer-events: none; }
.bf-select-opt { position: relative; z-index: 1; }
/* No inset bar on the active row (Michael, 2026-09-04: "that little left darker margin looks terrible");
   the background is the whole cue. */
.bf-select-opt[aria-disabled="true"] { color: var(--bf-slate); opacity: .6; cursor: default; }
.bf-select-check { flex: 0 0 auto; color: var(--bf-gold-deep); font-size: 13px; }
.bf-select-empty { padding: 10px; }
.bf-toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 48px)); pointer-events: none; }
body:has(.page-section.active .bf-page-foot) .bf-toast-stack { bottom: 88px; }
html.bf-modal-open .bf-toast-stack { top: 24px; bottom: auto; }
.bf-toast-clip { overflow: hidden; border-radius: var(--bf-radius-lg); pointer-events: auto; }
.bf-toast { position: relative; background: var(--bf-navy); color: #f6f3ec; border-radius: var(--bf-radius-lg); padding: 14px 16px; display: grid; grid-template-columns: 6px minmax(0, 1fr) 34px; align-items: start; gap: 10px; font-size: 14px; box-shadow: 0 12px 32px rgba(14, 27, 44, .25); pointer-events: auto; transform: translateY(110%); touch-action: none; }
.bf-toast.bf-toast-in { transform: translateY(0); transition: transform .46s cubic-bezier(.16, 1.08, .3, 1); }
.bf-toast.bf-toast-dragging { transition: none; }
.bf-toast.bf-toast-leaving { opacity: 0; transform: translateY(120%); transition: transform .26s ease-in, opacity .26s ease-in; }
.bf-toast-fuse { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bf-gold); transform-origin: left center; pointer-events: none; }
@keyframes bf-toast-fuse { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.bf-toast-mark { width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: #9eb8ef; }
.bf-warm-tip { position: fixed; z-index: 80; max-width: 220px; padding: 8px 10px; border-radius: 8px; background: var(--bf-navy); color: #f6f3ec; font: 400 13px/1.4 var(--bf-sans); box-shadow: var(--bf-shadow-pop); pointer-events: none; }
.bf-warm-tip[hidden] { display: none; }
.bf-warm-tip.bf-warm-tip-in { animation: bf-warm-tip-in .16s ease; }
@keyframes bf-warm-tip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bf-toast-success .bf-toast-mark { background: #8bc6a3; }
.bf-toast-warning .bf-toast-mark { background: #e2be70; }
.bf-toast-error .bf-toast-mark { background: #f29a91; }
.bf-toast-content { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bf-toast-title { font-weight: 600; }
.bf-toast-title { display: block; overflow-wrap: anywhere; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-toast-text, .bf-toast-items li { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
.bf-toast-text:empty { display: none; }
.bf-toast-items { margin: 2px 0 0; padding-left: 0; list-style-position: inside; font-size: 13px; line-height: 1.6; }
.bf-toast-more { font-size: 13px; color: rgba(246, 243, 236, .7); }
.bf-toast-content .bf-toast-action { align-self: flex-start; }
.bf-toast-close { margin-top: -6px; }
.bf-toast-action { min-height: 34px; padding: 0 4px; border: 0; background: transparent; color: var(--bf-gold); font: 600 14px var(--bf-sans); cursor: pointer; }
.bf-toast-close { min-width: 34px; min-height: 34px; padding: 0; border: 0; background: transparent; color: rgba(246, 243, 236, .65); font-size: 20px; cursor: pointer; }
.bf-banner { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface-2); font-size: 14px; overflow: hidden; }
.bf-banner-line { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--bf-gold); }
.bf-banner-action { margin-left: auto; }
.bf-banner-warn { background: var(--bf-warning-soft); border-color: #e8d9b0; }
.bf-notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--bf-radius); background: var(--bf-danger-soft); border: 1px solid #efc9c4; font-size: 14px; color: var(--bf-ink); }
.bf-notice-warn { background: var(--bf-warning-soft); border-color: #e8d9b0; }
/* I23 §3: skipped files and duplicates are grey and quiet. Nothing has gone
   wrong, so nothing is washed in danger colour. */
.bf-notice.bf-notice-quiet { padding: 4px 0; border: 0; background: transparent; color: var(--bf-slate); font-size: 13px; }
.bf-notice-text { flex: 1; } .bf-notice-actions { display: flex; gap: 12px; }
.bf-progress { height: 3px; border-radius: 999px; background: var(--bf-stone-2); overflow: hidden; }
.bf-progress > i { display: block; height: 100%; background: var(--bf-gold); border-radius: 999px; }
.bf-progress.bf-success > i { background: var(--bf-success); }
.bf-spinner { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--bf-stone); border-top-color: var(--bf-info); display: inline-block; animation: bf-spin .9s linear infinite; flex-shrink: 0; }
@keyframes bf-spin { to { transform: rotate(360deg); } }
.bf-phases { display: flex; flex-direction: column; gap: 8px; }
.bf-phase { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.bf-phase .bf-name { width: 140px; color: var(--bf-slate); } .bf-phase.bf-done .bf-name { color: var(--bf-success); } .bf-phase .bf-bar { flex: 1 1 auto; }
.bf-empty { padding: 56px 24px; text-align: center; border: 1px dashed var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface-2); }
.bf-empty h3 { font-family: var(--bf-serif); font-size: 24px; font-weight: 600; margin: 12px 0 6px; }
.bf-empty p { margin: 0 auto 18px; max-width: 600px; color: var(--bf-slate); font-size: 15px; }
.bf-kbd { font-family: var(--bf-mono); font-size: 13px; padding: 1px 5px; border: 1px solid var(--bf-stone); border-bottom-width: 2px; border-radius: 4px; color: var(--bf-slate); background: var(--bf-surface); }
.bf-bates { font-family: var(--bf-mono); font-size: 13px; font-weight: 600; color: var(--bf-gold-deep); letter-spacing: .02em; }
.bf-row { display: flex; align-items: center; gap: 12px; } .bf-col { display: flex; flex-direction: column; gap: 12px; }
.bf-wrap { flex-wrap: wrap; } .bf-grow { flex: 1 1 auto; min-width: 0; } .bf-right { margin-left: auto; }
.bf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-doc-chip { min-height: 34px; padding: 0 8px 0 6px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface); font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
/* Respond's body is the page's body: full width to the 1280 cap, left
   aligned like every other `.bf-body`. It used to cap at 1120 and centre,
   which is where the narrow column in the middle of a wide screen came from. */
#mapping-v2-root.bf-body { max-height: none; margin: 0 auto; overflow: visible; }
.bf-confirm-sheet { margin-top: 14px; padding: 18px; border: 1px solid var(--bf-gold); border-radius: var(--bf-radius-lg); background: var(--bf-gold-soft); }
.bf-confirm-sheet h3 { font-family: var(--bf-serif); font-size: 20px; margin: 0 0 10px; }
.bf-confirm-sheet p { margin: 5px 0; font-size: 14px; }
.bf-confirm-sheet .bf-actions { justify-content: flex-end; margin-top: 16px; }
.bf-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.bf-modal[class~="hidden"] { display: none; }
.bf-modal-backdrop { position: absolute; inset: 0; background: rgba(14, 27, 44, .52); }
.bf-modal-card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: min(520px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 28px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius-lg); background: var(--bf-surface); box-shadow: var(--bf-shadow-pop); }
.bf-modal-card h2 { margin: 4px 0 12px; font: 600 25px var(--bf-serif); }
.bf-modal-card p { color: var(--bf-slate); line-height: 1.55; }
.bf-modal-card .bf-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
/* The duplicate-only receipt stays until dismissed; its explanation is visible. */
.bf-duplicate-receipt { border-top: 3px solid var(--bf-gold); }
.bf-duplicate-receipt p { margin: 0; font-size: 14px; }
.bf-duplicate-receipt .bf-duplicate-kicker { margin-bottom: 6px; color: var(--bf-navy); font-size: 11px; }
.bf-duplicate-receipt .bf-duplicate-lede { color: var(--bf-ink); font-size: 16px; }
.bf-duplicate-fact { margin: 20px 0 16px; padding: 14px 16px; border-left: 3px solid var(--bf-gold); border-radius: var(--bf-radius); background: var(--bf-gold-soft); }
.bf-duplicate-fact strong { display: block; margin-bottom: 6px; color: var(--bf-navy); font-size: 13px; }
.bf-duplicate-fact p { color: var(--bf-ink); }
.bf-duplicate-receipt .bf-btn-primary { background: var(--bf-gold); border-color: var(--bf-gold); color: var(--bf-navy); }
.bf-duplicate-receipt .bf-btn-primary:hover { background: var(--bf-gold-soft); border-color: var(--bf-gold-deep); }
/* I14: while a modal is open, `<html>` carries `bf-modal-open` (set from
   the shared modal script) and the page behind the dialog is frozen —
   `top` is the one piece set inline from there, since it's the live
   -scrollY offset. */
html.bf-modal-open { overflow: hidden; }
html.bf-modal-open body { position: fixed; overflow: hidden; width: 100%; }
.bf-card { background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); padding: 18px; }
.bf-case-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.bf-case-card { cursor: pointer; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 16px; }
.bf-case-card:hover, .bf-case-card:focus { border-color: var(--bf-gold); box-shadow: var(--bf-shadow-pop); }
.bf-case-card-head { display: flex; align-items: flex-start; gap: 12px; }
.bf-case-card-parties { margin: 6px 0 0; }
.bf-case-card-status { display: flex; flex-direction: column; gap: 4px; }
.bf-case-card-next { margin: 0; }
.bf-case-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--bf-stone-2); }
.bf-case-name { font-family: var(--bf-serif); font-size: 20px; font-weight: 600; }
.bf-working-example { display: inline-flex; margin-bottom: 6px; color: var(--bf-warning); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
/* D1: in the case header the same note is one more fact on the parties
   line, not a badge — a badge there is the banner the demo did not need. */
.bf-case-head .bf-parties .bf-working-example { margin: 0; color: var(--bf-slate); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.bf-cases-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.bf-cases-toolbar .bf-search { flex: 1 1 280px; }
.bf-cases-table .bf-case-next { width: 200px; min-width: 200px; max-width: 200px; text-align: right; }
.bf-cases-table .bf-case-actions-col { width: 104px; min-width: 104px; max-width: 104px; text-align: right; }
.bf-case-actions { width: 76px; margin-left: auto; display: grid; grid-template-columns: repeat(2, 36px); gap: 4px; }
.bf-icon-placeholder { visibility: hidden; pointer-events: none; }
.bf-cases-empty-filter { padding: 28px; text-align: center; color: var(--bf-slate); }
/* A deleted case leaves on the confirm, not on the server's answer: 200 ms of
   fade and a short lift, then the list is redrawn without it. Nothing pops —
   the row is seen to go, which is the whole point of the move. */
.bf-case-leaving { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; }
@media (prefers-reduced-motion: reduce) {
  .bf-case-leaving { transition: none; transform: none; }
}

/* Documents workspace */
.bf-documents-body { width: 100%; box-sizing: border-box; }
.bf-documents-toolbar { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bf-documents-toolbar .bf-search { flex: 1 1 280px; }
.bf-filter-tabs { flex: 1 1 520px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; overflow: visible; border-bottom: 1px solid var(--bf-stone); }
.bf-filter { min-height: 40px; margin-bottom: -1px; padding: 0 0 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--bf-slate); font: 500 13px var(--bf-sans); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; }
.bf-filter.bf-active { border-bottom-color: var(--bf-navy); color: var(--bf-ink); font-weight: 600; }
.bf-filter .bf-cnt { min-width: 19px; height: 19px; padding-inline: 5px; font-size: 12px; }
/* I23 §3: the gold banner is gone; the chip that already carries the work
   carries the colour. One dot, before the label, only while the count is
   above zero. */
.bf-hold-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--bf-gold); flex: 0 0 auto; align-self: center; }
.bf-documents-controls { flex: 1 1 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.bf-control-label { font-size: 13px; color: var(--bf-slate); }
.bf-drop-strip { min-height: 44px; padding: 0 16px; border: 1px dashed var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface-2); color: var(--bf-slate); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.bf-dropzone-overlay { position: fixed; inset: 56px 0 0; z-index: 80; padding: 28px; background: rgba(247, 244, 238, .9); pointer-events: none; }
.bf-dropzone-overlay[aria-hidden='false'] { display: flex; }
.bf-dropzone { width: 100%; min-height: 100%; border: 2px dashed var(--bf-gold); border-radius: var(--bf-radius-lg); background: rgba(255, 255, 255, .8); color: var(--bf-ink); display: flex; align-items: center; justify-content: center; font: 600 22px var(--bf-serif); }
.bf-empty-icon { font-size: 30px; color: var(--bf-gold-deep); }
.bf-empty-actions { justify-content: center; }
.bf-first-run-columns { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; text-align: left; }
.bf-first-run-columns h3 { margin: 0 0 6px; font: 600 19px var(--bf-serif); }
.bf-first-run-columns p { margin: 0; color: var(--bf-slate); }
.bf-table-sort { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.bf-check-cell { width: 42px; text-align: center !important; }
.bf-document-cell { min-width: 260px; max-width: 430px; }
.bf-document-open, .bf-category-button { width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.bf-document-open .bf-t, .bf-document-open .bf-m { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-category-cell { position: relative; }
.bf-category-popover { top: calc(100% - 5px); left: 12px; max-height: 320px; overflow-y: auto; }
.bf-category-popover.bf-category-popover-right { left: auto; right: 0; }
.bf-category-popover.bf-category-popover-above { top: auto; bottom: calc(100% - 5px); }
.bf-category-button { display: flex; align-items: center; gap: 8px; }
.bf-category-button:hover .bf-cat { text-decoration: underline; text-underline-offset: 3px; }
.bf-saved { color: var(--bf-success); font-size: 12px; font-weight: 600; }
.bf-table-empty { padding-block: 34px !important; text-align: center; color: var(--bf-slate); }
.bf-table-empty h3 { margin: 0 0 6px; font: 600 21px var(--bf-serif); color: var(--bf-ink); }
.bf-table-empty .bf-btn { margin-top: 12px; }
.bf-table-foot-counts { gap: 18px; }
/* Combined PDFs (I2). The band line under the document name is a dot and a
   sentence — never a pill; the block beneath it is the proposal itself, one
   hairline-free line per range on the child row's quiet fill. */
/* `bf-doc-band`, not `bf-band`: the context band of §9.2 already owns that
   name (line 634 below), and a row line that borrowed it inherited a grid,
   a white surface and a stone border — the same collision `.bf-card` caused. */
.bf-document-open .bf-doc-band-line { white-space: normal; overflow: visible; margin-top: 3px; }
.bf-doc-band { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--bf-slate); }
.bf-doc-band::before { content: ''; align-self: center; width: 7px; height: 7px; border-radius: 999px; background: var(--bf-slate); flex: 0 0 auto; }
.bf-doc-band-strong { color: var(--bf-gold-deep); } .bf-doc-band-strong::before { background: var(--bf-gold); }
.bf-doc-band-look { color: var(--bf-warning); } .bf-doc-band-look::before { background: var(--bf-warning); }
.bf-doc-band-failed { color: var(--bf-danger); } .bf-doc-band-failed::before { background: var(--bf-danger); }
.bf-doc-band-live { color: var(--bf-info); } .bf-doc-band-live::before { background: var(--bf-info); }
.bf-doc-band-kept { color: var(--bf-slate); } .bf-doc-band-kept::before { background: var(--bf-stone); }
/* I25: the two things a reviewer can do about a document nobody could label.
   Text buttons on the row's own line, aligned under the band's sentence
   rather than the dot — the row is already a dense surface and a pair of
   filled buttons in it would read as a second toolbar. */
.bf-document-open .bf-doc-band-actions { display: flex; gap: 14px; margin-top: 4px; padding-left: 15px; }
.bf-doc-band-action { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; line-height: 1.4; color: var(--bf-gold-deep); cursor: pointer; }
.bf-doc-band-action:hover { text-decoration: underline; }
.bf-doc-band-action:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: 2px; border-radius: 3px; }
/* The split stays where it was (I7). The file the reviewer split becomes the
   head of its own group in the view they were reading, and the documents it
   became are listed under it, indented behind a gold connector, until the
   filter changes or the page is reloaded. Nothing here is a new surface: the
   head takes the quiet fill the table already uses for a child row. */
/* Lineage (I7). One quiet line under a child's name saying which file it came
   from and which pages it is; under an original, the documents it became, as
   links. Both are 13 px slate — the meta rung of the type ladder (§9.7) —
   because they are provenance, not the row's headline. */
.bf-doc-lineage { color: var(--bf-slate); }
/* Scoped under `.bf-table tbody tr` on purpose: the table's own
   `tbody tr:hover td, tbody tr:focus td` rule (line 169) is more specific than
   a bare `.bf-doc-row[...] > td`, and since the focused row is also `:focus`,
   the mark lost to it and never painted. */
.bf-table tbody tr.bf-doc-row[data-doc-focused='true'] > td { background: var(--bf-gold-soft); }
.bf-doc-group-head > td { background: var(--bf-surface-2); }
.bf-doc-group-child > td { background: var(--bf-surface-2); }
.bf-doc-group-child .bf-document-open { padding-left: 22px; }
.bf-doc-group-child .bf-connector { position: absolute; left: 0; top: 6px; }
.bf-doc-group-child .bf-document-cell { position: relative; }
.bf-split-ranges { display: flex; flex-direction: column; margin-left: -6px; }
.bf-split-range { position: relative; display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 30px; padding: 4px 6px; border: 0; border-radius: var(--bf-radius); background: none; font: inherit; font-size: 14px; text-align: left; color: inherit; }
/* A range line is a control from I12 on: it opens the document at its first
   page. The element is a <button>, so the affordance is scoped to the tag —
   `.bf-split-range` keeps exactly one base rule. */
button.bf-split-range { cursor: pointer; }
button.bf-split-range:hover { background: var(--bf-surface); }
button.bf-split-range:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: -2px; }
.bf-split-piece .bf-ftype { flex: 0 0 auto; align-self: center; }
/* I23 §6: the piece's status follows its title. The title no longer grows to
   push it away, and the spare room falls at the end of the line. */
.bf-split-piece .bf-split-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-split-piece .bf-status { flex: 0 0 auto; margin-right: auto; align-self: center; font-size: 13px; }
.bf-split-range .bf-connector { align-self: center; margin-left: 2px; }
.bf-split-pages { flex: 0 0 auto; min-width: 86px; color: var(--bf-slate); }
.bf-split-title { flex: 0 0 auto; font-weight: 600; color: var(--bf-ink); }
.bf-split-why { flex: 1 1 auto; min-width: 0; color: var(--bf-slate); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-split-check { flex: 0 0 auto; color: var(--bf-warning); font-size: 13px; font-weight: 600; }
.bf-split-unanswered .bf-split-title, .bf-split-unanswered .bf-split-pages { color: var(--bf-warning); }
/* The page preview (I12). One fixed layer on <body>, not a picture inside the
   row: in flow it pushed the page down, and the pointer crossing its own edge
   counted as leaving the line, which flickered it on and off. It ignores the
   pointer entirely, so moving from the line into the picture changes nothing;
   the client anchors it beside the pointer and clamps it inside the window. */
/* CS29 round 4: 560 wide (46vw on a narrow window), never taller than the viewport less 24 px each side,
   placed to the right of the row's text by documentsPreviewGeometry; fades in over 120 ms, no layout shift. */
.bf-page-preview { position: fixed; left: 0; top: 0; z-index: 90; width: min(560px, 46vw); max-height: calc(100vh - 48px); padding: 6px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface); box-shadow: var(--bf-shadow-pop); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 120ms ease-out, visibility 0s linear 120ms; }
.bf-page-preview.bf-open { opacity: 1; visibility: visible; transition: opacity 120ms ease-out, visibility 0s; }
/* A fixed box, so the clamp computed at hover stays true when the large image
   arrives: a page of another shape is letterboxed, never cropped. */
.bf-page-preview-shell { position: relative; display: block; width: 100%; aspect-ratio: 8.5 / 11; max-height: calc(100vh - 48px - 44px); overflow: hidden; background: var(--bf-surface-2); }
.bf-page-preview-shell img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; }
/* The small thumbnail is the placeholder; the large one appears when it has
   actually arrived, and stays away if it never does. */
.bf-page-preview-thumb, .bf-page-preview-full { opacity: 0; transition: opacity .18s ease-out; }
.bf-page-preview-thumb.bf-loaded, .bf-page-preview-full.bf-loaded { opacity: 1; }
/* The skeleton page: a title bar and a few text bars, pulsing slowly, until an image has loaded. */
.bf-page-preview-shell::before { content: ''; position: absolute; left: 14%; right: 14%; top: 9%; height: 4px; background: var(--bf-stone); border-radius: 2px; box-shadow: 0 16px 0 -1px var(--bf-stone-2), 0 26px 0 -1px var(--bf-stone-2), 0 36px 0 -1px var(--bf-stone-2), 0 46px 0 -1px var(--bf-stone-2), 0 56px 0 -1px var(--bf-stone-2), 0 66px 0 -1px var(--bf-stone-2); animation: bf-skeleton 1.4s ease-in-out infinite; }
.bf-page-preview-shell:has(.bf-loaded)::before { display: none; }
@keyframes bf-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.bf-page-preview-cap { display: block; padding: 6px 2px 0; font-size: 13px; color: var(--bf-slate); }

/* ─── The peek pane (ux-case-setup §18.3) ─────────────────────────────
   Documents uses the empty column beside By type. Other preview surfaces
   retain the right-edge pane. Only explicit Open buttons take pointer input. */
.bf-peek { position: fixed; left: auto; right: 24px; top: 0; z-index: 95; width: min(560px, 46vw); max-height: calc(100vh - 48px); padding: 12px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius-lg); background: var(--bf-surface); box-shadow: var(--bf-shadow-pop); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 120ms ease-out, visibility 0s linear 120ms; }
.bf-peek.bf-open { opacity: 1; visibility: visible; transition: opacity 120ms ease-out, visibility 0s; }
.bf-peek-name { font-family: var(--bf-mono); font-size: 12px; color: var(--bf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-peek-name:has(.bf-ledger-split) { display: flex; align-items: center; gap: 8px; }
.bf-peek-name:has(.bf-ledger-split) > .bf-peek-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bf-peek-origin { margin-top: -5px; color: var(--bf-slate); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-peek-shell { position: relative; display: block; width: 100%; aspect-ratio: 8.5 / 11; max-height: calc(100vh - 48px - 88px); overflow: hidden; border: 1px solid var(--bf-stone); border-radius: 3px; background: var(--bf-surface-2); }
.bf-peek-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; opacity: 0; filter: blur(8px); transform: scale(1.04); transition: opacity .45s ease, filter .65s ease, transform .65s ease; }
.bf-peek-img.bf-loaded { opacity: 1; filter: none; transform: none; }
/* The skeleton page — the same title-bar-and-text-bars placeholder the hover
   preview uses, pulsing slowly so it reads as loading rather than as broken. */
.bf-peek-shell::before { content: ''; position: absolute; left: 14%; right: 14%; top: 9%; height: 5px; background: var(--bf-stone); border-radius: 2px; box-shadow: 0 20px 0 -1px var(--bf-stone-2), 0 33px 0 -1px var(--bf-stone-2), 0 46px 0 -1px var(--bf-stone-2), 0 59px 0 -1px var(--bf-stone-2), 0 72px 0 -1px var(--bf-stone-2), 0 85px 0 -1px var(--bf-stone-2), 0 98px 0 -1px var(--bf-stone-2); animation: bf-skeleton 1.4s ease-in-out infinite; }
.bf-peek-shell:has(.bf-loaded)::before { display: none; }
.bf-peek-shell:not(:has(.bf-loaded))::after { content: ''; position: absolute; left: 0; right: 0; height: 28%; top: -30%; background: linear-gradient(transparent, rgba(184, 160, 106, .35), transparent); animation: bf-letter-sweep 1.35s ease-in-out infinite; pointer-events: none; }
.bf-peek-shell:has(.bf-loaded)::after, .bf-peek-unready .bf-peek-shell::after { display: none; }
@keyframes bf-letter-sweep { from { top: -32%; } to { top: 108%; } }
/* Two errors is not a race with the renderer: the skeleton stops and the pane
   says what is true, with the way in beside it. */
.bf-peek-unready-line { display: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 16px; text-align: center; font-size: 13px; color: var(--bf-slate); }
.bf-peek-unready .bf-peek-unready-line { display: block; }
.bf-peek-unready .bf-peek-shell::before { display: none; }
.bf-peek-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--bf-slate); }
.bf-peek-cap b { color: var(--bf-ink); font-weight: 600; }
.bf-peek-open, .bf-peek-open-alt { pointer-events: auto; font-size: 13px; font-weight: 600; }
/* The stage fills the right margin; the letter page fits both its width and
   the height below the header and above the footer. No card around the page. */
.bf-peek.bf-peek-docked { --bf-peek-page-width: min(100%, calc((var(--bf-peek-height) - 88px) * 8.5 / 11)); box-sizing: border-box; right: auto; height: var(--bf-peek-height); max-height: none; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; z-index: 20; }
.bf-peek-docked > span { width: var(--bf-peek-page-width); align-self: center; flex-shrink: 0; }
.bf-peek-docked .bf-peek-shell { box-sizing: border-box; max-height: none; aspect-ratio: 8.5 / 11; box-shadow: var(--bf-shadow-pop); }
@media (max-width: 900px), (hover: none), (pointer: coarse) { .bf-peek { display: none; } }
.bf-split-note { padding: 6px 0 2px; font-size: 13px; color: var(--bf-slate); }
.bf-split-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 8px; }
.bf-split-sep { color: var(--bf-stone); }
/* The click is answered before the network is: while the split is being made
   the three actions are replaced by this sentence, in the same tone the row's
   band line uses for work in progress. */
.bf-split-pending { color: var(--bf-info); }
/* Adjust page ranges (I10, Michael's design) — one modal, never a stack. The
   file is a VERTICAL list of proposed documents, not one carousel: each row is
   a document, with its title, span and reason on the left and, on the right,
   its first page and its last page drawn big enough to read with a human eye,
   and the pages between them as a stack. A stack opens inside its own row, so
   only that row changes height and nothing else on screen moves. */
.bf-modal-card.bf-split-adjust { width: min(1320px, 100%); max-height: calc(100vh - 48px); gap: 16px; padding: 24px 28px; }
.bf-split-adjust-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bf-split-adjust-head h2 { margin: 0; }
.bf-split-adjust-head .bf-meta { margin: 4px 0 0; }
.bf-split-adjust-hint { margin: 0; }
.bf-split-doc-list { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-top: 1px solid var(--bf-stone-2); }
.bf-split-doc { display: flex; align-items: flex-start; gap: 20px; padding: 16px 2px; border-bottom: 1px solid var(--bf-stone-2); }
.bf-split-doc:last-child { border-bottom: 0; }
/* The left column is fixed so every document's title starts on the same line
   down the page — the rows read as a list, not as a ragged collage. */
.bf-split-doc-info { flex: 0 0 268px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.bf-split-doc-info .bf-split-title-input { width: 100%; height: 34px; }
/* I17: the row's name is a category, chosen from the firm's list. The select
   enhancer turns it into a trigger + listbox; both wear the width. A row
   nobody has named carries the warning edge and says so underneath. */
.bf-split-doc-info .bf-select-trigger { width: 100%; height: 34px; }
.bf-split-doc[data-split-needs-category='true'] .bf-split-title-input,
.bf-split-doc[data-split-needs-category='true'] .bf-select-trigger { border-color: var(--bf-warning); }
.bf-split-needs-category { color: var(--bf-warning); font-size: 13px; font-weight: 600; }
.bf-split-doc-info .bf-split-pages { min-width: 0; font-size: 13px; }
.bf-split-doc-info .bf-split-why { white-space: normal; font-size: 13px; }
.bf-split-doc-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bf-split-doc-hint { font-size: 12px; line-height: 1.45; color: var(--bf-slate); }
.bf-split-doc-pages { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 14px; }
/* Collapsed the rail holds three things; open it holds every page of one
   document and scrolls left to right INSIDE the row. */
.bf-split-rail { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.bf-split-page-cell { flex: 0 0 auto; width: 240px; display: flex; flex-direction: column; gap: 4px; transition: transform .14s ease; }
/* I17: hovering the gap between two pages parts them by 6px each — away from
   it to cut, toward it on a boundary gap, where the click merges instead.
   The class is put on by the split-review script, because the page above a
   boundary gap is drawn in the row above and no selector reaches two rows. */
.bf-split-page-cell.bf-split-shift-left { transform: translateX(-6px); }
.bf-split-page-cell.bf-split-shift-right { transform: translateX(6px); }
.bf-split-page { position: relative; width: 100%; padding: 0; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface); cursor: pointer; overflow: hidden; }
.bf-split-page:hover { border-color: var(--bf-gold); }
.bf-split-page img, .bf-split-page-blank { display: block; width: 100%; height: 310px; object-fit: contain; object-position: top center; background: var(--bf-surface); }
.bf-split-page-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bf-split-page-n { font-size: 13px; color: var(--bf-slate); }
.bf-split-page-read { min-height: 0; font-size: 13px; }
/* Closed, the whole page is the reader, so the second way in is noise; open,
   the page still reads too — Read just keeps its place (I15: the gap between
   two pages is the cut now, not the page). */
.bf-split-doc[data-split-expanded='false'] .bf-split-page-read { visibility: hidden; }
.bf-split-page-flag { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 12px; font-weight: 600; color: var(--bf-warning); background: var(--bf-warning-soft); }
.bf-split-page.bf-boundary { border-color: var(--bf-gold); box-shadow: inset 3px 0 0 var(--bf-gold-deep); }
.bf-split-page-cell:has(.bf-boundary) .bf-split-page-n { color: var(--bf-gold-deep); font-weight: 600; }
.bf-split-page.bf-unanswered { border-color: #e8d9b0; }
.bf-split-page:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: 2px; }
.bf-split-page.bf-thumb-missing { border-style: dashed; }
.bf-split-page.bf-thumb-missing::after { content: 'Page image unavailable'; display: block; width: 100%; height: 310px; padding: 12px; box-sizing: border-box; font-size: 13px; color: var(--bf-slate); background: var(--bf-surface-2); }
/* The marker is the drag handle: a gold rule down the page's leading edge. */
.bf-split-mark { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 10px; background: transparent; cursor: grab; }
.bf-split-page.bf-boundary .bf-split-mark { background: var(--bf-gold); }
.bf-split-page:hover .bf-split-mark { background: var(--bf-stone); }
/* The middle pages, drawn as what they are: up to four real pages fanned
   behind the front one, each ~10px right and ~10px down from the last, so
   the pile reads as those pages rather than a generic placeholder (I13).
   I15: no box around them any more (the owner: the dashed square was not
   earning its place) — bare fanned pages standing on their own, with the
   count under them, at 72×94 (from 48×62), same 10px steps. */
.bf-split-stack { flex: 0 0 auto; align-self: center; padding: 0; border: 0; border-radius: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; }
.bf-split-stack:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: 4px; border-radius: var(--bf-radius); }
.bf-split-stack-thumbs { position: relative; display: block; width: 102px; height: 124px; }
.bf-split-stack-thumb { position: absolute; left: 0; top: 0; width: 72px; height: 94px; overflow: hidden; border: 1px solid var(--bf-stone); border-radius: 2px; background: var(--bf-surface); box-shadow: 0 2px 6px rgba(14, 27, 44, .16); }
.bf-split-stack-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bf-split-stack-thumb:nth-child(1) { z-index: 4; }
.bf-split-stack-thumb:nth-child(2) { z-index: 3; transform: translate(10px, 10px); }
.bf-split-stack-thumb:nth-child(3) { z-index: 2; transform: translate(20px, 20px); }
.bf-split-stack-thumb:nth-child(4) { z-index: 1; transform: translate(30px, 30px); }
.bf-split-stack-n { font-size: 13px; font-weight: 600; color: var(--bf-ink); text-align: center; }
.bf-split-stack-flag { font-size: 12px; font-weight: 600; color: var(--bf-warning); text-align: center; }
/* I15 — "Split here" / "Remove split": the cut affordance moved off the page
   and into the gap between two pages (the owner, from the Adjust dialog: the
   nudges are also gone here — "not the biggest fan of this, not sure it's
   that helpful" — a gap is now how a boundary moves). A gap is a real
   button, 28px wide and as tall as the page image beside it, pulled by a
   negative margin into the rail's own 12px gap on both sides so it does not
   ADD to the space between two pages — it IS that space. The first gap in a
   row (the boundary above it, always "Remove split") has nothing to its left
   to pull into, so it keeps the row's own left edge. Hover or focus-visible
   fades in a 2px gold hairline and a small-caps pill centred on it over
   120ms; nothing else moves. */
.bf-split-gap { flex: 0 0 28px; align-self: flex-start; box-sizing: border-box; width: 28px; height: 310px; margin: 0 -12px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; cursor: pointer; }
.bf-split-rail > .bf-split-gap:first-child { margin-left: 0; }
.bf-split-gap-line { display: block; width: 2px; height: 100%; background: var(--bf-gold); opacity: 0; transition: opacity .12s ease; }
.bf-split-gap-pill { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 4px 10px; border-radius: 999px; background: var(--bf-navy); color: #f6f3ec; white-space: nowrap; box-shadow: 0 2px 6px rgba(14, 27, 44, .25); opacity: 0; transition: opacity .12s ease; }
.bf-split-gap:hover .bf-split-gap-line, .bf-split-gap:focus-visible .bf-split-gap-line,
.bf-split-gap:hover .bf-split-gap-pill, .bf-split-gap:focus-visible .bf-split-gap-pill { opacity: 1; }
.bf-split-gap:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: 2px; }
/* I17: the pill and the hairline still fade in for a reviewer who asked for
   less motion; the pages stay exactly where they are. */
@media (prefers-reduced-motion: reduce) {
  .bf-split-page-cell { transition: none; }
  .bf-split-page-cell.bf-split-shift-left, .bf-split-page-cell.bf-split-shift-right { transform: none; }
  .bf-page-preview-shell::before { animation: none; }
  .bf-peek-shell::before, .bf-peek-shell::after { animation: none; }
  .bf-peek-img { filter: none; transform: none; transition: opacity .18s ease-out; }
}
.bf-btn-link.bf-disabled { opacity: .45; cursor: default; text-decoration: none; }
.bf-btn-link.bf-disabled:hover { text-decoration: none; }
.bf-split-adjust-error { padding: 12px 14px; border-radius: var(--bf-radius); background: var(--bf-danger-soft); border: 1px solid #efc9c4; font-size: 14px; }
.bf-split-adjust-actions { align-items: center; }
/* The page, full size: the "see it with a human eye" case. */
.bf-split-lightbox { z-index: 120; }
.bf-modal-card.bf-split-lightbox-card { width: min(1000px, 96vw); max-height: calc(100vh - 32px); padding: 14px 18px 18px; gap: 12px; }
.bf-split-lightbox-head { display: flex; align-items: center; gap: 12px; }
.bf-split-lightbox-head .bf-num { font-size: 14px; font-weight: 600; color: var(--bf-ink); }
.bf-split-lightbox-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--bf-surface-2); border: 1px solid var(--bf-stone-2); border-radius: var(--bf-radius); }
.bf-split-lightbox-body { display: flex; align-items: flex-start; justify-content: center; }
/* The whole page at once, as tall as the window allows; the reader can still scroll a very tall page. */
.bf-split-lightbox-body img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 120px); }
@media (max-width: 1100px) {
  .bf-split-doc { flex-direction: column; gap: 12px; }
  .bf-split-doc-info { flex-basis: auto; width: 100%; }
  .bf-split-doc-pages { width: 100%; }
}
.bf-combined-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bf-combined-actions > span:first-child { color: var(--bf-warning); font-weight: 600; margin-right: 4px; }
.bf-bulk-bar { position: sticky; bottom: 16px; z-index: 20; margin: 0 auto; width: fit-content; max-width: 100%; padding: 10px 12px; border: 1px solid var(--bf-navy-line); border-radius: var(--bf-radius-lg); background: var(--bf-navy); color: #f6f3ec; box-shadow: var(--bf-shadow-pop); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bf-bulk-bar .bf-small { color: rgba(246, 243, 236, .72); display: flex; align-items: center; gap: 8px; }
.bf-bulk-bar .bf-btn-danger, .bf-btn-danger { color: var(--bf-danger); }
.bf-notice-error { justify-content: space-between; }
.bf-conversion-banner { justify-content: space-between; background: var(--bf-success-soft); border-color: #c4dccd; }
.bf-conversion-copy { display: flex; flex-direction: column; gap: 3px; }
.bf-action-menu { position: relative; }
.bf-action-menu > .bf-popover { right: 0; top: 44px; }
/* V1 — the document viewer. The PDF frame is the browser's plugin; the chrome
   around it is ours: ivory ground, stone hairlines, serif title, mono filename,
   icon buttons for the document walk, zoom and pages, a facts list at right. */
/* Three classes: the U8 viewer-card rule below sets `width: auto`, and a
   content-sized card left the frame at half the screen. */
.bf-modal-card.bf-modal-viewer.bf-viewer { flex-direction: row; width: min(1400px, 94vw); height: calc(100dvh - 24px); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-pop); background: var(--bf-ground); }
.bf-viewer:focus-visible { outline: none; }
.bf-viewer-preview { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--bf-surface-2); }
.bf-viewer-toolbar { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--bf-stone); background: var(--bf-ground); }
.bf-viewer-toolbar .bf-ftype { flex: 0 0 auto; }
.bf-viewer-heading { flex: 1 1 auto; min-width: 0; }
.bf-viewer-title { margin: 0; font-family: var(--bf-serif); font-size: 23px; font-weight: 600; line-height: 1.15; color: var(--bf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-viewer-file { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin-top: 2px; font-size: 13px; color: var(--bf-slate); }
.bf-viewer-file .bf-mono { font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-viewer-file .bf-meta { flex: 0 0 auto; white-space: nowrap; }
.bf-viewer-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.bf-viewer-tools .bf-meta { min-width: 44px; padding: 0 2px; text-align: center; white-space: nowrap; }
.bf-viewer-tools .bf-icon-btn { width: 34px; height: 34px; }
.bf-viewer-tools a.bf-icon-btn { text-decoration: none; }
.bf-viewer-sep { width: 1px; height: 20px; margin: 0 8px; background: var(--bf-stone); }
.bf-viewer-frame { position: relative; flex: 1 1 auto; min-height: 0; }
.bf-viewer-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bf-surface-2); }
.bf-viewer-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bf-surface-2); }
.bf-viewer-loading .bf-spinner { width: 24px; height: 24px; border-width: 2px; }
.bf-viewer-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px; text-align: center; font-size: 15px; color: var(--bf-slate); background: var(--bf-surface-2); }
.bf-viewer-details { box-sizing: border-box; flex: 0 0 auto; width: 380px; overflow-y: auto; padding: 22px 24px 28px; border-left: 1px solid var(--bf-stone); background: var(--bf-ground); display: flex; flex-direction: column; gap: 20px; }
.bf-viewer-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bf-viewer-block > .bf-label { font-size: 12px; }
.bf-viewer-block .bf-select { width: 100%; }
.bf-viewer-note-line { margin: 0; font-size: 13px; line-height: 1.4; color: var(--bf-slate); }
.bf-viewer-hr { height: 1px; background: var(--bf-stone); }
.bf-viewer-details .bf-facts { row-gap: 9px; }
.bf-viewer-details .bf-facts .bf-v { min-width: 0; overflow-wrap: anywhere; }
.bf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; background: var(--bf-stone-2); color: var(--bf-slate); font-size: 12.5px; }
.bf-icon-btn[disabled] { opacity: .35; cursor: default; }
.bf-icon-btn[disabled]:hover { background: transparent; color: var(--bf-slate); }
.bf-modal-card.bf-modal-viewer .bf-viewer-details { overflow-y: auto; }
/* V1 — every document row in the app opens the viewer: the whole row is the
   target, and hover says so with the surface tint, the cursor and the title
   taking ink. Controls inside the row keep their own jobs. */
.bf-doc-row { cursor: pointer; }
.bf-doc-row:hover, .bf-doc-row:focus-visible { background: var(--bf-surface-2); }
.bf-doc-row:hover .bf-t, .bf-doc-row:focus-visible .bf-t, .bf-doc-row:hover .bf-tile-doc-title, .bf-doc-row:hover .bf-doc-name { color: var(--bf-ink); }
.bf-doc-row:hover .bf-tile-doc-title, .bf-doc-row:hover .bf-doc-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bf-stone); }
.bf-doc-chip.bf-doc-row:hover, .bf-doc-chip.bf-doc-row:focus-visible { border-color: #c9c5bc; }
.bf-tile-doc.bf-doc-row { margin: 0 -8px; padding: 4px 8px; border-radius: var(--bf-radius); }


/* Gap check */
.bf-gap-stack { display: flex; flex-direction: column; gap: 32px; }
.bf-gap-drop { min-height: 96px; cursor: pointer; color: var(--bf-slate); font-size: 14px; text-align: center; }
.bf-gap-drop:hover, .bf-gap-drop-over { border-color: var(--bf-gold); background: var(--bf-gold-soft); color: var(--bf-ink); }
.bf-gap-demand-status { padding: 0; }
.bf-gap-demand-file { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--bf-stone-2); }
.bf-gap-demand-icon { flex: 0 0 auto; width: 28px; height: 34px; color: var(--bf-navy); stroke-width: 1.4; }
.bf-gap-demand-copy { flex: 1 1 auto; min-width: 0; }
.bf-gap-demand-title { color: var(--bf-ink); font-size: 14px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bf-gap-demand-meta { margin-top: 4px; color: var(--bf-slate); font-size: 13px; }
.bf-gap-demand-remove { flex: 0 0 auto; padding: 6px 0 6px 4px; color: var(--bf-slate); font-size: 13px; }
.bf-gap-demand-remove:hover { color: var(--bf-ink); }
.bf-gap-report-title { gap: 4px; }
.bf-gap-facts { max-width: 640px; }
.bf-gap-sessions { display: flex; flex-direction: column; }
.bf-gap-session { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--bf-stone-2); }
.bf-gap-session:last-child { border-bottom: 0; }
.bf-gap-session-copy { min-width: 0; text-align: left; }
.bf-gap-session-title { margin: 0 0 7px; color: var(--bf-ink); font-size: 15px; font-weight: 600; line-height: 1.5; }
.bf-gap-session-summary { display: block; line-height: 1.6; }
.bf-gap-session-actions { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.bf-gap-session-actions .bf-btn-link { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.bf-gap-session-actions .bf-btn-link:disabled { cursor: not-allowed; color: var(--bf-slate); opacity: .6; }

.bf-btn:focus-visible, .bf-icon-btn:focus-visible, .bf-wordmark:focus-visible, .bf-tab:focus-visible,
.bf-case-tab:focus-visible, .bf-opt:focus-visible, .bf-input:focus-visible,
.bf-search:focus-visible, .bf-select:focus-visible, .bf-checkbox:focus-visible,
.bf-radio:focus-visible, [tabindex='0']:focus-visible {
  outline: 3px solid var(--bf-focus); outline-offset: 2px;
}

@media (max-width: 900px) {
  .bf-topbar { padding: 0 20px; }
  .bf-case-head { padding-inline: 24px; }
  .bf-case-head .bf-title-row { flex-direction: column; }
  .bf-tabs, .bf-case-tabs { flex-wrap: wrap; gap: 16px; }
  .bf-two-col { grid-template-columns: 1fr; }
  .bf-body { padding-inline: 24px; }
  .bf-documents-controls { justify-content: flex-start; flex-wrap: wrap; }
  .bf-first-run-columns { grid-template-columns: 1fr; }
  .bf-conversion-banner { align-items: flex-start; flex-direction: column; }
  .bf-viewer-details { width: 320px; }
  .bf-viewer-tools .bf-meta { display: none; }
}
@media (max-width: 1100px) {
  .bf-viewer { flex-direction: column; height: 94vh; }
  .bf-viewer-details { width: auto; max-height: 40%; border-left: 0; border-top: 1px solid var(--bf-stone); }
}

/* Overview. U7's four summary tiles and the stage rail under them are retired
   (the ux-case-setup spec §7, D2): the two-track block is the head of this
   page now, and it is the same block the last setup screen ends on, so
   nothing changes shape when a case is released from the wizard. */
.bf-overview { gap: 40px; }
.bf-tile-links .bf-btn-link { padding: 0; }

/* Recent activity: an icon, the sentence, and a relative time, grouped by day. */
.bf-activity { display: flex; flex-direction: column; }
.bf-activity-day { margin: 18px 0 4px; }
.bf-activity-day:first-child { margin-top: 4px; }
.bf-activity-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bf-stone-2); }
.bf-activity-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--bf-slate); }
.bf-activity-text { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.bf-activity-actor { color: var(--bf-slate); }
.bf-activity-time { flex-shrink: 0; white-space: nowrap; }
.bf-activity-more { align-self: flex-start; margin-top: 10px; }

/* Overview: the work and the record sit side by side under the track block. */
.bf-overview-lower { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); gap: 40px; align-items: start; }
@media (max-width: 1180px) { .bf-overview-lower { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* A demand is a document, so the tile shows one: paper glyph + readable title. */
.bf-tile-doc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bf-tile-doc-glyph { flex: 0 0 auto; width: 30px; height: 36px; border: 1px solid var(--bf-stone); border-radius: 3px; background: var(--bf-surface); color: var(--bf-slate); font-family: var(--bf-sans); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; box-shadow: inset 0 8px 0 var(--bf-surface-2); }
.bf-tile-doc-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bf-tile-doc-title { font-size: 14px; font-weight: 600; color: var(--bf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tile links: icon + label, sitting on one row at the foot of the tile. */
.bf-tile-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ *
 * U8 — every dialog on the same surface. The case modal is the
 * reference: ivory-white card, stone border, 12 px radius, serif
 * title, label-cased field labels, 40 px controls, and a footer whose
 * primary sits at the right in navy — never blue.
 * ------------------------------------------------------------------ */
.bf-modal-card.bf-modal-sm { width: min(440px, 100%); }
.bf-modal-card.bf-modal-md { width: min(680px, 100%); }
.bf-modal-card.bf-modal-lg { width: min(860px, 100%); }
/* Hero dialogs (quota, trial, plan picker) run their own full-bleed bands
   and scroll inside themselves; they take the card's border and radius only. */
.bf-modal-card.bf-modal-flush { padding: 0; overflow: hidden; }
/* The viewer sizes itself; it only borrows the card chrome. */
.bf-modal-card.bf-modal-viewer { width: auto; max-width: none; max-height: none; padding: 0; overflow: hidden; }
.bf-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.bf-modal-head .bf-modal-heading { min-width: 0; }
.bf-modal-head h2 { margin: 0; }
.bf-modal-head p { margin: 6px 0 0; font-size: 14px; }
.bf-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-gold-deep); }
.bf-modal-body { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.bf-modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bf-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--bf-stone-2); }
.bf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bf-field > .bf-label { margin: 0; }
.bf-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bf-field-check { flex-direction: row; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.bf-fieldset { border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); padding: 0; }
.bf-fieldset > summary { list-style: none; padding: 12px 16px; cursor: pointer; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-slate); }
.bf-fieldset > summary::-webkit-details-marker { display: none; }
.bf-fieldset > summary:hover { background: var(--bf-surface-2); }
.bf-fieldset-body { display: flex; flex-direction: column; gap: 18px; padding: 4px 16px 18px; }
.bf-modal-choices { display: flex; gap: 12px; }
.bf-modal-choice { flex: 1 1 0; min-height: 108px; flex-direction: column; justify-content: center; gap: 6px; padding: 16px 12px; text-align: center; white-space: normal; }
.bf-modal-choice .bf-meta { font-weight: 400; }
@media (max-width: 700px) {
  .bf-field-row, .bf-modal-choices { grid-template-columns: minmax(0, 1fr); flex-direction: column; }
}

/* ------------------------------------------------------------------ *
 * U8 — native controls. Every select, date field, checkbox, radio and
 * text field in the shell wears one treatment; nothing is left on the
 * browser default (which is blue on every platform we support).
 * ------------------------------------------------------------------ */
.bf-textarea { box-sizing: border-box; width: 100%; min-height: 80px; padding: 10px 12px; border-radius: var(--bf-radius); border: 1px solid var(--bf-stone); background-color: var(--bf-surface); color: var(--bf-ink); font: 14px/1.5 var(--bf-sans); resize: vertical; }
.bf-textarea::placeholder { color: var(--bf-slate); opacity: 1; }
.bf-input[type='date'], .bf-input[type='datetime-local'], .bf-input[type='time'] { padding-right: 10px; }
/* The picker glyph ships blue-ish and oversized; tint it to the slate
   token so a date field reads like the select beside it. */
.bf-input[type='date']::-webkit-calendar-picker-indicator,
.bf-input[type='datetime-local']::-webkit-calendar-picker-indicator,
.bf-input[type='time']::-webkit-calendar-picker-indicator {
  width: 16px; height: 16px; padding: 0; margin-left: 6px; cursor: pointer; opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23667380' stroke-width='1%2E4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 7h12M6 2v3M10 2v3'/%3E%3C/svg%3E");
  background-position: center; background-repeat: no-repeat; background-size: 16px 16px;
}
.bf-input[type='date']::-webkit-datetime-edit { color: var(--bf-ink); }
.bf-input[type='date']:invalid::-webkit-datetime-edit { color: var(--bf-slate); }
/* Round 15 (R45): WebKit drops :focus-visible on a date field (on a click,
   and between its month/day/year parts), so a focused date field always
   draws the focus ring. */
.bf-input[type='date']:focus, .bf-input[type='date']:focus-within { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
/* Anything the conversion has not reached yet still gets the accent and
   the calm placeholder, so no control falls back to browser blue. */
input, textarea, select { accent-color: var(--bf-navy); }
input::placeholder, textarea::placeholder { color: var(--bf-slate); opacity: 1; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--bf-navy); }
select:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-textarea:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ *
 * U8 — the stage rail. Five dots on one hairline under the summary
 * tiles: the stages a matrimonial response actually passes through.
 * It carries no actions — the checklist below is where work happens —
 * but it is read from the same `/state`, so it never flatters.
 * ------------------------------------------------------------------ */
.bf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.bf-stage-rail { position: relative; padding: 4px 0 2px; }
.bf-stage-list { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
/* One hairline behind the dots, inset to the first and last dot centre. */
.bf-stage-list::before { content: ''; position: absolute; top: 5px; left: 10%; right: 10%; height: 1px; background: var(--bf-stone); pointer-events: none; }
.bf-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
/* r3: the ring travels to the next dot rather than jumping to it — the strip
   is never rebuilt on a step change, so the transition has a node to run on. */
.bf-stage-dot { position: relative; z-index: 2; width: 11px; height: 11px; border-radius: 999px; background: var(--bf-surface); box-shadow: 0 0 0 1px var(--bf-stone), 0 0 0 4px var(--bf-ground); transition: box-shadow 300ms ease, background-color 300ms ease; }
/* §15.1: the connector after a dot, filled gold. Earlier steps are full,
   later ones empty, and the current one is the only progress bar on the
   screen — which is why no work area draws one any more. */
.bf-stage-fill { position: absolute; z-index: 0; top: 5px; left: 50%; width: 0; height: 1px; background: var(--bf-gold); transition: width 600ms ease-out; pointer-events: none; }
/* The pulse says "the server is working on this step", and nothing else on
   the screen has to repeat it. */
.bf-stage-dot.bf-stage-live::before { content: ''; position: absolute; inset: -5px; border-radius: 999px; background: var(--bf-gold); opacity: .35; animation: bf-stage-pulse 1.6s ease-in-out infinite; }
@keyframes bf-stage-pulse { 0%, 100% { opacity: .12; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .bf-stage-fill { transition: none; }
  .bf-stage-dot { transition: none; }
  .bf-stage-dot.bf-stage-live::before { animation: none; opacity: .3; }
}
.bf-stage-name { font-size: 13px; color: var(--bf-slate); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* r3 §15.1: the current step's own count, under its name. Tabular so the
   numeral does not shuffle the line sideways as it ticks. */
.bf-stage-count { margin-top: -6px; font-size: 13px; color: var(--bf-slate); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bf-stage-done .bf-stage-dot { background: var(--bf-navy); box-shadow: 0 0 0 1px var(--bf-navy), 0 0 0 4px var(--bf-ground); }
.bf-stage-done .bf-stage-name { color: var(--bf-slate); }
.bf-stage-current .bf-stage-dot { background: var(--bf-navy); box-shadow: 0 0 0 1px var(--bf-navy), 0 0 0 4px var(--bf-ground), 0 0 0 6px var(--bf-gold); }
.bf-stage-current .bf-stage-name { color: var(--bf-ink); font-weight: 600; }

/* Chevrons are stroked icons everywhere; no text triangles. */
.bf-chevron { flex: 0 0 auto; }
.bf-btn .bf-chevron { margin-left: 2px; }

/* The first content column's hover reaches the table's left edge: the leading
   checkbox column is chrome, not a gap in the hover target. */
.bf-table thead .bf-check-cell:has(+ .bf-th .bf-th-button:hover),
.bf-table thead .bf-check-cell:has(+ .bf-th .bf-th-button:focus-visible),
.bf-table thead .bf-check-cell:has(+ .bf-th .bf-th-button[aria-expanded='true']) {
  background: var(--bf-surface-2);
}

/* Respond reveals in one pass: while the projection is in flight the static
   parts (the Bates strip) must not sit where the demand and requests belong.
   The banner is exempt so a slow load can still say it is loading, and so is
   the sheet — what is in it during a load is this load's own skeleton, painted
   synchronously, never the previous case's mapping. A frame the reader can see
   from t=0 is what replaced a blank surface with a sentence on it. */
#mapping-v2-root[data-loading='true'] { min-height: 320px; }
#mapping-v2-root[data-loading='true'] > *:not(#mapping-v2-banner):not(#mapping-v2-sheet) {
  visibility: hidden;
}

/* The loading frame. Shapes, no words: grey bars where the readiness word, the
   request rows and the working panel will be. `prefers-reduced-motion` gets a
   still bar rather than no bar — the shape is the information, the shimmer is
   only the reassurance that it is not stuck. */
.bf-skeleton {
  display: inline-block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg, var(--bf-stone-2) 0%, var(--bf-stone) 50%, var(--bf-stone-2) 100%
  );
  background-size: 200% 100%;
  animation: bf-skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes bf-skeleton-sweep {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-skeleton { animation: none; background: var(--bf-stone-2); }
}
.bf-status-blank::before { background: var(--bf-stone-2); }
.bf-skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px;
  border-bottom: 1px solid var(--bf-stone-2);
}
.bf-skeleton-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

/* ------------------------------------------------------------------ *
 * Respond — the context band (design system §9.2): one white surface,
 * split by a vertical hairline into two two-line halves. The left says
 * what the page works on (the demand); the right, the setting it will use
 * (Bates numbering). No headings inside; eyebrows, one row of facts or
 * controls, text links instead of buttons.
 * ------------------------------------------------------------------ */
.bf-band { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 18px 24px; background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius-lg); }
.bf-band-rule { align-self: stretch; width: 1px; background: var(--bf-stone-2); }
.bf-band-half { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bf-band-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 16px; }
.bf-band-meta { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.bf-band-file { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 36px; }
.bf-band-file .bf-ftype { flex: 0 0 auto; min-width: 28px; height: 20px; }
.bf-band-file-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bf-band-title { font-size: 15px; font-weight: 600; color: var(--bf-ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-band-line { font-size: 13px; line-height: 1.4; color: var(--bf-slate); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bf-band-link { padding: 0; border: 0; background: transparent; font: 600 13px var(--bf-sans); color: var(--bf-gold-deep); cursor: pointer; text-decoration: none; }
.bf-band-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bf-band-link[disabled], .bf-band-link[aria-disabled="true"], .bf-band-link.bf-disabled { color: var(--bf-slate); cursor: default; text-decoration: none; }
.bf-band-link[disabled]:hover, .bf-band-link[aria-disabled="true"]:hover, .bf-band-link.bf-disabled:hover { text-decoration: none; }
.bf-band-dot { color: #b5b0a5; }
.bf-band-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 36px; }
.bf-band-fields { display: flex; align-items: center; gap: 10px; }
.bf-band-arrow { flex: 0 0 auto; color: var(--bf-slate); }
.bf-band-stamp { font-size: 15px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.bf-band-check { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font-size: 13px; color: var(--bf-ink); cursor: pointer; white-space: nowrap; }
.bf-input-sm, .bf-select-sm { height: 36px; font-size: 14px; }
.bf-select-sm { padding-right: 30px; background-position: right 9px center; }
@media (max-width: 1180px) {
  .bf-band { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .bf-band-rule { width: auto; height: 1px; margin: 16px 0; }
}

/* ------------------------------------------------------------------ *
 * RS1 — Respond as one sheet. Below the context band the page is a
 * single white surface: a readiness line across the top, then the
 * request list on the left and the working panel on the right, split by
 * one hairline. Every decision about a document is made in the panel of
 * the request it belongs to, so nothing on this page renders twice.
 * ------------------------------------------------------------------ */
#mapping-v2-root { gap: 24px; }
/* The sheet sits 24px under the band; quality control keeps its 32. */
#mapping-v2-qc { margin-top: 8px; }
/* `clip` where it is supported, `hidden` where it is not: both clip the
   panel to the sheet's radius, but `hidden` makes the sheet a scroll
   container, which scopes the list column's sticky to the sheet instead of
   the viewport and so stops it following her down a long panel. */
.bf-sheet { background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius-lg); overflow: hidden; overflow: clip; }
#mapping-v2-root[data-loading='true'] .bf-sheet { min-height: 480px; }
/* The readiness line: a dot and a word, the work still to do, and the
   counts at the right. It grows by 3px while a run paints its bar. */
/* RS2 §2: one status word, one next step, one number. The line never wraps
   — it printed five items over two lines on a fresh case and read as a
   checklist. Everything on it is nowrap; the right-hand number is the only
   child allowed to shrink, so it ellipsises before anything else does. */
.bf-sheet-strip { height: 52px; padding: 0 24px; display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; border-bottom: 1px solid var(--bf-stone); overflow: hidden; }
.bf-sheet-strip > * { flex: 0 0 auto; white-space: nowrap; }
.bf-sheet-strip .bf-status { font-weight: 600; }
.bf-sheet-strip .bf-btn-link, .bf-sheet-strip .bf-sheet-step { font-size: 14px; min-height: 24px; padding: 0; }
.bf-sheet-strip .bf-sheet-step { color: var(--bf-slate); }
.bf-sheet-strip .bf-sheet-right { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bf-sheet-live { display: block; height: auto; padding: 0; overflow: visible; }
.bf-sheet-live .bf-sheet-live-row { height: 52px; padding: 0 24px; display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; overflow: hidden; }
.bf-sheet-live .bf-sheet-live-row > * { flex: 0 0 auto; white-space: nowrap; }
.bf-sheet-live .bf-sheet-live-row .bf-sheet-right { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bf-sheet-live .bf-status { color: var(--bf-gold-deep); }
.bf-sheet-live .bf-progress { border-radius: 0; }
.bf-sheet-live .bf-progress > i { border-radius: 0; }
.bf-sheet-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); align-items: stretch; }
/* The spec says top 0; the app's own top bar is 56px of fixed navy, so 0
   would park the first request behind it. */
.bf-sheet-list { align-self: start; position: sticky; top: 56px; max-height: calc(100vh - 56px); overflow-y: auto; min-width: 0; }
.bf-sheet-list:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: -3px; }
.bf-sheet-panel { border-left: 1px solid var(--bf-stone-2); min-width: 0; }
.bf-sheet-notice { margin: 0; padding: 20px; font-size: 14px; color: var(--bf-slate); }
/* One filter row, three words, counts as plain numerals. */
.bf-req-filters { height: 48px; padding: 0 20px; display: flex; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--bf-stone-2); }
.bf-req-filters .bf-filter { min-height: 0; padding: 0 0 10px; }
.bf-req-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: start; min-height: 64px; padding: 12px 20px 12px 17px; border-bottom: 1px solid var(--bf-stone-2); cursor: pointer; }
.bf-req-row:hover { background: var(--bf-surface-2); }
.bf-req-row[aria-selected='true'] { background: var(--bf-gold-soft); box-shadow: inset 3px 0 0 var(--bf-gold-deep); }
.bf-req-row:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: -3px; }
.bf-req-num { font-family: var(--bf-serif); font-size: 22px; font-weight: 500; line-height: 1; color: var(--bf-ink); padding-top: 2px; font-variant-numeric: lining-nums tabular-nums; }
.bf-req-row[aria-selected='true'] .bf-req-num { color: var(--bf-gold-deep); }
.bf-req-body { min-width: 0; }
.bf-req-text { font-size: 14px; line-height: 1.4; color: var(--bf-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bf-req-meta { margin-top: 5px; font-size: 13px; color: var(--bf-slate); display: flex; align-items: center; gap: 8px; min-width: 0; }
.bf-req-meta .bf-status { font-size: 13px; }
.bf-req-meta .bf-req-meta-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The unmatched row closes the list; one darker line separates it. */
.bf-req-row-special { border-top: 1px solid var(--bf-stone); border-bottom: 0; }
.bf-req-row-special .bf-req-text { font-weight: 500; }
.bf-req-list-empty { padding: 20px; color: var(--bf-slate); font-size: 14px; }
.bf-req-panel { padding: 22px 28px 28px; min-width: 0; }
.bf-req-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bf-req-panel-text { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--bf-ink); max-width: 860px; }
.bf-req-field { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.bf-req-field-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bf-req-field .bf-select { width: 320px; max-width: 100%; }
.bf-req-field .bf-input { width: 560px; max-width: 100%; }
.bf-req-warn-line { margin: 0; font-size: 13px; color: var(--bf-warning); }
.bf-req-section-head { margin-top: 28px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--bf-stone-2); }
.bf-req-section-head .bf-btn-link { min-height: 24px; font-size: 13px; }
.bf-req-group { margin-top: 8px; min-height: 40px; display: flex; align-items: center; gap: 10px; }
.bf-req-group .bf-req-group-title { font-size: 14px; font-weight: 600; color: var(--bf-ink); }
.bf-req-group .bf-status .bf-req-group-title { font-size: 14px; }
.bf-req-group .bf-btn-link { margin-left: auto; min-height: 24px; font-size: 13px; }
.bf-req-group-placed { margin-top: 18px; }
.bf-req-subhead { margin-top: 4px; min-height: 34px; display: flex; align-items: center; gap: 10px; }
.bf-req-subhead .bf-req-group-title { font-size: 13px; font-weight: 600; color: var(--bf-slate); }
.bf-req-subhead .bf-btn-link { margin-left: auto; min-height: 24px; font-size: 13px; }
/* A document row is a fixed grid, never a wrapping flex row: glyph, the
   text block, the actions. A long reason ellipsizes inside column two
   (the full sentence is the line's hover text) instead of pushing the
   buttons under the row. */
.bf-req-doc { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; min-height: 56px; padding: 6px 10px; margin: 0 -10px; border-bottom: 1px solid var(--bf-stone-2); cursor: pointer; }
.bf-req-doc-placed { min-height: 52px; }
.bf-req-doc:last-child { border-bottom: 0; }
.bf-req-doc:hover, .bf-req-doc:focus-within { background: var(--bf-surface-2); }
.bf-req-doc:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: -3px; }
.bf-req-doc > .bf-ftype { justify-self: start; }
.bf-req-doc-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bf-req-doc-main .bf-t { font-size: 15px; font-weight: 600; color: var(--bf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-req-doc:hover .bf-t { text-decoration: underline; text-underline-offset: 3px; }
.bf-req-doc-main .bf-m { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--bf-slate); white-space: nowrap; }
.bf-req-doc-main .bf-m .bf-cat { font-size: 13px; flex: 0 0 auto; }
.bf-req-doc-reason { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bf-req-doc-ask { font-size: 13px; color: var(--bf-warning); }
.bf-req-doc-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Peer survey A4: hover-only controls are controls a 50-year-old never
   finds. Remove and Also map to are always on the row, quiet until the row
   is under the pointer or holds focus. */
.bf-req-doc-links { display: flex; align-items: center; gap: 14px; }
.bf-req-doc-links .bf-btn-link { color: var(--bf-slate); font-weight: 500; }
.bf-req-doc:hover .bf-req-doc-links .bf-btn-link,
.bf-req-doc:focus-within .bf-req-doc-links .bf-btn-link { color: var(--bf-gold-deep); font-weight: 600; }
.bf-req-doc .bf-btn-link { min-height: 30px; font-size: 13px; }
.bf-req-doc .bf-btn-sm { min-height: 32px; }
/* Anything after the three cells (the saved word, the map-to picker)
   takes a full row beneath. */
.bf-req-doc > [role='group'], .bf-req-doc > [data-phase] { grid-column: 1 / -1; }
.bf-req-doc > [data-phase]:empty { display: none; }
.bf-req-doc-empty { margin: 0; padding: 6px 0 2px; font-size: 14px; color: var(--bf-slate); }
/* Confidence is words, not a percentage, and only when it is not High. */
.bf-conf-word { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--bf-warning); white-space: nowrap; }
.bf-conf-word::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--bf-warning); flex-shrink: 0; }
.bf-req-picker { margin-top: 18px; padding: 12px 16px 8px; background: var(--bf-surface-2); border: 1px solid var(--bf-stone-2); border-radius: var(--bf-radius); }
.bf-req-picker-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.bf-req-picker-controls .bf-search { flex: 1 1 240px; min-width: 200px; height: 36px; }
.bf-req-picker-controls .bf-select { flex: 0 0 200px; height: 36px; }
.bf-req-picker-controls .bf-btn-link { margin-left: auto; min-height: 24px; font-size: 13px; }
.bf-req-picker .bf-req-doc { min-height: 44px; padding: 4px 0; margin: 0; }
.bf-req-picker .bf-req-doc-main .bf-t { font-size: 14px; }
.bf-req-picker-list { display: flex; flex-direction: column; }
.bf-req-picker-more { margin: 4px 0 0; padding: 10px 0 2px; }
.bf-req-panel-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--bf-stone-2); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bf-req-panel-foot .bf-btn { min-height: 36px; }
.bf-req-panel-empty { padding: 40px 28px; color: var(--bf-slate); font-size: 14px; }
.bf-req-panel-note { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--bf-slate); max-width: 760px; }
/* The saved word beside a control, the way the Documents category does it. */
#mapping-v2-root [data-phase='saved'] { color: var(--bf-success); font-size: 13px; font-weight: 600; }
#mapping-v2-root [data-phase='saving'] { color: var(--bf-slate); font-size: 13px; }
#mapping-v2-root [data-phase='error'] { color: var(--bf-danger); font-size: 13px; font-weight: 600; }
/* The no-demand state fills the sheet; the sheet is already the surface,
   so the dashed first-run box does not apply here. */
.bf-sheet .bf-empty { padding: 64px 40px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bf-sheet .bf-empty h2 { margin: 0; font-family: var(--bf-serif); font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--bf-ink); }
.bf-sheet .bf-empty p { margin: 0; max-width: 560px; font-size: 15px; line-height: 1.55; color: var(--bf-slate); }
.bf-sheet .bf-empty .bf-btn { margin-top: 10px; }
@media (max-width: 1100px) {
  .bf-sheet-grid { grid-template-columns: minmax(0, 1fr); }
  .bf-sheet-list { position: static; max-height: 360px; overflow-y: auto; }
  .bf-sheet-panel { border-left: 0; border-top: 1px solid var(--bf-stone-2); }
}

/* A count sits on the label's baseline, not centered against it. */
.bf-filter, .bf-tab, .bf-case-tab, .bf-filter-tabs > button, [data-cases-filter] { align-items: baseline; }

.bf-btn-link-sm { min-height: 0; font-size: 13px; padding: 0; }

/* Empty feedback containers must not claim a section gap. */
#documents-feedback:not(:has(> *:not([class~="hidden"]):not(:empty))) { display: none; }
#documents-empty:empty { display: none; }

/* When the Bates row wraps (below ~1300 the Skip stamps checkbox drops to a
   second line), the lines keep a gap. */
.bf-band-controls { row-gap: 8px; }

/* Progress toast: a 2 px gold bar under the text. */
.bf-toast-bar { grid-column: 1 / -1; height: 2px; margin-top: 8px; background: rgba(255,255,255,.18); border-radius: 1px; overflow: hidden; }
.bf-toast-bar-fill { height: 100%; width: 0; background: var(--bf-gold); transition: width .25s ease; }

/* ------------------------------------------------------------------ *
 * I16 — starting a case from the demand. Two ways in at the top of the
 * case form, and a quiet mark on each field the notice filled: the
 * person has to be able to see, at a glance, which answers are theirs
 * and which are the machine's.
 * ------------------------------------------------------------------ */
.bf-drop-strip.bf-drop-over { border-color: var(--bf-gold); background: var(--bf-gold-soft); }
/* The strip is the one place the notice speaks: the invitation, the reading
   line, the result and the failure all render inside it, so the form never
   grows a second status area. */
.bf-notice-strip { position: relative; overflow: hidden; flex-direction: column; gap: 4px; padding: 8px 40px 8px 16px; text-align: center; }
/* The link beside the dialog's title did the asking, so its answer is a line,
   not an invitation: same strip, no dashes. */
.bf-notice-strip.bf-notice-quiet { min-height: 0; padding: 0; border: 0; background: transparent; text-align: left; align-items: flex-start; }
.bf-notice-strip.bf-notice-quiet .bf-notice-clear { position: static; transform: none; }
.bf-notice-face { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.bf-notice-name { font-size: 12px; color: var(--bf-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
/* Pinned to the strip's right edge so the line and the file name stay on one
   row at the dialog's width. */
.bf-notice-clear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 24px; height: 24px; flex: 0 0 auto; }
.bf-notice-strip.bf-notice-failed { border-color: #efc9c4; background: var(--bf-danger-soft); color: var(--bf-ink); }
/* 2 px of gold along the bottom edge while the notice is being read. It has
   no percentage to show — a made-up one would be worse than none — so it
   travels. */
.bf-notice-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bf-stone-2); }
.bf-notice-bar-fill { display: block; width: 40%; height: 100%; background: var(--bf-gold); animation: bf-notice-travel 1.1s ease-in-out infinite; }
@keyframes bf-notice-travel { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .bf-notice-bar-fill { width: 100%; animation: none; opacity: .6; }
}
/* The mark rides on the field's own label, so it reads as part of it. */
.bf-label .bf-tag { margin-left: 8px; text-transform: none; letter-spacing: 0; font-weight: 400; white-space: nowrap; }
.bf-tag-notice { background: var(--bf-gold-soft); color: var(--bf-gold-deep); }
.bf-tag-check { background: var(--bf-warning-soft); color: var(--bf-warning); }
/* The case dialog's body is a flex child of a card that already scrolls, and
   `.bf-modal-body`'s `min-height: 0` lets it shrink below its own content once
   the card hits its max height — at which point the fields spill out from
   under it and print over the footer. Latent until this form grew; on a
   1440x900 window it happens every time. The card is
   this dialog's scroller, so its body may not compress. Scoped: dialogs with a
   `.bf-modal-scroll` child rely on exactly the shrinking this turns off. */
#new-case-modal .bf-modal-body { flex: 0 0 auto; }
/* Two fields side by side whose labels wrap differently still line their
   inputs up: "Opposing Counsel Firm" plus its mark is two lines, "Client Role"
   is one. */
#new-case-modal .bf-field-row { align-items: end; }

/* Case dialog (Create / Edit): Cancel and Create Case stay in view while the
   form scrolls (owner, 2026-09-02). The card scrolls as a whole, so the foot
   sticks to the card's bottom edge, bleeding into the card's padding. */
#new-case-modal .bf-modal-card { padding-bottom: 0; }
#new-case-modal .bf-modal-foot { position: sticky; bottom: 0; z-index: 1; margin: 18px -28px 0; padding: 14px 28px 20px; background: var(--bf-surface); border-top: 1px solid var(--bf-stone); }
/* …and that full-bleed foot is why the dialog grew a horizontal scrollbar
   (owner, 2026-09-03: "there's a horizontal scroll bar for some reason").
   The card is the scroller (`overflow-y: auto`), and CSS promotes the other
   axis to `auto` as soon as one axis is not `visible` — so the foot's
   deliberate 2×28px bleed past the content box was enough to earn a real
   scrollbar. The bleed is wanted; the scrollbar is not. Nothing in this
   dialog is ever meant to scroll sideways. */
#new-case-modal .bf-modal-card { overflow-x: hidden; }

/* The notice area is one click target, not a link inside a box (owner,
   2026-09-03: "I should be able to click anywhere in that area to choose a
   file"). The whole idle face carries the handler, so "choose a file" is now
   only the affordance that says so — styled like the link it replaced, but
   not itself focusable, which keeps one interactive element in the region
   instead of a button nested inside a `role="button"`. */
.bf-notice-zone { cursor: pointer; }
.bf-notice-zone:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: 3px; border-radius: var(--bf-radius); }
.bf-notice-choose { color: var(--bf-gold-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bf-notice-zone:hover .bf-notice-choose { color: var(--bf-gold); }

/* Case dialog — the notice drop area is a real area, not a strip (owner, 2026-09-02):
   a document glyph, "Drop the notice here", gold on hover and while a file is over it. */
.bf-notice-strip.bf-notice-zone-open { min-height: 136px; padding: 18px 16px; border: 2px dashed var(--bf-stone); background: var(--bf-surface-2); justify-content: center; transition: border-color .15s ease, background-color .15s ease; }
.bf-notice-strip.bf-notice-zone-open:hover, .bf-notice-strip.bf-notice-zone-open.bf-drop-over { border-color: var(--bf-gold); background: var(--bf-gold-wash, #FBF4E2); }
.bf-notice-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bf-notice-glyph { color: var(--bf-slate); margin-bottom: 4px; }
.bf-notice-primary { font: 600 16px var(--bf-serif); color: var(--bf-ink); }
.bf-notice-secondary { font-size: 13px; color: var(--bf-slate); }

/* The same file/folder chooser in every browser and document surface. */
.bf-add-docs { position: relative; display: inline-flex; align-items: center; }
.bf-add-docs-quiet .bf-btn-link { min-height: 40px; }
.bf-add-docs > .bf-add-docs-menu { left: 0; right: auto; top: calc(100% + 8px); width: 280px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 6px; text-align: left; }
.bf-add-docs-right > .bf-add-docs-menu { left: auto; right: 0; }
.bf-add-docs-above > .bf-add-docs-menu { top: auto; bottom: calc(100% + 8px); }
.bf-add-docs-menu .bf-add-docs-opt { min-height: 64px; padding: 10px 12px; gap: 12px; color: var(--bf-ink); text-align: left; }
.bf-add-docs-opt svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--bf-slate); }
.bf-add-docs-title { display: block; font-size: 14px; font-weight: 600; }
.bf-add-docs-detail { display: block; margin-top: 2px; font-size: 12px; color: var(--bf-slate); font-weight: 400; }
.bf-add-docs-opt:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: -2px; background: var(--bf-gold-soft); }
/* The setup entrance animation creates stacking contexts. Lift the open
   chooser's section above its later siblings, including the review notice. */
.bf-setup-enter > :has(.bf-add-docs-main[aria-expanded='true']) { position: relative; z-index: 51; }

/* One Documents hint, under Add documents. Navy card, gold kicker, not a modal. */
.bf-hint {
  position: fixed; z-index: 70; box-sizing: border-box;
  width: min(340px, calc(100vw - 32px)); padding: 18px 20px 16px;
  border-radius: 14px; background: var(--bf-navy); color: #f6f3ec;
  box-shadow: 0 20px 48px rgba(14, 27, 44, .32), 0 0 0 1px rgba(184, 160, 106, .22);
}
.bf-hint[class~="hidden"] { display: none; }
.bf-hint-caret {
  position: absolute; top: -6px; width: 12px; height: 12px;
  background: var(--bf-navy); transform: rotate(45deg);
  box-shadow: -1px -1px 0 rgba(184, 160, 106, .22);
}
.bf-hint-kicker {
  margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bf-gold);
}
.bf-hint h2 {
  margin: 0 0 8px; font-family: var(--bf-serif); font-size: 22px; font-weight: 600;
  line-height: 1.15; color: #f6f3ec;
}
.bf-hint p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(246, 243, 236, .8); }
.bf-hint-acts { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.bf-hint-acts .bf-btn-primary {
  background: var(--bf-gold); color: var(--bf-navy); border-color: var(--bf-gold);
}
.bf-hint-acts .bf-btn-primary:hover { background: #c4ad78; }
.bf-hint-later {
  min-height: 34px; padding: 0; border: 0; background: transparent;
  color: rgba(246, 243, 236, .7); font-size: 13px; cursor: pointer;
}
.bf-hint-later:hover { color: #f6f3ec; }

[data-setup-upload-note].bf-setup-upload-same {
  color: var(--bf-ink); font-weight: 500;
}

/* The empty state's dashed area is the drop target a first-time user is
   looking at, so it lights while a drag is over the page. */
.bf-empty.bf-drop-over { border-color: var(--bf-gold); background: var(--bf-gold-soft); }

/* With the demand already on the case its first-run card is gone and nothing
   replaces it; the card that is left reads at a column width, centered. */
.bf-first-run-columns.bf-first-run-single { grid-template-columns: minmax(0, 520px); justify-content: center; }

/* The Documents hero's quiet door to the same load. */
.bf-demo-skip-line { margin-top: 10px; }

/* Reset the working example — a confirmation, not a menu: prose and two
   buttons in the header's popover mechanics. */
.bf-demo-reset-popover { width: 320px; padding: 16px 18px; }
.bf-demo-reset-copy { margin: 0; font-size: 14px; line-height: 1.5; color: var(--bf-ink); }
.bf-demo-reset-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.bf-demo-reset-actions .bf-btn { min-height: 32px; }

/* ─── Documents filter bar (2026-09-03) ──────────────────────────────────
   Seven filters in four clusters — the reset · the states a person watches
   · the shapes a file can take · the one recency scope — divided by a short
   hairline and nothing else. Scoped to `.bf-filter-bar`: `.bf-filter` is
   also the Respond sheet's request filter, which keeps its underline.
   The selected filter is a white key on the ivory ground with a stone
   hairline — the design system's own "surface" signal, the same one inputs
   and tables use — instead of a 2 px underline the eye had to hunt for.
   A filter with nothing behind it goes quiet (slate, regular weight) and
   carries no numeral; a filter with something behind it is ink and carries
   its count. Zero is never printed. */
/* The bar takes exactly the room its seven keys need and the search box has
   the rest; when the toolbar cannot seat both, the whole bar drops under the
   search on a line of its own rather than breaking a cluster mid-row. */
.bf-filter-tabs.bf-filter-bar { flex: 0 0 auto; max-width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; min-height: 40px; border-bottom: 0; }
.bf-filter-group { display: inline-flex; align-items: center; gap: 2px; position: relative; }
.bf-filter-group + .bf-filter-group { margin-left: 12px; padding-left: 12px; }
.bf-filter-group + .bf-filter-group::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 18px; transform: translateY(-50%); background: var(--bf-stone); }
.bf-filter-bar .bf-filter { min-height: 36px; margin: 0; padding: 0 10px; border: 1px solid transparent; border-radius: var(--bf-radius); background: transparent; color: var(--bf-ink); font: 500 14px var(--bf-sans); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.bf-filter-bar .bf-filter:hover { background: var(--bf-stone-2); }
.bf-filter-bar .bf-filter.bf-filter-empty { color: var(--bf-slate); font-weight: 400; }
.bf-filter-bar .bf-filter.bf-active,
.bf-filter-bar .bf-filter.bf-active:hover { background: var(--bf-surface); border-color: var(--bf-stone); color: var(--bf-ink); font-weight: 600; }
.bf-filter-bar .bf-filter:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-filter-bar .bf-filter .bf-cnt { margin: 0; min-width: 0; height: auto; padding: 0; font-size: 13px; font-weight: 500; color: var(--bf-slate); }
.bf-filter-bar .bf-filter.bf-active .bf-cnt { color: var(--bf-ink); }
/* The dot sits inside the label's own box, centred on the word's line, so
   it is level with the lowercase at every zoom — no offset, no nudge. */
.bf-filter-label { display: inline-flex; align-items: center; gap: 7px; line-height: 1.2; }
.bf-filter-bar .bf-hold-dot { width: 7px; height: 7px; align-self: auto; }
/* Less motion: the finished line still leaves, without the fade; the waiting
   segment stands still at half strength. The bar's easing is the script's,
   and it snaps for the same preference. */
@media (prefers-reduced-motion: reduce) {
  .bf-case-head .bf-live { transition: none; }
  .bf-live-bar.bf-live-bar-waiting::after { animation: none; width: 100%; opacity: .5; }
}

/* ─── Case setup (CS2 · the ux-case-setup spec, §4–§6) ───────────────────
   One job per screen: a step strip, a title, a lede, the work, a footer.
   The reading width is 860 (§9.5) because every one of these screens is a
   sentence and a control, not a table. No cards: the sections are separated
   by space and one hairline, the way §1 asks. */
/* Case work shares the outer workspace width; prose and fields keep their own readable limits. */
.bf-setup { margin: 0 auto; width: 100%; min-width: 0; display: block; }
.bf-document-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.bf-document-toolbar .bf-document-views { margin: 0; }
.bf-document-toolbar [data-ledger-add] { margin-left: auto; }
.bf-document-toolbar [data-setup-door-status] { margin-left: auto; }
.bf-document-toolbar [data-setup-door-status] + [data-ledger-add] { margin-left: 0; }
.bf-document-toolbar + .bf-ledger-page-head { margin-top: 12px; }
.bf-document-toolbar:not(:has([data-ledger-add])):has(.bf-document-views[hidden]) { display: none; }
.bf-document-views { display: flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; margin-bottom: 24px; padding: 4px; border: 1px solid var(--bf-stone); border-radius: 8px; background: var(--bf-stone-2); }
.bf-document-views[hidden] { display: none; }
.bf-document-view { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 16px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--bf-slate); font: 600 14px var(--bf-sans); cursor: pointer; transform-origin: center; transition: padding .48s cubic-bezier(.18, 1.4, .28, 1), background .2s, color .2s, border-color .2s, box-shadow .2s; }
.bf-document-view:hover { color: var(--bf-ink); }
.bf-document-view[aria-current='page'], .bf-document-view[aria-pressed='true'] { background: var(--bf-surface); color: var(--bf-ink); border-color: var(--bf-stone); box-shadow: 0 1px 2px rgba(14, 27, 44, .06); padding-left: 22px; padding-right: 22px; }
.bf-document-view:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-document-view-count { padding: 1px 6px; border-radius: 999px; background: var(--bf-gold-soft); color: var(--bf-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.bf-setup .bf-document-views + h1 { margin-top: 0; }
.bf-setup [data-mapping-head] .bf-document-views { margin-bottom: 24px; }
.bf-setup [data-mapping-head] h1 { margin-top: 0; }
/* Gap starts at Mapping's top: the same 0 title margin. Round 5 (Michael,
   2 Oct): one header from first paint to the loaded report — the step's
   heading and lede stay on the inputs page, while the report opens and on
   the report; nothing hides them or takes their place. */
#setup-content[data-setup-step="gap"] > h1 { margin-top: 0; }
/* r3: "the steps should fade in on the next page, not look jarring." The
   screen being left drops 6 px and goes; the one arriving comes up under it,
   h1 first and the footer last, so the eye lands on the heading and reads
   down. Neither happens for a reader who asked for less motion. */
.bf-setup-leaving { opacity: 0; transform: translateY(6px); transition: opacity 180ms ease-in, transform 180ms ease-in; }
.bf-setup-enter > h1,
.bf-setup-enter > .bf-setup-lede,
.bf-setup-enter > .bf-setup-work,
.bf-setup-enter > .bf-setup-foot { animation: bf-setup-rise 380ms cubic-bezier(.2, .7, .2, 1) both; }
.bf-setup-enter > .bf-setup-lede { animation-delay: 60ms; }
.bf-setup-enter > .bf-setup-work { animation-delay: 120ms; }
.bf-setup-enter > .bf-setup-foot { animation-delay: 200ms; }
@keyframes bf-setup-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bf-setup-leaving { transition: none; opacity: 1; transform: none; }
  .bf-setup-enter > h1,
  .bf-setup-enter > .bf-setup-lede,
  .bf-setup-enter > .bf-setup-work,
  .bf-setup-enter > .bf-setup-foot { animation: none; }
  .bf-setup-type-new { animation: none; }
  .bf-setup-type-pending { display: flex; }
}
.bf-setup-head { margin: 0; }
.bf-setup h1 { font-family: var(--bf-serif); font-size: 34px; line-height: 1.1; font-weight: 600; color: var(--bf-ink); margin: 32px 0 0; }
.bf-setup-lede { font-size: 15px; line-height: 1.55; color: var(--bf-slate); max-width: 640px; margin: 8px 0 28px; }
.bf-setup-work { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
/* A button in the work area takes its own width. Stretched across the whole
   860 px column, "Sort 51 documents" read as a banner, not as a control. */
.bf-setup-work > .bf-btn { align-self: flex-start; }
/* S8: Mapping's live bar sits under the running sentence and is measured
   against it, not against the whole 860 px column — a 2 px rule that wide
   reads as a border under the paragraph rather than as progress. The work
   area's own 20 px gap already spaces it, so the bar's own top margin goes. */
.bf-setup-work > .bf-live-progress { align-self: flex-start; width: min(420px, 100%); margin-top: 0; }
/* S10: what the job has already placed, under that bar. The sets are the By
   set screen's own, drawn by its own builders with every control stripped, so
   they need no rules of their own beyond a head that no longer toggles and a
   pane column this narrow surface does not have. The sentence above them is
   the only thing that says they are not hers to act on yet, so it keeps the
   ink of ordinary meta text rather than fading with the rows. */
.bf-setup-preview { align-self: stretch; min-width: 0; }
.bf-setup-preview > [data-setup-match-preview-words] { margin: 0 0 4px; }
.bf-ms-live { margin-top: 0; }
.bf-ms-live .bf-ms-open { cursor: default; }
.bf-setup-foot { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding: 24px 0 0; border-top: 1px solid var(--bf-stone); }
/* Anything scrolled into view (focus, scrollIntoView, find) stops above the sticky footer. */
html:has(.page-section.active .bf-page-foot) { scroll-padding-bottom: var(--bf-page-foot-h); }
.bf-page-foot { position: sticky; bottom: 0; z-index: 30; background: var(--bf-ground); border-top: 1px solid var(--bf-stone); padding: 14px 0; margin-top: 32px; display: flex; align-items: center; gap: 12px; }
.bf-page-foot .bf-btn { min-height: 36px; height: 36px; }
.bf-setup-foot .bf-btn { min-height: 36px; }
.bf-setup-foot-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* The strip sits where the tabs sit on every other case page, so the header
   is the same height in setup as out of it. */
.bf-setup-strip { min-height: 44px; display: flex; align-items: center; margin-top: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--bf-stone); }
.bf-setup-strip .bf-stage-rail { flex: 1 1 auto; padding: 0; }
/* The setup rail's dot, ring, tick, track and fill are defined together in the r7 block below
   (search "The dot is one box"). Until 2026-09-05 a 14 px definition sat here under the 18 px one,
   and its higher-specificity `later` rule won: grey dots wore a 1 px ring and a 4 px halo while
   navy ones wore 1.5 px and 5 px. One definition, one geometry. */
/* Five names do not fit on one line on a narrow window, so the strip says the
   same sentence the screen reader already hears. */
.bf-stage-line { display: none; margin: 0; font-size: 13px; color: var(--bf-slate); }
@media (max-width: 900px) {
  .bf-stage-line { display: block; }
  .bf-stage-rail .bf-stage-list { display: none; }
}

.bf-setup-status { padding: 12px 0 0; }
.bf-setup-total { font-size: 15px; font-weight: 600; color: var(--bf-ink); }
.bf-setup-receipts { display: flex; flex-direction: column; gap: 8px; }
/* The Mapping step's "the last check stopped" notice: one amber-dot sentence and the button that
   finishes the check, above the cards the interrupted run left behind (§20.5). */
.bf-setup-interrupted { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 20px; }
.bf-setup-interrupted .bf-status { white-space: normal; }
.bf-setup-interrupted .bf-status.bf-warning::before { background: var(--bf-warning); }
.bf-setup-reveal { align-self: flex-start; }

/* §23: Demands and Documents share one door. Empty doors use the same
   marked head and centred body; solid doors keep their existing receipts. */
.bf-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.bf-door { position: relative; display: flex; flex-direction: column; min-width: 0; box-sizing: border-box; border-radius: 8px; }
.bf-door-empty { background: transparent; border: 1.5px dashed var(--bf-stone); padding: 24px; transition: border-color 140ms ease-out, background-color 140ms ease-out; }
.bf-door.bf-drop-over { border-color: var(--bf-gold); background: var(--bf-gold-soft); }
.bf-door-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.bf-door-demand .bf-door-head { display: block; }
.bf-door-heading { min-width: 0; color: var(--bf-slate); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.bf-door-demand .bf-door-heading { color: var(--bf-ink); font-family: var(--bf-serif); font-size: 26px; font-weight: 600; letter-spacing: 0; line-height: 1.1; text-transform: none; }
.bf-door-note { margin: 5px 0 0; color: var(--bf-slate); font-size: 14px; line-height: 1.4; }
.bf-door-tag { color: var(--bf-gold-deep); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
/* Top-aligned, not centred: two doors with different demo blocks put their motifs at different heights
   when centred (preview, 2026-09-04), and the pair must read as twins. */
.bf-door-empty > .bf-door-body { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 8px; min-width: 0; margin: 0 0 auto; padding: 34px 0 22px; text-align: center; }
.bf-door-motif { position: relative; flex: 0 0 auto; width: 82px; height: 64px; margin-bottom: 4px; }
.bf-door-motif-page { position: absolute; top: 2px; left: 18px; display: block; width: 46px; height: 60px; box-sizing: border-box; border: 1.5px dashed var(--bf-stone); border-radius: 3px; background: transparent; }
.bf-door-motif-documents .bf-door-motif-page:nth-child(1) { left: 4px; transform: rotate(-8deg); }
.bf-door-motif-documents .bf-door-motif-page:nth-child(2) { left: 18px; }
.bf-door-motif-documents .bf-door-motif-page:nth-child(3) { left: 32px; transform: rotate(8deg); }
.bf-door-motif-notice { width: 40px; height: 52px; }
.bf-door-motif-notice svg { display: block; width: 100%; height: 100%; stroke: var(--bf-stone); stroke-width: 1.5; stroke-linejoin: round; }
.bf-door-prompt { margin: 7px 0 0; color: var(--bf-ink); font-family: var(--bf-serif); font-size: 22px; font-weight: 500; line-height: 1.2; }
.bf-door-action-sep { color: var(--bf-stone); }
/* The shared folder button sits centred under the prompt. */
.bf-door-action .bf-add-docs { display: inline-flex; margin-top: 4px; }
.bf-door-action { margin: 0; color: var(--bf-slate); font-size: 13.5px; line-height: 1.5; }
.bf-door-action:empty { display: none; }
.bf-door-action .bf-btn-link { min-height: 0; padding: 0; font-size: inherit; vertical-align: baseline; }
.bf-door-caption { margin: 8px 0 0; color: var(--bf-slate); font-size: 12.5px; line-height: 1.45; }
.bf-door-caption-destination { color: var(--bf-gold-deep); font-weight: 500; }
.bf-door-caption .bf-door-tag { font-size: inherit; }
.bf-door-demo { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--bf-stone-2); color: var(--bf-slate); font-size: 13px; }
.bf-door-demo small { color: var(--bf-gold-deep); font-size: 12.5px; font-weight: 500; }
.bf-door-demo .bf-btn-link { min-height: 24px; padding: 0; font-size: 13px; }
.bf-door-fading { opacity: 0; transition: opacity 180ms ease-in; }
.bf-door-empty > .bf-setup-status:not([class~='hidden']) { margin: auto 0; }
.bf-door-filled { padding: 20px 24px 16px; background: #fffdf9; border: 1px solid var(--bf-stone-2); transition: border-color 140ms ease-out, background-color 140ms ease-out; }
.bf-setup-document-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; }
.bf-setup-document-eyebrow { color: var(--bf-slate); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.bf-setup-document-status { display: inline-flex; align-items: center; gap: 6px; color: var(--bf-success); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.bf-setup-document-status::before, .bf-setup-document-live-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; background: var(--bf-success); }
.bf-setup-document-status::before { content: ''; }
.bf-setup-document-status.bf-live { color: var(--bf-gold-deep); }
.bf-setup-document-status.bf-live::before { display: none; }
.bf-setup-document-live-dot { background: var(--bf-gold); animation: bf-setup-document-pulse 1.6s ease-in-out infinite; }
@keyframes bf-setup-document-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.bf-setup-document-demo-or { color: var(--bf-slate); font-size: 13px; }
.bf-setup-document-demo-or .bf-btn-link { min-height: 24px; padding: 0; font-size: 13px; }
.bf-setup-document-demo-prefix { color: var(--bf-slate); font-weight: 400; }

/* The first five real first pages form one decorative object. The count below
   is the accessible version; failed images keep their paper/skeleton instead
   of surfacing a broken-image glyph. */
.bf-setup-document-fan-row { display: flex; align-items: center; gap: 4px; min-height: 132px; margin: 16px 0 14px; overflow: hidden; }
/* 258 px: the doors are equal halves now (§23), so a door's inner width is ~250 px at 1440 — the 294 px fan
   pushed the chip off the card (preview, 2026-09-04). The count line says 103; the chip was a repeat.
   The pages start 6 px in: a tile rotated 6° reaches 5.6 px past its own box, and the row clips at 0
   (Michael, 2026-09-05: "the one on the left is getting cut off"). §28.6. */
.bf-setup-document-fan { position: relative; flex: 0 0 258px; width: 258px; height: 132px; }
.bf-setup-document-more { display: none; }
.bf-setup-document-page { position: absolute; top: 8px; display: block; width: 86px; height: 112px; overflow: hidden; box-sizing: border-box; background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: 3px; box-shadow: 0 2px 6px rgba(28,36,48,.12); }
.bf-setup-document-page:nth-child(1) { left: 6px; transform: rotate(-6deg); }
.bf-setup-document-page:nth-child(2) { left: 46px; transform: rotate(-3deg); }
.bf-setup-document-page:nth-child(3) { left: 86px; }
.bf-setup-document-page:nth-child(4) { left: 126px; transform: rotate(3deg); }
.bf-setup-document-page:nth-child(5) { left: 166px; transform: rotate(6deg); }
.bf-setup-document-page::before { content: ''; position: absolute; z-index: 1; left: 14%; right: 14%; top: 10%; height: 4px; border-radius: 2px; background: var(--bf-stone); box-shadow: 0 16px 0 -1px var(--bf-stone-2), 0 27px 0 -1px var(--bf-stone-2), 0 38px 0 -1px var(--bf-stone-2), 0 49px 0 -1px var(--bf-stone-2), 0 60px 0 -1px var(--bf-stone-2), 0 71px 0 -1px var(--bf-stone-2); animation: bf-skeleton 1.4s ease-in-out infinite; }
.bf-setup-document-page:has(.bf-loaded)::before { display: none; }
.bf-setup-document-thumb-unready-line { display: none; position: absolute; z-index: 2; left: 6px; right: 6px; top: 50%; color: var(--bf-slate); font-size: 10px; line-height: 1.2; text-align: center; transform: translateY(-50%); }
.bf-setup-document-thumb-unready::before { display: none; }
.bf-setup-document-thumb-unready .bf-setup-document-thumb-unready-line { display: block; }
.bf-setup-document-more { flex: 0 0 auto; padding: 4px 10px; color: var(--bf-gold-deep); background: var(--bf-gold-soft); border: 1px solid #e2d8bd; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
/* The tally: a batch counted in pictures (`bfPageTally`). One small page per
   unit, dashed until it has landed, solid with faint lines once it has, the
   one in flight in gold and breathing with the live dot. Not a bar (§15.3).
   The Documents door draws it while an upload runs, in place of a fan built
   from one loaded row (Michael, 2026-09-05: "one thumbnail for ages"); the
   Sorting step draws the same tally while the sort runs. */
.bf-page-tally { display: grid; grid-template-columns: repeat(var(--bf-tally-cols, 10), minmax(0, 26px)); gap: 7px; }
.bf-page-tally-page { position: relative; display: block; box-sizing: border-box; aspect-ratio: 26 / 34; border: 1.5px dashed var(--bf-stone); border-radius: 3px; background: transparent; }
.bf-page-tally-page.bf-landed { border-style: solid; background: var(--bf-surface); box-shadow: 0 1px 2px rgba(28, 36, 48, .08); }
.bf-page-tally-page.bf-landed::before { content: ''; position: absolute; left: 5px; right: 5px; top: 7px; height: 2px; border-radius: 1px; background: var(--bf-stone); box-shadow: 0 6px 0 var(--bf-stone-2), 0 12px 0 var(--bf-stone-2), 0 18px 0 var(--bf-stone-2); }
/* Above the cap a page stands for several documents; the one at the boundary
   fills from the bottom by the share it has so far (`--bf-part`, 0–1). */
.bf-page-tally-page.bf-part { border-style: solid; background: linear-gradient(to top, var(--bf-surface) calc(var(--bf-part, 0) * 100%), transparent 0); }
.bf-page-tally-page.bf-landing { border-color: var(--bf-gold); animation: bf-setup-document-pulse 1.6s ease-in-out infinite; }
.bf-setup-upload-tally { min-height: 36px; margin: 20px 0 18px; }
.bf-setup-document-summary { display: flex; align-items: baseline; flex-wrap: wrap; margin: 0 0 8px; color: var(--bf-ink); }
.bf-setup-document-count { font-family: var(--bf-serif); font-size: 36px; font-weight: 500; line-height: 1; }
.bf-setup-document-summary-details { margin-left: 10px; color: var(--bf-slate); font-family: var(--bf-sans); font-size: 14px; font-weight: 400; }
.bf-setup-document-source { margin: 0; color: var(--bf-slate); font-size: 13.5px; line-height: 1.6; }
.bf-setup-document-types, .bf-setup-document-soon { margin: 10px 0 0; color: var(--bf-slate); font-size: 13px; line-height: 1.75; }
.bf-setup-document-types b { color: var(--bf-ink); font-weight: 500; }
.bf-setup-document-types .bf-btn-link { min-height: 24px; padding: 0; font-size: 13px; }
.bf-setup-document-separator { margin: 0 5px; color: var(--bf-stone); }
.bf-setup-document-soon { color: #9aa3ad; font-style: italic; }
.bf-setup-document-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bf-stone-2); }
.bf-setup-document-skip { flex: 0 0 100%; margin: 0; color: var(--bf-slate); font-size: 12.5px; line-height: 1.5; }
.bf-setup-document-foot .bf-btn-link { min-height: 26px; padding: 0; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) {
  .bf-door-empty, .bf-door-filled, .bf-door-fading { transition: none; }
  .bf-setup-document-live-dot, .bf-setup-document-page::before, .bf-page-tally-page.bf-landing { animation: none; }
}

/* ── §16 The doors ────────────────────────────────────────────────────
   Two equal panels, one per demand, on one level with the receipt line and
   the band above them. Nothing nests: a door is a panel, and the band is a
   panel, and neither is inside the other. */
@media (max-width: 900px) { .bf-doors { grid-template-columns: minmax(0, 1fr); } }
.bf-door-read { gap: 12px; padding: 24px 28px 20px; background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); }
.bf-door-label { font-family: var(--bf-serif); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--bf-ink); }
.bf-door-read .bf-door-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* The foot line sits on the floor of the door however tall its body is, so
   the two "Leads to…" lines are level across both panels. */
.bf-door-leads { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--bf-slate); }
.bf-door-leads b { color: var(--bf-ink); font-weight: 600; }
.bf-door-arrow { flex: 0 0 auto; }

/* The read door: the document it was read from, the numeral, the first four.
   The document is a tile — the page glyph, what it is, its kind and pages —
   with View as a quiet link and Replace as the one visible control. Not a
   tick and a filename (Michael, 2026-09-05): the solid door and the numeral
   are already the receipt, and the filename is the tile's hover title. */
.bf-doc-tile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; background: var(--bf-surface-2); border: 1px solid var(--bf-stone-2); border-radius: var(--bf-radius); }
.bf-doc-glyph { flex: 0 0 auto; width: 30px; height: 38px; color: var(--bf-slate); }
.bf-doc-tile-text { flex: 1 1 auto; min-width: 0; }
.bf-doc-tile-name { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--bf-ink); }
.bf-doc-tile-meta { margin-top: 2px; font-size: 12.5px; color: var(--bf-slate); white-space: nowrap; }
.bf-doc-tile-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
/* The same tile while the demand is being read (`_buildOcrProgress`): 2 px of
   gold under the name, the vocabulary the notice strip reads with
   (`.bf-notice-bar`). There the read has no percentage and the line travels;
   here the OCR poll reports the page, so it fills — and travels only until
   the worker has counted the pages. */
.bf-read-bar { position: relative; overflow: hidden; height: 2px; margin: 8px 0 6px; border-radius: 999px; background: var(--bf-stone-2); }
.bf-read-bar-fill { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--bf-gold); transition: width 300ms ease; }
.bf-read-bar-waiting .bf-read-bar-fill { width: 40%; animation: bf-notice-travel 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .bf-read-bar-fill { transition: none; }
  .bf-read-bar-waiting .bf-read-bar-fill { width: 100%; animation: none; opacity: .6; }
}
.bf-doc-replace { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px 0 8px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface); font: 600 13px var(--bf-sans); color: var(--bf-ink); cursor: pointer; }
.bf-doc-replace:hover { background: var(--bf-surface-2); border-color: #c9c5bc; }
.bf-doc-replace svg { color: var(--bf-slate); }
.bf-doc-replace[aria-disabled='true'], .bf-doc-replace.bf-disabled { opacity: .45; cursor: default; }
.bf-door-count { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.bf-door-count-n { font-family: var(--bf-serif); font-size: 40px; font-weight: 600; line-height: 1; color: var(--bf-ink); font-variant-numeric: lining-nums tabular-nums; }
.bf-door-count-w { font-size: 14px; color: var(--bf-slate); }
.bf-door-reqs { display: flex; flex-direction: column; border-top: 1px solid var(--bf-stone-2); }
.bf-door-req { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--bf-stone-2); font-size: 13px; color: var(--bf-ink); }
.bf-door-req-no { font-family: var(--bf-serif); font-size: 17px; font-weight: 600; color: var(--bf-ink); }
.bf-door-req-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Opened in place, every request reads in full. */
.bf-door-reqs-all .bf-door-req-text { white-space: normal; overflow: visible; line-height: 1.45; padding: 4px 0; }
.bf-door-more { padding-top: 8px; font-size: 13px; }

/* §16.1 / §27 The receipt line and the band: the four facts at a glance,
   then every case-dialog detail on demand. */
.bf-setup-bandline { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--bf-slate); }
.bf-setup-band-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; background: var(--bf-success); display: inline-block; }
.bf-setup-bandline-actions { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; white-space: nowrap; }
/* Court gets a share next to Parties; the two short numbers take less. Until
   2026-09-05 Court sat in the same track as the index number and read
   "Supreme Court of the S…" (Michael's screenshot). */
.bf-setup-band { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .9fr); margin: 0; background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); }
.bf-setup-band-cell { min-width: 0; padding: 14px 18px 16px; border-left: 1px solid var(--bf-stone-2); }
.bf-setup-band-cell:first-child { border-left: 0; }
.bf-setup-band-key { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-slate); font-weight: 500; }
/* A value wraps; nothing is clipped. Every cell used to hold its value on one
   line with nowrap · hidden · ellipsis, so a firm name or a court was cut
   wherever the column was narrower than the words ("LAW OFFICES OF Pe…",
   "Martin E. Castellano,"). A value that is too long for its cell is a
   longer cell, never a shorter value. */
.bf-setup-band-value { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; font-size: 14px; line-height: 1.4; color: var(--bf-ink); white-space: normal; overflow-wrap: anywhere; }
.bf-setup-band-value .bf-mono { font-family: var(--bf-mono); font-size: 13px; color: var(--bf-gold-deep); }
.bf-setup-band-empty { color: var(--bf-slate); }
/* A value the notice was read for and read unsurely. The dot is the whole of
   the claim: it says "look at this", never "this is wrong". */
.bf-setup-band-warn { flex: 0 0 auto; align-self: center; width: 7px; height: 7px; border-radius: 999px; background: var(--bf-warning); display: inline-block; }
/* The ten details in three groups — the parties, the counsel, the response —
   with room between them instead of ten hairline boxes in five equal
   columns 136 px wide. No dividers: the row above has four tracks and the
   details have three, and two sets of hairlines that do not meet read as a
   mistake. */
.bf-setup-band-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; padding: 18px 18px 20px; border-top: 1px solid var(--bf-stone-2); }
.bf-setup-band-group { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.bf-setup-band-detail-cell { min-width: 0; }
.bf-setup-band-detail-cell .bf-setup-band-key { font-size: 11px; }
.bf-setup-band-detail-cell .bf-setup-band-value { margin-top: 3px; }
@media (max-width: 900px) {
  .bf-setup-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-setup-band-cell:nth-child(3) { border-left: 0; }
  .bf-setup-band-cell:nth-child(n + 3) { border-top: 1px solid var(--bf-stone-2); }
  .bf-setup-band-details { grid-template-columns: minmax(0, 1fr); row-gap: 15px; }
}

/* A1 (§16): the case shell in setup mode with no case to name. Italic slate,
   because the name is what the notice is about to supply. */
.bf-case-head .bf-newcase-name { margin: 0; font-family: var(--bf-serif); font-size: 36px; font-weight: 500; font-style: italic; line-height: 1.05; color: var(--bf-slate); }
.bf-case-head .bf-newcase-sub { margin-top: 8px; font-size: 15px; color: var(--bf-slate); }

/* Sorting and Match share one bar: full width, 6 px, gold on stone. */
/* §15.3: no bar in a work area. The server's sentence, on its own. */
.bf-setup-live { margin: 0; font-size: 14px; color: var(--bf-slate); }
/* §19 Sorting, live — the frame (`_setupSortingFrame`). One surface, built
   once and moved in place: the case-wide count with the live dot, the tally
   of pages, and two slots that change only when the document they name
   changes. No 112 px thumbnail that reloads on every poll, no scan line
   that restarts (Michael, 2026-09-05: "flickers at random intervals") —
   the page in hand breathes gold, as on the Documents door's tally. */
.bf-sorting { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 20px; background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); transition: opacity 180ms ease-in; }
.bf-sorting-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bf-sorting-count { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--bf-ink); font-variant-numeric: tabular-nums; }
.bf-sorting-count .bf-setup-document-live-dot { width: 7px; height: 7px; }
.bf-sorting-rest { font-size: 13px; color: var(--bf-slate); font-variant-numeric: tabular-nums; }
/* Twenty-five to a row across the full column; the door's tally keeps its
   26 px pages because its column is a third as wide. */
.bf-sorting-tally.bf-page-tally { grid-template-columns: repeat(var(--bf-tally-cols, 25), minmax(0, 1fr)); gap: 6px; }
.bf-sorting-now { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-top: 16px; border-top: 1px solid var(--bf-stone-2); }
.bf-sorting-slot { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; min-width: 0; }
.bf-sorting-slot-k { grid-column: 1 / -1; margin-bottom: 8px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-slate); }
/* The small page: skeleton lines until its image lands, the image after; a
   page that is not coming, or a slot with nothing to name, keeps still lines. */
.bf-sorting-page { position: relative; display: block; width: 40px; aspect-ratio: 8.5 / 11; overflow: hidden; background: var(--bf-surface-2); border: 1px solid var(--bf-stone); border-radius: 3px; cursor: pointer; }
.bf-sorting-page:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-sorting-page::before { content: ''; position: absolute; z-index: 1; left: 6px; right: 6px; top: 8px; height: 2px; border-radius: 1px; background: var(--bf-stone); box-shadow: 0 7px 0 var(--bf-stone-2), 0 14px 0 var(--bf-stone-2), 0 21px 0 var(--bf-stone-2), 0 28px 0 var(--bf-stone-2); animation: bf-skeleton 1.4s ease-in-out infinite; }
.bf-sorting-page:has(.bf-loaded)::before { display: none; }
.bf-sorting-page-unready::before, .bf-sorting-slot-empty .bf-sorting-page::before { animation: none; }
.bf-sorting-slot-empty .bf-sorting-page { cursor: default; }
[data-setup-sorting-slot='now'] .bf-sorting-page { border-color: var(--bf-gold); }
.bf-sorting-slot-empty[data-setup-sorting-slot='now'] .bf-sorting-page { border-color: var(--bf-stone); }
.bf-sorting-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 180ms ease-out; }
.bf-sorting-img.bf-loaded { opacity: 1; }
.bf-sorting-slot-text { display: flex; flex-direction: column; min-width: 0; }
.bf-sorting-name { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--bf-ink); overflow-wrap: anywhere; }
.bf-sorting-origin { font-size: 12px; color: var(--bf-slate); }
.bf-sorting-meta { margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--bf-slate); }
.bf-sorting-origin:empty, .bf-sorting-meta:empty { display: none; }
.bf-sorting-meta .bf-cat { font-size: 13px; color: var(--bf-ink); white-space: normal; }
/* The done screen's `defer` fades the frame out before the ledger takes its place. */
.bf-reading-collapse { opacity: 0; }
.bf-setup-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.bf-setup-type { display: flex; align-items: center; gap: 12px; min-height: 40px; border-bottom: 1px solid var(--bf-stone-2); }
.bf-setup-type .bf-cat { font-size: 14px; color: var(--bf-ink); }
.bf-setup-type-meta { color: var(--bf-slate); font-size: 12px; }
.bf-setup-type-count { margin-left: auto; font-size: 13px; color: var(--bf-slate); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .bf-setup-types { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .bf-sorting-now { grid-template-columns: minmax(0, 1fr); } .bf-sorting-tally.bf-page-tally { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bf-sorting, .bf-sorting-img { transition: none; } .bf-sorting-page::before { animation: none; } }
/* One §5 Facts pair. `display: contents` so the label and the value are the
   grid's own children — wrapped in a box of their own they collapsed into
   "Placements proposed46" (caught in the browser, first check). */
.bf-setup-fact { display: contents; }
.bf-setup-flag { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bf-setup-flag .bf-status { white-space: normal; }
/* §15.6: a type's first appearance rises into place; a count that changes
   ticks (in JS) rather than jumping. */
.bf-setup-type-new { animation: bf-setup-type-in 240ms ease-out both; }
/* r3: a row waiting its turn in the stagger has not arrived yet — it is not
   drawn at all. Held at `opacity: 0` it kept its place in the two-column
   grid, and a batch mid-stagger read as holes punched in the list rather
   than as documents coming in. */
.bf-setup-type-pending { display: none; }
@keyframes bf-setup-type-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ─── §18 Sorting, done — the ledger ──────────────────────────────────────
   Not a table and not cards: one hairline under each type, the rows under
   their head, and nothing boxed. The workspace can be 1800 px wide; keep the
   list and its controls together at the workspace's existing left gutter. */
.bf-ledger-column { box-sizing: border-box; width: 100%; max-width: min(var(--bf-workspace-max), 860px); align-self: flex-start; }
.bf-ledger-filters { margin-block: 12px 6px; }
.bf-ledger-filters .bf-filter[hidden] { display: none; }
.bf-ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bf-ledger-tools { display: flex; align-items: center; gap: 12px; font-size: 13px; flex-wrap: wrap; justify-content: flex-end; }
.bf-ledger-tools .bf-btn-link { font-size: 13px; font-weight: 600; }
.bf-ledger-sort { display: inline-flex; align-items: center; gap: 8px; }
.bf-ledger-sort .bf-btn-link { color: var(--bf-slate); font-weight: 500; }
.bf-ledger-sort .bf-btn-link[aria-pressed="true"] { color: var(--bf-ink); font-weight: 600; }
.bf-ledger-type-count { color: var(--bf-slate); font-variant-numeric: tabular-nums; }
.bf-ledger-find-wrap { position: relative; margin: 0 0 18px; }
.bf-ledger-find-bar { display: flex; align-items: stretch; border: 1px solid var(--bf-stone); border-radius: 10px; background: var(--bf-surface); overflow: hidden; }
.bf-ledger-find-bar:has(.bf-ledger-find[aria-expanded="true"]) { border-color: var(--bf-ink); }
.bf-ledger-find { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; min-height: 46px; padding: 0 16px; border: 0; background: transparent; color: var(--bf-slate); font: 400 15px var(--bf-sans); text-align: left; cursor: pointer; }
.bf-ledger-find[aria-expanded="true"] { color: var(--bf-ink); }
.bf-ledger-find-reset { flex: 0 0 auto; padding: 0 16px; border: 0; border-left: 1px solid var(--bf-stone); background: transparent; color: var(--bf-gold-deep); font: 600 14px var(--bf-sans); cursor: pointer; }
.bf-ledger-find-reset:hover { background: var(--bf-gold-soft); }
.bf-ledger-find-reset[hidden] { display: none; }
.bf-ledger-menu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px); display: flex; flex-direction: column; gap: 20px; max-height: min(70vh, 560px); overflow: auto; padding: 18px; border: 1px solid var(--bf-stone); border-radius: 12px; background: var(--bf-surface); box-shadow: var(--bf-shadow-pop); }
.bf-ledger-menu[hidden] { display: none; }
.bf-ledger-menu .bf-ledger-search { margin: 0; }
.bf-ledger-menu .bf-ledger-search > .bf-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bf-ledger-menu .bf-ledger-search-controls { display: block; }
.bf-ledger-menu .bf-ledger-search-controls .bf-search { width: 100%; max-width: none; min-height: 44px; }
.bf-ledger-menu .bf-ledger-search-controls .bf-btn-link { display: none; }
.bf-ledger-menu .bf-ledger-search-status { margin: 8px 0 0; min-height: 0; }
.bf-ledger-menu .bf-ledger-search-status:empty { display: none; }
.bf-ledger-menu-kicker { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bf-slate); }
.bf-ledger-menu-choices { position: relative; display: flex; gap: 8px; }
.bf-ledger-sort-hi { position: absolute; z-index: 0; border-radius: 8px; background: var(--bf-gold-soft); pointer-events: none; transition: left .2s cubic-bezier(.22, .8, .28, 1), top .2s cubic-bezier(.22, .8, .28, 1), width .2s cubic-bezier(.22, .8, .28, 1), height .2s cubic-bezier(.22, .8, .28, 1); }
.bf-ledger-menu-choice { position: relative; z-index: 1; }
.bf-ledger-menu-choice { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 0; min-height: 58px; padding: 8px 12px; border: 1px solid var(--bf-stone-2); border-radius: 8px; background: var(--bf-ground); color: var(--bf-ink); font: 500 14px var(--bf-sans); text-align: left; cursor: pointer; }
.bf-ledger-menu-choice:hover { border-color: var(--bf-stone); }
.bf-ledger-menu-choice[aria-pressed="true"] { background: transparent; border-color: transparent; }
.bf-ledger-menu-choice { background: transparent; }
.bf-ledger-menu-hint { font-size: 12px; font-weight: 400; color: var(--bf-slate); }
.bf-ledger-menu .bf-filter-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; min-height: 0; }
.bf-ledger-menu .bf-filter-bar .bf-filter { min-height: 0; margin: 0; padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--bf-ink); font: 400 14px/1.3 var(--bf-sans); }
.bf-ledger-menu .bf-filter-bar .bf-filter:hover { background: var(--bf-surface-2); }
.bf-ledger-menu .bf-filter-bar .bf-filter.bf-active,
.bf-ledger-menu .bf-filter-bar .bf-filter.bf-active:hover { background: var(--bf-gold-soft); border-color: transparent; color: var(--bf-ink); font-weight: 500; }
.bf-ledger-menu-types { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.bf-ledger-type-chip { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 6px 10px; border-radius: 4px; background: transparent; color: var(--bf-ink); cursor: pointer; font: 400 14px/1.3 var(--bf-sans); }
.bf-ledger-type-chip .bf-cat { gap: 0; }
.bf-ledger-type-chip .bf-cat::before { margin-top: 0; }
.bf-ledger-type-chip:hover { background: var(--bf-surface-2); }
.bf-ledger-type-chip[aria-pressed="true"],
.bf-ledger-type-chip[aria-pressed="true"]:hover { background: var(--bf-gold-soft); }
.bf-ledger-type-chip[hidden] { display: none; }
.bf-ledger-menu-reset { align-self: flex-start; font-size: 13px; }
.bf-ledger-search { margin-bottom: 22px; }
.bf-ledger-search > .bf-label { display: block; margin-bottom: 7px; }
.bf-ledger-search-controls { display: flex; align-items: center; gap: 16px; }
.bf-ledger-search-controls .bf-search { flex: 1 1 320px; width: 100%; min-width: 0; max-width: 540px; }
.bf-ledger-search-controls .bf-btn-link { flex: 0 0 auto; font-size: 13px; }
.bf-ledger-search-status { margin: 8px 0 0; min-height: 18px; font-variant-numeric: tabular-nums; }
.bf-ledger-search-empty { padding: 28px 0; border-block: 1px solid var(--bf-stone-2); }
.bf-ledger-search-empty p { margin: 0 0 10px; overflow-wrap: anywhere; }
.bf-typegroup { border-bottom: 1px solid var(--bf-stone-2); }
.bf-thead { display: grid; grid-template-columns: 8px auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; cursor: pointer; }
/* §32.2 / Michael 2026-09-05: the count sits beside the type name, the chevron alone at the far right. */
.bf-thead .bf-ledger-count { justify-self: start; }
.bf-thead:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: -2px; }
.bf-ledger-chev { display: inline-flex; color: var(--bf-slate); transition: transform 200ms ease; }
.bf-ledger-chev.bf-open { transform: rotate(180deg); }
.bf-thead:hover .bf-ledger-chev { color: var(--bf-gold-deep); }
.bf-ledger-name { min-width: 0; font-size: 15px; font-weight: 600; color: var(--bf-ink); }
.bf-ledger-name-btn { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: 600 15px var(--bf-sans); color: var(--bf-ink); cursor: pointer; }
.bf-ledger-pencil { display: inline-flex; color: var(--bf-slate); opacity: 0; }
.bf-thead:hover .bf-ledger-pencil, .bf-ledger-name-btn:focus-visible .bf-ledger-pencil { opacity: 1; }
.bf-ledger-count { font-size: 13px; color: var(--bf-slate); font-variant-numeric: tabular-nums; }
/* The name is the rename control: the pencil rises on hover and the name goes gold. */
.bf-thead:hover .bf-ledger-name-btn, .bf-ledger-name-btn:focus-visible { color: var(--bf-gold-deep); }
/* Cap the filename column so metadata stays nearby on wide screens.
   Status earns a column only when there is something to say. */
.bf-docrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-content: start; column-gap: 16px; align-items: baseline; position: relative; min-height: 36px; padding: 4px 0 4px 20px; border-top: 1px solid var(--bf-stone-2); font-size: 14px; color: var(--bf-ink); }
.bf-docrow:hover { background: var(--bf-surface-2); }
.bf-docrow.bf-doc-row { cursor: pointer; }
.bf-docrow.bf-doc-row:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: -2px; }
.bf-ledger-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; min-width: 0; }
.bf-ledger-why { flex: 1 0 100%; margin-top: -8px; font-size: 13px; color: var(--bf-slate); }
.bf-ledger-also-stamped { flex: 1 0 100%; font-size: 13px; color: var(--bf-slate); }
.bf-ledger-side { display: flex; align-items: center; gap: 12px; }
.bf-ledger-split { flex: 0 0 auto; padding: 0 6px; min-height: 18px; border-radius: 999px; background: var(--bf-surface-2); color: var(--bf-slate); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 18px; }
.bf-ledger-file { min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-ledger-origin { overflow: hidden; color: color-mix(in srgb, var(--bf-slate) 70%, var(--bf-ground)); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.bf-ledger-pages, .bf-ledger-period, .bf-ledger-added { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bf-ledger-period { color: var(--bf-slate); }
.bf-ledger-period-none { color: color-mix(in srgb, var(--bf-slate) 45%, var(--bf-ground)); }
button.bf-ledger-period-none {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.bf-ledger-date { width: 9.5rem; height: 28px; padding: 0 8px; font-size: 13px; }
.bf-ledger-added { color: color-mix(in srgb, var(--bf-slate) 70%, var(--bf-ground)); }
.bf-ledger-pages { color: color-mix(in srgb, var(--bf-slate) 70%, var(--bf-ground)); }
.bf-ledger-conf { font-size: 13px; color: var(--bf-warning); white-space: nowrap; }
/* At rest, not hover-only: Michael did not find "Change type" on the preview (2026-09-04). Quiet in slate,
   gold on the row's hover. */
.bf-ledger-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.bf-ledger-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--bf-slate); cursor: pointer; }
.bf-ledger-icon:hover, .bf-ledger-icon:focus-visible { color: var(--bf-gold-deep); background: var(--bf-gold-soft); outline: 0; }
.bf-ledger-acts .bf-btn-link { color: var(--bf-slate); }
.bf-ledger-acts .bf-btn-link { font-size: 13px; font-weight: 600; }
.bf-fold { display: flex; align-items: center; min-height: 36px; padding-left: 20px; border-top: 1px solid var(--bf-stone-2); font-size: 13px; }
.bf-fold .bf-btn-link { font-size: 13px; font-weight: 600; }
/* §18.4: the head becomes the field, in place — the list never moves. */
.bf-rename { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; }
.bf-rename-field { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bf-rename-field .bf-input { height: 36px; width: 300px; font: 500 15px var(--bf-sans); box-shadow: 0 0 0 3px rgba(184, 160, 106, .45); outline: 0; }
.bf-rename-hint { font-size: 13px; color: var(--bf-slate); }
.bf-rename-was { margin-left: 8px; font-size: 12px; color: var(--bf-slate); }
.bf-rename-acts { display: flex; gap: 14px; font-size: 13px; }
.bf-rename-acts .bf-btn-link { font-size: 13px; font-weight: 600; }
.bf-rename-error { grid-column: 2 / -1; font-size: 13px; color: var(--bf-danger); }
@media (max-width: 900px) {
  .bf-docrow { column-gap: 12px; padding-left: 0; }
}
@media (max-width: 600px) {
  .bf-ledger-search-controls { flex-wrap: wrap; gap: 8px; }
  .bf-ledger-head { flex-wrap: wrap; gap: 8px; }
  .bf-ledger-tools { flex-wrap: wrap; gap: 8px; }
  .bf-docrow { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .bf-ledger-side { justify-content: flex-start; flex-wrap: wrap; }
  .bf-ledger-why { margin-top: 0; }
}

/* ─── §17 Check — a list with a modal workspace ────────────────────────
   The case page owns one scroll. The open modal bounds the preview and
   decision panes without changing the case header or the page's position. */
#setup-check-modal .bf-modal-card.bf-check-dialog {
  width: min(1400px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  height: calc(100dvh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 20px;
  overflow: hidden;
}
.bf-check-dialog > .bf-modal-head { flex: 0 0 auto; margin-bottom: 16px; }
.bf-check-dialog-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bf-check-dialog .bf-count-line { flex: 0 0 auto; margin: 0 0 12px; }
.bf-check-dialog .bf-ws { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.bf-setup-check { display: flex; flex-direction: column; }
.bf-count-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -8px 0 16px; font-size: 13px; color: var(--bf-slate); }
.bf-pager { display: flex; align-items: center; gap: 12px; }
.bf-pager .bf-btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
/* Both columns are only mounted inside the review modal. */
.bf-ws { display: grid; grid-template-columns: minmax(400px, .9fr) minmax(0, 1.1fr); align-items: start; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface); }
.bf-ws-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px; border-right: 1px solid var(--bf-stone-2); }
.bf-ws-right { display: flex; flex-direction: column; min-width: 0; padding: 18px 24px 16px; }
.bf-ws-head { display: flex; align-items: baseline; gap: 10px; }
.bf-ws-doc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--bf-ink); }
.bf-ws-meta { font-size: 13px; color: var(--bf-slate); white-space: nowrap; }
.bf-ws-origin { margin-top: -8px; overflow: hidden; color: var(--bf-slate); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.bf-ws-signal { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--bf-warning); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-ws-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; background: var(--bf-warning); }
.bf-ws-page-of { font-size: 13px; color: var(--bf-slate); }
/* Restore stays at the foot of the modal preview while cuts differ. */
.bf-check-dialog .bf-restore { position: sticky; bottom: 0; z-index: 5; box-sizing: border-box; min-height: 63px; display: flex; align-items: center; gap: 8px; margin: 0 -20px -18px; padding: 16px 20px 12px; border-top: 1px solid var(--bf-stone-2); background: var(--bf-surface); font-size: 13px; color: var(--bf-slate); }
.bf-restore .bf-btn-link { min-height: 0; padding: 0; font-size: 13px; }
/* Page clicks read. Boundary buttons cut; existing cut lines join. */
.bf-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; align-content: start; }
.bf-page-choice { position: relative; display: block; min-width: 0; }
.bf-page-choice > .bf-pg { width: 100%; cursor: zoom-in; }
.bf-page-split { position: absolute; z-index: 4; left: 50%; top: -8px; transform: translateX(-50%); padding: 4px 9px; border: 1px solid var(--bf-gold-deep); border-radius: 12px; background: var(--bf-gold); color: var(--bf-navy); font: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; opacity: 0; pointer-events: none; }
.bf-page-choice:hover .bf-page-split, .bf-page-choice:focus-within .bf-page-split { opacity: 1; pointer-events: auto; }
/* Preserve centering when the shared button press animation scales it. */
.bf-page-split:active:not([class~='disabled']) { transform: translateX(-50%) scale(.97); }
.bf-page-split:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
@media (hover: none) { .bf-page-split { opacity: 1; pointer-events: auto; } }
.bf-pg { position: relative; display: flex; flex-direction: column; gap: 3px; aspect-ratio: 8.5 / 11; overflow: hidden; padding: 8px 8px 0; border: 1px solid var(--bf-stone); border-radius: 3px; background: var(--bf-surface-2); color: inherit; font: inherit; cursor: pointer; }
.bf-pg:focus-visible, .bf-prop-thumb:focus-visible, .bf-qrow-thumb:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-pg-n { position: absolute; z-index: 2; right: 6px; bottom: 5px; padding: 0 2px; border-radius: 2px; background: rgba(255,255,255,.82); font-size: 10px; color: var(--bf-slate); font-variant-numeric: tabular-nums; }
.bf-pg-first { border-color: var(--bf-gold); box-shadow: 0 0 0 2px var(--bf-gold-soft); }
.bf-pg-tag { position: absolute; z-index: 2; left: -1px; top: -1px; padding: 1px 6px; border-radius: 3px 0 3px 0; background: var(--bf-gold); color: var(--bf-navy); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Resting on a proposed document lights the pages it is made of. */
.bf-pg-lit { background: var(--bf-gold-soft); }
.bf-cut { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 2px 0 -2px; font-size: 12px; font-weight: 600; color: var(--bf-gold-deep); }
.bf-cut-rule { flex: 1 1 auto; height: 1px; background: var(--bf-gold); }
.bf-cut-label { padding: 3px 5px; border-radius: 999px; transition: background .16s ease-out; }
.bf-cut-changed .bf-cut-label { background: var(--bf-gold-soft); }
.bf-cut-remove { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--bf-gold-deep); font: 600 17px/24px var(--bf-sans); cursor: pointer; }
.bf-cut-remove:hover, .bf-cut-remove:focus-visible { background: var(--bf-gold-soft); outline: none; }
/* A collapsed interior run is a visible stack control, never a hairline. */
.bf-run { position: relative; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 72px; padding: 8px 16px; border: 1px solid var(--bf-stone-2); border-radius: 4px; background: var(--bf-surface-2); color: var(--bf-slate); font: 600 12px var(--bf-sans); cursor: pointer; }
.bf-run:hover { border-color: var(--bf-gold); color: var(--bf-gold-deep); }
/* The collapsed run is one tile in the page grid, wearing the split modal's stack. */
.bf-run-tile { grid-column: auto; min-height: 0; padding: 6px 0 0; border: 0; background: none; }
.bf-run-tile .bf-split-stack-thumbs { width: 96px; height: 118px; }
.bf-run-tile .bf-split-stack-thumb { width: 72px; height: 94px; }
.bf-run-tile .bf-split-stack-n { color: var(--bf-slate); }
.bf-run-tile:hover .bf-split-stack-n { color: var(--bf-gold-deep); }
.bf-run-stack { position: relative; width: 42px; height: 50px; }
.bf-run-ghost { position: absolute; left: 6px; top: 3px; width: 31px; height: 42px; border: 1px solid var(--bf-stone); border-radius: 2px; background: white; box-shadow: 0 2px 5px rgba(27, 38, 59, .08); }
.bf-run-ghost:nth-child(1) { transform: translate(-5px, 4px) rotate(-4deg); }
.bf-run-ghost:nth-child(2) { transform: translate(4px, 3px) rotate(4deg); }
.bf-run-ghost:nth-child(3) { transform: translate(0, -2px); }
.bf-run-chevron { font-size: 16px; line-height: 1; }
.bf-run-hide { min-height: 34px; padding: 4px 12px; border-style: dashed; background: none; font-weight: 500; }
/* The first page, whole, for a document whose type is the question. */
.bf-bigpage { position: relative; display: block; width: 100%; max-width: none; margin: 0; aspect-ratio: 8.5 / 11; overflow: hidden; border: 1px solid var(--bf-stone); border-radius: 3px; background: var(--bf-surface-2); cursor: pointer; }
.bf-bigpage:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-bigpage-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .18s ease-out; }
.bf-bigpage-img.bf-loaded { opacity: 1; }
.bf-bigpage::before { content: ''; position: absolute; left: 12%; right: 12%; top: 8%; height: 6px; background: var(--bf-stone); border-radius: 2px; box-shadow: 0 22px 0 -1px var(--bf-stone-2), 0 38px 0 -1px var(--bf-stone-2), 0 54px 0 -1px var(--bf-stone-2), 0 70px 0 -1px var(--bf-stone-2), 0 86px 0 -1px var(--bf-stone-2), 0 102px 0 -1px var(--bf-stone-2); animation: bf-skeleton 1.4s ease-in-out infinite; }
.bf-bigpage:has(.bf-loaded)::before { display: none; }
.bf-bigpage-unready { display: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 13px; color: var(--bf-slate); }
.bf-bigpage-empty .bf-bigpage-unready { display: block; }
.bf-bigpage-empty::before { display: none; }
/* The question, and the documents it is a question about. */
.bf-ask { font-family: var(--bf-serif); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--bf-ink); }
.bf-ask-sub { margin: 4px 0 14px; font-size: 14px; color: var(--bf-slate); }
/* §30.3 addendum: the server's sentence stands in for the question — ink, not slate, and room to wrap. */
.bf-duplicate { margin: 10px 0 18px; max-width: 560px; color: var(--bf-ink); line-height: 1.5; }
.bf-props { display: flex; flex-direction: column; }
.bf-prop { display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bf-stone-2); }
.bf-prop-no { font-family: var(--bf-serif); font-size: 20px; font-weight: 600; color: var(--bf-ink); }
.bf-prop-thumb { position: relative; width: 40px; height: 52px; overflow: hidden; border: 1px solid var(--bf-stone); border-radius: 2px; background: var(--bf-surface-2); cursor: pointer; }
.bf-prop-main { min-width: 0; }
.bf-prop-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--bf-ink); }
.bf-prop-name { display: block; width: 100%; height: 34px; margin-bottom: 6px; font-size: 13px; }
.bf-prop-type { width: 100%; min-height: 34px; border-color: var(--bf-gold); font-size: 13px; }
.bf-prop-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; min-width: 0; overflow: hidden; font-size: 13px; color: var(--bf-slate); white-space: nowrap; }
.bf-prop-meta .bf-cat { font-size: 13px; }
.bf-prop-why { overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.bf-prop-range { font-size: 13px; color: var(--bf-slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The decision stays in its modal pane; the list has only its page footer. */
.bf-check-dialog .bf-ws-acts { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 14px; margin-top: 0; padding: 16px 0 12px; border-top: 1px solid var(--bf-stone-2); background: var(--bf-surface); font-size: 13px; }
.bf-ws-right > .bf-props, .bf-ws-right > .bf-another, .bf-ws-right > .bf-duplicate { padding-bottom: 50px; }
.bf-ws-left > .bf-pages:has(+ .bf-restore) { padding-bottom: 32px; }
.bf-ws-acts .bf-split-actions { padding-top: 0; }
@media (min-width: 1001px) {
  .bf-check-dialog .bf-ws-left, .bf-check-dialog .bf-ws-right { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
  .bf-ws-left > *, .bf-ws-right > * { flex-shrink: 0; }
  .bf-ws-left:focus-visible, .bf-ws-right:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: -2px; }
  /* These controls now stick inside their own scroller, above its bottom padding. */
  .bf-check-dialog .bf-ws-acts { bottom: -16px; margin-bottom: -16px; }
  .bf-check-dialog .bf-restore { bottom: -18px; }
}
/* The type list, the AI's pick first. */
.bf-types { display: flex; flex-direction: column; border-top: 1px solid var(--bf-stone-2); }
.bf-typerow { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--bf-stone-2); background: none; font: 400 14px var(--bf-sans); color: var(--bf-ink); text-align: left; cursor: pointer; }
.bf-typerow:hover { background: var(--bf-surface-2); }
.bf-typerow-pick { font-weight: 600; }
.bf-typerow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-typerow-note { font-size: 13px; font-weight: 400; color: var(--bf-slate); white-space: nowrap; }
.bf-another { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.bf-another-label { font-size: 13px; color: var(--bf-slate); }
.bf-type-search { display: flex; align-items: center; gap: 10px; }
.bf-type-search .bf-input { flex: 1 1 auto; height: 38px; }
.bf-type-search-hint { font-size: 12px; color: var(--bf-slate); white-space: nowrap; }
.bf-results { display: flex; flex-direction: column; border-top: 1px solid var(--bf-stone-2); }
.bf-results .bf-typerow { min-height: 40px; grid-template-columns: 22px minmax(0, 1fr) auto; }
.bf-typerow-add { grid-template-columns: minmax(0, 1fr) auto; color: var(--bf-gold-deep); font-weight: 600; }
.bf-typerow-add .bf-typerow-name::before { content: '+ '; }
/* What is left to decide, on the list page. */
.bf-queue { display: flex; flex-direction: column; margin-top: 18px; border-top: 1px solid var(--bf-stone); }
.bf-qrow { display: grid; grid-template-columns: 24px 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 56px; padding: 0; border: 0; border-bottom: 1px solid var(--bf-stone-2); background: none; font: 400 14px var(--bf-sans); color: var(--bf-ink); text-align: left; cursor: pointer; }
.bf-qrow:hover { background: var(--bf-surface-2); }
.bf-qrow:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: -3px; }
.bf-qrow-k { font-size: 12px; color: var(--bf-slate); font-variant-numeric: tabular-nums; }
.bf-qrow-thumb { position: relative; display: block; width: 34px; height: 44px; overflow: hidden; border: 1px solid var(--bf-stone); border-radius: 2px; background: var(--bf-surface-2); cursor: pointer; }
.bf-qrow-main { min-width: 0; display: flex; flex-direction: column; }
.bf-qrow-name, .bf-qrow-origin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-qrow-origin { color: var(--bf-slate); font-size: 11px; }
.bf-qrow-w { font-size: 13px; color: var(--bf-slate); white-space: nowrap; }
.bf-qrow-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 999px; background: var(--bf-warning); }
/* §30.3: the visit ledger — saved decisions below the waiting list, in the
   waiting queue's grammar. The dot is amber while busy, green when done, red
   when the server refused, stone for a document passed without a decision. */
.bf-queue-touched { margin: 0 0 18px; border-top: 1px solid var(--bf-stone); }
.bf-queue-touched .bf-qrow:not([role="button"]) { cursor: default; }
.bf-queue-touched .bf-qrow:not([role="button"]):hover { background: none; }
.bf-qrow-passed .bf-qrow-name { color: var(--bf-slate); }
.bf-qrow-w-done { color: var(--bf-success); }
.bf-qrow-w-failed { color: var(--bf-danger); }
.bf-qrow-dot-done { background: var(--bf-success); }
.bf-qrow-dot-failed { background: var(--bf-danger); }
.bf-qrow-dot-passed { background: var(--bf-stone); }
/* The decided document folds into its row (240 ms, ease-out, from the height
   it had) and the next one rises into the workspace on the steps' own 380 ms. */
.bf-split-context { margin: 16px 0 12px; padding: 14px 16px; border: 1px solid var(--bf-stone-2); border-radius: 8px; background: var(--bf-surface-2); font-size: 14px; line-height: 1.65; color: var(--bf-ink); }
.bf-split-context > span { display: block; margin-bottom: 7px; color: var(--bf-slate); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bf-summary-text { overflow-wrap: anywhere; }
.bf-summary-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bf-summary-expandable { cursor: pointer; }
.bf-summary-expandable:hover { border-color: var(--bf-stone); }
.bf-summary-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; margin-top: 6px; padding: 0; color: var(--bf-gold-deep); font-size: 12px; font-weight: 500; }
.bf-summary-toggle::after { content: ''; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.bf-summary-toggle[aria-expanded='true']::after { margin-top: 3px; transform: rotate(225deg); }
.bf-summary-toggle:hover { color: var(--bf-ink); }
.bf-summary-toggle[hidden] { display: none; }
.bf-combine { position: sticky; top: -18px; z-index: 4; margin: 0 -4px 10px; padding: 14px 4px 12px; border-bottom: 1px solid var(--bf-stone-2); background: var(--bf-surface); }
.bf-combine-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: var(--bf-ink); font-size: 13px; font-weight: 600; }
.bf-combine-total { margin-left: auto; color: var(--bf-slate); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.bf-combine-undo { font-size: 12px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.bf-combine-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bf-combine-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 10px; border: 1px solid var(--bf-stone); border-radius: 6px; background: var(--bf-surface); color: var(--bf-ink); font: 400 12px/1.4 var(--bf-sans); text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.bf-combine-chip:hover { border-color: var(--bf-gold); background: var(--bf-surface-2); }
.bf-combine-chip[aria-pressed='true'] { border-color: var(--bf-gold); background: var(--bf-gold-soft); }
.bf-combine-chip:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-combine-chip .bf-cat { min-width: 0; color: inherit; font-size: inherit; white-space: normal; }
.bf-combine-count { flex: 0 0 auto; color: var(--bf-slate); font-size: 11px; font-variant-numeric: tabular-nums; }
.bf-combine p { margin: 8px 0 0; color: var(--bf-slate); font-size: 11px; line-height: 1.5; }
.bf-prop-edit { align-self: flex-start; width: fit-content; min-height: 30px; margin-top: 2px; padding: 0; font-size: 12px; color: var(--bf-gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.bf-prop-field { display: flex; flex-direction: column; gap: 4px; margin: 3px 0; color: var(--bf-slate); font-size: 11px; }
@media (max-width: 1000px) { .bf-combine { position: static; } }
.bf-split-secondary { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.bf-qrow-collapse { animation: bf-qrow-collapse 240ms ease-out both; overflow: hidden; }
@keyframes bf-qrow-collapse { from { min-height: var(--bf-collapse-from, 56px); height: var(--bf-collapse-from, 56px); opacity: .4; } to { min-height: 56px; height: 56px; opacity: 1; } }
.bf-ws-rise { animation: bf-setup-rise 380ms cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .bf-qrow-collapse, .bf-ws-rise { animation: none; } }
.bf-page-tile-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 180ms ease-out; }
.bf-page-tile-img.bf-loaded { opacity: 1; }
.bf-pg::before, .bf-prop-thumb::before, .bf-qrow-thumb::before, .bf-rc-th::before { content: ''; position: absolute; z-index: 1; left: 14%; right: 14%; top: 10%; height: 3px; border-radius: 2px; background: var(--bf-stone); box-shadow: 0 10px 0 -1px var(--bf-stone-2), 0 17px 0 -1px var(--bf-stone-2), 0 24px 0 -1px var(--bf-stone-2); animation: bf-skeleton 1.4s ease-in-out infinite; pointer-events: none; }
.bf-pg:has(.bf-loaded)::before, .bf-prop-thumb:has(.bf-loaded)::before, .bf-qrow-thumb:has(.bf-loaded)::before, .bf-rc-th:has(.bf-loaded)::before { display: none; }
@media (max-width: 1000px) {
  .bf-modal-card.bf-check-dialog { padding: 16px; }
  .bf-check-dialog-body { overflow-y: auto; overscroll-behavior-y: contain; }
  .bf-check-dialog .bf-ws { flex: 0 0 auto; grid-template-columns: minmax(0, 1fr); }
  .bf-check-dialog .bf-count-line { flex-wrap: wrap; }
  .bf-check-dialog .bf-ws-acts { flex-wrap: wrap; }
  .bf-ws-left { border-right: 0; border-bottom: 1px solid var(--bf-stone-2); }
}
@media (max-width: 640px) {
  .bf-setup-check .bf-qrow { grid-template-columns: 24px 34px minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; }
  .bf-setup-check .bf-qrow-k, .bf-setup-check .bf-qrow-thumb { grid-row: span 2; }
  .bf-setup-check .bf-qrow-main, .bf-setup-check .bf-qrow-w { grid-column: 3; }
  .bf-setup-check .bf-qrow-w { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-bigpage::before { animation: none; }
  .bf-cut-label { transition: none; }
}

/* §15.4 — the Check step. CS7 §6 gave it the Respond sheet's row vocabulary;
   §17 replaced the rows with a workspace (above), and the only thing left of
   that block is the middle dot the workspace and the ledger both use. */
.bf-check-sep { color: var(--bf-stone); }
/* The side, only when both sides are in the table (§15.4). */
.bf-setup-side { color: var(--bf-slate); }

/* §15.5 — the Respond sheet's own to-decide rows, grouped by request. */
.bf-setup-rows { width: 100%; }
.bf-setup-group { display: flex; align-items: baseline; gap: 12px; min-height: 40px; margin-top: 18px; border-bottom: 1px solid var(--bf-stone-2); }
.bf-setup-group:first-child { margin-top: 0; }
/* Proportional figures, deliberately: the serif's tabular ones are so wide
   that request 12 read as "1 2" (caught in the browser). This is one label,
   not a column of numbers to line up. */
.bf-setup-group-num { font-family: var(--bf-serif); font-size: 22px; font-weight: 600; color: var(--bf-ink); font-variant-numeric: normal; }
.bf-setup-group-name { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--bf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-setup-group-count { font-size: 13px; color: var(--bf-slate); font-variant-numeric: tabular-nums; }
.bf-setup-rows .bf-req-doc { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 6px 10px; margin: 0 -10px; border-bottom: 1px solid var(--bf-stone-2); min-height: 56px; }
.bf-setup-rows .bf-req-doc:last-child { border-bottom: 0; }


/* ─── The two-track block (§6) ───────────────────────────────────────────
   Three rows, no boxes. One sentence and one link each: the picture Jim
   specified, not a dashboard. */
.bf-track-block { display: flex; flex-direction: column; }
.bf-track-row { display: grid; grid-template-columns: 280px minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--bf-stone-2); }
.bf-track-row:first-child { border-top: 1px solid var(--bf-stone-2); }
.bf-track-name { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-ink); white-space: normal; }
.bf-track-say { margin: 0; font-size: 14px; color: var(--bf-ink); }
.bf-track-link { min-height: 24px; font-size: 13px; padding: 0; white-space: nowrap; }
@media (max-width: 900px) {
  .bf-track-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bf-track-link { justify-self: start; }
}

/* ── Finish (§21) ─────────────────────────────────────────────────────
   Four legal steps in their fixed order. The row itself is the hierarchy;
   only the produced ZIP gets a bordered surface because it is one object. */
.bf-finish { gap: 0; }
.bf-finish-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 22px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--bf-stone-2); }
.bf-response-card { padding: 20px 0 22px 62px; border-bottom: 1px solid var(--bf-stone-2); display: grid; gap: 9px; max-width: 760px; }
.bf-response-card h2 { margin: 0; font: 600 23px/1.2 var(--bf-serif); }
.bf-response-card h3 { margin: 12px 0 0; font: 600 17px/1.3 var(--bf-sans); }
.bf-response-status { margin: 0; color: var(--bf-slate); font-size: 14px; }
.bf-response-starter { margin: 0; padding: 12px 15px; border-left: 3px solid var(--bf-gold); background: var(--bf-ground); }
.bf-response-blockers { margin: 4px 0; padding-left: 22px; line-height: 1.7; }
.bf-response-service, .bf-response-approve, .bf-response-service-form { display: grid; gap: 12px; max-width: 620px; }
.bf-finish-service-actions { display: flex; align-items: center; gap: 14px; }
.bf-response-attachment > input[type="file"] { display: block; margin: 5px 0; }
.bf-response-recipient { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bf-response-service .bf-finish-field, .bf-response-approve .bf-finish-field { display: grid; gap: 5px; }
.bf-response-preview-dialog { width: min(950px, 94vw); max-height: 90vh; border: 1px solid var(--bf-stone); border-radius: 12px; padding: 18px; }
.bf-response-preview-dialog::backdrop { background: rgba(16, 27, 40, .55); }
.bf-response-preview-body { max-height: 78vh; overflow: auto; }
.bf-response-editor-preview { min-height: 420px; max-height: calc(100vh - 120px); overflow: auto; }
.bf-response-preview-toggle { display: none; }
@media (max-width: 1023px) {
  .bf-response-preview-toggle { display: inline-flex; }
  .bf-response-editor-preview { display: none; position: static; max-height: 70vh; }
  .bf-response-preview-open .bf-response-editor-preview { display: block; }
}
.bf-mx-answer-row > .bf-mx-chooser.bf-form-answer { position: fixed; top: 72px;
  right: 24px; width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - var(--bf-page-foot-h, 80px) - 88px);
  overflow: auto; z-index: 50; margin: 0; }
.bf-form-answer { display: grid; align-content: start; gap: 12px; }
.bf-form-answer-choice { display: flex; gap: 9px; align-items: start; cursor: pointer; line-height: 1.4; }
.bf-form-answer-field, .bf-form-optional label { display: grid; gap: 5px; font-size: 14px; }
.bf-form-answer [hidden] { display: none !important; }
.bf-form-answer-field small, .bf-form-optional small { color: var(--bf-slate); line-height: 1.4; }
.bf-form-answer textarea { min-height: 72px; }
@media (max-width: 650px) { .bf-response-card { padding-left: 0; } .bf-response-recipient { grid-template-columns: 1fr; } }
.bf-finish-number { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bf-stone); border-radius: 999px; color: var(--bf-slate); font: 600 14px var(--bf-sans); }
.bf-finish-number-next { border-color: var(--bf-navy); background: var(--bf-navy); color: var(--bf-ground); }
.bf-finish-number-done { border-color: var(--bf-success); color: var(--bf-success); }
.bf-finish-tick { font-size: 17px; line-height: 1; }
.bf-finish-main { min-width: 0; }
.bf-finish-title { margin: 3px 0 0; font: 600 23px/1.15 var(--bf-serif); color: var(--bf-slate); }
.bf-finish-row-next .bf-finish-title { color: var(--bf-ink); }
.bf-finish-sentence { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: var(--bf-slate); }
.bf-finish-strong { color: var(--bf-ink); font-weight: 600; }
.bf-finish-action { min-width: 122px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bf-finish-row[data-finish-row="1"] { min-height: 160px; }
.bf-finish-qc-action { width: 170px; min-width: 170px; }
.bf-finish-action .bf-btn { min-height: 36px; white-space: nowrap; }
.bf-finish-action-reason { max-width: 180px; font-size: 13px; line-height: 1.35; color: var(--bf-slate); text-align: right; }
.bf-finish-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 32px; margin-top: 19px; }
.bf-finish-fact { min-width: 0; }
.bf-finish-fact-key { margin-bottom: 4px; font-size: 12px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--bf-slate); }
.bf-finish-fact-value { font-size: 14px; line-height: 1.4; color: var(--bf-ink); overflow-wrap: anywhere; }
.bf-finish-attorney-firm { margin-top: 4px; font-size: 13px; color: var(--bf-slate); }
.bf-finish-mono { font-family: var(--bf-mono); color: var(--bf-gold-deep); }
.bf-finish-bates { grid-column: 1 / -1; }
.bf-finish-bates-value { padding: 0; min-height: 0; font-size: 14px; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.bf-finish-bates-input { width: 13ch; font-size: 14px; }
.bf-bates-error { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--bf-slate); }
@media (min-width: 701px) {
  .bf-field-row-bates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bf-finish-review { min-height: 20px; padding: 0; font-size: 13px; vertical-align: baseline; }
.bf-finish-live { margin: 14px 0 0; font-size: 14px; color: var(--bf-slate); }
.bf-finish-qc { margin-top: 18px; }
.bf-finish-qc:empty { display: none; }
.bf-finish-qc .bf-section { margin: 0; }

.bf-finish-package { max-width: 760px; margin-top: 22px; overflow: hidden; border: 1px solid var(--bf-stone); border-radius: 6px; background: var(--bf-surface); }
.bf-finish-package-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 18px; background: var(--bf-navy); color: var(--bf-ground); }
.bf-finish-package-title { font-size: 15px; font-weight: 600; }
.bf-finish-package-range { font: 500 13px var(--bf-mono); color: var(--bf-gold); text-align: right; }
.bf-finish-package-line { min-height: 46px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--bf-stone-2); font-size: 13px; color: var(--bf-ink); }
.bf-finish-package-glyph { display: inline-flex; align-items: center; color: var(--bf-slate); }
.bf-finish-package-name { min-width: 0; }
.bf-finish-package-pages { color: var(--bf-slate); white-space: nowrap; }
.bf-finish-package-foot { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 18px; }
.bf-finish-package-meta { font-size: 13px; color: var(--bf-slate); }
.bf-finish-package-foot > .bf-finish-action { min-width: 0; }

.bf-finish-service { max-width: 760px; margin-top: 24px; }
.bf-finish-service-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--bf-ink); }
.bf-finish-service-note { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--bf-slate); }
.bf-finish-service-facts { margin: 14px 0 0; font-size: 14px; color: var(--bf-ink); }
.bf-finish-service-form { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(150px, .7fr) auto; gap: 12px; align-items: end; margin-top: 14px; scroll-margin-bottom: 16px; }
.bf-finish-field { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bf-finish-field-label { font-size: 12px; font-weight: 500; color: var(--bf-slate); }
.bf-finish-field .bf-input { width: 100%; min-height: 36px; }
.bf-finish-service > .bf-finish-facts { max-width: 540px; }
.bf-finish-service > .bf-btn-link { min-height: 24px; margin-top: 10px; padding: 0; }
.bf-finish-action.bf-finish-action-pair { flex-direction: row; align-items: center; gap: 16px; }
.bf-finish-action-pair .bf-btn-link { padding: 0; }


@media (max-width: 900px) {
  .bf-finish-row { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .bf-finish-action { grid-column: 2; align-items: flex-start; }
  .bf-finish-qc-action { width: 170px; }
  .bf-finish-action-reason { text-align: left; }
  .bf-finish-service-form { grid-template-columns: minmax(0, 1fr); }
  .bf-finish-package-foot { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 600px) {
  .bf-finish-facts { grid-template-columns: minmax(0, 1fr); }
  .bf-finish-package-head { align-items: flex-start; flex-direction: column; gap: 4px; padding-top: 12px; padding-bottom: 12px; }
  .bf-finish-package-range { text-align: left; }
}

/* ── Inventory (case-setup spec §9) ───────────────────────────────────────
   "Document inventory is the most important" — every document on the case,
   by type, one screen. No cards: a head row, a hairline under it, and 44 px
   rows. The filter tabs are §5 tabs (text + 2 px underline, counts as plain
   numerals) and the type is §5 Category (swatch + text), never a chip. */
.bf-inv { gap: 0; }
.bf-inv-head { padding-bottom: 8px; }
.bf-inv-head h1 { margin: 0; font-family: var(--bf-serif); font-size: 34px; font-weight: 600; line-height: 1.1; color: var(--bf-ink); }
.bf-inv-lede { margin: 8px 0 0; max-width: 640px; font-size: 15px; color: var(--bf-slate); }
/* One line: the three filters on the left and Manage types on the right, one
   hairline under the lot. */
.bf-inv-bar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; border-bottom: 1px solid var(--bf-stone); }
.bf-inv-tabs { flex: 0 1 auto; gap: 4px 24px; border-bottom: 0; }
.bf-inv-tabs .bf-filter { font-size: 14px; }
.bf-inv-tabs .bf-filter .bf-cnt { min-width: 0; height: auto; padding: 0; border: 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--bf-slate); }
.bf-inv-tabs .bf-filter.bf-active .bf-cnt { color: var(--bf-ink); }
.bf-response-language-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bf-response-language-field:first-child { grid-column: 1 / -1; }
.bf-response-language-label { align-items: baseline; gap: 12px; }
.bf-response-language-label .bf-btn-link { font-size: 12px; }
.bf-response-language .bf-actions { justify-content: flex-end; }
@media (max-width: 760px) {
  .bf-response-language-fields { grid-template-columns: minmax(0, 1fr); }
  .bf-response-language-field:first-child { grid-column: auto; }
}
/* Jump to a type — the buttons Louis asked for, as one wrapped text line. */
.bf-inv-jump { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 18px; }
.bf-inv-jump-items { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.bf-inv-jump .bf-btn-link { min-height: 26px; padding: 0; font-size: 13px; }
.bf-inv-jump .bf-btn-link .bf-num { margin-left: 5px; color: var(--bf-slate); font-weight: 500; }
.bf-inv-dot { color: var(--bf-stone); }
.bf-inv-none { font-size: 13px; }
.bf-inv-groups { display: flex; flex-direction: column; margin-top: 26px; }
.bf-inv-group { display: flex; flex-direction: column; scroll-margin-top: 96px; }
/* An opened request card anchors with its head below the 56 px fixed top bar (the setup strip is not sticky). */
[data-setup-card] { scroll-margin-top: 72px; }
/* The count reads with the type name ("Bank Statement · 23 documents · 74 pages"), not at the far right
   (Michael, 2026-09-05). */
.bf-inv-group-head { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--bf-stone); }
.bf-inv-group-name { font-size: 15px; font-weight: 600; color: var(--bf-ink); }
/* filename · pages · date added; the side column joins only under All. */
.bf-inv-row { display: grid; grid-template-columns: minmax(0, 1fr) 86px 116px; align-items: center; gap: 16px; min-height: 44px; border-bottom: 1px solid var(--bf-stone-2); cursor: pointer; }
.bf-inv-row.bf-inv-row-side { grid-template-columns: minmax(0, 1fr) 86px 140px 116px; }
.bf-inv-row:hover { background: var(--bf-surface-2); }
.bf-inv-row:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: -3px; }
.bf-inv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--bf-ink); }
.bf-inv-pages, .bf-inv-added { text-align: right; }
.bf-inv-side { white-space: nowrap; }
.bf-inv .bf-empty { margin-top: 32px; }
.bf-inv-foot { width: 100%; }
.bf-inv-totals { font-size: 13px; color: var(--bf-slate); }
.bf-inv-export-menu { margin-left: auto; }
.bf-inv-export-menu > .bf-popover { top: auto; bottom: 44px; width: 320px; padding: 16px; }
.bf-inv-export-scope { margin: 0 0 16px; font-size: 13px; color: var(--bf-slate); }
.bf-inv-export-group { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.bf-inv-export-group .bf-label { margin-bottom: 8px; }
.bf-inv-export-choice { min-height: 32px; display: flex; align-items: center; gap: 10px; color: var(--bf-ink); font-size: 14px; cursor: pointer; }
.bf-inv-export-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.bf-inv-export-actions .bf-btn { min-height: 34px; height: 34px; }
@media (max-width: 900px) {
  .bf-inv-row, .bf-inv-row.bf-inv-row-side { grid-template-columns: minmax(0, 1fr) auto; }
  .bf-inv-side, .bf-inv-added { display: none; }
}


/* ─── Mapping — every request is a card (§20, r5) ──────────────────────────
   The flat confirm list is gone. A card per request: a navy header with the
   gold numeral and the request's short title, a three-tone bar under it, and
   the documents themselves. One card opens in place at full width; the rest
   of the grid stays where it is. The pixel reference is the canvas under
   docs/doowta/design/2026-09-04-mapping-cards. */
.bf-map { width: 100%; display: flex; flex-direction: column; }
.bf-map-bar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.bf-map-bar .bf-filter-tabs { flex: 1 1 auto; gap: 4px 22px; }
.bf-map-sort { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 6px; font-size: 13px; color: var(--bf-slate); white-space: nowrap; }
.bf-map-sort .bf-select { min-height: 32px; font-size: 13px; }
.bf-map-none { margin: 28px 0 0; }
.bf-map-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--bf-slate); }
.bf-map-bulk .bf-btn { height: auto; min-height: 32px; white-space: normal; text-align: left; }
.bf-rc-confirm-high { grid-column: 1 / -1; justify-self: start; max-width: 100%; min-height: 28px; padding: 4px 8px; border: 1px solid rgba(246, 243, 236, .3); border-radius: var(--bf-radius); background: transparent; color: rgba(246, 243, 236, .85); font: 500 12px/1.4 var(--bf-sans); text-align: left; cursor: pointer; }
.bf-rc-confirm-high:hover:not(:disabled) { border-color: var(--bf-brand-gold); color: #f6f3ec; }
.bf-rc-confirm-high:focus-visible { outline: 2px solid var(--bf-focus); outline-offset: 3px; }
.bf-rc-confirm-high:disabled, .bf-rc-decision:disabled { opacity: .55; cursor: default; }
.bf-rc-stale-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.bf-map-response { padding: 10px 20px; font-size: 13px; line-height: 1.5; color: var(--bf-slate); }
.bf-map-response .bf-btn-link { font-size: inherit; }
.bf-map-response .bf-req-field { margin-top: 10px; }
.bf-mapping-blockers { margin: 8px 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; }
.bf-mapping-blockers li + li { margin-top: 6px; }
.bf-mapping-blockers a { color: var(--bf-ink); text-decoration: underline; text-underline-offset: 3px; }
.bf-map-todo { display: flex; align-items: baseline; gap: 8px 22px; margin-top: 8px; color: var(--bf-slate); font: 500 13px/1.5 var(--bf-sans); }
.bf-map-todo > span { flex-shrink: 0; }
.bf-map-todo ul { margin: 0; padding: 0; list-style: none; }
.bf-map-todo a { display: inline-block; padding: 4px 0; color: inherit; text-decoration: none; }
.bf-map-todo a:hover { color: var(--bf-ink); }
.bf-map-todo a:focus-visible { outline: 2px solid var(--bf-focus); outline-offset: 3px; }
.bf-rc-all-documents { margin: 2px 0; color: var(--bf-slate); font-size: 13px; line-height: 1.5; }
/* Every card in a row is the same height (Michael, 2026-09-04); the empty one still stands out by
   what it says and its amber bar, not by being short. */
.bf-map-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; align-items: stretch; }
@media (max-width: 1099px) { .bf-map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .bf-map-grid { grid-template-columns: minmax(0, 1fr); } }

/* The card. The whole compact card is the control, so it carries the ring. */
.bf-rc { background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); overflow: hidden; display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0; font: inherit; color: inherit; }
/* `align-items: stretch` is explicit: the compact card is a <button>, whose children otherwise centre and
   shrink to their content — the navy head was the width of its short title once the grid went full width. */
.bf-rc[role='button'] { cursor: pointer; }
.bf-rc[role='button']:hover { border-color: var(--bf-gold); box-shadow: 0 0 0 2px var(--bf-gold-soft); }
.bf-rc[role='button']:hover .bf-rc-open { color: #f6f3ec; opacity: 1; }
.bf-rc[role='button']:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-rc-wide { grid-column: 1 / -1; }

/* Heavier title and a little more room (Michael, 2026-09-04: "hard to read … a bit more breathing room"). */
.bf-rc-head { background: var(--bf-navy); color: #f6f3ec; padding: 18px 20px 16px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
/* A card whose every pair is confirmed steps back a tone; it is finished. */
.bf-rc-done .bf-rc-head { background: var(--bf-navy-2); }
.bf-rc-no { font-family: var(--bf-serif); font-size: 32px; font-weight: 600; line-height: 1; color: var(--bf-brand-gold); font-variant-numeric: normal; }
.bf-rc-headmain { min-width: 0; }
.bf-rc-title { font-family: var(--bf-serif); font-size: 21px; font-weight: 700; line-height: 1.15; letter-spacing: .005em; }
.bf-rc:not(.bf-rc-wide) .bf-rc-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-rc-full { margin: 8px 0 0; max-width: 900px; font-size: 14px; line-height: 1.55; color: rgba(246, 243, 236, .72); }
/* The open card exists to be read: its full request wraps under the title (the head's nowrap is for the
   compact grid). Seen on preview 5076 after CS16 — the text ran 1,688 px past a 562 px cell. */
.bf-rc-wide .bf-rc-full { white-space: normal; overflow-wrap: anywhere; }
.bf-rc-sub { margin-top: 6px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(246, 243, 236, .66); }
/* Scoped to the head: the card itself carries `bf-rc-<state>` and one of the states is `open`, so an
   unscoped `.bf-rc-open` restyled every needs-review card (centred children, the head at title width). */
.bf-rc-head .bf-rc-open { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(246, 243, 236, .8); white-space: nowrap; }
.bf-rc-notice, .bf-rc-close { min-height: 24px; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.bf-rc-notice:hover, .bf-rc-close:hover { color: #f6f3ec; text-decoration: underline; }
.bf-rc-wide .bf-rc-head { padding: 20px 24px 18px; grid-template-columns: 44px minmax(0, 1fr) auto; }
.bf-rc-wide .bf-rc-no { font-size: 40px; }
.bf-rc-wide .bf-rc-title { font-size: 27px; }

/* The three tones, in one 6 px band: confirmed, high confidence, unsure. */
.bf-rc-bar { display: flex; height: 6px; background: var(--bf-stone-2); }
.bf-rc-bar i { display: block; height: 6px; }
.bf-rc-bar-ok { background: var(--bf-success); }
.bf-rc-bar-hi { background: #9cc4af; }
.bf-rc-bar-med { background: #e2b45a; }

.bf-rc-body { padding: 14px 20px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.bf-rc-wide .bf-rc-body { padding: 14px 24px 18px; }
.bf-rc-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 2px 0 10px; font-size: 13px; color: var(--bf-slate); }
.bf-rc-count { display: inline-flex; align-items: center; gap: 6px; }
.bf-rc-count b { color: var(--bf-ink); font-weight: 600; }
.bf-rc-count i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; background: var(--bf-stone); }
.bf-rc-count-ok i { background: var(--bf-success); }
.bf-rc-count-hi i { background: #9cc4af; }
.bf-rc-count-med i { background: #e2b45a; }
.bf-rc-empty { margin: 6px 0 4px; font-size: 13px; line-height: 1.5; color: var(--bf-slate); }
.bf-rc-empty .bf-btn-link { font-size: 13px; }

/* A row. Placement rows put Confirm + Not here beside the thumbnail. Pool
   rows retain their own empty marker and far-right Not responsive action. */
.bf-rc-row { display: grid; grid-template-columns: 18px 34px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 56px; border-top: 1px solid var(--bf-stone-2); position: relative; }
.bf-rc-row-wide { grid-template-columns: 18px 34px minmax(0, 1fr) 200px 28px; gap: 14px; min-height: 62px; }
/* By request, the open card's rows: the same two tints, so a hover that moves
   the docked card reads the same on both tabs. */
.bf-rc-row:hover, .bf-rc-row.bf-ms-row-carding { background: var(--bf-surface-2); box-shadow: -12px 0 0 var(--bf-surface-2), 12px 0 0 var(--bf-surface-2); }
.bf-rc-row.bf-ms-row-carding { background: var(--bf-gold-soft); box-shadow: -12px 0 0 var(--bf-gold-soft), 12px 0 0 var(--bf-gold-soft); }
.bf-rc-row-placement { grid-template-columns: 60px 34px minmax(0, 1fr); }
.bf-rc-row-placement.bf-rc-row-wide { grid-template-columns: 68px 34px minmax(0, 1fr) 200px; }
/* Quiet decision motion. JS retains row nodes and supplies the FLIP offsets. */
.bf-rc-body { position: relative; }
.bf-rc-row-moving, .bf-rc-row-folding { transition: transform 200ms ease-out, opacity 200ms ease-out; }
.bf-rc-row-folding { position: absolute; pointer-events: none; }
.bf-rc-row-leaving, .bf-rc-row-entering { box-sizing: border-box; min-height: 0; overflow: hidden; transition: opacity 200ms ease-out, max-height 200ms ease-out; }
.bf-rc-row-leaving { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .bf-rc-row-moving, .bf-rc-row-folding, .bf-rc-row-leaving, .bf-rc-row-entering { transition: none; }
}
.bf-rc-newrow { border-left: 2px solid var(--bf-gold); padding-left: 10px; margin-left: -12px; }
.bf-rc-rowmain { min-width: 0; }
/* §20.3a: the suggestions under the search (a listbox in three groups) and the chips above the list. */
.bf-rc-addtools { position: relative; }
.bf-rc-addsuggest { position: relative; }
.bf-rc-suggest { position: absolute; right: 0; top: -6px; z-index: 20; width: min(420px, 100%); max-height: 360px; overflow: auto; padding: 6px 0; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface); box-shadow: var(--bf-shadow-pop); }
.bf-rc-suggest-group { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bf-slate); }
.bf-rc-suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; font-size: 13px; color: var(--bf-ink); cursor: pointer; }
.bf-rc-suggest-row:hover, .bf-rc-suggest-on { background: var(--bf-surface-2); }
.bf-rc-addchips { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-rc-addchips:not(:empty) { padding: 10px 0 2px; }
.bf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface-2); font-size: 13px; color: var(--bf-ink); }
.bf-chip-x { border: 0; background: none; padding: 0 4px; font-size: 15px; line-height: 1; color: var(--bf-slate); cursor: pointer; }
.bf-chip-x:hover { color: var(--bf-ink); }
.bf-rc-empty-hint { display: block; margin-top: 4px; color: var(--bf-slate); }
.bf-rc-empty-hint .bf-btn-link { margin-left: 6px; }
.bf-rc-rowtitle { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--bf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-rc-row.bf-rc-row-confirmed .bf-rc-rowtitle { color: var(--bf-slate); font-weight: 500; }
.bf-rc-rowmeta { margin-top: 3px; font-size: 12.5px; color: var(--bf-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-rc-dot { margin: 0 6px; color: var(--bf-stone); }
.bf-rc-also { color: var(--bf-slate); }
.bf-rc-newmark { flex: 0 0 auto; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-gold-deep); font-weight: 700; }
.bf-rc-reason { font-size: 12.5px; color: var(--bf-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* §26: confirmation and removal stay beside each other in both card sizes. */
.bf-rc-decisions { width: 60px; display: inline-flex; align-items: center; gap: 8px; }
.bf-rc-row-wide .bf-rc-decisions { width: 68px; }
.bf-rc-decision { box-sizing: border-box; flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 1.5px solid var(--bf-stone); border-radius: 999px; background: var(--bf-surface); color: var(--bf-slate); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bf-rc-row-wide .bf-rc-decision { width: 30px; height: 30px; }
.bf-rc-decision svg { display: block; }
.bf-rc-confirm:not(.bf-rc-confirm-confirmed):hover:not(:disabled) { border-color: var(--bf-success); background: #e8f1ea; color: var(--bf-success); }
.bf-rc-not-here:hover:not(:disabled) { border-color: var(--bf-warning); background: var(--bf-warning-soft); color: var(--bf-warning); }
.bf-rc-decision:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-rc-confirm-confirmed { border-color: var(--bf-success); background: var(--bf-success); color: #fff; }
.bf-rc-confirm-undo { display: none; }
/* Mapping requires a recent session confirm; Gap Check owns its own undo. */
.bf-rc-confirm-confirmed:is([data-setup-undo], [data-mapping-action]):hover:not(:disabled) { background: #e8f1ea; color: var(--bf-success); }
.bf-rc-confirm-confirmed:is([data-setup-undo], [data-mapping-action]):hover:not(:disabled) .bf-rc-confirm-check { display: none; }
.bf-rc-confirm-confirmed:is([data-setup-undo], [data-mapping-action]):hover:not(:disabled) .bf-rc-confirm-undo { display: block; }
.bf-rc-confirm-confirmed:is([data-setup-undo], [data-mapping-action]):focus-visible:not(:disabled) { background: #e8f1ea; color: var(--bf-success); }
.bf-rc-confirm-confirmed:is([data-setup-undo], [data-mapping-action]):focus-visible:not(:disabled) .bf-rc-confirm-check { display: none; }
.bf-rc-confirm-confirmed:is([data-setup-undo], [data-mapping-action]):focus-visible:not(:disabled) .bf-rc-confirm-undo { display: block; }
/* A plain confirmed mark keeps the same solid green as an active check. */
.bf-rc-confirm-confirmed[data-setup-tick]:not([data-setup-undo]) { opacity: 1; cursor: default; }

/* The pool's empty marker is descriptive, not a checkbox. */
.bf-rc-cb-none { width: 18px; height: 18px; border: 1.5px dashed var(--bf-stone); border-radius: 4px; background: var(--bf-surface); }
/* The page image, when the document has one. Empty is a frame, not a gap. */
.bf-rc-th { position: relative; width: 34px; height: 44px; overflow: hidden; background: var(--bf-surface-2); border: 1px solid var(--bf-stone); border-radius: 2px; cursor: pointer; }
.bf-rc-th:hover { border-color: var(--bf-gold); box-shadow: 0 0 0 2px var(--bf-gold-soft); }
.bf-rc-th:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }

/* QC uses the same document card row on Respond and Finish. */
.bf-qc-stratum .bf-qc-item { padding: 12px; }
.bf-qc-enter { animation: bf-qc-enter 160ms ease-out; }
@keyframes bf-qc-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .bf-qc-enter { animation: none; } }
.bf-qc-document.bf-rc-row { grid-template-columns: 34px minmax(0, 1fr); border-top: 0; gap: 12px; }
.bf-qc-document .bf-rc-rowmain { grid-column: 2; }
.bf-qc-document .bf-rc-rowtitle { display: block; text-align: left; white-space: normal; overflow-wrap: anywhere; padding: 0; min-height: 24px; }
.bf-qc-document .bf-rc-rowmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; white-space: normal; overflow-wrap: anywhere; }
.bf-qc-request { margin-top: 10px; }
.bf-qc-request .bf-btn-link { font-size: 12px; min-height: 24px; }
.bf-qc-request-body { padding: 8px 12px 0; }
.bf-qc-request .bf-rc-full { color: var(--bf-ink); font-size: 14px; margin: 0; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.bf-qc-request-expanded .bf-rc-full { display: block; -webkit-line-clamp: unset; }
.bf-qc-reason { margin: 8px 0 0; overflow-wrap: anywhere; }
.bf-qc-reason-label { color: var(--bf-ink); font-weight: 500; }
.bf-qc-decisions { margin-top: 12px; gap: 8px; }
.bf-qc-decisions .bf-input { max-width: 420px; }

/* One × per row: it removes the pair, never the document. */
.bf-rc-x { width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--bf-slate); display: inline-flex; align-items: center; justify-content: center; justify-self: end; cursor: pointer; }
.bf-rc-x:hover { border-color: var(--bf-stone); background: var(--bf-surface-2); color: var(--bf-ink); }
.bf-rc-x:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-rc-plus { width: 26px; height: 26px; padding: 0; border: 1.5px solid var(--bf-stone); border-radius: 999px; background: var(--bf-surface); color: var(--bf-slate); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bf-rc-plus:hover { border-color: var(--bf-navy); background: var(--bf-navy); color: #f6f3ec; }
.bf-rc-plus:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }

/* Who is speaking: the engine's brain, or the person's own mark. */
.bf-rc-who { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--bf-slate); white-space: nowrap; }
.bf-rc-who svg { flex: 0 0 auto; }
.bf-rc-who-high { color: var(--bf-success); }
.bf-rc-who-medium { color: var(--bf-warning); }
.bf-rc-who-again { color: var(--bf-warning); }
.bf-rc-who-you { color: var(--bf-ink); }

/* The group eyebrows. Gold for what is new to this visit, slate for the rest. */
.bf-rc-grp { padding: 16px 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--bf-gold-deep); }
.bf-rc-grp.bf-quiet { color: var(--bf-slate); font-weight: 600; }
.bf-rc-more { align-self: flex-start; margin-top: 10px; font-size: 13px; font-weight: 600; }

/* §20.3 — add documents to this request, at the foot of the open card. */
.bf-rc-addarea { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--bf-stone); }
.bf-rc-addhead { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; padding-bottom: 16px; }
.bf-rc-addtitle { font-family: var(--bf-serif); font-size: 23px; font-weight: 600; color: var(--bf-ink); }
.bf-rc-addsub { margin-top: 2px; max-width: 620px; font-size: 13px; color: var(--bf-slate); }
.bf-rc-addtools { display: flex; align-items: center; gap: 12px; }
.bf-rc-addsearch { min-height: 38px; width: min(420px, 46vw); }
.bf-rc-addtype { min-height: 38px; }
.bf-rc-addlikely { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--bf-gold-deep); }
.bf-rc-ar { display: grid; grid-template-columns: 28px 34px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 62px; border-top: 1px solid var(--bf-stone-2); }

/* §20.4 — the pool. No bar, no numeral: a dash, and a count of documents. */
.bf-rc-pool .bf-rc-no { color: rgba(246, 243, 236, .6); }
/* ux-mapping-sets §5.1: two tones and an amber tick per exception. */
.bf-rc-bar-2 { position: relative; }
.bf-rc-bar-open { background: var(--bf-stone-2); }
.bf-rc-bar-tick { position: absolute; top: 0; width: 3px; height: 6px; background: var(--bf-warning); }
.bf-rc-count-rule i, .bf-rc-count-ai i, .bf-rc-count-exc i, .bf-rc-count-dec i { display: inline-block; width: 7px; height: 7px; border-radius: 999px; }
.bf-rc-count-rule i { background: var(--bf-slate); }
.bf-rc-count-ai i { background: var(--bf-info); }
.bf-rc-count-exc i, .bf-rc-count-dec i { background: var(--bf-warning); }
.bf-rc-fact { margin-top: 3px; font-size: 13px; color: var(--bf-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-rc-sw { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--bf-stone); vertical-align: -1px; }

/* §5.5 Confirm by kind: one verb, then the sheet that names each confirm. */
.bf-map-bykind { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; position: relative; }
.bf-map-tally { font-size: 13px; color: var(--bf-slate); }
/* A read that failed says so, and offers the one way back. */
.bf-map-failed { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bf-map-kinds { flex: 0 0 100%; max-width: 560px; margin-top: 10px; padding: 14px 16px; background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); }
.bf-map-kinds-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--bf-stone-2); }
.bf-map-kinds-s { font-size: 13px; line-height: 1.45; color: var(--bf-slate); }
.bf-map-kind { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: start; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--bf-stone-2); }
.bf-map-kind-n { font-size: 14px; font-weight: 600; color: var(--bf-ink); }
.bf-map-kind-s { font-weight: 400; color: var(--bf-slate); }
.bf-map-kind-e { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 13px; color: var(--bf-warning); }
.bf-map-kind-preview { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding: 8px 10px; font-size: 13px; color: var(--bf-ink); background: var(--bf-surface-2); border: 1px solid var(--bf-stone-2); border-radius: var(--bf-radius); }
.bf-map-kind-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bf-map-kind-act { font-size: 13px; white-space: nowrap; }

/* §5.4 the open card's sub-groups, and §5.6 the docked card beside it. */
.bf-rc-geh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bf-rc-geh-act { font-size: 13px; white-space: nowrap; }
.bf-rc-grp-warn { color: var(--bf-warning); }
.bf-rc-preview { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; padding: 8px 10px; font-size: 13px; color: var(--bf-ink); background: var(--bf-surface-2); border: 1px solid var(--bf-stone-2); border-radius: var(--bf-radius); }
.bf-rc-preview-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bf-rc-exc { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 13px; color: var(--bf-warning); }
.bf-rc-exc-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--bf-warning); flex: 0 0 auto; }
.bf-rc-wideholder { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 24px; align-items: start; grid-column: 1 / -1; }
/* The open card spans the whole grid it sits in — but inside this wrapper it
   is one of two columns, and keeping `1 / -1` pushed the docked card onto a
   row of its own below the card it describes. */
.bf-rc-wideholder > .bf-rc-wide { grid-column: 1; }
/* No docked card: one column, and the card has it all. */
.bf-rc-wideholder-solo { grid-template-columns: minmax(0, 1fr); }
.bf-rc-wideholder-solo > .bf-rc-wide { grid-column: 1 / -1; }
.bf-rc-dock { grid-column: 2; position: sticky; top: 72px; }

@media (max-width: 1279.98px) {
  .bf-rc-wideholder { grid-template-columns: minmax(0, 1fr); }
  .bf-rc-wideholder > .bf-rc-wide { grid-column: 1 / -1; }
  .bf-rc-dock { display: none; }
}

.bf-rc-pool .bf-rc-bar { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .bf-rc, .bf-rc-th { transition: none; }
}
.bf-rc-addlist { display: flex; flex-direction: column; }

/* r7 (Michael, 2026-09-04: "stepper text + design should be bigger?") — the
   strip is the spine of setup and read like a footnote: 11 px dots on a
   2 px line under 13 px names. Everything scales one notch; the geometry
   (dot centre on the track, fill on the track) moves with it. */
/* The band reserves the current step's count line, so Sorting's "103 of 103" does not push the page
   down when it appears. */
.bf-setup-strip { min-height: 104px; margin-top: 26px; padding: 6px 0 14px; align-items: flex-start; }
.bf-stage-rail-setup .bf-stage { gap: 12px; }
/* The control is the whole column, not the dot and the word: a 21 px dot is a small thing to hit and
   the people using this are not aiming with a stylus. `align-self: stretch` fills the step's cell; the
   dot and the name stay centred inside it. */
.bf-stage-rail-setup .bf-stage-go { appearance: none; min-width: 0; align-self: stretch; margin: 0; padding: 0; border: 0; border-radius: var(--bf-radius); background: transparent; color: inherit; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; }
.bf-stage-rail-setup .bf-stage-current, .bf-stage-rail-setup .bf-stage-unreachable { cursor: default; }
.bf-stage-rail-setup .bf-stage-go:hover .bf-stage-name,
.bf-stage-rail-setup .bf-stage-go:focus-visible .bf-stage-name { color: var(--bf-ink); }
.bf-stage-rail-setup .bf-stage-later .bf-stage-go:hover .bf-stage-dot,
.bf-stage-rail-setup .bf-stage-later .bf-stage-go:focus-visible .bf-stage-dot { border-color: var(--bf-navy); }
.bf-stage-rail-setup .bf-stage-open .bf-stage-go:hover .bf-stage-dot,
.bf-stage-rail-setup .bf-stage-open .bf-stage-go:focus-visible .bf-stage-dot { border-color: var(--bf-warning); }
.bf-stage-rail-setup .bf-stage-go:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: 3px; }
/* Pressing a step must neither move it nor re-layer it. The legacy template presses every button in the
   app with `transform: scale(.97)` (its "tactile feedback" rule). A transform makes the button a stacking
   context: the dot's z-index is then scoped inside it, and the connector after the step — a later
   sibling of the button — paints over the dot for as long as the mouse is down. The mouse-up lands on
   the connector, the click resolves to the <li>, and the button never hears it. Michael, 2026-09-05:
   "when I click the blue checkmark I can see the gold bar go on top of it", "usually a delay". */
.bf-stage-rail-setup .bf-stage-go:active { transform: none; }
.bf-stage-rail-setup .bf-stage-go:active .bf-stage-name { color: var(--bf-ink); }
/* The dot is one box: a 21 px disc whose ring is its own 1.5 px border. It was an 18 px disc under a
   1.5 px spread shadow of the same colour, and the two anti-aliased edges met in a faint lighter seam
   inside every navy tick (Michael's Safari screenshot, 2026-09-05). A border and its background are
   painted as one box, so there is nothing to meet. The ground halo and the current step's gold ring
   stay shadows: they sit against the border, never against a same-colour edge.
   No colour/ring transition either: while a tick faded to gold the track showed through the halo across
   the check mark (Michael, 2026-09-04). The dot switches at once; the ring's motion is the breathing
   shadow. */
/* The tick: a 12-unit SVG, path M2.6 6.3 l2.6 2.6 4.4-5.2, stroke 2.1 with round caps and joins, black
   (the mask reads alpha, the colour is the pseudo-element's background). Base64 because the CSS is
   scanned for class selectors and a plain SVG namespace URL would read as two of them. */
.bf-stage-rail-setup { --bf-stage-tick: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMiAxMic+PHBhdGggZD0nTTIuNiA2LjNsMi42IDIuNiA0LjQtNS4yJyBmaWxsPSdub25lJyBzdHJva2U9JyMwMDAnIHN0cm9rZS13aWR0aD0nMi4xJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48L3N2Zz4="); }
.bf-stage-rail-setup .bf-stage-dot { width: 21px; height: 21px; background: var(--bf-stone-2); border: 1.5px solid var(--bf-stone); box-shadow: 0 0 0 5px var(--bf-ground); transition: none; }
.bf-stage-rail-setup .bf-stage-later .bf-stage-dot { background: var(--bf-stone-2); border-color: var(--bf-stone); box-shadow: 0 0 0 5px var(--bf-ground); }
.bf-stage-rail-setup .bf-stage-done .bf-stage-dot { background: var(--bf-navy); border-color: var(--bf-navy); box-shadow: 0 0 0 5px var(--bf-ground); }
.bf-stage-rail-setup .bf-stage-current .bf-stage-dot { background: var(--bf-gold); border-color: var(--bf-navy); box-shadow: 0 0 0 5px var(--bf-ground), 0 0 0 7.5px var(--bf-gold); }
.bf-stage-rail-setup .bf-stage-open .bf-stage-dot { background: var(--bf-surface); border-color: var(--bf-warning); box-shadow: 0 0 0 5px var(--bf-ground); }
/* An open step's dot stays a hollow amber ring. When the open work is the machine's (a sort still
   running behind the person), a short amber arc turns inside it — "something's happening" (Michael,
   2026-09-05) — without the gold pulse, which stays reserved for the step they stand on. */
.bf-stage-rail-setup .bf-stage-open .bf-stage-dot::after { content: none; }
.bf-stage-rail-setup .bf-stage-open.bf-stage-busy .bf-stage-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 999px; border: 2px solid transparent; border-top-color: var(--bf-warning); border-right-color: var(--bf-warning); animation: bf-stage-spin 1.1s linear infinite; }
@keyframes bf-stage-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bf-stage-rail-setup .bf-stage-open.bf-stage-busy .bf-stage-dot::after { animation: none; } }
.bf-stage-rail-setup .bf-stage-open .bf-stage-count { color: var(--bf-warning); }
/* The tick is a stroked path masked onto a box that fills the dot, so `center` centres it — in every
   browser, at any dot size. The rotated-border trick it replaces (a 5 × 9 box turned 45°) carried the
   mark's weight right and low of the centre: "the checkmark is offset" (Michael, 2026-09-05). */
.bf-stage-rail-setup .bf-stage-done .bf-stage-dot::after { content: ''; position: absolute; inset: 0; background: #f6f3ec; -webkit-mask: var(--bf-stage-tick) center / 13px 13px no-repeat; mask: var(--bf-stage-tick) center / 13px 13px no-repeat; }
/* The current step breathes — slowly, always — so the eye finds "you are
   here" without reading; the faster gold pulse stays reserved for live work. */
/* The breathing ring is the dot's own shadow, animated in spread — never a positioned pseudo-element,
   which sat off-centre on Michael's machine (2026-09-05). Shadows have no position to get wrong. */
.bf-stage-rail-setup .bf-stage-current .bf-stage-dot:not(.bf-stage-live)::before { content: none; }
.bf-stage-rail-setup .bf-stage-current .bf-stage-dot:not(.bf-stage-live) { animation: bf-stage-breathe 2.4s ease-in-out infinite; }
@keyframes bf-stage-breathe {
  0%, 100% { box-shadow: 0 0 0 5px var(--bf-ground), 0 0 0 7.5px var(--bf-gold), 0 0 0 7.5px rgba(184, 160, 106, 0); }
  50% { box-shadow: 0 0 0 5px var(--bf-ground), 0 0 0 7.5px var(--bf-gold), 0 0 0 11.5px rgba(184, 160, 106, .28); }
}
@media (prefers-reduced-motion: reduce) { .bf-stage-rail-setup .bf-stage-current .bf-stage-dot:not(.bf-stage-live) { animation: none; } }
/* Finish at 4/4 stays the current step semantically; its dot becomes the success tick the artboard
   shows instead of pretending the person left it. After the breathe rule so `animation: none` holds. */
.bf-stage-rail-setup [data-stage="done"][data-stage-progress="1"] .bf-stage-dot { background: var(--bf-ground); border-color: var(--bf-success); box-shadow: 0 0 0 5px var(--bf-ground); animation: none; }
.bf-stage-rail-setup [data-stage="done"][data-stage-progress="1"] .bf-stage-dot::after { content: ''; position: absolute; inset: 0; background: var(--bf-success); -webkit-mask: var(--bf-stage-tick) center / 13px 13px no-repeat; mask: var(--bf-stage-tick) center / 13px 13px no-repeat; }
/* The track and the fill run through the centre of the dot: 21 px dot, 3 px line, so the line starts
   at 9 px. (It started at 8 px under an 18 px dot — half a pixel low, one device pixel on a Retina
   screen, and the dots read as sitting a hair above their line.) */
.bf-stage-rail-setup .bf-stage-list::before { top: 9px; height: 3px; background: var(--bf-stone-2); }
.bf-stage-rail-setup .bf-stage-fill { top: 9px; height: 3px; }
.bf-stage-rail-setup .bf-stage-name { font-size: 15px; }
.bf-stage-rail-setup .bf-stage-current .bf-stage-name { font-size: 15px; }
.bf-stage-rail-setup .bf-stage-count { font-size: 14px; }
.bf-stage-why { font-size: 12.5px; color: var(--bf-slate); opacity: .8; }
.bf-stage-rail-setup .bf-stage-dot.bf-stage-live::before { inset: -7px; }

/* Party tracks, §31: the hub is the case's two parties; each track is one job. */
.bf-party-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.bf-party-line .bf-btn-link { font-size: 13px; padding: 0; min-height: 26px; }
.bf-party-line [data-party-hub] { color: var(--bf-slate); font-weight: 500; }
.bf-party-divider { width: 1px; height: 14px; background: var(--bf-stone); align-self: center; }
.bf-party-identity { color: var(--bf-slate); font-size: 13px; line-height: 1.2; }
.bf-party-name { font-family: var(--bf-serif); font-size: 22px; font-weight: 600; color: var(--bf-ink); }
.bf-party-line [data-party-switch] { margin-left: auto; }
.bf-party-kicker { color: var(--bf-gold-deep); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.bf-party-demand-door { width: 100%; max-width: 640px; margin: 0 auto; }
.bf-party-demand-door .bf-party-kicker { margin-bottom: 6px; }
.bf-party-demand-note { margin: 12px 0 0; color: var(--bf-slate); font-size: 13.5px; text-align: center; }
.bf-party-demand-note .bf-btn-link { padding: 0; font-size: inherit; min-height: 0; }
.bf-party-columns { display: grid; grid-template-columns: 1.35fr .65fr; gap: 32px; align-items: start; }
.bf-party-columns .bf-door-empty .bf-door-body { min-height: 300px; }
.bf-receipt-col { min-width: 0; border-top: 1px solid var(--bf-stone-2); padding-top: 18px; }
.bf-party-eyebrow { color: var(--bf-slate); font-size: 12.5px; font-weight: 500; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
.bf-party-receipt-file { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.bf-party-receipt-file svg { width: 22px; height: 28px; color: var(--bf-gold); flex: none; }
.bf-party-receipt-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.bf-party-receipt-count { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 16px; }
.bf-receipt-col .bf-door-req { grid-template-columns: 26px minmax(0, 1fr); gap: 0; padding: 8px 0; }
.bf-receipt-col .bf-door-req-text { white-space: normal; }
.bf-receipt-col > .bf-btn-link { font-size: 13px; margin-top: 14px; padding: 0; }
.bf-hub-work { gap: 10px; }
.bf-hub-work .bf-setup-band { background: transparent; border: 0; border-top: 1px solid var(--bf-stone-2); border-bottom: 1px solid var(--bf-stone-2); border-radius: 0; }
.bf-hub-work .bf-setup-band-cell { padding: 10px 18px; }
.bf-bandline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--bf-slate); font-size: 13px; }
.bf-hub-client-line { margin-bottom: 4px; color: var(--bf-ink); font-size: 14px; line-height: 1.4; }
.bf-hub-client-line > .bf-btn-link { margin-left: auto; white-space: nowrap; padding: 0; font-size: 13px; }
.bf-hub-signing-as { flex-basis: 100%; font-size: 13px; color: var(--bf-slate); overflow-wrap: anywhere; }
.bf-hub-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.bf-hub-door { display: flex; flex-direction: column; min-width: 0; min-height: 400px; padding: 24px 28px 20px; background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); }
.bf-hub-name { font-family: var(--bf-serif); font-size: 30px; font-weight: 600; line-height: 1.1; margin: 6px 0 0; color: var(--bf-ink); }
.bf-hub-caption { font-size: 14px; color: var(--bf-slate); margin: 4px 0 0; line-height: 1.5; }
.bf-hub-rows { margin-top: 18px; border-top: 1px solid var(--bf-stone-2); }
.bf-hub-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--bf-stone-2); }
.bf-hub-row-title { font-size: 14px; font-weight: 600; line-height: 1.25; }
.bf-hub-row-sub { font-size: 13px; color: var(--bf-slate); line-height: 1.35; }
.bf-hub-row-link { font-size: 13px; padding: 0; min-height: 24px; margin-left: 10px; white-space: nowrap; }
.bf-hub-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bf-stone); }
.bf-hub-dot-success { background: var(--bf-success); }
.bf-hub-dot-warning { background: var(--bf-warning); }
.bf-hub-dot-live { background: #3a5da8; animation: bf-party-pulse 1.6s ease-in-out infinite; }
.bf-hub-path { margin: 14px 0 0; color: var(--bf-slate); font-size: 13px; line-height: 1.45; }
.bf-hub-door-foot { margin-top: auto; padding-top: 16px; }
.bf-hub-door-foot .bf-btn-ghost { background: var(--bf-surface); border-color: var(--bf-stone); color: var(--bf-ink); }
.bf-party-page-tiles { display: flex; align-items: center; gap: 8px; }
.bf-hub-row .bf-party-page-tiles { grid-column: 2 / -1; margin-top: 12px; }
.bf-party-page-tile { position: relative; display: block; flex: 0 0 auto; width: 52px; height: 68px; border: 1px solid var(--bf-stone); border-radius: 3px; overflow: hidden; background: var(--bf-surface-2); }
.bf-party-page-tile:not(:has(.bf-loaded))::before { content: ''; position: absolute; inset: 8px; background: repeating-linear-gradient(transparent 0 5px, var(--bf-stone-2) 5px 7px); animation: bf-skeleton 1.4s ease-in-out infinite; }
.bf-hub-page-more { font-size: 13px; color: var(--bf-slate); }
.bf-hub-hint { color: var(--bf-gold-deep); font-size: 13px; }
.bf-hub-firm-line { margin: 8px 0 0; font-size: 13px; color: var(--bf-slate); }
.bf-hub-firm-line .bf-btn-link { font-size: inherit; padding: 0; min-height: 0; }
.bf-gap-setup-work > .bf-body { padding: 0; }
@keyframes bf-party-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 900px) {
  .bf-hub-doors, .bf-party-columns { grid-template-columns: minmax(0, 1fr); }
  .bf-party-line [data-party-switch] { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-hub-dot-live, .bf-party-page-tile::before { animation: none; }
}

/* PT3: Documents is the party ledger, during setup and after release. */
.bf-ledger-tab { box-sizing: border-box; padding: 28px var(--bf-workspace-gutter); width: 100%; max-width: var(--bf-workspace-max); margin-inline: auto; }
.bf-ledger-tab > .bf-setup { margin-inline: auto; }
@media (max-width: 900px) { .bf-ledger-tab { padding-inline: 24px; } }
.bf-ledger-page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.bf-ledger-page-head h1 { margin: 0; }
.bf-setup-lede:has(+ .bf-ledger-work [data-ledger-review]) { margin-bottom: 8px; }
.bf-ledger-work > [data-ledger-bands]:empty, .bf-ledger-work > [data-setup-upload-note]:empty { display: none; }
.bf-ledger-foot { display: flex; align-items: center; gap: 12px; }
.bf-ledger-foot .bf-inv-totals { margin-right: auto; }
.bf-ledger-foot-missing { font-size: 13px; color: var(--bf-ink); display: inline-flex; align-items: center; gap: 7px; }
.bf-ledger-foot-missing::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bf-warning); }
.bf-ledger-foot-missing[hidden] { display: none; }
/* The totals and Continue stay on the bottom edge of the screen. Short
   Documents or Mapping lists must not pull the bar up with the content. */
#page-setup.page-section.active:has(#setup-content[data-setup-step="documents"]),
#page-setup.page-section.active:has(#setup-content[data-setup-step="match"]) {
  min-height: calc(100dvh - 3.5rem);
  display: flex;
  flex-direction: column;
}
#page-setup .bf-body:has(#setup-content[data-setup-step="documents"]),
#page-setup .bf-body:has(#setup-content[data-setup-step="match"]) {
  flex: 1 1 auto;
  padding-bottom: 0;
}
#setup-content[data-setup-step="documents"],
#setup-content[data-setup-step="match"] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#setup-content[data-setup-step="documents"] > .bf-ledger-work,
#setup-content[data-setup-step="match"] > .bf-setup-work { flex: 1 1 auto; }
#setup-content[data-setup-step="documents"] > .bf-page-foot,
#setup-content[data-setup-step="match"] > .bf-page-foot {
  margin-top: auto;
  position: sticky;
  bottom: 0;
}
/* Gap uses the same bottom-edge bar on every tab, however short the list
   (Michael, 2026-10-01): the four Documents/Mapping rules, for the gap step. */
#page-setup.page-section.active:has(#setup-content[data-setup-step="gap"]) { min-height: calc(100dvh - 3.5rem); display: flex; flex-direction: column; }
#page-setup .bf-body:has(#setup-content[data-setup-step="gap"]) { flex: 1 1 auto; padding-bottom: 0; }
#setup-content[data-setup-step="gap"] { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#setup-content[data-setup-step="gap"] > .bf-setup-work { flex: 1 1 auto; }
#setup-content[data-setup-step="gap"] > .bf-page-foot { margin-top: auto; position: sticky; bottom: 0; }
/* Round 15 (R43): on the Gap page nothing scrolled into view - keyboard focus,
   an opened editor - lands under the fixed top bar (56px) or the sticky footer
   (about 65px); the scroll root keeps both heights clear, with a little air. */
html:has(#setup-content[data-setup-step="gap"]), html:has(#page-reconciliation.active) { scroll-padding-top: 72px; scroll-padding-bottom: 88px; }
/* Round 6: beside "‹ Back to gap overview", the open report's date in quiet slate. */
.bf-gap-foot-note { color: var(--bf-slate); font-size: 13px; line-height: 1.4; white-space: nowrap; }
.bf-gap-foot-note[hidden] { display: none; }
/* Round 9 (R23): on a report the footer's back control is hidden; the crumb above the heading is the way back. */
.bf-setup-foot > [data-setup-back][hidden] { display: none; }
.bf-live-band { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 46px; align-items: center; margin: 18px 0 22px; }
.bf-live-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; }
.bf-live-page { display: block; width: 96px; aspect-ratio: 8.5 / 11; position: relative; overflow: hidden; border: 1px solid var(--bf-stone); border-radius: 3px; background: var(--bf-surface); cursor: pointer; }
.bf-live-page img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 180ms; }
.bf-live-page img.bf-loaded { opacity: 1; }
.bf-live-page:not(:has(img.bf-loaded)):not(.bf-live-unready)::before { content: ''; position: absolute; inset: 12px; background: repeating-linear-gradient(transparent 0 8px, var(--bf-stone-2) 8px 10px); animation: bf-live-pulse 1.4s infinite; }
.bf-live-scan { position: absolute; left: 0; right: 0; height: 22px; background: linear-gradient(transparent, rgba(184,160,106,.28), transparent); animation: bf-live-scan 2.2s linear infinite; }
.bf-live-what { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bf-live-eyebrow { color: var(--bf-gold-deep); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; }
.bf-live-name { font-family: var(--bf-mono); font-size: 13px; overflow-wrap: anywhere; }
.bf-live-result { font-size: 15px; font-weight: 600; }
.bf-live-count { font-family: var(--bf-serif); font-size: 32px; font-weight: 600; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
.bf-live-types { color: var(--bf-slate); font-size: 13px; margin-top: 12px; }
.bf-live-progress { height: 2px; background: var(--bf-stone-2); margin-top: 16px; }
.bf-live-progress > span { display: block; height: 2px; background: var(--bf-gold); transition: width 240ms; }
.bf-upload-band { width: min(860px, 100%); margin: 0 0 22px; }
.bf-upload-count { color: var(--bf-ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bf-upload-file { color: var(--bf-slate); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; margin-top: 4px; }
.bf-upload-file:empty { display: none; }
.bf-upload-band .bf-live-progress { margin-top: 12px; }
.bf-upload-band .bf-live-progress[hidden] { display: none; }
.bf-upload-counts { color: var(--bf-slate); font-size: 13px; line-height: 1.4; margin-top: 8px; }
.bf-upload-counts:empty { display: none; }
.bf-reading-detail { display: flex; flex-direction: column; gap: 7px; margin-top: 3px; }
.bf-reading-detail[hidden] { display: none; }
.bf-reading-progress { display: block; height: 4px; width: min(280px, 100%); background: var(--bf-stone-2); overflow: hidden; border-radius: 2px; }
.bf-reading-progress > span { display: block; height: 100%; background: var(--bf-gold); }
.bf-reading-indeterminate > span { width: 35%; animation: bf-reading-wait 1.6s ease-in-out infinite alternate; }
@keyframes bf-reading-wait { from { transform: translateX(-50%); } to { transform: translateX(240%); } }
@media (prefers-reduced-motion: reduce) { .bf-reading-indeterminate > span { animation: none; } }
.bf-live-leaving { opacity: 0; transition: opacity 180ms; }
.bf-review-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bf-slate); }
.bf-review-note .bf-btn-link { font-size: inherit; }
.bf-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3a5da8; animation: bf-live-pulse 1.6s infinite; margin-right: 8px; }
/* Reading group header (2026-10-03): words + a thin determinate rule along its
   foot. The rule sits absolutely so determinate and sweeping take the same
   height, and the header is no taller than any other type head. */
.bf-ledger-reading > .bf-ledger-reading-head { position: relative; grid-template-columns: 14px minmax(0, 1fr); column-gap: 6px; cursor: default; font-variant-numeric: tabular-nums; }
.bf-ledger-reading-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bf-stone-2); overflow: hidden; }
.bf-ledger-reading-bar > span { display: block; height: 100%; width: 0; background: var(--bf-gold); transition: width 600ms cubic-bezier(.2, .7, .2, 1); }
.bf-ledger-reading-indeterminate > span { width: 30%; animation: bf-ledger-reading-sweep 1.8s ease-in-out infinite; animation-delay: var(--bf-reading-sweep-delay, 0ms); }
@keyframes bf-ledger-reading-sweep { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
/* A small arc on a faint ring, turning once every 1.2 s. The JS puts each new
   icon on the page's clock so a rebuilt group never snaps it back to the top. */
.bf-ledger-reading-icon { box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(184, 160, 106, .3); border-top-color: var(--bf-gold-deep); justify-self: center; animation: bf-ledger-reading-turn 1.2s linear infinite; animation-delay: var(--bf-reading-turn-delay, 0ms); }
@keyframes bf-ledger-reading-turn { to { transform: rotate(360deg); } }
.bf-ledger-reading-leaving .bf-ledger-reading-icon { animation: none; border-color: var(--bf-gold-deep); transition: border-color 300ms; }
@media (prefers-reduced-motion: reduce) { .bf-ledger-reading-bar > span { transition: none; } .bf-ledger-reading-indeterminate > span { animation: none; width: 100%; opacity: .35; } .bf-ledger-reading-icon { animation: none; } }
p.bf-setup-live:not([data-setup-live]):not(.bf-map-none) { display: flex; align-items: center; gap: 10px; }
p.bf-setup-live:not([data-setup-live]):not(.bf-map-none)::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--bf-gold-deep); flex: 0 0 auto; background: radial-gradient(circle, var(--bf-gold-deep) 0 3px, transparent 3.5px); animation: bf-thought-breathe 1.6s ease-in-out infinite; }
@keyframes bf-thought-breathe { 0%, 100% { transform: scale(.86); opacity: .55; } 50% { transform: scale(1); opacity: 1; } }
.bf-ledger-reading { color: var(--bf-slate); }
.bf-ledger-reading .bf-ledger-file { color: var(--bf-slate); }
.bf-ledger-reading .bf-ledger-conf { display: flex; align-items: center; color: var(--bf-slate); }
.bf-ledger-reading .bf-ledger-conf .bf-live-dot { background: var(--bf-gold); width: 7px; height: 7px; animation-delay: var(--bf-reading-breathe-delay, 0ms); }
.bf-hub-inventory { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--bf-stone); margin-top: 22px; min-height: 56px; }
.bf-hub-inventory .bf-inv-export-menu { margin-left: auto; }
.bf-inv-label { color: var(--bf-slate); font-size: 12.5px; letter-spacing: .12em; }
@keyframes bf-live-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes bf-live-scan { from { top: -22px; } to { top: 100%; } }
@media (max-width: 900px) { .bf-live-band { grid-template-columns: 1fr; gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .bf-live-page::before, .bf-live-dot, .bf-live-scan, p.bf-setup-live:not([data-setup-live]):not(.bf-map-none)::before, .bf-toast-fuse, .bf-warm-tip.bf-warm-tip-in { animation: none; } .bf-live-scan { display: none; } .bf-live-leaving, .bf-live-progress > span, .bf-toast, .bf-select-hi, .bf-ledger-sort-hi, .bf-document-view { transition: none; } .bf-toast, .bf-toast.bf-toast-in, .bf-toast.bf-toast-leaving { transform: none; } }

.bf-live-fallback { display: none; }
.bf-live-unready .bf-live-fallback { display: block; font-size: 10px; padding: 8px; }
.bf-live-unready .bf-live-scan { display: none; }
.bf-live-types { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.bf-live-type { max-width: 100%; font-size: 13px; gap: 6px; white-space: normal; }
.bf-live-type > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.bf-ledger-stall { margin-top: 16px; }
.bf-sort-recovery-lines { display: grid; gap: 10px; width: 100%; }
.bf-sort-recovery-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.bf-sort-recovery-message { flex: 1 1 230px; font-weight: 600; }
.bf-sort-recovery-line .bf-btn { min-height: 36px; }
.bf-sort-recovery-error { margin: 0 0 0 19px; color: var(--bf-danger); font-size: 14px; }
.bf-ledger-focus { padding: 10px 12px; border-bottom: 1px solid var(--bf-stone-2); color: var(--bf-warning); font-size: 14px; font-weight: 600; }
.bf-stage-attention { color: var(--bf-warning); font-weight: 600; }

.bf-live-unready img { display: none; }
.bf-ledger-page-head { margin-top: 32px; }
.bf-setup-enter > .bf-ledger-page-head, .bf-setup-enter > .bf-ledger-foot { animation: bf-setup-rise 380ms cubic-bezier(.2, .7, .2, 1) both; }
.bf-setup-enter > .bf-ledger-foot { animation-delay: 200ms; }
@media (prefers-reduced-motion: reduce) { .bf-setup-enter > .bf-ledger-page-head, .bf-setup-enter > .bf-ledger-foot { animation: none; } }

/* Firm category settings: a reviewable draft, with stable document identities. */
.bf-category-editor { --category-border: #e5e1d9; color: #30343b; font-size: 14px; }
.bf-category-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.bf-category-count { color: #69717c; font-size: 12px; }
.bf-category-input { min-width: 0; width: 100%; background: #fff; border: 1px solid #d8d5ce; border-radius: 6px; padding: 9px 11px; font: inherit; color: inherit; }
.bf-category-input:focus { outline: 2px solid #b79a5d; outline-offset: 2px; }
.bf-category-input[aria-invalid="true"] { border-color: #b03e35; }
.bf-category-search { max-width: 230px; font-size: 13px; background: #fbfaf8; }
.bf-category-list { list-style: none; padding: 0; margin: 0; max-height: 420px; overflow-y: auto; border: 1px solid var(--category-border); border-radius: 8px 8px 0 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.bf-category-row { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #eeebe5; }
.bf-category-row:last-child { border-bottom: 0; }
.bf-category-row:hover, .bf-category-row:focus-within { background: #fcfbf8; }
.bf-category-name { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.bf-category-title { overflow-wrap: anywhere; font-weight: 500; }
.bf-category-badge { font-size: 10px; letter-spacing: .02em; color: #846b34; background: #f5efdf; border-radius: 4px; padding: 3px 6px; white-space: nowrap; }
.bf-category-row-actions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.bf-category-action { border: 0; background: transparent; color: #69717c; padding: 7px; border-radius: 4px; font-size: 12px; cursor: pointer; }
.bf-category-action:hover { background: #eeebe5; color: #30343b; }
.bf-category-action:focus-visible, .bf-category-editor button:focus-visible { outline: 2px solid #b79a5d; outline-offset: 2px; }
.bf-category-move { font-size: 17px; line-height: 20px; width: 30px; }
.bf-category-row.bf-category-removed { background: #faf8f5; }
.bf-category-row.bf-category-removed .bf-category-title { text-decoration: line-through; color: #7c8189; }
.bf-category-other { display: flex; gap: 15px; align-items: baseline; background: #f5f3ee; border: 1px solid var(--category-border); border-top: 0; border-radius: 0 0 8px 8px; padding: 13px 15px; font-size: 12px; color: #69717c; }
.bf-category-other strong { font-size: 13px; color: #444a53; font-weight: 500; }
.bf-category-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 16px; }
.bf-category-add .bf-category-validation { grid-column: 1 / -1; }
.bf-category-primary, .bf-category-secondary { padding: 9px 14px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.bf-category-primary { background: #b89a59; border: 1px solid #b89a59; color: #fff; }
.bf-category-primary:hover { background: #9f8141; border-color: #9f8141; }
.bf-category-secondary { border: 1px solid #d8d5ce; background: #fff; color: #49515e; }
.bf-category-secondary:hover { background: #f5f3ee; }
.bf-category-editor button:disabled, .bf-category-editor input:disabled { opacity: .45; cursor: default; }
.bf-category-help { font-size: 12px; line-height: 1.65; color: #727985; margin: 10px 0 16px; }
.bf-category-validation { font-size: 12px; color: #a33c32; margin: 0; }
.bf-category-validation:not(:empty) { margin: 5px 0 10px; }
.bf-category-footer { display: flex; align-items: center; gap: 8px; padding: 14px 0; border-top: 1px solid var(--category-border); }
.bf-category-changes { flex: 1; font-size: 12px; color: #69717c; }
.bf-category-status { margin: 0; font-size: 13px; line-height: 1.5; }
.bf-category-status:not(:empty) { margin: 0 0 12px; }
.bf-category-status.bf-category-success { color: #347151; }
.bf-category-status.bf-category-error { color: #a33c32; }
.bf-category-reset { color: #7a8089; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 0; background: none; border: 0; }
.bf-category-confirm { margin-top: 12px; padding: 16px; background: #f8f5ed; border: 1px solid #e4d9bf; border-radius: 8px; }
.bf-category-confirm strong { font-weight: 600; }
.bf-category-confirm p { font-size: 13px; line-height: 1.6; margin: 8px 0 14px; }
.bf-category-confirm button + button { margin-left: 8px; }
.bf-category-empty { padding: 32px 16px; color: #69717c; text-align: center; }
@media (max-width: 640px) {
  .bf-category-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
  .bf-category-search { max-width: none; }
  .bf-category-row { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  .bf-category-name { flex-basis: 100%; }
  .bf-category-row-actions { margin-left: auto; }
  .bf-category-footer { flex-wrap: wrap; }
  .bf-category-changes { flex-basis: 100%; margin-bottom: 3px; }
  .bf-category-other { flex-direction: column; gap: 3px; }
}

/* Gap Check — request-first review inside the party workspace. */
.bf-gap-setup-head { padding-bottom: 24px; border-bottom: 1px solid var(--bf-stone); }
.bf-gap-overview #recon-report-title::after { display: none !important; }
.bf-gap-setup-head > p { margin: 0; }
.bf-gap-lead { padding-top: 24px; color: var(--bf-ink); font: 600 21px/1.25 var(--bf-serif); }
.bf-gap-state { padding-top: 6px; color: var(--bf-slate); font-size: 15px; }
.bf-gap-state-change { padding-top: 6px; color: var(--bf-slate); font-size: 13px; }
.bf-gap-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding-top: 18px; border-top: 1px solid var(--bf-stone); border-bottom: 1px solid var(--bf-stone); }
.bf-gap-input { min-width: 0; padding: 22px 28px 22px 0; }
.bf-gap-input + .bf-gap-input { padding-left: 28px; border-left: 1px solid var(--bf-stone); }
.bf-gap-input #our-demand-zone { min-height: 96px !important; }
.bf-gap-input .bf-section-head { align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bf-gap-input h2 { margin: 0; font-family: var(--bf-serif); font-size: 24px; line-height: 1.1; font-weight: 600; }
.bf-gap-input > .bf-small { margin: 0 0 14px; }
.bf-gap-input #recon-demand-actions { margin-top: 12px; gap: 10px; }
.bf-gap-input #recon-demand-actions > .bf-meta { flex-basis: 100%; }
.bf-gap-input .bf-gap-facts { grid-template-columns: 1fr auto; }
.bf-gap-input .bf-gap-input-notice { margin: 12px 0 0; padding: 0; border: 0; color: var(--bf-slate); line-height: 1.6; }
.bf-gap-input-notice strong { display: block; margin-bottom: 2px; color: var(--bf-ink); font-weight: 500; }
.bf-gap-input-notice span { display: block; }
.bf-gap-run { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 0 0 24px; }
.bf-gap-run > .bf-small { margin: 0; flex-basis: 100%; }
.bf-gap-run #recon-run-feedback { grid-column: 1 / -1; }
.bf-gap-run #recon-run-feedback:empty { display: none; }
.bf-gap-history { padding-top: 24px; }
.bf-gap-history > .bf-section-head { margin: 0; padding-bottom: 18px; gap: 12px; }
.bf-gap-history h2 { margin: 0; font-family: var(--bf-serif); font-size: 24px; font-weight: 600; line-height: 1.2; }
.bf-gap-history > .bf-small { margin: 20px 0 24px; }
/* Round 5: the headline's row. Export CSV, a quiet link, right beside Download
   at the right of the headline (Michael, 2026-10-01 and 10-02). The row keeps
   one height, the headline's, so the loading line can hold the same slot. */
.bf-gap-headline-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; min-height: 42px; }
.bf-gap-headline-row > h2 { flex: 1 1 auto; min-width: 0; }
/* Round 7: the way back is the breadcrumb above the step's heading — the case
   page's "‹ All cases" (.bf-case-head .bf-crumbs, the same declarations; a test
   keeps them equal). On the overview it shows nothing but keeps its height, so
   the heading does not move between the overview and a report. */
.bf-crumbs.bf-gap-crumbs { min-height: 34px; padding: 0; border: 0; background: transparent; font-size: 13px; color: var(--bf-slate); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; cursor: pointer; }
.bf-gap-crumbs[aria-hidden='true'] { visibility: hidden; }
#setup-content[data-setup-step="gap"] > .bf-gap-crumbs { margin-top: 20px; }
#setup-content[data-setup-step="gap"] > .bf-gap-crumbs + h1 { margin-top: 0; }
.bf-gap-report-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; }
.bf-gap-report-actions .bf-gap-csv { min-height: 34px; display: inline-flex; align-items: center; padding: 0 4px; color: var(--bf-slate); font-weight: 500; text-decoration: none; }
.bf-gap-report-actions .bf-gap-csv:hover { color: var(--bf-ink); text-decoration: underline; text-underline-offset: 3px; }
#gap-report-csv[hidden] { display: none; }
/* Eyebrow, headline, then the control at Mapping's tight gap. The headline
   reserves its one line; the per-tab sentence lives at the top of the list,
   so the header and control are identical on every tab. */
.bf-gap-overview { display: block; margin-bottom: 14px; }
#recon-report-view .bf-gap-overview #recon-report-title { margin: 0; min-height: 1.15em; font-family: var(--bf-serif); font-size: 36px; line-height: 1.15; font-weight: 600; }
/* Round 5: one quiet meta line in place of the eyebrow and the beta line —
   "Report of Oct 2 · Beta — …". The back link left it (round 6;
   round 7 made it the breadcrumb above the step's heading). */
.bf-gap-meta { margin: 0 0 6px; min-height: 1.5em; color: var(--bf-slate); font-size: 14px; line-height: 1.5; }
/* GS U6: one quiet line, no badge: the check is in beta. */
/* Round 2: the entry line while the latest report is found and read. Round 5:
   it holds the headline's slot (the same meta line height above it, the same
   row height), so nothing moves when the report lands. */
.bf-gap-opening-line { margin: 0; color: var(--bf-slate); font-size: 15px; line-height: 1.5; }
.bf-gap-beta { margin: 0 0 6px; color: var(--bf-slate); font-size: 13px; line-height: 1.45; }
.bf-gap-setup-head > .bf-gap-beta { padding-top: 18px; }
.bf-gap-setup-head > .bf-gap-beta + .bf-gap-lead { padding-top: 8px; }
.bf-gap-overview #recon-report-guidance { display: none; }
/* Round 4: an out-of-date reading-facts report says why in one quiet line
   between the eyebrow and the headline, with Check again; while the check
   runs the same line is its progress. Absent when the report is current. */
.bf-gap-stale { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 34px; margin: 0 0 8px; outline: none; }
.bf-gap-stale[hidden] { display: none; }
.bf-gap-stale-cause { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.bf-gap-stale-words { color: var(--bf-ink); font-size: 14px; line-height: 1.45; }
.bf-gap-stale .bf-reading-progress { width: min(200px, 100%); }
.bf-gap-list-lede { margin: 0 0 10px; color: var(--bf-slate); font-size: 14px; line-height: 1.5; }
/* Round 9 (R22): Set aside is one quiet line inside Not placed; Show opens the
   kept-out list in place under it, set off from the documents to place. */
.bf-gap-kept-out { margin: -4px 0 12px; color: var(--bf-slate); font-size: 14px; line-height: 1.5; }
.bf-gap-kept-list { margin: 0 0 20px; padding: 0 0 12px; border-bottom: 1px solid var(--bf-stone); }
.bf-gap-kept-list[hidden] { display: none; }
/* Round 9 (R26): a row's third verb waits under More, shown in place. */
.bf-gap-doc-more-items[hidden], .bf-gap-doc-more[hidden] { display: none; }
[data-gap-more-tucked][hidden] { display: none; }
/* G6: the four groups are the segmented control Mapping uses for its views
   (.bf-document-views). Counts are plain numerals (§9.11), zero is never
   printed, and an empty group is quiet but keeps its place. */
.bf-gap-request-tools { position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
/* "Request 7 moved to Incomplete": laid over the tools row's empty right side,
   so it never moves the control or the list; it fades after a few seconds. */
.bf-gap-moved { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; padding: 6px 12px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface); color: var(--bf-ink); font-size: 13px; box-shadow: var(--bf-shadow-pop); opacity: 1; transition: opacity .4s; pointer-events: none; }
.bf-gap-moved.bf-gap-moved-out { opacity: 0; }
.bf-gap-moved[hidden] { display: none; }
/* Backlog 1 (4 Oct): "Saving match decision…" and the Gap error lines in a reserved
   slot of one text line under the tools row, in normal flow: always present, only
   invisible while empty, so nothing moves and it overlaps nothing at any width. */
.bf-gap-notice { min-height: 20px; margin: -4px 0 8px; color: var(--bf-slate); font-size: 13px; line-height: 20px; }
.bf-gap-notice.bf-gap-notice-idle { visibility: hidden; }
.bf-gap-notice.bf-gap-notice-error { color: var(--bf-ink); }
.bf-gap-notice .bf-btn-link { min-height: 0; padding: 0; font-size: 13px; line-height: 20px; }
.bf-gap-look-reason { max-width: 90ch; margin: 0 0 6px; color: var(--bf-ink); font-size: 14px; line-height: 1.5; }
.bf-gap-unplaced-hint { margin: 6px 0 0; color: var(--bf-slate); font-size: 13px; line-height: 1.5; }
.bf-gap-unplaced-hint .bf-btn-link { min-height: 0; padding: 0 2px; font-size: 13px; }
.bf-gap-request-tools .bf-gap-segments { margin-bottom: 0; }
.bf-gap-segments .bf-document-view { min-height: 40px; }
.bf-gap-segments .bf-document-view-count { padding: 0; border-radius: 0; background: transparent; color: var(--bf-slate); font-size: 13px; font-weight: 500; }
.bf-gap-segments .bf-document-view[aria-pressed='true'] .bf-document-view-count { color: var(--bf-ink); }
.bf-gap-segments .bf-gap-segment-empty, .bf-gap-segments .bf-gap-segment-empty:hover { color: var(--bf-slate); font-weight: 400; cursor: default; opacity: .7; }
/* The hairline before Set aside | Not placed: those two list documents, not requests. */
.bf-gap-segments .bf-gap-segments-rule { flex: 0 0 auto; align-self: stretch; width: 1px; margin: 6px 8px; background: var(--bf-stone); }
/* Request-review anatomy is shared with Mapping (.bf-map-grid / .bf-rc).
   A gap finding stays separate from match confidence and human confirmation. */
.bf-map-waiting { padding: 32px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface); }
.bf-map-waiting h2 { margin: 0 0 10px; font: 600 28px var(--bf-serif); color: var(--bf-navy); }
.bf-map-waiting p { margin: 0; max-width: 65ch; color: var(--bf-slate); line-height: 1.6; }
.bf-gap-results > .bf-banner { margin-bottom: 20px; }
/* G7 — a request row is Mapping's demand band (.bf-mx-dmd, rendered by the
   same setupMappingDemandBandHtml, so the two screens cannot drift). The open
   request expands in place into two columns: What came on the left, in
   Mapping's kind-header and one-line-per-document rows; What is missing on
   the right, with the month grid and the Ask for lines. No hairlines between
   bands: a band is its own edge. */
.bf-gap-group { border: 0; }
.bf-gap-group + .bf-gap-group { margin-top: 12px; }
.bf-gap-request { min-width: 0; border: 0; }
/* Round 3: on the Gap report the whole navy band opens its request (a
   delegated click in the report's script), so all of it shows a pointer. A
   cursor only; the shared band's sizes and colours are Mapping's. */
#recon-gap-content .bf-mx-dmd-head { cursor: pointer; }
.bf-gap-document:focus-visible, .bf-gap-document a:focus-visible, .bf-gap-document button:focus-visible { outline: 2px solid var(--bf-gold-deep); outline-offset: 2px; }
.bf-gap-row-status { display: inline-flex; align-items: center; gap: 7px; color: var(--bf-ink); font-size: 13px; }
.bf-gap-dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--bf-slate); }
.bf-gap-status-danger .bf-gap-dot { background: var(--bf-danger); }
.bf-gap-status-warning .bf-gap-dot { background: var(--bf-warning); }
.bf-gap-status-success .bf-gap-dot { background: var(--bf-success); }
.bf-gap-status-muted .bf-gap-dot { background: var(--bf-slate); }
.bf-gap-open { padding: 10px 0 16px; }
.bf-gap-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
.bf-gap-detail-section { min-width: 0; padding: 8px 0 0; }
.bf-gap-cols > .bf-gap-came-section { padding-right: 28px; }
.bf-gap-cols > .bf-gap-missing-section { padding-left: 28px; border-left: 1px solid var(--bf-stone-2); }
.bf-gap-detail-section h4 { margin: 0 0 6px; color: var(--bf-ink); font: 600 20px/1.2 var(--bf-serif); }
.bf-gap-detail-section > p { margin: 8px 0; font-size: 13px; color: var(--bf-slate); }
.bf-gap-looking-for { margin: 0 0 6px; color: var(--bf-slate); font-size: 13px; line-height: 1.4; }
/* GS U4: what was asked for and did not come, directly under Looking for. */
.bf-gap-nothing-came { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: var(--bf-ink); font-size: 13px; line-height: 1.4; }
/* Fix round 1: a closed Incomplete / Needs a look band says why, before its
   count, in the count's size and colour. The title's column is sized to the
   title first; the phrase takes what is left and ends in an ellipsis (the
   whole phrase is in its title). Narrower, it goes under the title. */
.bf-mx-dmd .bf-gap-band-why { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: rgba(246, 243, 236, .82); text-align: right; }
@media (min-width: 901px) {
  .bf-mx-dmd .bf-mx-dmd-head:has(.bf-gap-band-why) { grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto auto; }
  .bf-mx-dmd .bf-mx-dmd-head:has(.bf-gap-band-why) .bf-gap-band-why { grid-column: 2; }
  .bf-mx-dmd .bf-mx-dmd-head:has(.bf-gap-band-why) .bf-mx-dmd-count { grid-column: 3; }
  .bf-mx-dmd .bf-mx-dmd-head:has(.bf-gap-band-why) .bf-mx-dmd-expand { grid-column: 4; }
  .bf-mx-dmd .bf-mx-dmd-head:has(.bf-gap-band-why):has(.bf-mx-dmd-status) { grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr) auto auto; }
  .bf-mx-dmd .bf-mx-dmd-head:has(.bf-gap-band-why):has(.bf-mx-dmd-status) .bf-gap-band-why { grid-column: 3; }
  .bf-mx-dmd .bf-mx-dmd-head:has(.bf-gap-band-why):has(.bf-mx-dmd-status) .bf-mx-dmd-count { grid-column: 4; }
  .bf-mx-dmd .bf-mx-dmd-head:has(.bf-gap-band-why):has(.bf-mx-dmd-status) .bf-mx-dmd-expand { grid-column: 5; }
}
@media (max-width: 900px) {
  .bf-mx-dmd .bf-gap-band-why { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}
@media (max-width: 390px) {
  .bf-mx-dmd .bf-gap-band-why { grid-row: 3; }
}
.bf-gap-came-section .bf-mx-kind { margin-top: 6px; }
.bf-gap-document { min-width: 0; }
.bf-gap-document-aside { opacity: .6; }
.bf-gap-document:not(.bf-doc-row) .bf-mx-file { cursor: default; }
.bf-gap-document:not(.bf-doc-row) .bf-mx-file:hover { background: transparent; }
/* A long name wraps to a second line rather than truncating (Mapping's row clips). */
.bf-gap-document .bf-mx-file-name { color: var(--bf-ink); text-decoration: none; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.bf-gap-document a.bf-mx-file-name:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A row's sub-line (a copy elsewhere, a set-aside reason): under the name,
   indented to it, small and muted, with its action as small gold text. */
.bf-gap-doc-sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; padding: 0 4px 6px 22px; color: var(--bf-slate); font-size: 13px; line-height: 1.4; }
.bf-gap-doc-sub .bf-btn-link { min-height: 0; padding: 0; font-size: 13px; }
/* Set aside | Not placed: a flat document list in the ledger's width. */
.bf-gap-list { max-width: 860px; }
.bf-gap-list .bf-gap-list-head { margin-top: 14px; }
.bf-gap-list .bf-gap-list-head:first-child { margin-top: 0; }
.bf-gap-doc-ex { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 0 4px 8px 22px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.bf-gap-doc-ex[hidden] { display: none; }
.bf-gap-doc-basis { display: inline-flex; align-items: center; gap: 7px; color: var(--bf-ink); overflow-wrap: anywhere; }
.bf-gap-doc-basis:empty, .bf-gap-doc-decision:empty, .bf-gap-reason:empty { display: none; }
.bf-gap-doc-decision { margin-left: auto; color: var(--bf-slate); }
/* Gap defects 4 Oct, item 2: "Kept here · Undo" — Undo is a text link on the line's own height. */
.bf-gap-doc-decision .bf-btn-link { min-height: 0; padding: 0; font-size: 13px; }
.bf-gap-keep-undo:disabled { cursor: not-allowed; color: var(--bf-slate); opacity: .6; text-decoration: none; }
/* Fix round 1: on a row decided here the verbs give way, on the same line, to "Kept here · Undo". */
.bf-gap-doc-done { color: var(--bf-slate); }
.bf-gap-keep-undo[aria-disabled='true'] { cursor: progress; opacity: .6; }
.bf-gap-doc-actions { display: flex; align-items: baseline; gap: 10px; }
.bf-gap-doc-actions button { min-height: 0; padding: 0; font-size: 13px; }
.bf-gap-doc-actions button[aria-pressed='true'] { color: var(--bf-success); text-decoration: underline; text-underline-offset: 3px; }
/* Round 3: Place on request… / Also answers request… — a quiet text control
   that opens a chooser in place under the row: the filter, the requests in
   their own scroll, Cancel. While the server answers, "Placing…" and the
   indeterminate bar take the chooser's place. */
.bf-gap-doc-place .bf-btn-link, .bf-gap-place-line .bf-btn-link, .bf-gap-place-foot .bf-btn-link { min-height: 0; padding: 0; font-size: 13px; }
.bf-gap-place-open:disabled, .bf-gap-place-undo:disabled { cursor: not-allowed; color: var(--bf-slate); opacity: .6; text-decoration: none; }
.bf-gap-place { display: flex; flex-direction: column; gap: 6px; max-width: 520px; margin: 0 4px 10px 22px; padding: 10px 12px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface); cursor: default; }
.bf-gap-place-filter { width: 100%; }
.bf-gap-place-list { max-height: 264px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.bf-gap-place-option { display: flex; align-items: baseline; gap: 12px; padding: 8px 6px; border-radius: 4px; color: var(--bf-ink); font-size: 14px; line-height: 1.35; cursor: pointer; }
.bf-gap-place-option:hover, .bf-gap-place-option[aria-selected='true'] { background: var(--bf-surface-2); }
.bf-gap-place-num { flex: 0 0 2.4em; text-align: right; font-weight: 600; color: var(--bf-navy); font-variant-numeric: tabular-nums; }
.bf-gap-place-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-gap-place-none { padding: 8px 6px; color: var(--bf-slate); font-size: 13px; }
.bf-gap-place-saving { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 10px 22px; outline: none; }
.bf-gap-place-saving-line { margin: 0; color: var(--bf-slate); font-size: 13px; line-height: 1.5; }
.bf-gap-place-error { margin: 0; padding: 0 4px 8px 22px; color: var(--bf-danger); font-size: 13px; line-height: 1.5; }
/* Round 10 (R29-R32): corrections on the Accounts tab. Quiet text controls on
   the opened account's head and under statement rows; the editors are inline
   forms in the placement chooser's box. */
.bf-gap-acct-tools, .bf-gap-acct-fix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; color: var(--bf-slate); font-size: 13px; line-height: 1.5; }
.bf-gap-acct-tools { margin: 2px 0 0 22px; }
.bf-gap-acct-fix { margin: 2px 0 0; }
.bf-gap-acct-tools .bf-btn-link, .bf-gap-acct-fix .bf-btn-link, .bf-gap-fix-foot .bf-btn-link { min-height: 0; padding: 0; font-size: 13px; }
.bf-gap-acct-tools .bf-btn-link:disabled, .bf-gap-acct-fix .bf-btn-link:disabled { cursor: not-allowed; color: var(--bf-slate); opacity: .6; text-decoration: none; }
.bf-gap-fix { gap: 10px; margin-top: 8px; }
.bf-gap-fix-fields { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.bf-gap-fix-field { display: flex; flex: 1 1 200px; flex-direction: column; gap: 4px; min-width: 0; color: var(--bf-slate); font-size: 13px; }
.bf-gap-fix-field .bf-input { width: 100%; min-width: 0; }
.bf-gap-fix-short { flex: 0 0 120px; }
.bf-gap-fix-foot { display: flex; align-items: center; gap: 16px; }
.bf-gap-fix-foot[hidden] { display: none; }
/* Round 15 (R45): Safari paints today's date in grey in an empty date field;
   at rest an empty one shows nothing, and its label says "Not set". */
.bf-gap-fix input[type='date'][data-empty]:not(:focus)::-webkit-datetime-edit { color: transparent; -webkit-text-fill-color: transparent; }
.bf-gap-fix-unset { margin-left: 6px; color: var(--bf-slate); font-style: italic; }
.bf-gap-fix-unset[hidden] { display: none; }
.bf-gap-fix .bf-gap-place-saving, .bf-gap-fix .bf-gap-place-error { padding: 0; }
.bf-gap-fix-lede { margin: 0; color: var(--bf-slate); font-size: 13px; line-height: 1.5; }
.bf-gap-fix-target { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; }
.bf-gap-fix-target:hover, .bf-gap-fix-target:focus-visible { background: var(--bf-surface-2); }
.bf-gap-fix-target-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.bf-gap-fix-target-meta { color: var(--bf-slate); font-size: 13px; white-space: nowrap; }
.bf-gap-acct-doc .bf-gap-acct-fix { margin-top: -6px; padding: 0 4px 10px 22px; }
.bf-gap-fix-hint { margin: -6px 0 0; padding: 0 4px 10px 22px; color: var(--bf-slate); font-size: 13px; line-height: 1.5; }
.bf-gap-acct-end { display: inline-flex; align-items: baseline; justify-content: flex-end; }
.bf-gap-fix-mark { flex: none; align-self: baseline; margin: 0 0 0 12px; color: var(--bf-slate); font-size: 13px; line-height: 1.5; white-space: nowrap; }
.bf-gap-acct-tools .bf-gap-fix-mark { margin: 0; }
.bf-gap-fix-mark .bf-btn-link { min-height: 0; padding: 0; font-size: 13px; }
/* Gap defects 4 Oct, item 4: a statement moved or assigned from this list keeps its row as one quiet line. */
.bf-gap-moved-row .bf-gap-doc-title { color: var(--bf-slate); }
.bf-gap-moved-line .bf-gap-fix-mark { margin: 0; white-space: normal; }
.bf-gap-doc-sub .bf-gap-fix-hint { margin: 0; padding: 0; }
.bf-gap-no-documents, .bf-gap-nothing-missing { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; color: var(--bf-ink); font-size: 14px; }
.bf-gap-reason { max-width: 90ch; margin: 8px 0 0; color: var(--bf-slate); font-size: 13px; }
/* Ask for: the letter lines, numbered in gold, with one Copy action. */
.bf-gap-ask { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bf-stone-2); }
.bf-gap-ask-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bf-gap-ask-head h5 { margin: 0; color: var(--bf-ink); font: 600 15px/1.4 var(--bf-sans); }
.bf-gap-ask .bf-btn-link-sm { flex: 0 0 auto; font-size: 13px; }
.bf-gap-missing { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: ask; }
.bf-gap-missing li { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 14px; line-height: 1.45; }
.bf-gap-missing li::before { content: counter(ask) '.'; counter-increment: ask; flex: 0 0 auto; min-width: 20px; color: var(--bf-gold-deep); font-weight: 600; font-variant-numeric: tabular-nums; }
.bf-gap-months + .bf-gap-ask { margin-top: 8px; }
/* G6 — statement months as a grid inside What is missing. One block per
   request: the period line and its confirmation, then one row per account
   (name, a summary sentence, the squares grouped by year), the legend, and
   the statements the reader could not settle. A square is 12 px, filled
   navy when the month is produced, hollow on a stone hairline when it is
   not, and half-filled on the diagonal when a statement covers only part
   of the month — fill and shape, not hue, carry the meaning. Year groups
   wrap as a unit, so a 68-month span reads at 1100 wide and at 200 % zoom. */
.bf-gap-months { margin: 0 0 6px; }
.bf-gap-months-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 4px; }
.bf-gap-months-head p { margin: 0; color: var(--bf-slate); font-size: 13px; }
/* The period is a fact line with a quiet Change; the field opens on demand. */
.bf-gap-period { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.bf-gap-period-needed { color: var(--bf-ink); }
.bf-gap-period .bf-gap-period-change { min-height: 0; padding: 0; font-size: 13px; font-weight: 500; color: var(--bf-slate); text-decoration: underline; text-underline-offset: 3px; }
.bf-gap-period .bf-gap-period-change:hover { color: var(--bf-ink); }
.bf-gap-period .bf-gap-period-change[hidden] { display: none; }
.bf-gap-period-edit { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 13px; }
.bf-gap-period-edit[hidden] { display: none; }
.bf-gap-period-edit .bf-gap-period-cancel { min-height: 0; padding: 0; font-size: 13px; }
.bf-gap-months-head .bf-btn-sm { min-height: 32px; }
.bf-gap-months-head .bf-btn-link { margin-left: auto; font-size: 13px; }
.bf-gap-period-confirmed { color: var(--bf-success); font-size: 13px; }
/* Round 2: while a period change is applied — one quiet line and the
   indeterminate bar in place of the account rows, at their height. */
.bf-gap-period-saving { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.bf-gap-period-saving-line { margin: 0; color: var(--bf-slate); font-size: 13px; line-height: 1.5; }
.bf-gap-period-error { flex-basis: 100%; margin: 0; color: var(--bf-danger); font-size: 13px; line-height: 1.5; }
.bf-gap-months-empty { margin: 10px 0; color: var(--bf-slate); font-size: 13px; }
.bf-gap-accounts { display: flex; flex-direction: column; }
.bf-gap-account { position: relative; padding: 12px 0 12px; border-top: 1px solid var(--bf-stone-2); }
.bf-gap-account:first-child { border-top: 0; }
.bf-gap-account-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.bf-gap-account-name { color: var(--bf-ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.bf-gap-account-last4 { font-weight: 500; }
.bf-gap-account-kind { color: var(--bf-slate); font-size: 13px; }
.bf-gap-account-kind::before { content: '\00b7'; margin-right: 6px; }
.bf-gap-account-sum { margin: 2px 0 8px; color: var(--bf-slate); font-size: 13px; line-height: 1.5; }
.bf-gap-mo-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; }
.bf-gap-mo-year { display: grid; grid-template-columns: repeat(12, 12px); gap: 3px; }
.bf-gap-mo-yl { grid-column: 1 / -1; margin-bottom: 1px; color: var(--bf-slate); font-size: 13px; line-height: 1.3; }
.bf-gap-mo { display: block; box-sizing: border-box; width: 12px; height: 12px; border: 1px solid var(--bf-stone); border-radius: 2px; background: var(--bf-surface); color: inherit; text-decoration: none; }
.bf-gap-mo-present { border-color: var(--bf-navy); background: var(--bf-navy); }
.bf-gap-mo-partial { border-color: var(--bf-navy); background: linear-gradient(135deg, var(--bf-navy) 50%, var(--bf-surface) 50%); }
.bf-gap-mo-grid .bf-gap-mo:hover, .bf-gap-mo-grid .bf-gap-mo:focus-visible { outline: 2px solid var(--bf-gold-deep); outline-offset: 1px; }
.bf-gap-mo-grid a.bf-gap-mo { cursor: pointer; }
.bf-gap-mo-tip { position: absolute; z-index: 6; box-sizing: border-box; max-width: 100%; padding: 7px 10px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface); box-shadow: var(--bf-shadow-pop); color: var(--bf-ink); font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.bf-gap-mo-tip[hidden] { display: none; }
.bf-gap-mo-tip b { font-weight: 600; }
.bf-gap-mo-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; color: var(--bf-slate); font-size: 13px; }
.bf-gap-mo-legend span { display: inline-flex; align-items: center; gap: 7px; }
.bf-gap-mo-legend .bf-gap-mo { flex: 0 0 auto; }
.bf-gap-statement { padding: 3px 4px; border-radius: 4px; }
.bf-gap-statement.bf-doc-row { cursor: pointer; }
.bf-gap-statement.bf-doc-row:hover { background: var(--bf-surface-2); }
.bf-gap-statement.bf-doc-row:focus-visible { outline: 2px solid var(--bf-gold-deep); outline-offset: 2px; }
.bf-gap-statement-name { color: var(--bf-ink); font-weight: 500; }
a.bf-gap-statement-name { color: var(--bf-gold-deep); }
.bf-gap-unresolved { padding-top: 14px; }
.bf-gap-unresolved h5 { margin: 0 0 6px; color: var(--bf-ink); font: 600 14px/1.4 var(--bf-sans); }
.bf-gap-unresolved ul { margin: 0; padding-left: 20px; font-size: 13px; }
.bf-gap-unresolved-facts { display: block; color: var(--bf-slate); font-size: 13px; }
/* GS U3 — inside a request an account is one row: name and kind, what is
   missing under them, and a quiet Show months at the right that opens the
   grid under the row in place. */
.bf-gap-account-slim { padding: 8px 0; }
.bf-gap-account-row { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.bf-gap-account-line { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; margin: 0; }
.bf-gap-account-slim .bf-gap-account-sum { flex-basis: 100%; margin: 0; }
.bf-gap-months-toggle { flex: 0 0 auto; min-height: 0; padding: 0; color: var(--bf-slate); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.bf-gap-months-toggle:hover { color: var(--bf-ink); }
.bf-gap-account-months { padding-top: 8px; }
.bf-gap-account-months[hidden] { display: none; }
.bf-gap-unresolved-line { margin: 12px 0 0; color: var(--bf-slate); font-size: 13px; line-height: 1.5; }
.bf-gap-unresolved-line .bf-btn-link { min-height: 0; padding: 0 0 0 4px; font-size: 13px; }
/* GS U2 — Accounts: one set per account in Mapping-by-sets' pattern
   (.bf-ms-set, .bf-ms-head, .bf-ms-open, .bf-ms-rows), with Gap's pieces
   beside it. The head's right side holds one status (round 2); Received and
   Missing open with the account. */
.bf-gap-acct-view { max-width: 860px; }
.bf-gap-acct-period { margin: 0; color: var(--bf-ink); font-size: 15px; line-height: 1.5; }
/* Oct 4, round 2 — the Requested period bar: one card at the top of
   Accounts at reading size. Label | From [date] → To [Present ▾ or a date],
   then one line (what the demand asks, the requests a picked date is for,
   or an error) with its buttons on the right. The line, its error and the
   buttons each keep one reserved cell (hidden = invisible, not gone), so
   the card never changes height while editing or saving. */
.bf-gap-range { box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; row-gap: 6px; margin: 0 0 20px; padding: 14px 20px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: var(--bf-surface); font-size: 15px; }
.bf-gap-range-label { color: var(--bf-ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
.bf-gap-range-static { min-height: 70px; }
.bf-gap-range-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.bf-gap-range-field { display: inline-flex; align-items: center; gap: 10px; }
.bf-gap-range-word { color: var(--bf-slate); font-size: 15px; }
.bf-gap-range-arrow { color: var(--bf-slate); font-size: 15px; }
.bf-gap-range-box { position: relative; display: inline-flex; }
/* One calendar glyph in every browser: Safari's date field has none, and
   Chrome's own (now see-through, still clickable) sits on top of it. A click
   anywhere on the field opens the calendar (showPicker). */
.bf-gap-range .bf-input[type='date'] { height: 40px; padding: 0 40px 0 12px; font-size: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23667380' stroke-width='1%2E4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 7h12M6 2v3M10 2v3'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px 16px; cursor: pointer; }
.bf-gap-range .bf-input[type='date']::-webkit-calendar-picker-indicator { opacity: 0; }
.bf-gap-range-start { width: 280px; }
.bf-gap-range-end { width: 180px; }
.bf-gap-range-mode { width: 180px; font-size: 15px; }
.bf-gap-range-present, .bf-gap-range-endbox { display: inline-flex; align-items: center; gap: 4px; }
.bf-gap-range-present[hidden], .bf-gap-range-endbox[hidden] { display: none; }
/* Empty From: Safari's grey date is hidden and the field says what to pick. */
.bf-gap-range .bf-input[type='date'][data-empty]:not(:focus)::-webkit-datetime-edit { color: transparent; -webkit-text-fill-color: transparent; }
.bf-gap-range-prompt { position: absolute; top: 0; bottom: 0; left: 13px; right: 40px; display: none; align-items: center; gap: 8px; overflow: hidden; color: var(--bf-slate); font-size: 15px; white-space: nowrap; pointer-events: none; }
.bf-gap-range-prompt .bf-gap-dot { background: var(--bf-warning); }
.bf-gap-range-start[data-empty]:not(:focus) + .bf-gap-range-prompt { display: flex; }
.bf-gap-range-end[data-empty]:not(:focus) + .bf-gap-range-prompt { display: flex; }
.bf-gap-range-foot { grid-column: 2; display: flex; align-items: center; gap: 16px; min-height: 40px; }
.bf-gap-range-foot > .bf-gap-range-text { flex: 1 1 auto; }
.bf-gap-range-text { display: grid; min-width: 0; }
.bf-gap-range-text > p { grid-area: 1 / 1; margin: 0; color: var(--bf-slate); font-size: 14px; line-height: 20px; }
.bf-gap-range-text > p[hidden] { display: block; visibility: hidden; }
.bf-gap-range-text strong { color: var(--bf-ink); font-weight: 600; }
.bf-gap-range-text > .bf-gap-range-error { color: var(--bf-danger); }
.bf-gap-range-act { display: flex; flex: none; align-items: center; }
.bf-gap-range-act > [hidden] { display: none; }
.bf-gap-range-actions { display: inline-flex; align-items: center; gap: 12px; }
.bf-gap-range-actions [data-gap-demand-period-save] { min-width: 96px; }
.bf-gap-range .bf-btn-link { min-height: 40px; padding: 0 6px; font-size: 14px; }
.bf-gap-range .bf-gap-range-clear { color: var(--bf-slate); font-weight: 500; }
.bf-gap-range .bf-gap-range-clear:hover { color: var(--bf-ink); }
.bf-gap-range .bf-btn-link:disabled { opacity: .55; cursor: default; text-decoration: none; }
.bf-gap-range .bf-btn-primary[aria-busy="true"]:disabled { opacity: .8; cursor: progress; }
.bf-gap-range .bf-btn-link[aria-busy="true"]:disabled { opacity: 1; cursor: progress; }
.bf-gap-range .bf-input[type='date']:disabled { opacity: .7; }
/* Round 2: a closed account is one row and the whole row is the toggle —
   swatch, title and identity, then one dot and one or two words on the
   right. The status never wraps and never drops under the identity line. */
.bf-gap-acct .bf-ms-head { display: block; }
.bf-gap-acct .bf-ms-open { grid-template-columns: 8px minmax(0, 1fr) auto; width: 100%; }
.bf-gap-acct .bf-gap-acct-head-period { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; }
.bf-gap-acct-head-period .bf-ms-open { grid-template-columns: 8px minmax(0, 1fr); }
.bf-gap-acct-head-period .bf-gap-acct-tools { grid-column: 1 / -1; }
.bf-gap-acct-status-action { padding: 6px 0 0; border: 0; background: transparent; color: var(--bf-gold-deep); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bf-gap-acct-status-action:hover { text-decoration: underline; text-underline-offset: 3px; }
.bf-gap-acct-status-action:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 3px; }
.bf-gap-acct .bf-ms-id { overflow: visible; text-overflow: clip; white-space: normal; }
.bf-gap-acct-status { display: inline-flex; align-items: center; gap: 8px; padding-top: 6px; color: var(--bf-ink); font-size: 14px; line-height: 1.4; white-space: nowrap; }
.bf-gap-acct-status.bf-gap-status-muted { color: var(--bf-slate); }
.bf-gap-acct-quiet { margin-left: 10px; color: var(--bf-slate); font: 400 14px/1.4 var(--bf-sans); }
.bf-gap-acct-id .bf-gap-acct-holder { display: inline-flex; align-items: center; gap: 6px; color: var(--bf-ink); }
/* Round 2: an opened account starts with Received and Missing, two lines at
   14 px, every range, then the requests it was asked under, quiet. */
.bf-gap-acct-ranges { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
.bf-gap-acct-range { margin: 0; color: var(--bf-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bf-gap-acct-word { margin-right: 6px; color: var(--bf-slate); }
.bf-gap-acct-asked { margin: -8px 0 12px; color: var(--bf-slate); font-size: 13px; line-height: 1.5; }
.bf-gap-acct-body > .bf-gap-acct-months { padding-top: 0; border-top: 0; }
.bf-gap-acct-body .bf-gap-mo-legend { margin-top: 8px; }
.bf-gap-acct-h { margin: 14px 0 2px; color: var(--bf-ink); font: 600 15px/1.4 var(--bf-sans); }
.bf-gap-acct-body > .bf-gap-acct-h:first-child { margin-top: 0; }
.bf-gap-acct-src { min-width: 0; color: var(--bf-slate); font-size: 13px; overflow-wrap: anywhere; }
.bf-gap-acct-evidence, .bf-gap-acct-note { margin: 8px 0 0; color: var(--bf-slate); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
/* Fix round 1: notes sit under "Worth a look", three lines, then a quiet toggle. */
.bf-gap-acct-notes .bf-gap-acct-note { margin-top: 2px; }
.bf-gap-acct-note[hidden] { display: none; }
.bf-gap-acct-more { min-height: 0; margin-top: 4px; padding: 0; color: var(--bf-slate); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.bf-gap-acct-more:hover { color: var(--bf-ink); }
.bf-gap-acct-evidence .bf-gap-acct-page { min-height: 0; padding: 0; font-size: 13px; }
.bf-gap-acct-unassigned { margin-top: 18px; }
@media (max-width: 1100px) {
  .bf-gap-inputs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bf-gap-input { padding-right: 0; }
  .bf-gap-input + .bf-gap-input { padding-left: 0; padding-right: 0; border-left: 0; border-top: 1px solid var(--bf-stone); }
}
/* Under 1180 px the two columns would squeeze a document's name to an
   ellipsis, so they stack: What came, then What is missing under a hairline
   (design system §1.7: columns stack below 1100 px effective width). */
@media (max-width: 1180px) {
  .bf-gap-cols { grid-template-columns: minmax(0, 1fr); }
  .bf-gap-cols > .bf-gap-came-section { padding-right: 40px; }
  .bf-gap-cols > .bf-gap-missing-section { margin-top: 16px; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--bf-stone-2); }
}
@media (max-width: 1000px) {
  .bf-gap-overview { gap: 12px; }
  .bf-gap-session { flex-wrap: wrap; }
}
@media (max-width: 650px) {
  .bf-gap-input { padding: 18px 0; }
  .bf-gap-history { padding-top: 18px; }
  .bf-gap-history > .bf-section-head { flex-wrap: wrap; }
  .bf-gap-session-actions { gap: 12px 16px; }
  .bf-gap-session-actions .bf-status { flex-basis: 100%; }
  .bf-gap-run { grid-template-columns: 1fr; }
  .bf-gap-run > .bf-btn { justify-self: start; }
}

/* Concurrent reading work is a list; names yield space to stages and counts. */
.bf-reading-concurrent { display: block; min-width: 0; }
.bf-reading-others { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.bf-reading-others li { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.bf-reading-name { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-reading-other-stage { flex: 0 1 auto; }
.bf-reading-fraction { flex: 0 0 auto; margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bf-reading-more { display: block; margin-top: 4px; }

/* C2 Documents reading panel. The chrome above and ledger below retain their own layout. */
.bf-live-band, .bf-reading-attention-panel { display: block; margin: 18px 0 22px; border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); background: transparent; overflow: hidden; }
.bf-live-body { display: grid; grid-template-columns: 372px minmax(0, 1fr); align-items: stretch; }
.bf-live-tally { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px 26px 20px; border-right: 1px solid var(--bf-stone-2); }
.bf-live-count { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font-size: 16px; color: var(--bf-slate); font-variant-numeric: tabular-nums; }
.bf-live-number { font: 600 58px/.9 var(--bf-serif); color: var(--bf-ink); }
.bf-live-number-wide { font-size: 52px; letter-spacing: -.01em; }
.bf-live-time { font-size: 14px; color: var(--bf-slate); margin-top: -6px; }
.bf-live-time b { color: var(--bf-ink); font-weight: 500; }
.bf-live-time[hidden], .bf-spectrum-ruler[hidden], .bf-reading-split[hidden], .bf-reading-concurrent [hidden] { display: none; }
.bf-live-spectrum.bf-live-progress { position: relative; display: block; max-width: none; width: 100%; height: 14px; margin: 0; overflow: hidden; border-radius: 2px; background: var(--bf-stone-2); }
.bf-spectrum-layer { position: absolute; inset: 0; height: 14px; opacity: 1; transition: opacity 600ms ease; }
.bf-spectrum-cells { display: grid; gap: 2px; }
.bf-spectrum-cell { display: block; min-width: 0; border-radius: 1px; background: var(--bf-stone-2); }
.bf-spectrum-proportional { display: flex; gap: 0; }
.bf-spectrum-band, .bf-spectrum-now, .bf-spectrum-rest { display: block; height: 100%; min-width: 0; }
.bf-spectrum-rest { flex: 1 1 auto; background: var(--bf-stone-2); }
.bf-spectrum-now { background: var(--bf-gold); animation: bf-live-pulse 1.8s ease-in-out infinite; }
.bf-spectrum-outgoing { pointer-events: none; }
.bf-spectrum-faded { opacity: 0; }
.bf-spectrum-ruler { display: flex; justify-content: space-between; margin-top: -9px; font-size: 12px; color: var(--bf-slate); font-variant-numeric: tabular-nums; }
.bf-spectrum-cell.bf-cat-bank, .bf-spectrum-band.bf-cat-bank { background: #3a5da8; }
.bf-spectrum-cell.bf-cat-card, .bf-spectrum-band.bf-cat-card { background: #a87b2f; }
.bf-spectrum-cell.bf-cat-tax, .bf-spectrum-band.bf-cat-tax { background: #2e8a5c; }
.bf-spectrum-cell.bf-cat-retire, .bf-spectrum-band.bf-cat-retire { background: #6b5fa8; }
.bf-spectrum-cell.bf-cat-edu, .bf-spectrum-band.bf-cat-edu { background: #9c5290; }
.bf-spectrum-cell.bf-cat-mortgage, .bf-spectrum-band.bf-cat-mortgage { background: #2b7a8c; }
.bf-spectrum-cell.bf-cat-loan, .bf-spectrum-band.bf-cat-loan { background: #8a6d3b; }
.bf-spectrum-cell.bf-cat-w2, .bf-spectrum-band.bf-cat-w2 { background: #4f8a3e; }
.bf-spectrum-cell.bf-cat-pay, .bf-spectrum-band.bf-cat-pay { background: #5e7c99; }
.bf-spectrum-cell.bf-cat-corr, .bf-spectrum-band.bf-cat-corr { background: #b26a3c; }
.bf-spectrum-cell.bf-cat-brokerage, .bf-spectrum-band.bf-cat-brokerage { background: #7b4fa8; }
.bf-spectrum-cell.bf-cat-none, .bf-spectrum-band.bf-cat-none, .bf-spectrum-other { background: #b9c0c9; }
.bf-live-band .bf-live-types { display: grid; gap: 4px; margin: 0; max-width: 250px; }
.bf-live-band .bf-live-type.bf-cat { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; font-size: 14px; color: var(--bf-ink); }
.bf-live-band .bf-live-type.bf-cat::before { grid-column: 1; align-self: center; }
.bf-live-band .bf-live-type > span:first-child { grid-column: 2; }
.bf-live-band .bf-live-type > span:last-child { grid-column: 3; font-weight: 600; font-variant-numeric: tabular-nums; }
.bf-live-band .bf-live-type.bf-cat-other { color: var(--bf-gold-deep); font-weight: 600; }
.bf-live-band .bf-live-type.bf-cat-other::before { background: #b9c0c9; }
.bf-live-right { display: flex; flex-direction: column; min-width: 0; padding: 22px 26px; gap: 18px; }
.bf-live-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; }
.bf-live-card.bf-live-no-image { grid-template-columns: minmax(0, 1fr); }
.bf-live-page { width: 96px; height: 124px; aspect-ratio: auto; background: #fff; }
.bf-live-page[hidden] { display: none; }
.bf-live-page:not(:has(img.bf-loaded)):not(.bf-live-unready)::before { content: none; }
.bf-live-what { gap: 4px; }
.bf-live-eyebrow { color: var(--bf-slate); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.bf-live-eyebrow::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bf-gold); margin-right: 9px; }
.bf-live-name { font-size: 14px; }
.bf-live-result { font-size: 16px; }
.bf-reading-detail { margin-top: 4px; }
.bf-reading-stage { color: var(--bf-gold-deep); font-size: 15px; }
.bf-reading-progress { width: min(320px, 100%); }
.bf-reading-concurrent { margin-top: 0; grid-column: 1 / -1; border-top: 1px solid var(--bf-stone-2); padding-top: 14px; }
.bf-reading-others .bf-reading-name { font-family: var(--bf-mono); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bf-reading-concurrent:has([data-reading-others][hidden]) { display: none; }
.bf-reading-others { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; }
.bf-reading-others li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 5px; min-width: 0; padding: 6px 0; }
.bf-reading-other-stage { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.bf-reading-fraction { grid-column: 2; font-size: 13px; }
.bf-reading-other-bar { grid-column: 1 / -1; display: block; height: 2px; background: var(--bf-stone-2); }
.bf-reading-other-bar > span { display: block; height: 100%; background: var(--bf-gold-deep); }
.bf-reading-split { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; border-top: 1px solid var(--bf-stone-2); padding-top: 12px; }
.bf-reading-split-name { font-family: var(--bf-mono); }
.bf-reading-split-cells { display: flex; gap: 3px; margin-left: 6px; }
.bf-reading-split-cells i { width: 10px; height: 14px; border: 1px solid var(--bf-stone); border-radius: 2px; background: var(--bf-surface-2); }
.bf-reading-split-cells i.bf-reading-split-done { border-color: var(--bf-gold-deep); background: var(--bf-gold-deep); }
.bf-reading-split-cells i.bf-reading-split-reading { border-color: var(--bf-gold); background: var(--bf-gold); }
.bf-ledger-stall { margin: 0; padding: 0 26px; background: var(--bf-navy); color: #f6f3ec; border-bottom: 1px solid var(--bf-navy-line); }
.bf-sort-recovery-lines { gap: 0; }
.bf-sort-recovery-line { min-height: 52px; font-size: 15px; }
.bf-sort-recovery-line + .bf-sort-recovery-line { border-top: 1px solid var(--bf-navy-line); }
.bf-sort-recovery-message { font-weight: 500; }
.bf-sort-recovery-dot { width: 9px; height: 9px; border-radius: 50%; background: #e0b64a; box-shadow: 0 0 0 3px rgba(224,182,74,.22); flex: 0 0 auto; }
.bf-sort-recovery-failed .bf-sort-recovery-dot { background: #e46a5c; box-shadow: 0 0 0 3px rgba(228,106,92,.22); }
.bf-sort-recovery-line .bf-btn { min-height: 32px; padding: 0 14px; }
.bf-sort-recovery-line .bf-btn-primary { background: var(--bf-gold); border-color: var(--bf-gold); color: var(--bf-navy); }
.bf-sort-recovery-line .bf-btn-outline { background: transparent; border: 1px solid rgba(246,243,236,.38); color: #f6f3ec; }
.bf-sort-recovery-line .bf-btn-link { color: #f6f3ec; font-weight: 600; }
/* The banner owns its hover and focus: the generic `.bf-btn:hover` paints the
   light surface behind light text ("Show them" became a white pill). */
.bf-sort-recovery-line .bf-btn-link:hover, .bf-sort-recovery-line .bf-btn-link:focus-visible { background: transparent; color: #f6f3ec; text-decoration: underline; }
.bf-sort-recovery-line .bf-btn-outline:hover, .bf-sort-recovery-line .bf-btn-outline:focus-visible { background: rgba(246, 243, 236, .08); border-color: rgba(246, 243, 236, .62); color: #f6f3ec; }
.bf-sort-recovery-line .bf-btn-primary:hover, .bf-sort-recovery-line .bf-btn-primary:focus-visible { background: #c9b47f; border-color: #c9b47f; color: var(--bf-navy); }
.bf-sort-recovery-line .bf-btn:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: 2px; }
.bf-sort-recovery-error { color: #f4b5ae; margin: 0 0 12px 19px; }
@media (max-width: 900px) { .bf-live-body { grid-template-columns: 1fr; } .bf-live-tally { border-right: 0; border-bottom: 1px solid var(--bf-stone-2); } }
@media (max-width: 650px) { .bf-reading-others { grid-template-columns: 1fr; } .bf-live-tally, .bf-live-right { padding: 18px; } .bf-ledger-stall { padding: 0 18px; } .bf-live-count { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .bf-spectrum-layer { transition: none; } .bf-spectrum-now { animation: none; } }

/* Case facts — Demand panel and Mapping depends line. No nested cards; gold is a highlight. */
.bf-facts-panel { margin-top: 32px; }
.bf-facts-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding-bottom: 8px; border-bottom: 1px solid var(--bf-stone); }
.bf-facts-title { margin: 0; font-family: var(--bf-serif); font-size: 21px; line-height: 1.2; font-weight: 600; color: var(--bf-ink); }
.bf-facts-progress { margin: 0; font-size: 13px; line-height: 1.4; color: var(--bf-slate); font-variant-numeric: tabular-nums; }
.bf-facts-lede { margin: 16px 0 8px; max-width: 72ch; font-size: 15px; line-height: 1.5; color: var(--bf-ink); }
.bf-facts-list { list-style: none; margin: 0; padding: 0; }
.bf-facts-row { display: grid; grid-template-columns: minmax(0, 640px) minmax(280px, 1fr); column-gap: 24px; row-gap: 8px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--bf-stone); }
.bf-facts-row.bf-facts-next { box-shadow: inset 3px 0 0 var(--bf-gold); padding-left: 12px; }
.bf-facts-q { grid-column: 1; margin: 0; max-width: 640px; font-size: 15px; line-height: 1.5; color: var(--bf-ink); }
.bf-facts-meta { grid-column: 1; margin: 0; font-size: 13px; line-height: 1.4; color: var(--bf-slate); }
.bf-facts-meta .bf-btn-link { min-height: 0; padding: 0; font-size: 13px; }
.bf-facts-choices { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 40px; justify-self: end; }
.bf-facts-choice { box-sizing: border-box; height: 40px; min-width: 88px; min-height: 40px; padding: 0 16px; border: 1px solid var(--bf-stone); border-radius: 6px; background: var(--bf-surface); color: var(--bf-ink); font: 600 15px/1 var(--bf-sans); cursor: pointer; transform-origin: center; transition: padding .48s cubic-bezier(.18, 1.4, .28, 1), background .2s, color .2s, border-color .2s; }
.bf-facts-choice:hover { border-color: var(--bf-navy); }
.bf-facts-choice:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-facts-choice[aria-pressed="true"] { background: var(--bf-navy); color: #f6f3ec; border-color: var(--bf-navy); padding-left: 22px; padding-right: 22px; }
.bf-facts-choice[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.bf-facts-note, .bf-facts-row .bf-status, .bf-facts-row [data-facts-error] { grid-column: 1 / -1; margin: 0; }
.bf-facts-note { font-size: 13px; line-height: 1.5; color: var(--bf-slate); }
.bf-facts-row .bf-status { font-size: 13px; }
.bf-facts-recap { margin: 0 0 12px; }
.bf-facts-recap .bf-btn-link { min-height: 0; padding: 0; font-size: 13px; }
.bf-facts-filter { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--bf-slate); }
.bf-facts-filter .bf-btn-link { min-height: 0; padding: 0; font-size: 13px; }
.bf-facts-depends { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--bf-slate); }
.bf-facts-depends .bf-btn-link { min-height: 0; padding: 0; font-size: 13px; }
.bf-rc-headmain .bf-facts-depends { margin: 6px 0 0; color: rgba(246, 243, 236, .72); }
.bf-rc-headmain .bf-facts-depends .bf-btn-link { color: var(--bf-gold); }
.bf-rc-headmain .bf-facts-depends .bf-status { color: rgba(246, 243, 236, .85); font-size: 13px; }
@media (max-width: 1100px) {
  .bf-facts-row { grid-template-columns: 1fr; }
  .bf-facts-q, .bf-facts-meta, .bf-facts-choices { grid-column: 1; grid-row: auto; }
  .bf-facts-choices { justify-self: stretch; width: 100%; }
  .bf-facts-choice { flex: 1 1 0; }
}

/* S5b — the page image a mapping deep link reads, and the band on it.
   The band's fill is the gold at 35%, with the gold itself as a 2 px rule;
   every rectangle is positioned in per-cent of the page the server measured,
   so it sits on the same words at any render size. */
.bf-viewer-frame.bf-band-open > iframe { display: none; }
.bf-band-view { position: absolute; inset: 0; display: flex; background: var(--bf-surface-2); }
.bf-band-rail { flex: 0 0 52px; display: flex; flex-direction: column; gap: 4px; padding: 12px 6px; overflow-y: auto; border-right: 1px solid var(--bf-stone-2); background: var(--bf-surface); }
.bf-band-page-btn { min-height: 32px; padding: 0 4px; border: 1px solid transparent; border-radius: var(--bf-radius); background: none; font: 600 13px var(--bf-sans); font-variant-numeric: tabular-nums; color: var(--bf-slate); cursor: pointer; }
.bf-band-page-btn:hover { background: var(--bf-gold-soft); color: var(--bf-ink); }
.bf-band-page-btn.bf-active { border-color: var(--bf-gold); background: var(--bf-gold-soft); color: var(--bf-ink); }
.bf-band-stage { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 20px; }
.bf-band-sheet { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; background: var(--bf-surface); box-shadow: var(--bf-shadow-pop); }
.bf-band-img { display: block; max-width: 100%; height: auto; }
.bf-band-marks { position: absolute; inset: 0; pointer-events: none; }
.bf-band-rect { position: absolute; border: 2px solid var(--bf-gold); border-radius: 2px; background: rgba(184, 160, 106, .35); background: color-mix(in srgb, var(--bf-gold) 35%, transparent); }
.bf-band-foot { position: absolute; right: 16px; bottom: 14px; }

/* ── Mapping · Decide these (ux-mapping-sets §4, artboard A2) ─────────────── */
/* The Check step's workspace (§17) carries the page and the question; what is
   added here is the places list, the sibling checkbox and the queue. */

.bf-md-host { display: block; }
.bf-md-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; font-size: 13px; }
.bf-md-count { margin-top: 0; }
.bf-md-empty { font-size: 14px; color: var(--bf-slate); }
.bf-mr-list .bf-qrow { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 10px 0; width: 100%; }
.bf-mr-kind { font-size: 13px; color: var(--bf-slate); }
.bf-mr-aside { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--bf-stone); color: var(--bf-slate); font-size: 13px; }
.bf-mr-aside summary { cursor: pointer; }
.bf-mr-aside-explanation { margin: 8px 0 0 18px; color: var(--bf-slate); }
.bf-mr-aside-list { margin: 8px 0 0 18px; }
.bf-mr-aside-row { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--bf-stone-2); background: none; color: var(--bf-ink); font: inherit; text-align: left; cursor: pointer; }
.bf-mr-aside-row:hover { background: var(--bf-surface-2); }
.bf-mr-aside-row:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: -3px; }
.bf-mr-total { margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--bf-slate); }
.bf-mr-group { margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--bf-stone);
  font: 600 14px var(--bf-sans); color: var(--bf-ink); }
.bf-mr-list .bf-qrow-w { overflow: hidden; text-overflow: ellipsis; }
#setup-mapping-review-modal .bf-modal-card.bf-md-dialog { width: min(1400px, calc(100vw - 48px)); max-width: calc(100vw - 48px); height: calc(100dvh - 48px); max-height: calc(100dvh - 48px); padding: 20px; overflow: hidden; }
.bf-md-dialog > .bf-modal-head { flex: 0 0 auto; margin-bottom: 16px; }
.bf-md-dialog-body, .bf-md-dialog .bf-md { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bf-md-dialog .bf-count-line { flex: 0 0 auto; margin: 0 0 12px; }
.bf-md-dialog .bf-ws { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-template-columns: minmax(480px, 1.15fr) minmax(0, 1fr); }
.bf-md-dialog .bf-md-pages { display: flex; flex-direction: column; gap: 12px; }
.bf-md-dialog .bf-md-sheet { flex-shrink: 0; width: 100%; max-width: none; margin: 0; }
.bf-md-dialog .bf-md-foot { position: sticky; bottom: -18px; z-index: 3; margin: 8px -20px -18px; padding: 12px 20px 18px; background: color-mix(in srgb, var(--bf-surface) 88%, transparent); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border-top: 1px solid color-mix(in srgb, var(--bf-ink) 8%, transparent); box-shadow: 0 -12px 28px color-mix(in srgb, var(--bf-surface) 28%, transparent); }
@supports not (backdrop-filter: blur(1px)) and not (-webkit-backdrop-filter: blur(1px)) {
  .bf-md-dialog .bf-md-foot { background: color-mix(in srgb, var(--bf-surface) 97%, transparent); }
}
.bf-md-dialog .bf-md-glance { margin-top: 0; padding-bottom: 0; background: transparent; }
.bf-md-optional { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--bf-slate); }
@media (min-width: 1001px) {
  /* The left pane scrolls under its frosted-glass At a glance card (Michael's
     approved design). The right pane is a column: the request list scrolls in
     its own box, and the footer sits under it, never over it. */
  .bf-md-dialog .bf-ws-left { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
  .bf-md-dialog .bf-ws-right { min-height: 0; overflow: hidden; padding-bottom: 0; }
  .bf-md-dialog .bf-md-scroll { scrollbar-gutter: stable; }
}
@media (max-width: 1000px) {
  #setup-mapping-review-modal .bf-modal-card.bf-md-dialog { padding: 16px; }
  .bf-md-dialog-body { overflow-y: auto; overscroll-behavior-y: contain; }
  .bf-md-dialog .bf-md, .bf-md-dialog .bf-ws { flex: 0 0 auto; }
  .bf-md-dialog .bf-ws { grid-template-columns: minmax(0, 1fr); }
  .bf-md-dialog .bf-count-line, .bf-md-dialog .bf-md-acts { flex-wrap: wrap; }
  /* Stacked, the body scrolls; the inner boxes take their natural height. */
  .bf-md-dialog .bf-md-scroll { overflow: visible; }
  .bf-md-dialog .bf-md-acts { grid-template-columns: minmax(0, 1fr); }
  .bf-md-dialog .bf-md-choices { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .bf-mr-list .bf-qrow { grid-template-columns: 24px minmax(0, 1fr); gap: 4px 14px; }
  .bf-mr-list .bf-qrow-k { grid-row: span 2; }
  .bf-mr-list .bf-qrow-w { grid-column: 2; }
}

.bf-md-page { margin-top: 2px; }
/* The band is drawn from `…/locate`'s measured rectangles, into this node —
   never from a fixed offset, which put a gold box over blank space two lines
   from the quote it claimed to mark.

   The sheet takes the rendered image's own size, exactly as `.bf-band-sheet`
   does in the viewer, and the marks are inset on it. No `aspect-ratio` and no
   `cover`: the server measures the page it rendered, and a legal page is not
   a letter page. */
.bf-md-sheet { position: relative; display: block; width: fit-content; max-width: 340px; margin: 0 auto; background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: 3px; overflow: hidden; }
.bf-md-img { display: block; max-width: 100%; height: auto; }
.bf-md-unready { display: block; padding: 24px 12px; font-size: 13px; color: var(--bf-slate); text-align: center; }
.bf-md-sheet:has(.bf-md-img[src]) .bf-md-unready { display: none; }
.bf-md-marks { position: absolute; inset: 0; pointer-events: none; }
.bf-md-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.45; color: var(--bf-slate); }
.bf-md-cap .bf-md-q { font-style: italic; color: var(--bf-ink); }
.bf-md-nr { color: var(--bf-slate); font-style: italic; }
.bf-md-glance { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bf-stone-2); }
.bf-md-glance .bf-ms-pane { position: static; width: auto; max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }

.bf-md-places { display: flex; flex-direction: column; margin-top: 12px; }
.bf-md-lead { margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: var(--bf-ink); }
/* An answered card steps back, so the eye goes to the ones still asking. */
.bf-md-place:is([data-state="kept"], [data-state="left"], [data-state="confirmed"]) .bf-md-qq { color: var(--bf-slate); }
.bf-md-place[data-state="left"] .bf-md-t, .bf-md-place[data-state="left"] .bf-md-no { color: var(--bf-slate); }
.bf-md-place { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px; padding: 12px 0 14px; border-top: 1px solid var(--bf-stone-2); }
.bf-md-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--bf-stone); display: inline-block; flex: 0 0 auto; }
.bf-md-dot-warn, .bf-md-dot-needs { background: var(--bf-warning); }
.bf-md-dot-suggest { background: var(--bf-gold); }
.bf-md-dot-done { background: var(--bf-success); }
.bf-md-dot-off { background: var(--bf-slate); }
.bf-md-dot-saving { background: var(--bf-stone); }
.bf-md-no { font-family: var(--bf-serif); font-size: 19px; font-weight: 600; line-height: 1.15; color: var(--bf-ink); }
.bf-md-no-dim { color: var(--bf-slate); }
.bf-md-main { min-width: 0; }
.bf-md-t { font-size: 14px; font-weight: 600; color: var(--bf-ink); }
.bf-md-t-s { font-size: 13px; font-weight: 400; color: var(--bf-slate); }
.bf-md-b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: 13px; color: var(--bf-slate); }
.bf-md-q { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--bf-slate); }
.bf-md-qq { font-style: italic; color: var(--bf-ink); }
/* The answer row: the same height answered or not, so nothing below it moves. */
/* Two columns, so a long status wraps inside its own column and the buttons
   stay put — the same place on every card. */
.bf-md-answer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; min-height: 40px; margin-top: 12px; }
.bf-md-answer-acts { display: flex; align-items: center; gap: 10px; justify-self: end; }
@media (max-width: 1100px) {
  .bf-md-answer { grid-template-columns: minmax(0, 1fr); }
  .bf-md-answer-acts { justify-self: start; }
}
.bf-md-answer-acts .bf-btn { min-width: 108px; }
.bf-md-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; font-size: 14px; color: var(--bf-slate); }
.bf-md-status .bf-md-dot { margin-right: 2px; width: 8px; height: 8px; }
.bf-md-status-w { font-weight: 600; color: var(--bf-ink); }
.bf-md-status-saving .bf-md-status-w { font-weight: 500; color: var(--bf-slate); }
.bf-md-status-n { flex: 0 0 100%; padding-left: 16px; font-size: 14px; color: var(--bf-slate); }
.bf-md-sep { display: none; }
.bf-md-status-spent { visibility: hidden; }
/* A 32 px target that takes no more height than its line of text. */
.bf-md-status-link { min-height: 32px; margin: -6px 0; padding: 0 2px; font-size: 14px; }
.bf-md-mid { color: #B5B0A5; }

.bf-md-apply { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 0 10px 60px; font-size: 13px; color: var(--bf-ink); }
.bf-md-apply input { width: 16px; height: 16px; margin: 0; accent-color: var(--bf-navy); }
.bf-md-apply-s { color: var(--bf-slate); }

/* Two buttons, not two checkbox rows: these are not answers of the same kind
   as the places above them, and an empty tick beside them said they were. */
.bf-md-choices { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.bf-md-choice-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bf-stone-2); }
/* A footer button's panel opens in the footer, the full row just above the buttons
   (Michael, 4 Oct): Hold it out sits right over Not responsive, and the footer grows
   upward, so the list above keeps its place. The request list is bounded by the window
   so a short screen keeps some of the list in view. */
.bf-md-acts > .bf-md-choice-panel { grid-column: 1 / -1; margin: 0; padding: 0; border-top: 0; }
.bf-md-acts .bf-md-preview, .bf-md-acts .bf-md-chooser { margin-top: 0; }
.bf-md-acts .bf-md-hits { max-height: min(320px, 30dvh); }
.bf-md-choice-s { font-size: 13px; color: var(--bf-slate); }
.bf-md-chooser { margin-top: 10px; }
.bf-md-search { width: 100%; }
/* The whole demand fits behind one scroll rather than pushing the foot away. */
.bf-md-hits { max-height: 320px; overflow-y: auto; margin-top: 4px; border: 1px solid var(--bf-stone-2); border-radius: var(--bf-radius); }
.bf-md-hit { display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 36px; padding: 8px 10px; font-size: 14px; color: var(--bf-ink); text-align: left; background: none; border: 0; border-top: 1px solid var(--bf-stone-2); cursor: pointer; }
.bf-md-hits > .bf-md-hit:first-child { border-top: 0; }
.bf-md-hit:hover { color: var(--bf-gold-deep); background: var(--bf-surface-2); }
.bf-md-hit-no { flex: 0 0 auto; min-width: 26px; font-weight: 600; color: var(--bf-slate); }
.bf-md-hit-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-md-hit-r { margin-left: auto; font-size: 13px; color: var(--bf-slate); white-space: nowrap; }
.bf-md-hit-placed { cursor: default; color: var(--bf-slate); }
.bf-md-hit-placed:hover { color: var(--bf-slate); background: none; }

.bf-md-preview { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding: 8px 10px; font-size: 13px; color: var(--bf-ink); background: var(--bf-surface-2); border: 1px solid var(--bf-stone-2); border-radius: var(--bf-radius); }
.bf-md-preview-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.bf-md-acts { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bf-stone-2); font-size: 14px; color: var(--bf-slate); }
.bf-md-dialog .bf-md-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; margin: 0 -24px; padding: 0 24px 16px; scroll-padding-bottom: 16px; }
.bf-md-dialog .bf-md-acts { flex: 0 0 auto; margin: 0 -24px; padding: 14px 24px 16px; background: var(--bf-surface); container-type: inline-size; }
/* A narrow footer keeps the count on one line and drops the hint after it. */
@container (max-width: 640px) { .bf-md-acts .bf-md-progress-s { display: none; } }
.bf-md-progress { color: var(--bf-ink); }
.bf-md-progress strong { font-weight: 600; }
.bf-md-progress-s { color: var(--bf-slate); }

.bf-md-queue { margin-top: 26px; }
.bf-md-qh { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--bf-stone); }
.bf-md-qh-s { font-size: 13px; color: var(--bf-slate); }
.bf-md-qrow { display: grid; grid-template-columns: 24px 300px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; min-height: 44px; padding: 0; font-size: 14px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--bf-stone-2); cursor: pointer; }
.bf-md-qrow:hover { background: var(--bf-surface-2); }
.bf-md-qk { font-size: 13px; color: var(--bf-slate); }
.bf-md-qt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--bf-ink); }
.bf-md-qw { display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--bf-ink); }
.bf-md-qs { font-size: 13px; color: var(--bf-slate); white-space: nowrap; }

@media (max-width: 899.98px) {
  .bf-md-qrow { grid-template-columns: 24px minmax(0, 1fr); }
  .bf-md-qw, .bf-md-qs { display: none; }
}

/* Mapping band and the two-column explorer. The left list is a directory
   of set names. The right list is one column of demands. */
.bf-mx-kicker { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px;
  font-size: 13px; font-weight: 600; color: var(--bf-slate); }
.bf-mx-empty { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--bf-slate); }
.bf-mx-swatch { margin-top: 0; flex: 0 0 auto; }
.bf-mx-ex { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--bf-ink); }
.bf-mx-under { padding: 2px 0 12px 46px; }
.bf-mx-kind { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.bf-mx-kind-name { font-size: 14px; font-weight: 600; color: var(--bf-ink); }
.bf-mx-kind-meta { font-size: 13px; color: color-mix(in srgb, var(--bf-slate) 70%, var(--bf-ground)); font-variant-numeric: tabular-nums; }
.bf-mx-file { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; min-height: 36px; padding: 4px 0 4px 22px; cursor: pointer; }
.bf-mx-file-main { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.bf-mx-file:hover { background: var(--bf-surface-2); }
.bf-mx-file[aria-selected='true'] { background: var(--bf-gold-soft); }
.bf-mx-file:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: -3px; }
.bf-mx-file-name { min-width: 0; font-size: 14px; color: var(--bf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-mx-kept { flex: 0 0 auto; font-size: 14px; color: var(--bf-ink); white-space: nowrap; }
.bf-mx-kept .bf-btn-link { font-size: inherit; }
.bf-mx-file-pages, .bf-mx-file-when { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bf-mx-file-when { color: var(--bf-slate); }
.bf-mx-file-pages { color: color-mix(in srgb, var(--bf-slate) 70%, var(--bf-ground)); }
/* A centered row needs no 11px set-swatch drop. */
.bf-ms-swatch.bf-mx-swatch,
.bf-mb-set .bf-ms-swatch { margin-top: 0; align-self: center; }
.bf-mx-req-on .bf-req-row { background: var(--bf-gold-soft); }
.bf-mb-demands .bf-req-row { width: 100%; border: 0; border-bottom: 1px solid var(--bf-stone-2); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* Mapping demand headers and their independent wording disclosure. */
.bf-mx-dmd { min-width: 0; box-shadow: none; }
.bf-mx-dmd + .bf-mx-dmd { margin-top: 12px; }
.bf-mx-dmd .bf-mx-dmd-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 12px 14px; border-radius: var(--bf-radius); background: var(--bf-navy); color: #f6f3ec; }
.bf-mx-dmd .bf-mx-dmd-heading { grid-column: 1; min-width: 0; margin: 0; }
.bf-mx-dmd .bf-mx-dmd-focus { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.bf-mx-dmd button.bf-mx-dmd-focus { cursor: pointer; }
.bf-mx-dmd .bf-mx-dmd-number { flex: 0 0 auto; font-family: var(--bf-serif); font-size: 30px; font-weight: 600; line-height: 1; color: var(--bf-brand-gold); }
.bf-mx-dmd .bf-mx-dmd-title { min-width: 0; font-family: var(--bf-serif); font-size: 26px; font-weight: 600; line-height: 1.15; color: #f6f3ec; overflow-wrap: anywhere; }
.bf-mx-dmd .bf-mx-dmd-count, .bf-mx-dmd .bf-mx-dmd-expand { font-size: 13px; color: rgba(246, 243, 236, .82); }
.bf-mx-dmd .bf-mx-dmd-count { grid-column: 2; }
.bf-mx-dmd .bf-mx-dmd-expand { grid-column: 3; padding: 0; border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.bf-mx-dmd.bf-mx-req-on .bf-mx-dmd-head { box-shadow: inset 0 0 0 2px var(--bf-brand-gold); }
.bf-mx-dmd { scroll-margin-top: 72px; }
.bf-mx-dmd .bf-mx-dmd-focus:focus-visible, .bf-mx-dmd .bf-mx-dmd-expand:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-mx-dmd .bf-mx-dmd-text { padding: 10px 14px 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--bf-ink); }
.bf-mx-dmd .bf-mx-dmd-text[hidden] { display: none; }
.bf-mx-dmd .bf-mx-dmd-text p { margin: 0; }
.bf-mx-dmd .bf-mx-under { padding: 8px 14px 4px; }
.bf-mx-dmd .bf-mx-dmd-empty { margin: 0; padding: 8px 14px 12px; font-size: 14px; color: var(--bf-slate); }
/* S2 answer row (mockups 03/04/08): what is placed on the left; on the right
   dot + words, then a fixed 120px slot holding one control, so the dot and the
   words line up from band to band whatever the control is. */
.bf-mx-answer-row { position: relative; height: 44px; box-sizing: border-box; display: flex;
  align-items: center; justify-content: flex-end; gap: 16px; padding: 4px 0; font-size: 14px; }
.bf-mx-answer-left { min-width: 0; margin-right: auto; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--bf-slate); }
.bf-mx-answer-row .bf-status { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.bf-mx-answer-act { flex: 0 0 120px; width: 120px; display: flex; justify-content: flex-end; }
.bf-mx-answer-act .bf-btn, .bf-mx-answer-act .bf-btn-link { min-width: 96px; justify-content: center; }
.bf-mx-answer-error { position: absolute; top: 100%; right: 14px; z-index: 3;
  color: var(--bf-error, #8b2626); background: var(--bf-ground); font-size: 13px; }
.bf-mx-answer-row:has(.bf-mx-answer-error) { height: auto; min-height: 64px; flex-wrap: wrap; }
.bf-mx-answer-row:has(.bf-mx-answer-error) .bf-mx-answer-error {
  position: static; flex: 0 0 100%; text-align: right; padding-right: 14px;
}
/* The choosers. Each hangs from the control that opened it — never over the
   cells or the row — and scrolls clear of the top bar and the sticky foot. */
.bf-mx-chooser { position: absolute; z-index: 12; width: min(520px, calc(100vw - 32px));
  box-sizing: border-box; padding: 16px 22px; border: 1px solid var(--bf-stone-2);
  border-radius: 12px; background: var(--bf-surface); box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  text-align: left; white-space: normal; font-weight: 400; color: var(--bf-ink);
  scroll-margin: 72px 0 96px; }
.bf-mf > .bf-mx-question { top: 100%; left: 0; margin-top: 6px; }
.bf-mx-answer-row > .bf-mx-chooser { top: 100%; right: 0; margin-top: 4px; }
.bf-mx-response-chooser { width: min(340px, calc(100vw - 32px)); padding: 8px; }
.bf-mx-response-chooser .bf-mx-chooser-kicker { padding: 8px 10px 6px; margin: 0; }
.bf-mx-chooser-kicker, .bf-mx-chooser-sub { color: var(--bf-slate); font-size: 13px; }
.bf-mx-chooser-kicker { margin-bottom: 8px; font-weight: 600; }
.bf-mx-response-choice { display: block; width: 100%; min-height: 40px; padding: 6px 10px; border: 0;
  border-radius: 5px; background: transparent; text-align: left; font: inherit; font-size: 15px;
  color: var(--bf-ink); cursor: pointer; }
.bf-mx-response-choice:hover, .bf-mx-response-choice:focus-visible { background: var(--bf-gold-soft); }
.bf-mx-custom { padding: 0 10px 6px; }
.bf-mx-custom textarea { width: 100%; min-height: 72px; margin: 6px 0; }
.bf-mf { position: relative; }
.bf-mx-chooser-title { font-size: 16px; line-height: 1.45; }
.bf-mx-chooser-sub { margin: 4px 0 12px; }
.bf-mx-question-buttons { display: flex; gap: 8px; padding-bottom: 12px;
  border-bottom: 1px solid var(--bf-stone-2); }
.bf-mx-question-buttons .bf-btn { min-width: 88px; }
.bf-mx-question-line { display: grid; grid-template-columns: 64px 1fr; gap: 10px;
  margin: 10px 0; font-size: 14px; line-height: 1.4; color: var(--bf-slate); }
.bf-mx-question-line strong { color: var(--bf-ink); }
.bf-mx-question-blocked { margin-top: 14px; padding: 12px; border-radius: 5px;
  background: var(--bf-gold-soft); font-size: 13px; line-height: 1.4; }
.bf-mx-question-blocked p { margin: 4px 0 0; }
/* The filtered header (mockup 03): one line of words on the left, the bulk
   verb on the right with its reason under it. Neither side wraps. */
.bf-mx-kicker .bf-btn-link { min-height: 0; padding: 0 4px; font-size: 13px; }
.bf-mx-need-head { align-items: flex-start; flex-wrap: nowrap; gap: 24px; margin-bottom: 10px; }
.bf-mx-need-words { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; line-height: 20px; }
.bf-mx-need-more { font-weight: 500; }
.bf-mx-bulk { position: relative; flex: 0 0 auto; display: block; margin-left: auto;
  text-align: right; white-space: nowrap; font-size: 13px; line-height: 20px; }
.bf-mx-bulk > .bf-btn-link { padding: 0; line-height: 20px; }
.bf-mx-bulk > .bf-btn-link:disabled { color: var(--bf-gold-deep); opacity: .45; cursor: default;
  text-decoration: none; }
.bf-mx-bulk-reason { display: block; font-weight: 500; color: var(--bf-slate); }
.bf-mx-bulk-error { display: block; max-width: 340px; white-space: normal; font-weight: 500;
  color: var(--bf-error, #8b2626); }
.bf-mx-bulk > .bf-mx-chooser { top: 100%; right: 0; margin-top: 4px; }
.bf-mx-bulk-confirmation { width: 340px; padding: 16px; }
.bf-mx-bulk-confirmation p { max-height: 140px; overflow: auto; margin: 0 0 12px; font-size: 14px; }
/* G7: Gap's band says its status only when a saved decision moved the open
   request off the segment she is on; otherwise the segment is the status and
   the words are for screen readers (.bf-sr-only, out of the grid's flow). */
.bf-mx-dmd .bf-mx-dmd-status { grid-column: 2; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(246, 243, 236, .82); white-space: nowrap; }
.bf-mx-dmd .bf-mx-dmd-status .bf-gap-dot { box-shadow: 0 0 0 1px rgba(246, 243, 236, .3); }
.bf-mx-dmd .bf-mx-dmd-head:has(.bf-mx-dmd-status) { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.bf-mx-dmd .bf-mx-dmd-head:has(.bf-mx-dmd-status) .bf-mx-dmd-count { grid-column: 3; }
.bf-mx-dmd .bf-mx-dmd-head:has(.bf-mx-dmd-status) .bf-mx-dmd-expand { grid-column: 4; }
@media (max-width: 390px) {
  .bf-mx-dmd .bf-mx-dmd-number { font-size: 26px; }
  .bf-mx-dmd .bf-mx-dmd-title { font-size: 22px; }
  .bf-mx-dmd .bf-mx-dmd-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bf-mx-dmd .bf-mx-dmd-heading { grid-column: 1 / -1; }
  .bf-mx-dmd .bf-mx-dmd-count { grid-column: 1; grid-row: 2; }
  .bf-mx-dmd .bf-mx-dmd-expand { grid-column: 2; grid-row: 2; justify-self: end; }
}
/* QC borrows Mapping's band header; its request text keeps the card's own clamp below it. */
.bf-qc-request.bf-mx-dmd .bf-mx-dmd-head { grid-template-columns: minmax(0, 1fr) auto; padding: 9px 12px; }
.bf-qc-request.bf-mx-dmd .bf-mx-dmd-heading { grid-column: 1; }
.bf-qc-request.bf-mx-dmd .bf-mx-dmd-number { font-size: 24px; }
.bf-qc-request.bf-mx-dmd .bf-mx-dmd-title { font-size: 18px; }
.bf-qc-request.bf-mx-dmd .bf-mx-dmd-expand { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; white-space: nowrap; }
.bf-qc-request .bf-qc-notice:hover { color: #f6f3ec; text-decoration: underline; text-underline-offset: 3px; }
.bf-mb-tools { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.bf-mb-sets { display: flex; flex-wrap: wrap; margin: 0 0 28px; gap: 10px 14px; }
.bf-mb-set { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 6px 10px; border-radius: 4px; background: transparent; color: var(--bf-ink); cursor: pointer; font: inherit; font-size: 14px; line-height: 1.3; }
.bf-mb-set .bf-ms-swatch { margin-top: 0; align-self: center; }
.bf-mb-set[aria-pressed='true'] { color: var(--bf-ink); background: var(--bf-gold-soft); }
.bf-mb { width: 100%; }
.bf-mb-demands { width: 100%; }
.bf-mf { height: 104px; margin: 0 0 26px; box-sizing: border-box; }
.bf-mf-kicker { height: 26px; font-size: 13px; font-weight: 600; color: var(--bf-slate); }
.bf-mf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 78px; border-top: 1px solid var(--bf-stone); border-bottom: 1px solid var(--bf-stone); }
.bf-mf-cell { min-width: 0; overflow: hidden; padding: 14px 18px 12px 0;
  box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; }
.bf-mf-cell + .bf-mf-cell { padding-left: 18px; border-left: 1px solid var(--bf-stone-2); }
.bf-mf-cell .bf-status { font-size: 15px; font-weight: 600; }
.bf-mf-cell.bf-mf-done .bf-status { font-weight: 500; }
.bf-mf-sub { padding-left: 15px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 14px; color: var(--bf-slate); }
.bf-mf-sub .bf-btn-link { min-height: 0; padding: 0; font-size: inherit; }
.bf-stage-count-link { border: 0; background: none; color: inherit; font: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 700px) {
  .bf-mf { height: auto; }
  .bf-mf-grid { grid-template-columns: 1fr; height: auto; }
  .bf-mf-cell { height: 78px; padding-left: 0; }
  .bf-mf-cell + .bf-mf-cell { padding-left: 0; border-left: 0;
    border-top: 1px solid var(--bf-stone-2); }
}

/* Mapping — the By set screen (spec ux-mapping-sets §3; pixel reference the
   2026-09-16 mapping-review artboard A1). Sets are hairline-separated groups,
   never boxes; status is a dot and a word; the actions inside a row are text
   links. Every selector here is namespaced `.bf-ms-`.
   (File names are spelt without their extension on purpose: the shared
   namespace test reads a dot followed by a letter, anywhere in this
   stylesheet, as a class name — comments included.) */
.bf-ms { margin-top: 2px; }
.bf-ms-tabs { display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--bf-stone); }
.bf-ms-tab { min-height: 34px; padding: 0 0 10px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; font: 500 14px/1.4 var(--bf-sans); color: var(--bf-slate); cursor: pointer; transform-origin: center; transition: padding .48s cubic-bezier(.18, 1.4, .28, 1), color .2s, border-color .2s; }
.bf-ms-tab:hover { color: var(--bf-ink); }
.bf-ms-tab-on { color: var(--bf-ink); font-weight: 600; border-bottom-color: var(--bf-navy); padding-left: 4px; padding-right: 4px; }
.bf-ms-tab:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-ms-count { margin-left: 12px; padding-bottom: 10px; font-size: 13px; color: var(--bf-slate); }
.bf-ms-end { margin-left: auto; padding-bottom: 10px; font-size: 13px; }
.bf-ms-sets { min-width: 0; }
.bf-ms-set { border-bottom: 1px solid var(--bf-stone); padding: 12px 0; }
.bf-ms-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; min-height: 46px; }
.bf-ms-open { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; min-height: 40px; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.bf-ms-open:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 3px; }
.bf-ms-headmain { min-width: 0; display: block; }
.bf-ms-swatch { width: 8px; height: 8px; border-radius: 2px; margin-top: 11px; display: block; }
.bf-ms-h2 { display: block; font-family: var(--bf-serif); font-size: 23px; font-weight: 600; line-height: 1.2; color: var(--bf-ink); font-variant-numeric: tabular-nums; }
.bf-ms-id { display: block; margin-top: 1px; font-size: 13px; color: var(--bf-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-ms-act { display: flex; align-items: center; gap: 16px; padding-top: 5px; }
.bf-ms-act .bf-btn-link { font-size: 13px; white-space: nowrap; }
.bf-ms-confirm { min-height: 36px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.bf-ms-confirm[aria-disabled="true"] { opacity: .45; cursor: default; }
.bf-ms-confirm.bf-ms-pressed { border-color: var(--bf-navy); box-shadow: inset 0 0 0 1px var(--bf-navy); }
.bf-ms-basis-lines { display: flex; flex-direction: column; gap: 3px; padding: 6px 0 0 22px; }
.bf-ms-line { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 20px; font-size: 13px; line-height: 1.45; color: var(--bf-slate); }
.bf-ms-rest { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bf-ms-x { display: inline-flex; align-items: center; gap: 8px; color: var(--bf-ink); font-weight: 500; }
.bf-ms-basis { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--bf-slate); white-space: nowrap; }
.bf-ms-basis svg { flex: 0 0 auto; }
.bf-ms-basis-ai { color: var(--bf-info); }
.bf-ms-basis-disagree { color: var(--bf-warning); }
.bf-ms-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--bf-stone); display: inline-block; flex: 0 0 auto; }
.bf-ms-dot-warn { background: var(--bf-warning); }
.bf-ms-dot-ok { background: var(--bf-success); }
.bf-ms-dotcell { width: 18px; display: inline-flex; align-items: center; justify-content: center; }
.bf-ms-preview { display: flex; align-items: center; gap: 12px; margin: 10px 0 0 22px; padding: 8px 8px 8px 14px; background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius); font-size: 14px; line-height: 1.45; color: var(--bf-ink); }
.bf-ms-preview-words { flex: 1 1 auto; }
.bf-ms-preview-words b { font-weight: 600; }
.bf-ms-rows { margin: 10px 0 0 22px; }
.bf-ms-grouphead { display: flex; align-items: center; gap: 10px; min-height: 32px; padding-top: 6px; border-bottom: 1px solid var(--bf-stone-2); }
.bf-ms-groupsub { min-width: 0; font-size: 13px; color: var(--bf-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-ms-eb { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-slate); white-space: nowrap; }
.bf-ms-eb-warn { color: var(--bf-warning); }
.bf-ms-row { position: relative; display: grid; grid-template-columns: 18px 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 62px; padding: 8px 0; border-bottom: 1px solid var(--bf-stone-2); }
.bf-ms-row-hov { background: var(--bf-surface-2); margin: 0 -12px; padding: 8px 12px; border-radius: 4px; }
.bf-ms-row-done { opacity: .68; }
.bf-ms-who { font-size: 13px; color: var(--bf-slate); white-space: nowrap; text-align: right; }
/* While its card is open the row is opaque and raised: opacity below 1 makes a
   stacking context, which trapped the popover inside the row. */
.bf-ms-row.bf-ms-row-carding { opacity: 1; z-index: 21; }
/* A row answers the pointer (grey), and the row the card describes is tinted
   warm — a hover that swaps the card to a near-identical statement was invisible
   otherwise. A tint, not a rule: a rule sat hard against the checkbox. */
.bf-ms-row:hover, .bf-ms-row.bf-ms-row-carding { background: var(--bf-surface-2); box-shadow: -12px 0 0 var(--bf-surface-2), 12px 0 0 var(--bf-surface-2); }
.bf-ms-row.bf-ms-row-carding { background: var(--bf-gold-soft); box-shadow: -12px 0 0 var(--bf-gold-soft), 12px 0 0 var(--bf-gold-soft); }
.bf-ms-row-ex { grid-template-columns: 18px 34px minmax(0, 1fr) 236px; min-height: 78px; }
.bf-ms-rowmain { min-width: 0; }
.bf-ms-rowbasis { justify-self: end; }
.bf-ms-t { font-size: 14px; font-weight: 600; color: var(--bf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-ms-fl { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--bf-slate); }
.bf-ms-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.bf-ms-excerpt { margin-top: 3px; font-size: 13px; color: var(--bf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-ms-q { font-style: italic; }
.bf-ms-excerpt .bf-btn-link { font-size: 13px; }
.bf-ms-record { margin-top: 3px; font-size: 13px; color: var(--bf-slate); }
.bf-ms-eye { margin-right: 6px; font-size: 13px; color: var(--bf-gold-deep); }
.bf-ms-xcell { min-width: 0; }
.bf-ms-xw { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--bf-ink); }
.bf-ms-xw .bf-ms-dot { margin-top: 6px; }
.bf-ms-xa { margin: 4px 0 0 15px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.bf-ms-xa .bf-btn-link { font-size: 13px; }
.bf-ms-mid { color: #b5b0a5; }
.bf-ms-cb { width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--bf-stone); border-radius: 4px; background: var(--bf-surface); color: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bf-ms-cb:hover { border-color: var(--bf-navy); }
.bf-ms-cb:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-ms-cb-on { background: var(--bf-navy); border-color: var(--bf-navy); color: #f6f3ec; }
.bf-ms-th { width: 34px; height: 44px; padding: 6px 5px 0; background: var(--bf-surface-2); border: 1px solid var(--bf-stone); border-radius: 2px; display: flex; flex-direction: column; gap: 3px; }
.bf-ms-th i { display: block; height: 2px; background: var(--bf-stone-2); border-radius: 1px; }
.bf-ms-th-h { height: 3px; width: 60%; background: var(--bf-stone); margin-bottom: 1px; }
.bf-ms-th-hov { border-color: var(--bf-gold); box-shadow: 0 0 0 2px var(--bf-gold-soft); }
/* The row's thumbnail is the document's own first page and opens it; the drawn
   lines stay underneath for a tile that cannot be served or does not load. */
button.bf-ms-th { position: relative; overflow: hidden; cursor: pointer; appearance: none; -webkit-appearance: none; font: inherit; color: inherit; }
.bf-ms-th-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.bf-ms-th-real > i { visibility: hidden; }
.bf-ms-th:hover, .bf-ms-th:focus-visible { border-color: var(--bf-gold); box-shadow: 0 0 0 2px var(--bf-gold-soft); outline: none; }
.bf-ms-fold { min-height: 36px; display: flex; align-items: center; padding-left: 80px; border-bottom: 1px solid var(--bf-stone-2); font-size: 13px; }
.bf-ms-fold .bf-btn-link { font-size: 13px; }
.bf-ms-k-bank { background: #5e7f9e; }
.bf-ms-k-card { background: #8c6e9e; }
.bf-ms-k-pay { background: #5f8f6e; }
.bf-ms-k-tax { background: #9e8a5e; }
.bf-ms-k-ret { background: #5e9e97; }
.bf-ms-k-brk { background: #7a8aa6; }
.bf-ms-k-util { background: #a67a5e; }
.bf-ms-k-let { background: #8a8a8a; }
/* The top bar is fixed at 56px (`.bf-topbar`); the docked card sticks below it,
   and scrolls inside itself rather than being cut off when it is taller than
   the window (Michael, 17 Sept: "account for the sticky header"). */
.bf-ms-pane-slot { position: sticky; top: 72px; }
.bf-ms-pane-slot .bf-ms-pane { max-height: calc(100vh - 88px); overflow-y: auto; }
.bf-ms-pane { width: 460px; max-width: 100%; padding: 16px 20px 14px; background: var(--bf-surface); border: 1px solid var(--bf-stone); border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-pop); }
/* §18.3's narrow variant: anchored to the row, not parked under the list. */
.bf-ms-pane-popover { position: absolute; z-index: 20; left: 80px; top: 100%; margin-top: 4px; }
.bf-ms-pane-popover .bf-ms-pane { width: 372px; }
.bf-ms-pane-eyebrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bf-ms-pane-sub { font-size: 13px; color: var(--bf-slate); }
.bf-ms-pane-title { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--bf-ink); }
.bf-ms-pane-where { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--bf-slate); }
.bf-ms-facts { display: grid; grid-template-columns: 92px minmax(0, 1fr); row-gap: 5px; column-gap: 12px; margin-top: 10px; font-size: 14px; }
.bf-ms-fact-k { padding-top: 1px; font-size: 13px; color: var(--bf-slate); }
.bf-ms-fact-v { color: var(--bf-ink); }
.bf-ms-open-at { margin-left: 5px; font-size: 13px; }
.bf-ms-nr { color: var(--bf-slate); font-style: italic; }
.bf-ms-psec { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bf-stone-2); }
.bf-ms-psec .bf-ms-eb { display: block; margin-bottom: 8px; }
.bf-ms-ev2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bf-ms-ev { display: flex; flex-direction: column; gap: 8px; }
.bf-ms-cap { font-size: 13px; line-height: 1.45; color: var(--bf-ink); }
.bf-ms-cap-w { color: var(--bf-slate); }
.bf-ms-mini { position: relative; width: 92px; height: 120px; padding: 10px 8px 0; background: var(--bf-surface-2); border: 1px solid var(--bf-stone); border-radius: 3px; display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
.bf-ms-mini i { display: block; height: 3px; background: var(--bf-stone-2); border-radius: 2px; }
.bf-ms-mini-h { height: 5px; width: 60%; background: var(--bf-stone); margin-bottom: 2px; }
.bf-ms-mini-s { width: 70%; }
.bf-ms-band { position: absolute; left: 5px; right: 5px; height: 9px; background: var(--bf-gold-soft); border: 1px solid var(--bf-gold); border-radius: 2px; }
.bf-ms-pn { position: absolute; right: 5px; bottom: 3px; font-size: 13px; color: var(--bf-slate); font-variant-numeric: tabular-nums; z-index: 2; }
/* Page one is the document's own 32 dpi first-page tile, with the band on it;
   the drawn lines stay for pages with no tile yet. */
.bf-ms-mini-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; border-radius: 2px; }
.bf-ms-mini-real > i { visibility: hidden; }
.bf-ms-mini .bf-ms-band { z-index: 1; }
/* The card changed documents: the title is lit for half a second. */
@keyframes bf-ms-swap { from { background-color: var(--bf-gold-soft); box-shadow: 0 0 0 4px var(--bf-gold-soft); } to { background-color: transparent; box-shadow: none; } }
.bf-ms-pane-swap .bf-ms-pane-title { animation: bf-ms-swap 500ms ease-out; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .bf-ms-pane-swap .bf-ms-pane-title { animation: none; } }
.bf-ms-ct div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; }
.bf-ms-plain-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--bf-slate); }
.bf-ms-pf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bf-stone-2); font-size: 13px; color: var(--bf-slate); }
.bf-ms-pf .bf-btn-link { font-size: 13px; }
/* The fractional breakpoint is deliberate: the peek pane's suite asserts that
   this stylesheet declares no media query at a whole 1279 pixels, guarding a
   query of its own that was removed. Same breakpoint, no collision. */
/* The viewer's mapping rail and the marked evidence line. The band is a real
   highlight over real text, so it only ever appears where the viewer renders a
   text layer; the iframe preview has none and gets the page alone. */
.bf-ms-band-line { background: var(--bf-gold-soft); box-shadow: 0 0 0 1px var(--bf-gold); border-radius: 2px; }
.bf-ms-vside { display: flex; flex-direction: column; }
.bf-ms-vside .bf-ms-eb { display: block; padding-bottom: 8px; border-bottom: 1px solid var(--bf-stone-2); }
.bf-ms-vsub { margin-top: 16px; }
.bf-ms-vreq { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--bf-stone-2); }
.bf-ms-vno { font-family: var(--bf-serif); font-size: 20px; font-weight: 600; line-height: 1.1; color: var(--bf-ink); }
.bf-ms-vb { margin-top: 3px; }
.bf-ms-vfoot { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 13px; }
.bf-ms-vev { padding: 10px 0; font-size: 13px; line-height: 1.45; color: var(--bf-ink); border-bottom: 1px solid var(--bf-stone-2); }
.bf-ms-basis-stale { color: var(--bf-gold-deep); }
/* The set head's record, where its Confirm button was. */
.bf-ms-record { font-size: 13px; color: var(--bf-slate); white-space: nowrap; }

/* Mapping peek: the glance overlays the first letter's grid cell, not the dock's spare height. */
.bf-ms-peek.bf-peek-docked { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "origin" "page"; grid-auto-rows: max-content; align-content: start; justify-items: center; gap: 8px; overflow: visible; pointer-events: auto; }
.bf-ms-peek.bf-peek-docked:has(.bf-peek-origin:empty) { grid-template-areas: "name" "page"; }
.bf-ms-peek > * { width: var(--bf-peek-page-width); max-width: 100%; flex-shrink: 0; }
.bf-ms-peek .bf-peek-label { display: none; }
.bf-ms-peek .bf-peek-name { grid-area: name; line-height: 1.4; }
.bf-ms-peek .bf-peek-origin { grid-area: origin; }
.bf-ms-peek .bf-peek-shell { grid-area: page; cursor: pointer; }
.bf-ms-peek [data-ms-peek-page] { grid-area: auto / 1; }
.bf-ms-peek .bf-peek-shell:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; }
.bf-ms-peek .bf-peek-details { position: absolute; grid-area: page; bottom: 0; justify-self: center; z-index: 3; box-sizing: border-box; height: auto; max-height: none; padding: 12px 14px 12px; background: color-mix(in srgb, var(--bf-surface) 88%, transparent); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border-top: 1px solid color-mix(in srgb, var(--bf-ink) 8%, transparent); box-shadow: 0 -12px 28px color-mix(in srgb, var(--bf-surface) 28%, transparent); }
@supports not (backdrop-filter: blur(1px)) and not (-webkit-backdrop-filter: blur(1px)) {
  .bf-ms-peek .bf-peek-details { background: color-mix(in srgb, var(--bf-surface) 97%, transparent); }
}
.bf-ms-peek:not(.bf-peek-docked) .bf-peek-details { position: sticky; }
.bf-ms-peek .bf-peek-details:not([hidden])::before { content: 'At a glance'; display: block; margin-bottom: 6px; font: 600 11px/1.4 var(--bf-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bf-gold-deep); }
.bf-ms-peek .bf-ms-facts { margin: 0; row-gap: 2px; font-size: 13px; line-height: 1.4; }
.bf-ms-peek .bf-ms-fact-k { padding-top: 0; }
.bf-ms-peek .bf-ms-fact-v { min-width: 0; overflow-wrap: anywhere; }
.bf-ms-peek .bf-ms-psec { margin-top: 8px; padding-top: 8px; }
.bf-ms-peek .bf-ms-psec .bf-ms-eb { margin-bottom: 4px; }
.bf-ms-peek .bf-ms-ct div { padding: 2px 0; font-size: 13px; line-height: 1.4; }
.bf-ms-peek .bf-ms-ct div > span:last-child { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bf-ms-peek .bf-ms-plain-note { margin: 0; }
@media (prefers-reduced-transparency: reduce) {
  .bf-ms-peek .bf-peek-details, .bf-md-dialog .bf-md-foot { background: var(--bf-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 1279.98px) {
  .bf-ms-pane-slot { display: none; }
}
@media (max-width: 600px) {
  .bf-ms-foot { flex-wrap: wrap; }
  .bf-ms-head { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bf-ms-act { padding-left: 22px; flex-wrap: wrap; }
  .bf-ms-h2 { font-size: 21px; }
  .bf-ms-tabs { gap: 16px; }
  .bf-ms-end { font-size: 13px; }
  .bf-ms-row { grid-template-columns: 18px 34px minmax(0, 1fr); gap: 8px; }
  .bf-ms-rowbasis, .bf-ms-who, .bf-ms-xcell { grid-column: 3; justify-self: start; text-align: left; white-space: normal; }
  .bf-ms-grouphead { flex-wrap: wrap; gap: 4px 10px; padding-bottom: 4px; }
  .bf-ms-eb { font-size: 13px; white-space: normal; }
}

/* Gap's saved request checklist follows the shared request-row type scale. */
.bf-gap-looking-for { display: block; font-size: 13px; color: var(--bf-text-muted, #6b7280); }
progress[data-gap-reading] { display: block; width: min(100%, 320px); height: 6px; margin-top: 8px; }
progress[data-gap-reading][hidden] { display: none; }
.bf-ledger-stopped-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bf-warning); margin-right: 8px; }

/* FPU: a stopped upload is context above the reading count. */
.bf-upload-stopped { font-size: 14px; line-height: 1.5; }
.bf-upload-stopped .bf-upload-count { font-size: 14px; }
.bf-upload-stopped-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bf-warning); margin-right: 7px; }
.bf-finish-download-none { font-size: 13px; color: var(--bf-slate); }
.bf-upload-stopped-actions { display: flex; flex-wrap: wrap; gap: 20px; }
.bf-upload-stopped [hidden] { display: none; }
.bf-upload-missing { margin-top: 12px; overflow-wrap: anywhere; }
.bf-upload-missing summary { cursor: pointer; }

.bf-finish-bates-change { margin-left: 12px; font-family: var(--bf-sans); font-size: 14px; }




/* FPX: Finish work and served productions (direction A). */
/* Direction A — the two areas. Reuses the Gap screen's segmented control. */
.bf-finish-segments { margin-bottom: 28px; }
.bf-finish-segments .bf-document-view { min-height: 42px; font-size: 15px; }
.bf-finish-segments .bf-document-view-count { margin-left: 2px; }
.bf-finish-panel-note { margin: -6px 0 6px; font-size: 15px; line-height: 1.55; color: var(--bf-slate); max-width: 860px; }
.bf-finish-panel-note strong { color: var(--bf-ink); font-weight: 600; }
.bf-finish-already-produced { margin: 18px 0 8px; max-width: 820px; }
.bf-finish-already-produced h2 { margin: 0 0 6px; font: 600 20px/1.2 var(--bf-serif); color: var(--bf-ink); }
.bf-finish-already-produced p { margin: 0 0 10px; font-size: 14px; color: var(--bf-slate); }
.bf-finish-prior-row { padding: 7px 0; border-top: 1px solid var(--bf-stone-2); font-size: 14px; color: var(--bf-ink); }


/* Bates numbering chooser — restyled: choice, then its consequence on one line; the refusal in red, with air. */
.bf-finish-numbering { max-width: 820px; margin: 22px 0 4px; }
.bf-finish-numbering legend { margin: 0; font-size: 15px; font-weight: 600; color: var(--bf-ink); }
.bf-finish-numbering-prev { margin: 6px 0 10px; font-size: 14px; line-height: 1.5; color: var(--bf-slate); }
.bf-finish-numbering-prev .bf-finish-mono { color: var(--bf-gold-deep); }
.bf-finish-numbering-group { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px 0; }
.bf-finish-numbering-group + .bf-finish-numbering-group { border-top: 1px solid var(--bf-stone-2); }
.bf-finish-numbering-group .bf-radio { margin-top: 5px; }
.bf-finish-numbering-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; min-height: 26px; font-size: 15px; font-weight: 500; color: var(--bf-ink); cursor: pointer; }
.bf-finish-starts { font-size: 14px; font-weight: 400; color: var(--bf-slate); white-space: nowrap; }
.bf-finish-starts .bf-finish-mono { color: var(--bf-gold-deep); font-size: 14px; }
.bf-finish-starts-empty { color: var(--bf-slate); }
.bf-finish-option-field { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; }
.bf-finish-option-field .bf-input { box-sizing: border-box; width: 240px; height: 40px; font-family: var(--bf-mono); font-size: 15px; letter-spacing: .02em; }
.bf-finish-numbering-hint { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--bf-slate); }
.bf-finish-numbering-error { margin: 10px 0 0; max-width: 640px; font-size: 14px; line-height: 1.5; color: var(--bf-danger); }
.bf-finish-numbering-error .bf-finish-mono { color: inherit; }
.bf-finish-numbering .bf-input[aria-invalid="true"] { border-color: var(--bf-danger); box-shadow: 0 0 0 3px var(--bf-danger-soft); }
.bf-finish-option-quiet .bf-finish-numbering-option { color: var(--bf-slate); font-weight: 400; }

/* Served productions — a table, one row per production, a row opens in place. */
.bf-finish-served-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.bf-finish-served-head h2 { margin: 0; font: 600 23px/1.15 var(--bf-serif); color: var(--bf-ink); }
.bf-finish-served-head .bf-finish-meta { font-size: 13px; color: var(--bf-slate); }
.bf-finish-served .bf-table th { padding: 12px 16px; }
.bf-finish-served .bf-table td { padding: 14px 16px; font-size: 15px; }
.bf-finish-served .bf-table td.bf-finish-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bf-finish-served .bf-table th.bf-finish-num { text-align: right; }
.bf-finish-served .bf-finish-range { font: 500 14px var(--bf-mono); color: var(--bf-gold-deep); white-space: nowrap; }
.bf-finish-served .bf-finish-served-row { cursor: pointer; }
.bf-finish-served .bf-finish-served-row .bf-t { font-size: 15px; }
.bf-finish-served .bf-finish-served-row[aria-expanded="true"] td { background: var(--bf-surface-2); border-bottom-color: transparent; }
.bf-finish-served .bf-finish-served-row .bf-finish-chevron { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--bf-slate); transition: transform .2s; }
.bf-finish-served .bf-finish-served-row[aria-expanded="true"] .bf-finish-chevron { transform: rotate(180deg); color: var(--bf-ink); }
.bf-finish-served .bf-finish-cell-end { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.bf-finish-served .bf-finish-details > td { background: var(--bf-surface-2); padding: 2px 16px 22px 16px; }
.bf-finish-details-grid { margin-top: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 32px; max-width: 1180px; }
.bf-finish-details-grid .bf-finish-fact-value { font-size: 15px; }
.bf-finish-details-actions { display: flex; align-items: center; gap: 22px; margin-top: 20px; scroll-margin-bottom: 16px; }
.bf-finish-details-actions .bf-btn-link { padding: 0; min-height: 0; }
.bf-finish-served .bf-table-empty { font-size: 15px; }


.bf-finish-empty { padding: 26px 0 8px; max-width: 800px; }
.bf-finish-empty h2 { margin: 0 0 8px; font: 600 23px/1.2 var(--bf-serif); color: var(--bf-ink); }
.bf-finish-empty p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--bf-slate); }
.bf-finish-empty .bf-btn { margin-top: 16px; }
.bf-finish-empty .bf-finish-empty-actions { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.bf-finish-empty .bf-finish-empty-actions .bf-btn { margin-top: 0; }


.bf-finish-numbering { border: 0; padding: 0; min-width: 0; }
.bf-finish-rows { border-top: 1px solid var(--bf-stone); }
.bf-finish-rows .bf-finish-row:last-child { border-bottom: 0; }
.bf-finish-numbering-error { color: var(--bf-danger); }
@media (max-width: 1100px) { .bf-finish-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The request type is a quiet case-level choice, carried across setup steps. */
.bf-instrument-switch { display: flex; align-items: center; gap: 1rem; margin: .25rem 0 1rem; }
.bf-instrument-switch [aria-current="page"] { color: var(--color-ink, #23324b); font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }
.bf-disclosure-category { display: flex; align-items: flex-start; gap: .6rem; margin: .65rem 0; line-height: 1.45; }
.bf-disclosure-category input { margin-top: .3rem; flex: none; }
.bf-disclosure-categories { line-height: 1.5; padding-left: 1.3rem; }
.bf-disclosure-categories li { margin: .4rem 0; }
.bf-disclosure-picker { padding: .75rem 0; max-width: 32rem; }
.bf-finish-service-actions { display: flex; align-items: center; gap: 1rem; }
.bf-response-attachment { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }