@tobq/boardclip 0.0.0-stage → 2.1.108

package/site/shared/clipboard-popup.css

@@ -0,0 +1,1046 @@
+@import url("clipboard-tokens.css");
+
+/* The icon font, self-hosted (vendor/fonts/README.md): every app window and the
+   website load THIS sheet, so this is its one declaration. No window waits on
+   Google Fonts, and font-display: block means a reload never flashes the
+   ligature words ("settings", "close") while the font loads. */
+@font-face {
+  font-family: "Material Symbols Rounded";
+  font-display: block;
+  src: url("vendor/fonts/material-symbols-rounded.woff2") format("woff2");
+}
+
+/* ONE icon spec: Material Symbols Rounded (the vendored variable font above),
+   axes pinned HERE and nowhere else. FILL 1 is a state signal only
+   (pinned star, active facet): set --icon-fill: 1 on the icon or a parent. */
+.mi {
+  font-family: "Material Symbols Rounded";
+  font-size: var(--icon-md);
+  font-weight: var(--fw-regular);
+  font-style: normal;
+  font-variation-settings: "FILL" var(--icon-fill, 0), "wght" 400, "GRAD" 0, "opsz" 20;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+}
+.mi.filled { --icon-fill: 1; }
+.mi.sm { font-size: var(--icon-sm); }
+.mi.lg { font-size: var(--icon-lg); }
+.mi.mid { vertical-align: middle; }
+
+/* ---------- Shared primitives (every window + the website demo) ---------- */
+
+/* ONE motion switch: with prefers-reduced-motion every state transition (they
+   all run on the shared --dur, the reveal and the panel fold included) is instant. */
+@media (prefers-reduced-motion: reduce) {
+  :root { --dur: 0ms; }
+}
+
+/* ONE keyboard focus ring for every BoardClip control: a box-shadow, so no
+   outline and no layout shift. Text fields show focus on their own edge. */
+:is(:root[data-theme], .bc-popup) :where(button, [role="button"], a[href], .filter-tag, .seg-btn, .np-btn, .bc-menu-item):focus-visible {
+  outline: none; box-shadow: var(--focus-ring);
+}
+
+/* ONE floating surface for every panel that floats over content: menus,
+   submenus, popovers (a row's keypad / group picker), suggest, dialogs, the
+   toast and the Newest pill. Flat in-window, this is the only elevation. */
+.search-suggest, .dialog, .toast, .list-newest, .tag-submenu, .bc-menu { background: var(--menu); border-radius: var(--r-panel); padding: var(--sp-2);
+                                         box-shadow: 0 8px 24px var(--shadow), 0 0 0 1px var(--menu-edge); }
+
+/* ONE button family: a fill, never a border. Default / primary / danger /
+   quiet, plus .sm (20px text affordance in bars and footers). */
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--ctl-lg); padding: 0 var(--sp-6);
+       border: none; border-radius: var(--r-ctl); background: var(--ctl-fill); color: var(--text); font-family: inherit; font-size: var(--fs-ui);
+       font-weight: var(--fw-regular); line-height: var(--lh-ui); white-space: nowrap; cursor: pointer;
+       transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
+.btn:hover { background: var(--ctl-fill-hover); }
+.btn.primary { background: var(--accent); color: var(--active-fg); }
+.btn.primary:hover { background: var(--accent-hover); }
+.btn.danger { background: var(--red); color: var(--danger-fg); }
+.btn.danger:hover { background: color-mix(in srgb, var(--red) 86%, var(--text)); }
+.btn.quiet { background: transparent; color: var(--text-dim); }
+.btn.quiet:hover { background: var(--hover); color: var(--text); }
+.btn.sm { height: var(--ctl-sm); padding: 0 var(--sp-3); font-size: var(--fs-meta); }
+/* An accent text action (Undo in a toast, "Did you mean", a pane head's
+   Accept, the merge note's "Show them"): a quiet button in the accent TEXT
+   colour, the accent tint on hover. */
+.btn.quiet.accent, .btn.quiet.accent:hover { color: var(--accent-text); }
+.btn.quiet.accent:hover { background: var(--accent-bg); }
+/* A default button whose action throws something away (Remove conflict): the
+   menu's danger cue on hover / focus, never a second button family. */
+.btn.discard:hover, .btn.discard:focus-visible { background: var(--red-bg); color: var(--red); }
+.btn:disabled, .btn:disabled:hover { background: var(--ctl-fill); color: var(--text-dim); cursor: not-allowed; }
+.btn.quiet:disabled, .btn.quiet:disabled:hover { background: transparent; }
+
+/* ONE overline: the small uppercase heading over a SECTION (a settings
+   section, the approval prompt's clip card, the demo's note). Window titles
+   are NOT overlines (they are .bc-bar-title, sentence case). */
+.overline, .settings-note, .settings-section h3 {
+  font-size: var(--fs-meta); font-weight: var(--fw-strong); line-height: var(--lh-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
+}
+/* ONE small label, sentence case: names a group of controls or a pane inside
+   a section (an options-panel row, a list in a settings section, a merge
+   pane head). Deliberately not an overline: it sits beside
+   controls, where an uppercase heading would shout. */
+.bc-label, .opts-facet-label, .settings-list-title, .bc-head-label {
+  font-size: var(--fs-meta); font-weight: var(--fw-regular); line-height: var(--lh-ui); color: var(--text-dim);
+}
+
+/* ONE scrollbar for every BoardClip surface: the app windows (data-theme on
+   <html>) and the demo popup (.bc-popup). The thumb is inset by a transparent
+   border clipped to the padding box, so it works on any background. Chromium
+   ignores these pseudo-elements on an element that sets scrollbar-width or
+   scrollbar-color, so nothing else may set them (except to hide a bar). */
+:is(:root[data-theme], .bc-popup) ::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
+:is(:root[data-theme], .bc-popup) ::-webkit-scrollbar-track,
+:is(:root[data-theme], .bc-popup) ::-webkit-scrollbar-corner { background: transparent; }
+:is(:root[data-theme], .bc-popup) ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); background-clip: padding-box; border: 2px solid transparent; border-radius: var(--r-panel); }
+:is(:root[data-theme], .bc-popup) ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
+@supports not selector(::-webkit-scrollbar) {
+  :where(:root[data-theme], .bc-popup) * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
+}
+
+/* ONE text-selection colour (typed text, a find match left selected, any
+   selectable copy), in every window and the demo. */
+:is(:root[data-theme], .bc-popup) ::selection { background: var(--accent-bg-strong); }
+
+/* Filled text fields: a fill, never a border; focus (and a recording shortcut
+   field) draws an inset accent edge, which never shifts layout. The popup's
+   search field and the clip windows' title / find fields are the flat
+   exception (no fill, a hairline underline). */
+.setting-row input:focus, .prompt-input:focus,
+.shortcut-btn:hover, .shortcut-btn.recording { box-shadow: inset 0 0 0 1px var(--accent); }
+
+/* ---------- Components ---------- */
+
+.main-view { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
+.main-view.hidden { display: none; }
+/* TWO tones, the same in every window: the chrome (the popup's header with
+   the search, the options panel and the chips; the settings header; every
+   window bar and foot) is a band in --surface, the content (the results, the
+   settings body, the editor's text, the viewer) sits on --canvas, which the
+   window (body, or the demo's frame) paints; the band ends on the --line
+   hairline. Under glass --surface is a translucent lift over the one scrim
+   (no second blur). */
+.sticky { flex-shrink: 0; background: var(--surface); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); z-index: 10; position: relative; }
+/* The header (and the settings header) are NOT -webkit-app-region: drag: that
+   swallowed every click and double-click-maximised. Core.attachWindowDrag owns
+   them: a click focuses the search, a press-and-move past 4 px moves the window. */
+.sticky header { display: flex; align-items: center; padding: var(--sp-4) var(--edge-ctl) 0 var(--gutter); gap: var(--sp-3); }
+.count { font-size: var(--fs-meta); color: var(--text-dim); flex: 1; }
+/* .close-btn is only a hook now: every close is <span class="mi">close</span>
+   inside a plain .icon-btn. */
+.icon-btn { background: none; border: none; border-radius: var(--r-ctl); color: var(--text-dim); cursor: pointer;
+            width: var(--ctl-md); height: var(--ctl-md); display: flex; align-items: center; justify-content: center;
+            transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); padding: 0; }
+.icon-btn:hover { color: var(--text); background: var(--hover); }
+.icon-btn.danger:hover, .icon-btn.danger:focus-visible { color: var(--red); background: var(--red-bg); }
+.icon-btn:disabled { opacity: .45; cursor: not-allowed; }
+.icon-btn:disabled:hover { color: var(--text-dim); background: none; }
+.icon-btn .mi { font-size: var(--icon-md); }
+/* ONE reveal: a control that slides in and out sits in a 0fr -> 1fr width
+   track (Forge's QueueStrip collapser), so the text beside it takes the full
+   width while it is hidden and the reveal animates instead of snapping. Two
+   belts, both unconditional: `min-width: 0` on the track's child (the
+   0fr track is minmax(auto, 0fr), and auto = the child's min-content width,
+   i.e. no collapse) and a padding-less inner wrapper (a border box cannot be
+   crushed below its own padding). Open = .open on the track (or a consumer's
+   own selector, e.g. a row hover). Closed controls go invisible once the
+   track has shut, so Tab never lands on them. The space before a revealed
+   control is its own (--reveal-gap, a margin INSIDE the track), never the
+   container's flex gap: a gap stays between closed, 0 px tracks. Used by the
+   search field's buttons and, next, the row actions. Markup:
+   <span class="bc-reveal"><span class="bc-reveal-inner">...</span></span> */
+.bc-reveal { display: grid; grid-template-columns: 0fr; flex-shrink: 0; overflow: clip; overflow-clip-margin: var(--sp-2);
+             transition: grid-template-columns var(--dur) var(--ease); }
+.bc-reveal > * { min-width: 0; }
+/* visibility interpolates as "visible" for the whole transition when either end is
+   visible: shown at once on open, hidden only once the track has shut.
+   content-visibility does the same (allow-discrete) and also skips laying out a
+   closed reveal's contents: every list row carries two closed reveals, and
+   laying out their buttons cost ~8 ms of each keystroke's rebuild (measured,
+   owner scale). Every open selector sets both. */
+.bc-reveal-inner { display: flex; align-items: center; gap: var(--sp-1); padding: 0; visibility: hidden; content-visibility: hidden;
+                   transition: visibility var(--dur) var(--ease), content-visibility var(--dur) var(--ease) allow-discrete; }
+.bc-reveal-inner > :first-child { margin-inline-start: var(--reveal-gap, 0); }
+.bc-reveal.open { grid-template-columns: 1fr; }
+.bc-reveal.open > .bc-reveal-inner { visibility: visible; content-visibility: visible; }
+
+/* The search field is FLAT: no fill, no border, a hairline underline (an inset
+   shadow, so focus never shifts layout) that turns accent while focused. */
+.search-row { display: flex; align-items: center; gap: 0; --reveal-gap: var(--sp-1); margin: var(--sp-3) var(--gutter) var(--sp-2); background: transparent; border: none; border-radius: 0;
+              box-shadow: inset 0 -1px 0 var(--line); transition: box-shadow var(--dur) var(--ease); }
+/* Focused = ONE state, set by Core.attachSearchBox: the field (or its buttons)
+   has the focus AND the window does - the same state that swaps the
+   placeholder, so an unfocused popup never shows an accent line beside
+   "Click here to search...". */
+.search-row.is-focused { box-shadow: inset 0 -1px 0 var(--accent); }
+.search-field { position: relative; flex: 1; min-width: 0; display: flex; }
+.search { flex: 1; background: transparent; border: none; padding: var(--sp-3) var(--sp-2) var(--sp-3) 0; color: var(--text); font-size: var(--fs-text); outline: none; font-family: inherit; min-width: 0; }
+.search::placeholder { color: var(--text-dim); }
+/* The live-highlight input paints its text transparent (the mirror shows it);
+   ::placeholder inherits that fill, so it must set its own. */
+.search-live::placeholder { -webkit-text-fill-color: var(--text-dim); }
+.search-row .icon-btn { flex-shrink: 0; }
+/* The last in-field button's glyph (tune, in the tools reveal: open whenever
+   any in-field button is) ends on the gutter with the header's gear and the
+   selection bar's close, the underline under it. */
+.search-row > .bc-reveal[data-reveal="tools"] { transition: grid-template-columns var(--dur) var(--ease), margin-right var(--dur) var(--ease); }
+.search-row > .bc-reveal[data-reveal="tools"].open { margin-right: calc(var(--edge-ctl) - var(--gutter)); } /* closed, the field keeps the whole row */
+/* A toggled in-field control: Regex (the search field's and the find bar's),
+   match case, Recent order, the options panel open (or a filter it owns in
+   the query). */
+.rx-btn.active, .case-btn.active, .sort-btn.active, .opts-btn.active { color: var(--accent); background: var(--accent-bg); }
+.rx-btn.active:hover, .case-btn.active:hover, .sort-btn.active:hover, .opts-btn.active:hover { color: var(--accent); background: var(--accent-bg-strong); }
+
+/* Live query-syntax highlight: a colored backdrop mirror UNDER a transparent input. The
+   two must share identical text metrics (font/size/padding/line-height) so glyphs align. */
+.search-hl { position: absolute; inset: 0; padding: var(--sp-3) var(--sp-2) var(--sp-3) 0;
+             font-size: var(--fs-text); font-family: inherit; line-height: normal; color: var(--text);
+             white-space: pre; overflow: hidden; pointer-events: none; z-index: 0; border: none;
+             display: flex; align-items: center; }
+.search-live { position: relative; z-index: 1; background: transparent; -webkit-text-fill-color: transparent; caret-color: var(--text); }
+.qh-prefix { color: var(--accent-text); font-weight: var(--fw-strong); }
+.qh-neg { color: var(--red); font-weight: var(--fw-strong); }
+.qh-value { color: var(--text); }
+.qh-regex { color: var(--green); }
+.qh-quote { color: var(--text-dim); }
+/* OR and the brackets of a group: the language's operators, like a key. */
+.qh-op { color: var(--accent-text); font-weight: var(--fw-strong); }
+/* Exactly the invalid key or value (Search.validateQuery), nothing around it. */
+.qh-unknown { color: var(--red); text-decoration: underline wavy var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
+.qh-ws { color: transparent; }
+/* The top suggestion's rest, after the typed text (Tab or Right at the end takes it). */
+.qh-ghost { color: var(--text-dim); opacity: .7; }
+
+/* ONE hint line under the field (an invalid token, a broken regex): a rows
+   fold, 0 px and nothing reserved while there is nothing to say. */
+.search-hint { display: grid; grid-template-rows: 0fr; opacity: 0; margin: 0 var(--gutter);
+               transition: grid-template-rows var(--dur) var(--ease), opacity var(--dur) var(--ease); }
+.search-hint.show { grid-template-rows: 1fr; opacity: 1; }
+.search-hint-clip { min-height: 0; overflow: hidden; }
+.search-hint-row { display: flex; align-items: baseline; gap: var(--sp-2); padding: 0 0 var(--sp-2); font-size: var(--fs-meta); line-height: var(--lh-ui); color: var(--text-dim); }
+.search-hint-row > .mi { font-size: var(--icon-sm); color: var(--red); align-self: center; }
+.search-hint-fix { margin-left: var(--sp-1); } /* the shared .btn.quiet.sm.accent */
+.search-hint-fix code { font-family: var(--font-mono); }
+
+/* Autocomplete dropdown for the token being typed. */
+/* .search-suggest shares the floating-surface bg/shadow/radius rule (top of file); only its
+   positioning + scroll live here. Its rows ARE menu rows (.bc-menu-item): the
+   token in mono, its own hint dim at the end. */
+.search-suggest { position: absolute; top: calc(100% + var(--sp-2)); left: 0; right: 0; z-index: 40;
+                  overflow: hidden; max-height: 240px; overflow-y: auto; }
+.search-suggest.hidden { display: none; }
+.search-suggest-item .ss-text { color: var(--text); font-family: var(--font-mono); }
+.search-suggest-item .ss-hint { flex-shrink: 0; color: var(--text-dim); font-size: var(--fs-meta); }
+.search-suggest-item.active { background: var(--menu-hover); }
+
+/* Search options panel (the "tune" toggle): an in-flow fold under the search
+   field, inside the sticky header. Closed = grid row 0fr + opacity 0 + inert
+   (Forge's SearchFacets fold); open = 1fr. Its scroller is capped by
+   --opts-h (Core.attachSearchBox: ~40 % of the popup by default, dragged on
+   the bottom handle, kept per machine) and fades its edges (.bc-scroll-fade). */
+.search-opts { display: grid; grid-template-rows: 0fr; opacity: 0;
+               transition: grid-template-rows var(--dur) var(--ease), opacity var(--dur) var(--ease); }
+.search-opts.open { grid-template-rows: 1fr; opacity: 1; }
+.search-opts-clip { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
+.search-opts-scroll { max-height: var(--opts-h, 240px); overflow-y: auto; padding: var(--sp-2) var(--gutter) var(--sp-4); }
+.search-opts.resizing .search-opts-scroll { max-height: none; height: var(--opts-h, 240px); }
+/* Filter units flow and wrap (Forge's FacetRows): as many per line as fit.
+   Every label takes the same width, so units stacked in a narrow popup still
+   line their chips up in one column. */
+.opts-facets { --opts-label-w: 3.2em; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-10); }
+.opts-unit { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; max-width: 100%; } /* whole units move to the next line; only one wider than the panel wraps its chips */
+/* A real width, not just a flex-basis: Chromium sizes the unit from the
+   label's TEXT width, then lays the label out at its basis, taking the
+   difference from the chips (the last chip of a unit that fit wrapped). */
+.opts-unit > .opts-facet-label { flex: 0 0 auto; width: var(--opts-label-w); }
+.opts-facet-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); min-width: 0; }
+/* A key chip paints its prefix as the field will (.qh-prefix), and the notes
+   their tokens (.qh-neg, .qh-quote): what the panel shows is what you type. */
+.opts-notes { flex: 1 0 100%; margin: 0; padding-left: calc(var(--opts-label-w) + var(--sp-3) + var(--sp-3)); font-size: var(--fs-meta); line-height: var(--lh-ui); color: var(--text-dim); }
+.opts-notes-sep { margin: 0 var(--sp-2); }
+/* Bottom edge: the resize handle (Forge's ResizeHandle: a chrome-less strip,
+   accent while hovered or dragged) over the panel's divider line. */
+.search-opts-resize { position: relative; flex-shrink: 0; height: var(--sp-3); cursor: row-resize; touch-action: none; }
+.search-opts-resize::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line);
+                             transition: background-color var(--dur) var(--ease), height var(--dur) var(--ease); }
+.search-opts-resize:hover::after, .search-opts.resizing .search-opts-resize::after { height: 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
+
+/* ONE scroll-edge fade (Forge's useScrollFade): a real alpha mask, so content
+   dissolves into whatever is behind it, glass included. Core.attachScrollFade
+   sets --fade-top / --fade-bottom to the preset size only while content is
+   hidden past that edge; @property makes them animatable, so the fade eases in
+   and out as you reach an end. */
+@property --fade-top { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@property --fade-bottom { syntax: "<length>"; inherits: false; initial-value: 0px; }
+.bc-scroll-fade {
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black var(--fade-top), black calc(100% - var(--fade-bottom)), transparent 100%);
+  mask-image: linear-gradient(to bottom, transparent 0, black var(--fade-top), black calc(100% - var(--fade-bottom)), transparent 100%);
+  transition: --fade-top var(--dur) var(--ease), --fade-bottom var(--dur) var(--ease);
+}
+/* The same fade sideways, for a one-line strip that scrolls (the chip row, a
+   window bar's keys): Core.attachScrollFade(el, preset, { axis: 'x' }). */
+@property --fade-left { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@property --fade-right { syntax: "<length>"; inherits: false; initial-value: 0px; }
+.bc-scroll-fade-x {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--fade-left), black calc(100% - var(--fade-right)), transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0, black var(--fade-left), black calc(100% - var(--fade-right)), transparent 100%);
+  transition: --fade-left var(--dur) var(--ease), --fade-right var(--dur) var(--ease);
+}
+
+/* The chip row (Core.attachChipStrip): ONE line that scrolls sideways under
+   the mask fade (.bc-scroll-fade-x), every chip once the search options panel
+   is open (.expanded, wrapped). .strip-moving is the switch: the row's height
+   follows while each chip glides to its new place (FLIP). */
+.group-filters { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--gutter) var(--sp-1) calc(var(--gutter) - var(--sp-2)); box-sizing: border-box;
+                 flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; position: relative; z-index: 30; }
+.group-filters::-webkit-scrollbar { display: none; }
+.group-filters > * { flex-shrink: 0; }
+.group-filters.expanded { flex-wrap: wrap; overflow: visible; }
+.group-filters.strip-moving { overflow: hidden; }
+/* ONE chip (Core.renderChip): the chip bar's icon facets and group chips and
+   the options panel's facet chips. Idle = dim text, no fill, no border (a
+   group chip: its name in the accent, so the groups read at a glance; owner
+   2026-10-09: "too hard to see before selected"); hover = the hover overlay;
+   active (include) = the whole chip lit, a solid accent fill with the accent's
+   ink and a filled glyph; excluded = struck through. One shape: the pill. */
+.filter-tag { min-height: var(--ctl-sm); max-width: 170px; box-sizing: border-box; font-size: var(--fs-ui); padding: 0 var(--sp-3); border-radius: var(--r-chip); border: 0;
+              background: transparent; color: var(--text-dim); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); line-height: var(--lh-ui); position: relative;
+              display: inline-flex; align-items: center; gap: var(--sp-1); vertical-align: top; font-family: inherit; }
+.filter-tag.icon-filter { min-width: var(--ctl-sm); height: var(--ctl-sm); justify-content: center; padding: 0 var(--sp-2); }
+.filter-tag:hover { background: var(--hover); color: var(--text); }
+.filter-tag.group-tag, .filter-tag.group-tag:hover { color: var(--accent-text); }
+.filter-tag.active, .filter-tag.active:hover { background: var(--accent); color: var(--active-fg); --icon-fill: 1; }
+.filter-tag.active:hover { background: var(--accent-hover); }
+.filter-tag.excluded { color: var(--text-dim); text-decoration: line-through; text-decoration-thickness: 1px; opacity: .6; }
+/* A greyed chip (the availability census, Forge's disabledTier): it would show
+   nothing under the other filters (.4), or can never match with them
+   (.dis-structural, .25). Inert (the controller ignores aria-disabled; panel
+   chips are disabled buttons), the reason is its tooltip, it never moves. */
+.filter-tag:disabled, .filter-tag.is-disabled { opacity: .4; cursor: default; }
+.filter-tag.is-disabled.dis-structural { opacity: .25; }
+.filter-tag:disabled:hover, .filter-tag.is-disabled:hover { background: transparent; color: var(--text-dim); }
+/* The selection at the front of the chip row (Core.renderFilterBar): the
+   selected groups (then the excluded ones), led by their or / and when two or
+   more are joined, a hairline either side. The panel's Type row leads with
+   the same toggle. Chips glide in and out (Core.flipChildren). */
+.cluster-sep { flex: 0 0 1px; align-self: stretch; margin: var(--sp-1) 0; background: var(--line); }
+.conn-toggle { flex-shrink: 0; min-height: var(--ctl-sm); padding: 0 var(--sp-2); border: 0; border-radius: var(--r-chip); background: transparent;
+               color: var(--accent-text); font: inherit; font-size: var(--fs-ui); font-weight: var(--fw-strong); cursor: pointer; }
+.conn-toggle:hover { background: var(--accent-bg); }
+
+/* The list sits in a wrapper so the "Newest" pill can float over its top edge
+   without being part of the scrolled rows (Core.createClipList owns both). */
+.list-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.list-newest { position: absolute; top: var(--sp-4); left: 50%; z-index: 30; display: inline-flex; align-items: center; gap: var(--sp-2);
+               height: var(--ctl-md); padding: 0 var(--sp-5) 0 var(--sp-4); border: none; border-radius: var(--r-chip); color: var(--text);
+               font: inherit; font-size: var(--fs-meta); cursor: pointer;
+               opacity: 0; pointer-events: none; transform: translate(-50%, -6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
+.list-newest.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
+.list-newest:hover { color: var(--accent-text); }
+.list-newest .mi.sm { font-size: var(--icon-sm); }
+.list-newest-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+.list-newest.has-new .list-newest-dot { display: inline-block; }
+/* The results fade out at an edge while more is past it (the shared
+   .bc-scroll-fade, Core.createClipList); scroll-padding keeps the keyboard
+   cursor out of the fades when it is scrolled into view. */
+.list { flex: 1; overflow-y: auto; padding: 0 0 var(--sp-4); min-height: 0; scroll-padding-block: 36px; }
+.item { padding: var(--sp-4) var(--gutter); cursor: pointer; transition: background-color var(--dur) var(--ease); position: relative; border-bottom: 1px solid var(--line-faint); color: inherit; }
+/* Row states: hover = the --hover overlay; the keyboard cursor (the row Enter
+   pastes) = --accent-bg; a candidate duplicate of the hovered or cursor row
+   (.similar, Core.similarClipIds) = a NEUTRAL wash under --hover plus a dotted
+   dim edge, never the selection hue, so it can't read as the cursor or a
+   checked row. ONE 2px left edge, an overlay so it never shifts the row's
+   content: similar = dotted --text-dim, pin = --pin (wins over similar),
+   multi-select = --accent (wins over both). No state changes a row's size. */
+.item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--row-edge, transparent); pointer-events: none; }
+.item.similar { background: color-mix(in srgb, var(--hover) var(--similar-mix), transparent); --row-edge: repeating-linear-gradient(to bottom, var(--text-dim) 0 3px, transparent 3px 6px); }
+.item.has-pin { --row-edge: var(--pin); }
+.item:hover { background: var(--hover); }
+.item.selected { background: var(--accent-bg); }
+/* No flex gap: the space after the star is its own margin, so a closed
+   actions track at the end of the row takes exactly 0 px. */
+.item-row { display: flex; align-items: flex-start; }
+.pin-area { position: relative; flex-shrink: 0; display: flex; align-items: center; margin-right: var(--sp-4); margin-top: calc((var(--fs-ui) * var(--lh-ui) - var(--ctl-md)) / 2); }
+.star { display: flex; align-items: center; justify-content: center; width: var(--ctl-md); height: var(--ctl-md); background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0;
+        transition: color var(--dur) var(--ease); line-height: 1; }
+.star.active, .star:hover { color: var(--pin); }
+/* The keypad (renderKeypadMenu) as a block inside a floating surface: the
+   clip menu's Numpad submenu and a row's # popover. Real numpad formation:
+   7 8 9 / 4 5 6 / 1 2 3 (the 3-column grid lays it out like the keypad), keys
+   aligned with the menu rows' icon column. Neutral keys; the clip's own key is
+   the accent (the selection colour); a key another clip holds carries a dot. */
+.numpad-picker { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); }
+/* The keypad alone (a clip with no key yet): the same inset on all four
+   sides; the icon-column alignment only matters beside menu rows. */
+.numpad-picker:only-child { padding: var(--sp-1); }
+.np-row { display: grid; grid-template-columns: repeat(3, var(--ctl-md)); gap: var(--sp-1); justify-content: start; }
+.np-btn { position: relative; width: var(--ctl-md); height: var(--ctl-md); display: flex; align-items: center; justify-content: center; padding: 0 0 var(--sp-1); border: none; border-radius: var(--r-ctl);
+          background: var(--ctl-fill); color: var(--text); font-family: inherit; font-size: var(--fs-ui); line-height: 1; font-variant-numeric: tabular-nums;
+          cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
+.np-btn:hover { background: var(--ctl-fill-hover); }
+/* A key another clip holds: a dot under the digit (every digit sits a step
+   high, so the dot keeps its clearance). */
+.np-btn.taken::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; width: var(--sp-2); height: var(--sp-2); margin: 0 auto;
+                       border-radius: var(--r-chip); background: var(--text-dim); }
+.np-btn.current { background: var(--accent-bg); color: var(--accent-text); font-weight: var(--fw-strong); }
+.np-btn.current:hover { background: var(--accent-bg-strong); }
+.bc-menu.bc-keypad, .bc-menu .tag-submenu.bc-keypad { min-width: 0; }
+.filter-tag.virtual { opacity: .82; font-style: italic; }
+.tag-caret { flex: 0 0 auto; font-size: var(--icon-md); line-height: 1; opacity: .72; margin-left: auto; }
+.filter-tag .tag-caret { margin-left: var(--sp-1); margin-right: calc(-1 * var(--sp-1)); }
+.tag-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-ui); }
+.tag-menu-node { position: relative; display: block; }
+.group-filters > .tag-menu-node { display: inline-flex; }
+.tag-submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 150px; max-width: 240px; z-index: 70; }
+.tag-menu-node:hover > .tag-submenu, .tag-menu-node:focus-within > .tag-submenu { display: block; }
+.tag-submenu .tag-submenu { top: calc(-1 * var(--sp-2)); left: calc(100% - 1px); }
+/* A chip's submenu in the top layer (popover="manual", placed and shown by
+   installSubmenuAutoflip): its own box, and shown only while it is open (the
+   :hover rule above would otherwise show it in place inside the strip). */
+.group-filters .tag-menu-node > .tag-submenu[popover] { position: fixed; inset: auto; margin: 0; border: 0; overflow: visible; color: inherit; }
+.group-filters .tag-menu-node > .tag-submenu[popover]:not(:popover-open) { display: none; }
+.group-filters .tag-menu-node > .tag-submenu[popover]:popover-open { display: block; }
+/* A group chip's dropdown holds menu rows (renderTagTreeMenuNode, depth > 0):
+   an excluded group is struck through like its chip, a greyed one dims in the
+   chips' two tiers, and a parent row stays lit while its submenu is out. */
+.bc-menu-item.excluded > .bc-menu-label { text-decoration: line-through; }
+.bc-menu-item.is-disabled { opacity: .4; cursor: default; }
+.bc-menu-item.is-disabled.dis-structural { opacity: .25; }
+.bc-menu-item.is-disabled:hover { background: none; }
+.group-filters .tag-menu-node:hover > .bc-menu-item { background: var(--menu-hover); }
+.content { flex: 1; min-width: 0; }
+/* Row anatomy (Core.renderClipItem): the primary line (a real title at the
+   strong weight, or an untitled clip's first line at the regular weight), the
+   dim mono preview of the rest, then the meta line. Every line is ONE line, so
+   a row's height depends only on which lines it has, never on its width. */
+.clip-title { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-strong); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.clip-title.derived { font-weight: var(--fw-regular); }
+.clip-title + .preview { margin-top: var(--sp-1); }
+.preview { font-size: var(--fs-ui); line-height: var(--lh-text); color: var(--text-dim); font-family: var(--font-mono); }
+.preview.collapsed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.preview.expanded { white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; background: var(--surface); border-radius: var(--r-2); padding: var(--sp-4); margin: var(--sp-1) 0; }
+/* Image previews render at --clip-img-h (Ctrl+wheel / Settings, default 60px),
+   capped by --clip-img-cap (the list's visible height, set by Core.createImageZoom)
+   so one preview never outgrows the list. The wrapper is the picture's box (so
+   the row's buttons can float over its corner): with known dims (--ar/--nw from
+   the row markup) its width is the smallest of the row, height x aspect ratio
+   and the image's real width - so the ratio holds, nothing overflows sideways
+   and nothing is enlarged past its real size. Legacy clips without dims fall
+   back to max-width/max-height, which also keeps the ratio. */
+.preview-img { --img-h: min(var(--clip-img-h, 60px), var(--clip-img-cap, 100000px));
+               position: relative; display: block; width: fit-content; max-width: 100%; }
+.preview-img[style*="--ar"] { width: min(100%, calc(var(--img-h) * var(--ar)), var(--nw)); }
+.preview-img img { display: block; max-width: 100%; max-height: var(--img-h); height: auto; border-radius: var(--r-1); }
+.preview-img[style*="--ar"] img { width: 100%; max-height: none; }
+/* An image row's buttons sit where a text row's do (the row's top right, on
+   the first line), floating so the picture never resizes and the row never
+   grows. Plain like a text row's; only while the picture reaches under them
+   (.img-under, Core.markImageUnder) do they get a frosted chip in the opaque
+   menu colour, which reads on any picture in both themes and every accent.
+   The chip's padding is cancelled by its margin, so the buttons never move. */
+.item-row { position: relative; }
+.img-actions { position: absolute; top: calc((var(--fs-ui) * var(--lh-ui) - var(--ctl-md)) / 2); right: 0; display: flex; align-items: center; gap: var(--sp-1);
+               border-radius: var(--r-panel); opacity: 0; visibility: hidden;
+               transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }
+.img-under .img-actions { padding: var(--sp-1); margin: calc(-1 * var(--sp-1));
+               background: color-mix(in srgb, var(--menu) 78%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
+               box-shadow: 0 1px 6px var(--shadow); }
+.img-under .img-actions .icon-btn { color: var(--text); }
+/* A text row's buttons ride the shared reveal at the row's end: closed = 0 px
+   (the text runs the full width), open while the row is hovered, holds focus,
+   has its menu open or is being dragged (.actions-held); the text's ellipsis
+   moves with them. The meta line's ghost # / + open the same way. */
+.row-actions { --reveal-gap: var(--sp-2); margin-top: calc((var(--fs-ui) * var(--lh-ui) - var(--ctl-md)) / 2); }
+.item:hover .bc-reveal.row-actions, .item:focus-within .bc-reveal.row-actions, .item.actions-held .bc-reveal.row-actions,
+.item:hover .bc-reveal.meta-reveal, .item:focus-within .bc-reveal.meta-reveal, .item.actions-held .bc-reveal.meta-reveal { grid-template-columns: 1fr; }
+.item:hover .bc-reveal.row-actions > .bc-reveal-inner, .item:focus-within .bc-reveal.row-actions > .bc-reveal-inner, .item.actions-held .bc-reveal.row-actions > .bc-reveal-inner,
+.item:hover .bc-reveal.meta-reveal > .bc-reveal-inner, .item:focus-within .bc-reveal.meta-reveal > .bc-reveal-inner, .item.actions-held .bc-reveal.meta-reveal > .bc-reveal-inner,
+.item:hover .img-actions, .item:focus-within .img-actions, .item.actions-held .img-actions { visibility: visible; content-visibility: visible; }
+.item:hover .img-actions, .item:focus-within .img-actions, .item.actions-held .img-actions { opacity: 1; }
+/* Meta line (Core.renderClipMeta): time, size, the numpad badge and the clip's
+   groups as plain text (each a filter: click includes, right-click excludes),
+   then the hover-only ghost # and + on the reveal. ONE line that never wraps:
+   as the ghosts slide in, group names that no longer fit drop out whole (.meta-tags), so no row changes height
+   and nothing is reserved while they are hidden (the reveal's negative margin
+   cancels the flex gap before a closed track). */
+.meta { --meta-h: calc(var(--fs-meta) * var(--lh-text)); margin-top: var(--sp-1); display: flex; align-items: center; gap: var(--sp-3); min-width: 0; height: var(--meta-h);
+        font-size: var(--fs-meta); line-height: 1; color: var(--text-dim); white-space: nowrap; overflow: clip; overflow-clip-margin: var(--sp-1); }
+.meta-time, .meta-size, .meta-np { flex-shrink: 0; }
+.meta-np, .meta-tag, .meta-ghost { height: var(--meta-h); padding: 0 var(--sp-1); border: 0; border-radius: var(--r-1); background: transparent; color: inherit;
+                                   font: inherit; line-height: 1; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
+/* The badge and the names pad their hover fill but pull it back out of the
+   flow, so every text-to-text gap on the line is the one --sp-3. */
+.meta-np, .meta-tag { margin-inline: calc(-1 * var(--sp-1)); }
+.meta-np { color: var(--text); }
+/* The group names show whole or not at all, never as fragments: they wrap onto
+   a second line the fixed-height box clips away, so a name that does not fit
+   is left out whole (each name's own title still names it on hover); only a
+   name alone on the line ellipsizes. The + picker lists every membership. */
+.meta-tags { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: var(--sp-3); flex: 0 1 auto; min-width: 0; height: var(--meta-h); overflow: hidden;
+              padding-inline: var(--sp-1); margin-inline: calc(-1 * var(--sp-1)); /* room for the names' hover fill */ }
+/* Hover (or focus, or a held row): the names that would not fit beside the
+   ghosts are set aside whole (Core.fitMetaTags marks them), so the box ends
+   at the last name and the + follows it instead of the box's far edge. */
+.item:hover .meta-tag.meta-cut, .item:focus-within .meta-tag.meta-cut, .item.actions-held .meta-tag.meta-cut { display: none; }
+.meta-tag { display: block; flex: 0 1 auto; min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
+.meta-np:hover, .meta-tag:hover, .meta-ghost:hover { color: var(--text); background: var(--hover); }
+.meta-ghost { display: inline-flex; align-items: center; justify-content: center; width: var(--meta-h); padding: 0; }
+.meta-ghost .mi { font-size: var(--icon-sm); }
+.meta > .meta-reveal, .bc-tag-strip > .meta-reveal { margin-left: calc(-1 * var(--sp-3)); --reveal-gap: var(--sp-3); }
+.meta-reveal .bc-reveal-inner { gap: var(--sp-1); }
+/* Empty list (Core.renderEmptyState): a quiet icon, what is empty and why, the
+   way out; .empty-nudge is the slot for the search behaviour's suggestion. */
+.list-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-12) var(--gutter); text-align: center; color: var(--text-dim); }
+.list-empty .empty-icon { font-size: var(--icon-lg); color: var(--text-dim); margin-bottom: var(--sp-1); }
+.empty-title { margin: 0; max-width: 100%; font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-strong); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.empty-hint { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-ui); color: var(--text-dim); }
+.empty-action { margin-top: var(--sp-2); }
+.empty-nudge[hidden] { display: none; }
+/* The relax nudge (Core.renderRelaxNudge): one quiet line, the blocking token
+   in mono, the count, an arrow; a click drops that filter. */
+.empty-nudge-btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-md); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-ctl);
+                   background: transparent; color: var(--text-dim); font: inherit; font-size: var(--fs-ui); cursor: pointer;
+                   transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
+.empty-nudge-btn code { font-family: var(--font-mono); color: var(--text); }
+.empty-nudge-btn .mi { font-size: var(--icon-sm); color: var(--accent); }
+.empty-nudge-btn:hover { background: var(--hover); color: var(--text); }
+
+.settings-view { display: none; flex-direction: column; height: 100%; color: var(--text); background: transparent; }
+.settings-view.show { display: flex; }
+.settings-hdr { display: flex; align-items: center; flex-shrink: 0; height: var(--bar-h); padding: 0 var(--edge-ctl); gap: var(--sp-3);
+                 border-bottom: 1px solid var(--line); background: var(--surface); }
+.settings-hdr h2 { font-size: var(--fs-ui); font-weight: var(--fw-strong); flex: 1; margin: 0; color: var(--text); }
+.settings-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-6) var(--gutter); }
+/* Settings (Core.renderSettingsBody, Core.renderSettingsItem): ONE row grid and
+   ONE list style on the same three columns, label | control | reset, so every
+   control and every row action (a reset, a remove x) ends on one right edge;
+   the third column is reserved even when empty. Rows are spaced, never boxed;
+   list rows are split by --line-faint hairlines only. */
+.setting-row, .settings-item, .settings-list-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--ctl-md); column-gap: var(--sp-4); align-items: center;
+                               color: var(--text); font-size: var(--fs-ui); line-height: var(--lh-ui); }
+.setting-row { min-height: 36px; padding: var(--sp-3) 0; }
+.setting-row.note { min-height: 0; }
+.setting-text, .si-text { grid-column: 1; display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
+.setting-control, .setting-row > .switch, .si-control { grid-column: 2; justify-self: end; display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
+.setting-reset, .si-action { grid-column: 3; display: inline-flex; justify-content: center; }
+.setting-label { color: var(--text); }
+/* One-line help / status under a label; an empty one takes no space. */
+.setting-help { font-size: var(--fs-meta); color: var(--text-dim); overflow-wrap: anywhere; }
+.setting-help:empty { display: none; }
+.setting-help.mono { font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
+.setting-help.error { color: var(--red); }
+/* A status that reports something running carries the green success dot. */
+.setting-help.active::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--sp-2); border-radius: 50%; background: var(--green); vertical-align: 1px; }
+/* Free text takes the full width under its label (pinned peers), up to the
+   shared control edge. */
+.setting-row.stack > .setting-control { grid-column: 1 / 3; justify-self: stretch; margin-top: var(--sp-3); }
+.setting-row.stack input { flex: 1; }
+/* Filled fields: a fill, never a border. A number field carries its unit
+   inside (.input-affix: the fill and the focus edge sit on the wrapper). */
+.setting-row input[type="text"], .input-affix { height: var(--ctl-lg); background: var(--input); border: none; border-radius: var(--r-ctl); color: var(--text); font: inherit; font-size: var(--fs-ui); }
+.setting-row input[type="text"] { min-width: 0; padding: 0 var(--sp-4); outline: none; }
+.input-affix { display: inline-flex; align-items: center; gap: var(--sp-2); width: 104px; padding: 0 var(--sp-4); color: var(--text-dim); cursor: text; }
+.input-affix:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
+.input-affix input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: none; background: transparent; color: var(--text); font: inherit; text-align: right; outline: none; }
+.input-affix input:focus { box-shadow: none; }
+/* ONE switch (a row's, or one inside a list row via .switch-wrap). */
+.switch-row, .switch-wrap { position: relative; cursor: pointer; }
+.switch-wrap { display: inline-flex; }
+.switch-row input, .switch-wrap input { position: absolute; opacity: 0; pointer-events: none; }
+.switch { width: 32px; height: 18px; position: relative; flex-shrink: 0; border-radius: var(--r-chip); background: var(--line-strong); transition: background-color var(--dur) var(--ease); }
+.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
+input:checked + .switch { background: var(--accent); }
+input:checked + .switch::after { transform: translateX(14px); background: var(--active-fg); }
+input:focus-visible + .switch { box-shadow: var(--focus-ring); }
+input:disabled + .switch { opacity: .55; }
+.switch-wrap.is-disabled { cursor: default; }
+/* Lists: one row primitive for numpad slots, groups, sync providers, peers,
+   AI clients, grants and conflicts. */
+.settings-list { display: flex; flex-direction: column; }
+.settings-item { min-height: 34px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-faint); }
+.settings-item:last-child { border-bottom: 0; }
+.si-title { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
+.si-key { flex-shrink: 0; color: var(--text); font-variant-numeric: tabular-nums; }
+.si-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
+.si-meta { flex-shrink: 0; font-size: var(--fs-meta); color: var(--text-dim); }
+.si-sub { font-size: var(--fs-meta); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.si-name.mono, .si-sub.mono { font-family: var(--font-mono); }
+.settings-item.dim .si-name { color: var(--text-dim); }
+/* A row that acts on a click (a numpad slot copies its clip): the hover
+   overlay reaches a little past the text (two side shadows, so neither the
+   columns nor the hairline move). */
+.settings-item.clickable { cursor: pointer; }
+.settings-item.clickable:hover { background: var(--hover); box-shadow: calc(-1 * var(--sp-3)) 0 0 var(--hover), var(--sp-3) 0 0 var(--hover); }
+.settings-list-title { padding: var(--sp-4) 0 var(--sp-1); } /* type from the shared .bc-label rule */
+/* A quiet text button under a list ("Show all clients"): its label lines up
+   with the rows' text. */
+.settings-more { margin-top: var(--sp-2); margin-left: calc(-1 * var(--sp-3)); }
+/* Accent: one swatch per choice, each dot (--dot) previewing the accent that
+   choice paints in THIS theme: the presets' steps mirror clipboard-tokens.css
+   (a step darker in light), System and Custom get their colour's per-theme
+   shade inline (--dot-dark / --dot-light + data-own, Core.mountSettings), a
+   Custom with no colour yet shows the wheel. The chosen one carries its ink
+   check. System, while not chosen, is a RING of its colour: "follows the
+   system", never a twin of Blue when the OS gives no colour. */
+.accent-swatches { display: inline-flex; gap: var(--sp-1); }
+.accent-swatch { display: inline-flex; align-items: center; justify-content: center; width: var(--ctl-md); height: var(--ctl-md); padding: 0; border: none; border-radius: var(--r-chip);
+                 background: transparent; cursor: pointer; transition: background-color var(--dur) var(--ease); --dot: var(--dot-dark, var(--blue-500)); }
+.accent-swatch[data-accent-mode="teal"] { --dot: var(--teal-500); }
+.accent-swatch[data-accent-mode="mono"] { --dot: var(--g-300); }
+:where(:root, .bc-popup)[data-theme="light"] .accent-swatch { --dot: var(--dot-light, var(--blue-600)); }
+:where(:root, .bc-popup)[data-theme="light"] .accent-swatch[data-accent-mode="teal"] { --dot: var(--teal-600); }
+:where(:root, .bc-popup)[data-theme="light"] .accent-swatch[data-accent-mode="mono"] { --dot: var(--g-700); }
+.accent-swatch:hover { background: var(--hover); }
+.accent-dot { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-md); height: var(--icon-md); border-radius: 50%; background: var(--dot); }
+.accent-swatch[data-accent-mode="custom"]:not([data-own]) .accent-dot { background: conic-gradient(var(--red-500), var(--amber-500), var(--green-500), var(--teal-500), var(--blue-500), var(--red-500)); }
+.accent-swatch[data-accent-mode="system"]:not([aria-checked="true"]) .accent-dot { background: transparent; box-shadow: inset 0 0 0 3px var(--dot); }
+.accent-dot .mi { font-size: var(--icon-sm); color: var(--active-fg); visibility: hidden; }
+.accent-swatch[aria-checked="true"] .accent-dot .mi { visibility: visible; }
+/* Custom colour: a hue slider (its rainbow track is painted inline from the
+   same hue maths) plus a #rrggbb field. */
+.accent-hue { -webkit-appearance: none; appearance: none; width: 120px; height: var(--sp-3); margin: 0; border-radius: var(--r-chip); cursor: pointer; outline: none; }
+.accent-hue::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--icon-sm); height: var(--icon-sm); border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--bg); }
+.accent-hue::-moz-range-thumb { width: var(--icon-sm); height: var(--icon-sm); border: none; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--bg); }
+.accent-hue:focus-visible { box-shadow: var(--focus-ring); }
+.setting-row input.accent-hex { width: 88px; font-family: var(--font-mono); }
+.seg { display: inline-flex; height: var(--ctl-lg); padding: var(--sp-1); gap: var(--sp-1); background: var(--input); border: none; border-radius: var(--r-ctl); }
+.seg-btn { height: calc(var(--ctl-lg) - 2 * var(--sp-1)); border: none; background: transparent; color: var(--text-dim); font-size: var(--fs-ui); font-family: inherit; padding: 0 var(--sp-4); border-radius: var(--r-1); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
+.seg-btn:hover { color: var(--text); }
+.seg-btn.active { background: var(--accent); color: var(--active-fg); }
+/* Sections: the shared .overline heading, --sp-12 above each one but the first
+   shown (the conflicts section on top is hidden while there are none). */
+.settings-section { margin-top: var(--sp-12); }
+.settings-section:first-child, .settings-section.hidden + .settings-section { margin-top: 0; }
+.settings-section h3 { margin: 0 0 var(--sp-2); } /* type from the shared .overline rule */
+
+@media (max-width: 760px) {
+  .item { padding-inline: var(--sp-5); }
+}
+
+/* Popup theme variables + design tokens live in clipboard-tokens.css
+   (imported at the top of this file), so the app and demo render from
+   one palette and cannot drift. Only component rules live here. */
+
+/* The popup root carries the base text color so popup content never inherits a
+   host page's color (the website embeds the popup inside the marketing
+   page; the desktop app sets this on <body>). Without it, unstyled text like
+   the dialog title rendered dark-on-dark. */
+.bc-popup { color: var(--text); }
+.hidden { display: none; }
+mark { background: var(--mark-bg); color: var(--mark-fg); border-radius: var(--r-1); padding: 0 var(--sp-1); }
+
+/* Toast: a neutral floating surface (shared rule at the top), never a status
+   colour; an action (Undo) is an accent text button. */
+.toast { position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%) translateY(16px); display: flex; align-items: center; gap: var(--sp-4);
+         width: max-content; max-width: calc(100% - 2 * var(--gutter)); padding: var(--sp-3) var(--sp-5); color: var(--text); font-size: var(--fs-ui); line-height: var(--lh-ui);
+         opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none; z-index: 50; }
+.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+/* Confirm / prompt dialog */
+.overlay { display: none; pointer-events: none; position: fixed; inset: 0; background: var(--scrim); z-index: 30; align-items: center; justify-content: center; }
+.overlay.show { display: flex; pointer-events: auto; }
+/* Dialog = the shared floating surface (bg, --r-panel, shadow at the top) with
+   room to breathe; sans body copy, an optional mono preview of clip text, and
+   the shared .btn set (confirm is .primary, or .danger for destructive ones). */
+.dialog { padding: var(--sp-8); max-width: 320px; width: 90%; color: var(--text); }
+.dialog h3 { font-size: var(--fs-ui); font-weight: var(--fw-strong); line-height: var(--lh-ui); color: var(--text); margin-bottom: var(--sp-3); }
+.dialog p { font-size: var(--fs-ui); line-height: var(--lh-text); color: var(--text-dim); margin-bottom: var(--sp-6); word-break: break-word; }
+.dialog p:empty { display: none; }
+.dialog-preview { font-family: var(--font-mono); font-size: var(--fs-ui); line-height: var(--lh-text); color: var(--text); background: var(--input); border-radius: var(--r-ctl);
+                  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-6); white-space: pre-wrap; word-break: break-word;
+                  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.dialog-preview:empty { display: none; }
+.dialog-btns { display: flex; gap: var(--sp-4); justify-content: flex-end; }
+.prompt-input { width: 100%; height: var(--ctl-lg); background: var(--input); border: none; border-radius: var(--r-ctl); padding: 0 var(--sp-4); color: var(--text); font-size: var(--fs-text); outline: none; margin-bottom: var(--sp-6); font-family: inherit; }
+
+/* Settings: the shortcut fields (sans key names; "Not set" dim) and the sync
+   button's live spin. Buttons are the shared .btn / .icon-btn. */
+.shortcut-btn { min-width: 130px; max-width: 190px; height: var(--ctl-lg); background: var(--input); border: none; border-radius: var(--r-ctl); color: var(--text);
+                padding: 0 var(--sp-4); font-size: var(--fs-ui); font-family: inherit; white-space: nowrap; overflow: hidden;
+                text-overflow: ellipsis; cursor: pointer; text-align: center; }
+.shortcut-btn.unset { color: var(--text-dim); }
+.shortcut-btn.recording { color: var(--accent-text); background: var(--accent-bg); }
+/* Live sync feedback: the icon itself spins while a merge is in flight. */
+@keyframes bc-sync-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
+.sync-btn.syncing .mi { display: inline-block; animation: bc-sync-spin 1.1s linear infinite; }
+
+/* --- Shared plain-text editor (Core.createEditor): app window + demo clip window --- */
+/* Clip windows (editor, viewer, unify + conflict; the demo's clip window too):
+   ONE surface per window. The root paints --surface, every band in it (bar,
+   find, pane heads, merge gap, footer) is transparent and split by one
+   --line hairline, so the writing surface is never grey under white chrome.
+   Under glass the root goes transparent too and the window's single scrim
+   (clipboard-window.css) is the only frost. */
+.bc-editor { display: flex; flex-direction: column; height: 100%; width: 100%; background: transparent; color: var(--text); min-height: 0; }
+/* ONE window bar (.bc-bar, Core.renderWindowBar): [lead] title [context]
+   [tags] spacer actions. It is the window's drag region (a double-click
+   maximises on Windows, zooms or minimises per the macOS setting); its
+   controls are not. With the OS's own window controls (data-window-controls
+   on <html>, Core.attachWindowControls) it reserves their room: the traffic
+   lights' inset on the left (macOS, --wc-left from main), the caption
+   buttons' width on the right (Windows, the Window Controls Overlay env()). */
+.bc-bar { -webkit-app-region: drag; display: flex; align-items: center; gap: var(--sp-3); height: var(--bar-h); flex-shrink: 0;
+          padding: 0 var(--edge-ctl) 0 var(--gutter); border-bottom: 1px solid var(--line); background: var(--surface); color: var(--text); }
+:root[data-window-controls="left"] .bc-bar { padding-left: var(--wc-left, var(--gutter)); }
+:root[data-window-controls="right"] { --wc-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw)); }
+:root[data-window-controls="right"] .bc-bar { padding-right: max(var(--edge-ctl), calc(var(--wc-right) + var(--sp-2))); }
+.bc-bar-title { flex: 0 1 auto; min-width: 0; font-size: var(--fs-ui); font-weight: var(--fw-strong); line-height: var(--lh-ui); color: var(--text);
+                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* The editable title (editor, merge): a flat field sized to its text (the
+   rest of the bar stays draggable), underline on hover / focus like the
+   search field. An untitled clip's placeholder is its first line, dim and
+   regular weight, as an untitled row reads in the list. */
+input.bc-bar-title { -webkit-app-region: no-drag; field-sizing: content; min-width: 6ch; max-width: 60%; height: var(--ctl-md); margin-left: calc(-1 * var(--sp-2)); text-overflow: ellipsis;
+                     padding: 0 var(--sp-2); background: transparent; border: none; border-radius: 0; font-family: inherit; outline: none;
+                     box-shadow: inset 0 -1px 0 transparent; transition: box-shadow var(--dur) var(--ease); }
+input.bc-bar-title:hover { box-shadow: inset 0 -1px 0 var(--line); }
+input.bc-bar-title:focus { box-shadow: inset 0 -1px 0 var(--accent); }
+input.bc-bar-title::placeholder { color: var(--text-dim); font-weight: var(--fw-regular); }
+.bc-bar-context { flex: 0 1000 auto; min-width: 0; font-size: var(--fs-meta); /* gives way before the title in a narrow window */ color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bc-bar-spacer { flex: 1 1 0; min-width: var(--sp-4); align-self: stretch; }
+.bc-bar-actions { -webkit-app-region: no-drag; display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
+.bc-bar-actions .icon-btn.active { color: var(--accent); background: var(--accent-bg); }
+/* A window on a page (the website demo, Core.attachWebWindow) draws the
+   visitor's OS controls in its bar (renderWindowBar webControls): macOS
+   traffic lights first (glyphs on hover; grey while the window is not the
+   active one), Windows caption buttons last, flush with the window's corner
+   and the bar's full height, close going red. */
+.bc-wc { display: flex; flex-shrink: 0; align-self: stretch; align-items: center; -webkit-app-region: no-drag; }
+.bc-wc-btn { display: grid; place-items: center; padding: 0; border: 0; cursor: default; }
+.bc-wc-btn svg { display: block; fill: none; stroke: currentColor; }
+.bc-wc-btn .wc-max, .bc-ww[data-max] .bc-wc-btn .wc-norm { display: none; }
+.bc-ww[data-max] .bc-wc-btn .wc-max { display: block; }
+.bc-wc[data-os="mac"] { gap: var(--sp-4); margin-right: var(--sp-5); }
+.bc-wc[data-os="mac"] .bc-wc-btn { width: 12px; height: 12px; border-radius: var(--r-pill); color: var(--os-mac-ink); box-shadow: inset 0 0 0 .5px var(--os-mac-ink); }
+.bc-wc[data-os="mac"] .bc-wc-btn[data-wc="close"] { background: var(--os-mac-close); }
+.bc-wc[data-os="mac"] .bc-wc-btn[data-wc="min"] { background: var(--os-mac-min); }
+.bc-wc[data-os="mac"] .bc-wc-btn[data-wc="max"] { background: var(--os-mac-max); }
+.bc-wc[data-os="mac"] .bc-wc-btn svg { width: 12px; height: 12px; stroke-width: 1.2; opacity: 0; }
+.bc-wc[data-os="mac"] .bc-wc-btn .wc-fill { fill: currentColor; stroke: none; }
+.bc-wc[data-os="mac"]:hover .bc-wc-btn svg { opacity: 1; }
+.bc-wc[data-os="mac"] .bc-wc-btn:active { filter: brightness(.82); }
+.bc-ww:not([data-active]) .bc-wc[data-os="mac"]:not(:hover) .bc-wc-btn { background: var(--line); box-shadow: inset 0 0 0 .5px var(--line); }
+.bc-wc[data-os="win"] { margin: 0 calc(-1 * var(--edge-ctl)) 0 var(--sp-2); }
+.bc-wc[data-os="win"] .bc-wc-btn { width: 46px; height: 100%; background: transparent; color: var(--text); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
+.bc-wc[data-os="win"] .bc-wc-btn svg { width: 10px; height: 10px; stroke-width: 1; }
+.bc-wc[data-os="win"] .bc-wc-btn:hover { background: var(--hover); }
+.bc-wc[data-os="win"] .bc-wc-btn:active { background: var(--line-faint); }
+.bc-wc[data-os="win"] .bc-wc-btn[data-wc="close"]:hover { background: var(--os-win-close); color: var(--white); }
+.bc-wc[data-os="win"] .bc-wc-btn[data-wc="close"]:active { background: color-mix(in srgb, var(--os-win-close) 85%, var(--white)); color: var(--white); }
+.bc-ww:not([data-active]) .bc-wc[data-os="win"] .bc-wc-btn:not(:hover) { color: var(--text-dim); }
+/* The web window itself: placed in the page, raised by z-index, resized from
+   eight invisible grips on its edges and corners (none while maximised). */
+.bc-ww { position: absolute; }
+.bc-ww[hidden] { display: none !important; }
+.bc-ww[data-max] { border-radius: 0; box-shadow: none; }
+.bc-ww-moving, .bc-ww-sizing { user-select: none; }
+.bc-ww-rs { position: absolute; z-index: 60; }
+.bc-ww-rs[data-rs="n"], .bc-ww-rs[data-rs="s"] { left: var(--sp-6); right: var(--sp-6); height: var(--sp-3); cursor: ns-resize; }
+.bc-ww-rs[data-rs="e"], .bc-ww-rs[data-rs="w"] { top: var(--sp-6); bottom: var(--sp-6); width: var(--sp-3); cursor: ew-resize; }
+.bc-ww-rs[data-rs="n"], .bc-ww-rs[data-rs="ne"], .bc-ww-rs[data-rs="nw"] { top: 0; }
+.bc-ww-rs[data-rs="s"], .bc-ww-rs[data-rs="se"], .bc-ww-rs[data-rs="sw"] { bottom: 0; }
+.bc-ww-rs[data-rs="e"], .bc-ww-rs[data-rs="ne"], .bc-ww-rs[data-rs="se"] { right: 0; }
+.bc-ww-rs[data-rs="w"], .bc-ww-rs[data-rs="nw"], .bc-ww-rs[data-rs="sw"] { left: 0; }
+.bc-ww-rs[data-rs="ne"], .bc-ww-rs[data-rs="nw"], .bc-ww-rs[data-rs="se"], .bc-ww-rs[data-rs="sw"] { width: var(--sp-6); height: var(--sp-6); }
+.bc-ww-rs[data-rs="ne"], .bc-ww-rs[data-rs="sw"] { cursor: nesw-resize; }
+.bc-ww-rs[data-rs="nw"], .bc-ww-rs[data-rs="se"] { cursor: nwse-resize; }
+.bc-ww[data-max] .bc-ww-rs { display: none; }
+/* The viewer's leading image glyph is the file itself (a title-bar proxy
+   icon): drag it out into another app or a folder. */
+.bc-drag-handle { -webkit-app-region: no-drag; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: var(--ctl-md); height: var(--ctl-md);
+                  margin-left: calc(-1 * var(--sp-2)); border-radius: var(--r-ctl); color: var(--text-dim); cursor: grab;
+                  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
+.bc-drag-handle:hover { color: var(--text); background: var(--hover); }
+.bc-drag-handle:active { cursor: grabbing; }
+/* A clip window's star and keys (Core.updateTagStrip): the row's own star and
+   meta keys (renderClipKeys: the numpad badge, the group names, the ghosts #
+   and + on the reveal), so pin, key and groups read and work as in the list.
+   The star's glyph lands on the gutter when it leads the bar. The strip is
+   ONE line that scrolls sideways under the mask fade (attachScrollFade x);
+   the ghosts slide in while the bar is pointed at or holds the focus. */
+.bc-bar > .star { -webkit-app-region: no-drag; flex-shrink: 0; }
+.bc-bar > .star:first-child { margin-left: calc(var(--edge-ctl) - var(--gutter)); }
+.bc-bar > .star[hidden] { display: none; }
+.bc-tag-strip { -webkit-app-region: no-drag; --meta-h: calc(var(--fs-meta) * var(--lh-text)); display: flex; align-items: center; gap: var(--sp-3); min-width: 0; max-width: 50%;
+                padding-inline: var(--sp-1); overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
+                font-size: var(--fs-meta); line-height: 1; color: var(--text-dim); white-space: nowrap; }
+.bc-tag-strip::-webkit-scrollbar { display: none; }
+.bc-tag-strip[hidden] { display: none; }
+.bc-tag-strip .meta-tags { flex-wrap: nowrap; flex: 0 0 auto; height: auto; overflow: visible; }
+.bc-tag-strip .meta-tag { flex: 0 0 auto; }
+.bc-bar:hover .bc-tag-strip .bc-reveal.meta-reveal, .bc-bar:focus-within .bc-tag-strip .bc-reveal.meta-reveal { grid-template-columns: 1fr; }
+.bc-bar:hover .bc-tag-strip .meta-reveal > .bc-reveal-inner, .bc-bar:focus-within .bc-tag-strip .meta-reveal > .bc-reveal-inner { visibility: visible; content-visibility: visible; }
+/* Find: chrome, so a band under the window bar like the merge pane heads
+   (--surface, ending on the --line hairline). The band's hairline IS the
+   field's underline: accent while anything in it has the focus (one line,
+   never a field underline 4 px above a band edge). The close's glyph ends on
+   the gutter. */
+.bc-find { -webkit-app-region: no-drag; display: flex; align-items: center; gap: var(--sp-1); margin: 0; padding: var(--sp-1) var(--gutter); flex-shrink: 0;
+           background: var(--surface); border-bottom: 1px solid var(--line); transition: border-color var(--dur) var(--ease); }
+.bc-find:focus-within { border-bottom-color: var(--accent); }
+.bc-find[hidden] { display: none; }
+.bc-find > :last-child { margin-right: calc(var(--edge-ctl) - var(--gutter)); }
+.bc-find-input { flex: 1; min-width: 0; height: var(--ctl-md); background: transparent; border: none; border-radius: 0; color: var(--text); font: inherit; font-size: var(--fs-text);
+                 padding: 0; margin-right: var(--sp-2); outline: none; }
+.bc-find-input::placeholder { color: var(--text-dim); }
+.bc-find-count { font-size: var(--fs-meta); color: var(--text-dim); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; margin-right: var(--sp-2); }
+.bc-find.bad-pattern .bc-find-count { color: var(--red); }
+.bc-editor-area { flex: 1; min-height: 0; width: 100%; resize: none; border: 0; outline: none; background: transparent; color: var(--text); }
+.bc-editor-area, .bc-editor-hl {
+  font-family: var(--font-mono); font-size: var(--fs-text); line-height: var(--lh-text); padding: var(--sp-6) var(--gutter); tab-size: 4; white-space: pre-wrap; word-break: break-word; }
+.bc-editor-area::placeholder { color: var(--text-dim); }
+/* Find-match highlight backdrop: mirrors the textarea's text (transparent) so
+   <mark> backgrounds line up under the real text. Textarea and wrap are
+   transparent so the marks show through; the window's one surface (.bc-editor)
+   is the writing surface. */
+.bc-editor-area-wrap { position: relative; flex: 1; min-height: 0; display: flex; background: transparent; }
+.bc-editor-area-wrap .bc-editor-area { background: transparent; position: relative; z-index: 1; overflow-y: scroll; }
+/* Width-only override of the shared scrollbar: the highlight mirror reserves
+   exactly this gutter (inset 0 10px 0 0 below), so it must stay fixed. */
+.bc-editor-area-wrap .bc-editor-area::-webkit-scrollbar { width: 10px; }
+.bc-editor-hl { position: absolute; inset: 0 10px 0 0; overflow: hidden; pointer-events: none; color: transparent; margin: 0; box-sizing: border-box; }
+.bc-editor-hl mark { color: transparent; background: var(--mark-bg); border-radius: var(--r-1); padding: 0; }
+.bc-editor-hl mark.cur { background: var(--mark-bg-current); }
+/* Footer: stats left; the clipboard follow state, the live save state (or the
+   viewer's zoom controls) right. */
+.bc-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: 0 var(--gutter); height: var(--ctl-lg); flex-shrink: 0;
+                  border-top: 1px solid var(--line); background: var(--surface); font-size: var(--fs-meta); color: var(--text-dim); }
+.bc-editor-foot > [data-x="stats"], .bc-editor-foot > [data-x="dims"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bc-editor-foot-end { display: flex; align-items: center; gap: var(--sp-5); flex-shrink: 0; }
+/* Text ends on the gutter: a trailing quiet button (the viewer's 100%) pulls
+   in by its own padding. */
+.bc-editor-foot-end > .btn.sm:last-child { margin-right: calc(-1 * var(--sp-3)); }
+.bc-save-state { white-space: nowrap; }
+.bc-save-state.failed { color: var(--red); }
+/* Clipboard follow status: "On clipboard" (accent) / a Copy button / a brief notice. */
+.bc-editor-clip { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
+.bc-editor-clip.on { color: var(--accent-text); }
+.bc-editor-clip.notice { color: var(--text); }
+.bc-editor-clip .mi.sm { font-size: var(--icon-sm); }
+/* The footer Copy is the shared quiet .btn.sm (20px text affordance). */
+@media (max-width: 480px) { .bc-editor-clip.on > span:last-child { display: none; } }
+/* Viewer zoom: zoom out | percentage | zoom in | Fit | 100%, quiet 20px
+   controls; the view that is on (Fit / 100%) reads in the accent. */
+.bc-zoom { gap: var(--sp-1); }
+.bc-zoom .icon-btn { width: var(--ctl-sm); height: var(--ctl-sm); }
+.bc-zoom .icon-btn .mi { font-size: var(--icon-sm); }
+.bc-zoom-pct { min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; }
+.bc-zoom .btn.quiet.active { color: var(--accent-text); background: var(--accent-bg); }
+/* Glass: the window roots go transparent so the OS acrylic + the one tint
+   scrim show through; every band in them is already transparent. */
+:root[data-surface="glass"] .bc-editor,
+:root[data-surface="glass"] .bc-reconcile,
+.bc-popup[data-surface="glass"][data-glass-scope="all"] .bc-editor,
+.bc-popup[data-surface="glass"][data-glass-scope="all"] .bc-reconcile { background: transparent; }
+/* In-app image viewer: same window chrome as the editor (the .bc-bar + foot on
+   the one surface); the stage is the image's matte, centres the image and
+   hosts zoom/pan (transform-positioned <img>). */
+.bc-viewer { display: flex; flex-direction: column; height: 100%; width: 100%; background: transparent; color: var(--text); min-height: 0; outline: none; }
+.bc-viewer-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--canvas); }
+.bc-viewer-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; image-rendering: auto; }
+:root[data-surface="glass"] .bc-viewer, :root[data-surface="glass"] .bc-viewer-stage { background: transparent; }
+/* Demo overlay host: the editor floats over the demo popup, standing in for
+   the app's editor WINDOW, so it follows "Glass on" (data-glass-scope on the
+   popup, Core.applyVariants) like the app does: Popup only = a solid window
+   (it re-takes the solid surface tokens the popup's glass overrides, so it
+   paints exactly the app editor's --surface); All windows = one frosted
+   layer over the list (the window roots inside go transparent above). */
+/* IntelliJ-style merge (CodeMirror 5 merge addon, skinned with our tokens):
+   Current (read-only) | Result (editable) | Incoming (read-only); 2-pane =
+   Current (edited in place into the result) | Incoming. One plane: the root
+   paints the window surface, heads / panes / gap / footer are transparent. */
+.bc-reconcile { display: flex; flex-direction: column; height: 100%; width: 100%; background: transparent; color: var(--text); min-height: 0; }
+/* Pane heads aligned to the addon's pane widths (2-pane 47%/6%, 3-pane
+   31%/3.5%): the pane's name, its title as a one-click pick when the two
+   titles differ (the result's title is the bar's field), and the whole-side
+   accept at the end of the head of the pane it takes. */
+.bc-merge-heads { flex-shrink: 0; display: flex; align-items: center; height: var(--ctl-lg); border-bottom: 1px solid var(--line); background: var(--surface); }
+.bc-merge-head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; height: 100%; padding: 0 var(--sp-2) 0 var(--sp-4); container: bc-head / inline-size; }
+/* The first head starts on the window's gutter, like the bar title above it
+   and the first pane's text below it (one left edge). */
+.bc-merge-head:first-child { padding-left: var(--gutter); }
+.bc-merge-heads.bc-heads-2 > .bc-merge-head { width: 47%; }
+.bc-merge-heads.bc-heads-2 > .bc-merge-heads-gap { width: 6%; }
+.bc-merge-heads.bc-heads-3 > .bc-merge-head { width: 31%; }
+.bc-merge-heads.bc-heads-3 > .bc-merge-heads-gap { width: 3.5%; }
+.bc-head-label { flex-shrink: 0; white-space: nowrap; } /* type from the shared .bc-label rule */
+.bc-head-title { flex: 0 1 auto; min-width: 6ch; height: var(--ctl-sm); padding: 0 var(--sp-2); border: none; border-radius: var(--r-ctl); background: transparent; color: var(--text);
+                 font-family: inherit; font-size: var(--fs-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
+                 transition: background-color var(--dur) var(--ease); }
+.bc-head-title:hover { background: var(--hover); }
+.bc-merge-head .bc-head-accept { margin-left: auto; flex-shrink: 0; } /* the shared .btn.quiet.sm.accent */
+/* The accept says only "Accept" (its head names the side; the tooltip and
+   aria-label the whole action), and a title pick ellipsizes first, so the
+   default 3-pane window keeps the word. Only a head too narrow for label +
+   pick + "Accept" drops to the glyph. */
+@container bc-head (max-width: 179px) {
+  .bc-merge-head:has(.bc-head-title) .bc-accept-label { display: none; }
+}
+@container bc-head (max-width: 139px) {
+  .bc-accept-label { display: none; }
+}
+/* ONE counter in the bar ("2 of 5 resolved", a text button to the next open
+   change) and a red conflict chip only while conflicts remain. */
+.bc-chg-count { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-meta); color: var(--text-dim); margin-right: var(--sp-2); white-space: nowrap; }
+.bc-chg-progress { height: var(--ctl-sm); padding: 0 var(--sp-2); border: none; border-radius: var(--r-ctl); background: transparent; color: var(--text-dim);
+                   font-family: inherit; font-size: var(--fs-meta); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
+.bc-chg-progress:hover { color: var(--text); background: var(--hover); }
+.bc-conflict-chip { border: none; background: var(--red-bg); color: var(--red); font-size: var(--fs-meta); font-family: inherit; height: var(--ctl-sm); padding: 0 var(--sp-3); border-radius: var(--r-chip); cursor: pointer; }
+/* --- CodeMirror skin: tokens only, no stock palette. --- */
+.bc-merge-host { flex: 1; min-height: 0; position: relative; }
+/* Full-height chain: the addon's default is a fixed 350px and its panes have
+   AUTO height (so CodeMirror height:100% would resolve against auto and grow to
+   content — no internal scroll, the user's "can't scroll" bug). Pin every level
+   to 100% so each pane scrolls internally. */
+.bc-merge-host .CodeMirror-merge,
+.bc-merge-host .CodeMirror-merge-pane,
+.bc-merge-host .CodeMirror-merge .CodeMirror { height: 100%; }
+.bc-merge-host .CodeMirror-merge { border: 0; }
+/* Every pane is the same plane (no read-only dimming: that changed the text,
+   the background and every highlight at once); the caret and the pane heads
+   say which pane takes edits. */
+.bc-merge-host .CodeMirror { background: transparent; color: var(--text); font-family: var(--font-mono); font-size: var(--fs-text); line-height: var(--lh-text); }
+.bc-merge-host .CodeMirror-cursor { border-left: 1.5px solid var(--text); }
+/* Text edges: each pane's text starts where its head's label does (--sp-4),
+   the first pane's on the window gutter with the bar title and its head.
+   The -like rule is CodeMirror's measuring copy, so wrapping and the caret
+   follow the padding. */
+.bc-merge-host .CodeMirror pre.CodeMirror-line, .bc-merge-host .CodeMirror pre.CodeMirror-line-like { padding-left: var(--sp-4); }
+.bc-merge-host .CodeMirror-merge-pane:first-child .CodeMirror pre.CodeMirror-line,
+.bc-merge-host .CodeMirror-merge-pane:first-child .CodeMirror pre.CodeMirror-line-like { padding-left: var(--gutter); }
+.bc-merge-host .CodeMirror-selected { background: var(--accent-bg); }
+/* The gap between panes holds the connectors and the gutter buttons: no fill,
+   no box, ONE hairline on the side that faces the read-only pane. */
+.bc-merge-host .CodeMirror-merge-gap { background: transparent; border: 0; }
+.bc-merge-host .CodeMirror-merge-gap:has(+ .CodeMirror-merge-pane-rightmost) { box-shadow: inset -1px 0 0 var(--line); }
+.bc-merge-host .CodeMirror-merge-3pane .CodeMirror-merge-pane:first-child + .CodeMirror-merge-gap { box-shadow: inset 1px 0 0 var(--line); }
+.bc-merge-host .CodeMirror-merge-scrolllock-wrap { display: none; } /* scroll stays locked; the toggle was an unexplained glyph */
+/* Chunks: ONE green layer per change (the wash; no start/end hairlines, the
+   connector the same wash with no stroke). Inside it the word-level marks
+   (vendored bcWordDiff; a whole-line edit gets none) are a step stronger.
+   Conflicts go red on every pane that holds them, their marks too. */
+.bc-merge-host .CodeMirror-merge-l-chunk, .bc-merge-host .CodeMirror-merge-r-chunk { background: var(--green-bg); }
+.bc-merge-host .CodeMirror-merge-l-chunk-start, .bc-merge-host .CodeMirror-merge-r-chunk-start { border-top: 0; }
+.bc-merge-host .CodeMirror-merge-l-chunk-end, .bc-merge-host .CodeMirror-merge-r-chunk-end { border-bottom: 0; }
+.bc-merge-host .CodeMirror-merge-l-inserted, .bc-merge-host .CodeMirror-merge-r-inserted,
+.bc-merge-host .CodeMirror-merge-l-deleted, .bc-merge-host .CodeMirror-merge-r-deleted {
+  background: color-mix(in srgb, var(--green) 28%, transparent); border-radius: var(--r-1); -webkit-box-decoration-break: clone; box-decoration-break: clone; text-decoration: none; }
+.bc-merge-host .CodeMirror-merge-l-connect, .bc-merge-host .CodeMirror-merge-r-connect { fill: var(--green-bg); stroke: none; }
+.bc-merge-host .CodeMirror-merge-l-connect.bc-conflict-connect, .bc-merge-host .CodeMirror-merge-r-connect.bc-conflict-connect { fill: var(--red-bg); }
+.bc-merge-host .bc-conflict { background: var(--red-bg); }
+.bc-merge-host .bc-conflict-line .CodeMirror-merge-l-inserted, .bc-merge-host .bc-conflict-line .CodeMirror-merge-r-inserted,
+.bc-merge-host .bc-conflict-line .CodeMirror-merge-l-deleted, .bc-merge-host .bc-conflict-line .CodeMirror-merge-r-deleted { background: color-mix(in srgb, var(--red) 28%, transparent); }
+/* Chunk-state paint from the wrapper: 'quiet' (whitespace-only) chunks lose the
+   green wash entirely; declined chunks dim their read-only text and get
+   a dashed hollow connector. */
+.bc-merge-host .bc-quiet.CodeMirror-merge-l-chunk, .bc-merge-host .bc-quiet.CodeMirror-merge-r-chunk { background: transparent; }
+.bc-merge-host .bc-dim-line { opacity: .45; }
+.bc-merge-host .CodeMirror-merge-l-connect.bc-declined,
+.bc-merge-host .CodeMirror-merge-r-connect.bc-declined { fill: transparent; stroke: var(--line-strong); stroke-dasharray: 3 3; }
+/* The gutter buttons (vendored merge.js: Material glyphs): the arrow pulls a
+   chunk into the result, the x below it dismisses it. Quiet 20px icon
+   buttons, centred in the gap (a 3-pane gap is about one button wide). */
+.bc-merge-host .CodeMirror-merge-gap .CodeMirror-merge-copy, .bc-merge-host .CodeMirror-merge-gap .CodeMirror-merge-copy-reverse {
+  display: flex; align-items: center; justify-content: center; width: var(--ctl-sm); height: var(--ctl-sm); left: 50%; right: auto;
+  margin-left: calc(var(--ctl-sm) / -2); border-radius: var(--r-ctl); color: var(--text-dim); font-size: var(--icon-sm);
+  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
+.bc-merge-host .CodeMirror-merge-gap .CodeMirror-merge-copy:hover { color: var(--accent); background: var(--hover); }
+.bc-merge-host .CodeMirror-merge-gap .bc-decline { margin-top: var(--ctl-sm); }
+.bc-merge-host .CodeMirror-merge-gap .bc-decline:hover { color: var(--red); }
+/* Collapsed identical stretch ("12 unchanged lines"): quiet text, no box;
+   a hover fill only, like an icon button. */
+.bc-merge-host .CodeMirror-merge-collapsed-widget { background: transparent; border: none; border-radius: var(--r-ctl); color: var(--text-dim); font-family: var(--font-sans); font-size: var(--fs-meta); padding: 0 var(--sp-3); cursor: pointer; }
+.bc-merge-host .CodeMirror-merge-collapsed-widget:hover { color: var(--text); background: var(--hover); }
+.bc-merge-host .CodeMirror-merge-collapsed-widget:before { content: "\22EF\00A0"; }
+.bc-merge-note { flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--gutter); background: var(--accent-bg); color: var(--text); font-size: var(--fs-ui); border-bottom: 1px solid var(--line); }
+.bc-merge-note[hidden] { display: none; }
+.bc-merge-note .btn { flex-shrink: 0; } /* the shared .btn.quiet.sm.accent */
+/* Footer: ONE row in every mode (unify, conflict, 2- or 3-pane), centred:
+   Keep both, Remove conflict (conflicts only), the primary. The whole-side
+   accepts live in the pane heads, so nothing here jumps between modes.
+   Footer buttons are the shared .btn set; the primary label changes on a
+   Unify's last step, and a fixed width keeps it from reflowing under a cursor
+   that is about to click. */
+.bc-reconcile-actions { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-3) var(--gutter);
+                        border-top: 1px solid var(--line); background: var(--surface); }
+.bc-reconcile-actions .btn.primary { min-width: 10.5em; }
+/* A multi-step Unify's "Step 2 of 3": on the footer's left gutter, out of the
+   flow, so the buttons stay centred and never move between steps. */
+.bc-step { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); font-size: var(--fs-meta); color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
+
+/* --- Multi-select: checked-row tint + slim contextual toolbar --- */
+/* `.selected` is the keyboard cursor (--accent-bg, defined with the row); a
+   checked row (Ctrl/Shift-click) adds the accent edge so it reads as part of
+   the bulk set even when it isn't the cursor; the cursor inside the set is a
+   step stronger. */
+.item.multi-selected { background: var(--accent-bg); --row-edge: var(--accent); }
+.item.multi-selected:hover, .item.selected.multi-selected { background: var(--accent-bg-strong); }
+/* The selection bar takes the chip bar's place while 2+ clips are selected:
+   both sit in ONE grid cell (.chip-row), the chips go invisible, the cell's
+   height is the taller of the two, so nothing below moves; no band, no tint,
+   no border (the checked rows carry the only accent). The cell is never lower
+   than a populated chip bar, so an empty one (no pins, keys, images or groups
+   yet) does not grow when the selection bar or the first chip shows. */
+.chip-row { display: grid; min-height: max(var(--ctl-md), calc(var(--ctl-sm) + 2 * var(--sp-1))); }
+.chip-row > .group-filters, .chip-row > .selection-bar { grid-area: 1 / 1; }
+.chip-row:has(> .selection-bar:not(.hidden)) > .group-filters { visibility: hidden; }
+.selection-bar { display: flex; align-items: center; align-self: start; gap: var(--sp-3); min-height: var(--ctl-md); padding: 0 var(--edge-ctl) 0 var(--gutter); z-index: 31; }
+.selection-bar.hidden { display: none; }
+.selection-count { flex: 1; font-size: var(--fs-ui); font-weight: var(--fw-strong); color: var(--text); }
+.selection-actions { display: flex; align-items: center; gap: var(--sp-1); }
+
+/* Rows are click-to-act (click pastes, shift/ctrl-click selects) — native text
+   selection inside them is never meaningful and shift-click was smearing a text
+   highlight across rows. The editor is the copy-a-fragment surface. */
+.list .item { user-select: none; -webkit-user-select: none; }
+
+/* Submenu auto-flip (set by installSubmenuAutoflip when a submenu would leave
+   the window): side-opening submenus open leftward. */
+.tag-menu-node > .tag-submenu.flip-x { left: auto; right: calc(100% - 1px); }
+
+/* --- Shared popover menu: the per-clip "..." menu, the bulk menu, a row's
+   keypad / group popovers, the editor + viewer menus. ONE row primitive
+   (Core.menuRowHtml): icon column, label, optional hint / caret, --ctl-md tall,
+   contiguous. Every submenu and group checklist uses the same row, so labels
+   line up across levels. Membership = the accent check glyph in the icon
+   column (a dash for "some of the selection"), never a row fill; --text-dim is
+   for disabled rows only. Keyboard focus paints like hover (a menu has one
+   active row), danger rows turn red on hover / focus. --- */
+.bc-menu { position: absolute; z-index: 200; min-width: 176px; max-width: 260px; } /* surface look comes from the shared floating-surface rule */
+.bc-menu-list { display: flex; flex-direction: column; }
+.bc-menu-item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--ctl-md); box-sizing: border-box; padding: 0 var(--sp-3);
+                background: none; border: none; border-radius: var(--r-1); color: var(--text); font-family: inherit; font-size: var(--fs-ui); line-height: var(--lh-ui);
+                text-align: left; cursor: pointer; position: relative; }
+.bc-menu-item:hover, .bc-menu .bc-menu-item:focus-visible { background: var(--menu-hover); box-shadow: none; }
+.bc-menu-item > .mi { width: 1em; font-size: var(--icon-md); color: var(--text-dim); flex-shrink: 0; }
+.bc-menu-item > .bc-menu-check { color: var(--accent); }
+.bc-menu-item.danger:hover, .bc-menu-item.danger:focus-visible { background: var(--red-bg); }
+.bc-menu-item.danger:hover, .bc-menu-item.danger:hover > .mi, .bc-menu-item.danger:focus-visible, .bc-menu-item.danger:focus-visible > .mi { color: var(--red); }
+.bc-menu-item:disabled { color: var(--text-dim); cursor: default; }
+.bc-menu-item:disabled:hover { background: none; }
+.bc-menu-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bc-menu-hint { flex-shrink: 0; color: var(--text-dim); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
+.bc-menu-item > .tag-caret { margin-left: 0; font-size: var(--icon-sm); color: var(--text-dim); opacity: 1; }
+.bc-menu-sep { height: 1px; margin: var(--sp-2) 0; background: var(--line); }
+/* A submenu opens beside its row (the row and its .tag-submenu share one
+   .tag-menu-node): on hover, or .open from the keyboard (Right / Enter). Focus
+   on a parent row alone does not open it. */
+.bc-menu .tag-submenu { top: -4px; left: calc(100% - 1px); min-width: 150px; }
+.bc-menu .tag-menu-node.open > .tag-submenu { display: block; }
+.bc-menu .tag-menu-node:hover > .bc-menu-item, .bc-menu .tag-menu-node.open > .bc-menu-item { background: var(--menu-hover); } /* the row whose submenu is out */
+.bc-menu .tag-menu-node:not(.open):not(:hover) > .tag-submenu { display: none; }
+
+/* --- Undo toast action: the shared accent text action (.btn.quiet.sm.accent),
+   pulled in by its own padding. The toast itself ignores the pointer (it
+   floats over the last row); the action opts back in only while the toast is
+   shown (hidden, it still sits over the last row). --- */
+.toast-action { margin-right: calc(-1 * var(--sp-3)); }
+.toast.show .toast-action { pointer-events: auto; }