@bendyline/docblocks-react 2.6.1 → 2.7.0

package/src/styles/docblocks.css

@@ -20,6 +20,13 @@
    follows whichever appearance the shell in the page resolved to. */
 :root,
 .db-shell {
+  /* Chrome typeface. `system-ui` first so DocBlocks looks native by default.
+     Settings > Appearance > Interface font swaps this for the bundled face
+     below; the visual-regression suite forces that, because under the system
+     stack the same screenshot renders in a different typeface on every OS. */
+  --db-ui-font:
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
   --db-bg: #ffffff;
   --db-bg-subtle: #f3eede;
   --db-bg-hover: #e9e2cb;
@@ -77,6 +84,88 @@
   --db-git-conflicted: #b22b1b;
 }
 
+/* ── Adaptive tokens ──────────────────────────────────────────
+   The ONLY place in this stylesheet that branches on form factor. Every
+   adaptive rule below CONSUMES a token; it does not re-test a width.
+
+   There is no PostCSS in this repo, so `@custom-media` is unavailable and CSS
+   cannot read a custom property inside a media condition. TypeScript owns the
+   numbers (packages/react/src/layout/form-factor.ts) and stamps `data-db-*`
+   on <html> and .db-shell; these selectors key off that. Same pattern the
+   theme already uses with `[data-theme]`.
+
+   Bound on :root as well as .db-shell because Squisq portals its menus and
+   dialogs onto <body>, outside the shell subtree. */
+:root,
+.db-shell {
+  /* Hit targets. Raised wholesale on coarse pointers rather than per rule. */
+  --db-target-min: 28px;
+  --db-control-size: 24px;
+  --db-row-min-height: 26px;
+  /* Below 16px iOS Safari zooms the page when an input takes focus. */
+  --db-input-font-size: 13px;
+
+  /* Viewport and safe area. env() resolves to 0px without viewport-fit=cover. */
+  --db-shell-block-size: 100dvh;
+  --db-safe-top: env(safe-area-inset-top, 0px);
+  --db-safe-right: env(safe-area-inset-right, 0px);
+  --db-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --db-safe-left: env(safe-area-inset-left, 0px);
+  /* Written by useKeyboardInset while the on-screen keyboard is up. */
+  --db-keyboard-inset: 0px;
+
+  /* Drawer. --db-drawer-progress is driven directly on the node during a
+     swipe so the gesture costs no React renders. */
+  /* 15vw of scrim always stays tappable to dismiss -- 58px on a 390px phone.
+     At 88vw that strip was only 47px, which is below the 44px target once you
+     account for the shadow. */
+  --db-drawer-width: min(85vw, 400px);
+  --db-drawer-progress: 0;
+  --db-drawer-duration: 220ms;
+}
+
+[data-db-pointer='coarse'] {
+  --db-target-min: 44px;
+  --db-control-size: 40px;
+  --db-row-min-height: 44px;
+  --db-input-font-size: 16px;
+}
+
+[data-db-width='medium'],
+[data-db-width='expanded'],
+[data-db-width='wide'] {
+  --db-drawer-width: min(60vw, 420px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  .db-shell {
+    --db-drawer-duration: 0ms;
+  }
+}
+
+/* Interface font: fixed.
+   `DocBlocks Fixed UI` is the Roboto variable binary each surface already ships
+   for the document theme of that name, redeclared over the full 100-900 range
+   so the chrome's 400/500/600/650/700 weights render exactly rather than
+   snapping to the nearest static face. Bound on the root, not only the shell,
+   because Squisq portals its menus onto <body>. */
+:root[data-db-interface-font='fixed'],
+:root[data-db-interface-font='fixed'] .db-shell {
+  --db-ui-font:
+    'DocBlocks Fixed UI', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  /* Squisq's chrome reads `--squisq-ux-font` with a `system-ui` fallback, the
+     same bridge shape as the `--squisq-*` colour tokens further down. Setting
+     it here carries the fixed face into the editor toolbar, menus and dialogs,
+     which is most of what a shell screenshot actually contains.
+
+     Scoped to fixed mode on purpose: the token is left unset by default so
+     Squisq keeps its own chrome font, and DOCUMENT typography is never touched
+     — a theme's fonts are content the author chose, not chrome. */
+  --squisq-ux-font: var(--db-ui-font);
+}
+
 :root:has(.db-shell[data-theme='dark']),
 .db-shell[data-theme='dark'] {
   --db-bg: #1a1812;
@@ -176,7 +265,8 @@
   position: relative;
 }
 
-.db-file-explorer--drop-active::after {
+.db-file-explorer--drop-active::after,
+.db-shell-editor-area--drop-active::after {
   content: 'Drop to import';
   position: absolute;
   inset: 0;
@@ -359,8 +449,9 @@
 }
 
 .db-explorer-btn {
-  width: 24px;
-  height: 24px;
+  position: relative;
+  width: var(--db-control-size);
+  height: var(--db-control-size);
   background: none;
   border: 1px solid transparent;
   border-radius: 3px;
@@ -457,6 +548,8 @@
   background: var(--db-bg);
   color: var(--db-text);
   font: inherit;
+  /* Longhand after the shorthand: keeps iOS from zooming on focus. */
+  font-size: var(--db-input-font-size);
 }
 
 .db-transient-move-hint,
@@ -539,7 +632,7 @@
   min-width: 0;
   box-sizing: border-box;
   padding: 3px 6px;
-  font-size: 13px;
+  font-size: var(--db-input-font-size);
   background: var(--db-bg);
   color: var(--db-text);
   border: 1px solid var(--db-input-border);
@@ -677,6 +770,10 @@
 .db-tree-row {
   display: flex;
   align-items: center;
+  /* Long-press opens our own context menu; without this iOS shows its text
+     selection callout on top of it. */
+  -webkit-touch-callout: none;
+  min-height: var(--db-row-min-height);
   padding: 6px 4px;
   cursor: pointer;
   white-space: nowrap;
@@ -763,7 +860,7 @@
 .db-tree-rename-input {
   flex: 1;
   padding: 1px 4px;
-  font-size: 13px;
+  font-size: var(--db-input-font-size);
   background: var(--db-bg);
   color: var(--db-text);
   border: 1px solid var(--db-input-border);
@@ -781,6 +878,7 @@
 }
 
 .db-tree-more {
+  position: relative;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
@@ -807,10 +905,21 @@
   visibility: visible;
 }
 
-@media (hover: none), (pointer: coarse) {
-  .db-tree-more {
-    visibility: visible;
-  }
+/* No hover to reveal on: keep the row's overflow control permanently visible.
+   Driven by `any-hover`, so an iPad with a Magic Keyboard keeps hover reveals
+   while still getting coarse-pointer hit targets. */
+[data-db-hover='none'] .db-tree-more {
+  visibility: visible;
+}
+
+/* Grow the touchable area without growing the glyph. Both operands are tokens,
+   so on a fine pointer the inset resolves to 0 and nothing moves. The same
+   trick the sidebar resizer already uses for its 1px drag handle. */
+.db-tree-more::after,
+.db-explorer-btn::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--db-control-size) - var(--db-target-min)) / 2);
 }
 
 .db-tree-more:hover {
@@ -978,6 +1087,54 @@
   font-weight: 500;
 }
 
+/* A listed workspace: the select button plus its ⋯ actions button. The row
+   carries the hover and selected backgrounds so they span both. */
+.db-workspace-dropdown-row {
+  display: flex;
+  align-items: stretch;
+}
+
+.db-workspace-dropdown-row:hover {
+  background: var(--db-bg-hover);
+}
+
+.db-workspace-dropdown-row--active {
+  background: var(--db-bg-selected);
+}
+
+.db-workspace-dropdown-row .db-workspace-dropdown-item {
+  flex: 1 1 auto;
+  min-width: 0;
+  background: none;
+}
+
+.db-workspace-dropdown-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 28px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--db-text-muted);
+  cursor: pointer;
+  opacity: 0.72;
+}
+
+.db-workspace-dropdown-row--active .db-workspace-dropdown-more {
+  color: var(--db-text-on-selected);
+}
+
+.db-workspace-dropdown-more:hover,
+.db-workspace-dropdown-more[aria-expanded='true'] {
+  opacity: 1;
+}
+
+.db-workspace-dropdown-more:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: -2px;
+}
+
 .db-workspace-type {
   font-size: 11px;
   color: var(--db-text-placeholder);
@@ -1018,9 +1175,12 @@
   margin: 4px 0;
 }
 
+/* 300px when there is room. The picker narrows the dropdown to fit inside the
+   sidebar (see WorkspacePicker), and the form follows it down. */
 .db-workspace-create {
   box-sizing: border-box;
-  width: min(300px, calc(100vw - 24px));
+  width: 300px;
+  max-width: 100%;
   padding: 10px;
 }
 
@@ -1042,6 +1202,8 @@
   background: var(--db-bg);
   color: var(--db-text);
   font: inherit;
+  /* Longhand after the shorthand: keeps iOS from zooming on focus. */
+  font-size: var(--db-input-font-size);
 }
 
 .db-workspace-create-input:focus-visible {
@@ -1126,6 +1288,14 @@
   display: block;
 }
 
+/* The logo is black lettering on a pale extruded edge. On espresso the black
+   fill vanished and only the edges showed, so it read as a hollow outline.
+   Inverting makes the letters solid and sinks the edge into the background,
+   and the sepia warms them toward --db-text. */
+.db-shell[data-theme='dark'] .db-app-menu-logo {
+  filter: invert(1) brightness(0.88) sepia(0.15);
+}
+
 .db-app-menu-caret {
   width: 10px;
   height: 6px;
@@ -1265,18 +1435,31 @@
 .db-shell {
   display: flex;
   flex-direction: column;
+  /* Removes the 300ms double-tap-zoom delay without disabling pinch-zoom of
+     the document, which would be an accessibility regression. */
+  touch-action: manipulation;
+  /* Pre-dvh engines keep the old behaviour. This is an @supports block rather
+     than a var() fallback on purpose: a var() that resolves to an unsupported
+     unit becomes invalid-at-computed-value-time (`unset`) instead of falling
+     back to the previous declaration, which would collapse the shell. */
   height: 100vh;
   background: var(--db-bg);
   color: var(--db-text);
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    sans-serif;
+  font-family: var(--db-ui-font);
+}
+
+/* Keep a rubber-band at the end of the tree from scrolling the page behind it. */
+.db-shell-sidebar,
+.db-tree {
+  overscroll-behavior: contain;
+}
+
+@supports (height: 100dvh) {
+  .db-shell {
+    /* Tracks the shrinking viewport as mobile browser chrome collapses. Hosts
+       with no dynamic chrome (Electron) override the token to 100%. */
+    height: var(--db-shell-block-size);
+  }
 }
 
 .db-shell-topbar {
@@ -1293,6 +1476,45 @@
   font-size: 14px;
 }
 
+.db-shell-panes {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Vertical scrolling stays with the browser; horizontal is the drawer swipe. */
+[data-db-layout='single-pane'][data-db-pointer='coarse'] .db-shell-panes {
+  touch-action: pan-y;
+}
+
+.db-shell-editor-area {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  /* The editor has its own top chrome beside (or behind) the sidebar.
+     Reserve the cutout once on this pane so every document and empty view
+     clears it, including toolbars that wrap onto multiple rows. */
+  padding-top: var(--db-safe-top);
+  /* Lifts everything bottom-anchored -- including Squisq's status bar -- clear
+     of the home indicator and the on-screen keyboard. iOS does not resize the
+     layout viewport for the keyboard, so without this they sit underneath it.
+     Applied to the pane we own: setting `padding-bottom` on
+     `.squisq-status-bar` REPLACES Squisq's own padding rather than adding to
+     it, which silently shrank the bar by 4px and broke its shared border with
+     the sidebar footer. Both insets are 0 on desktop. */
+  padding-bottom: calc(var(--db-safe-bottom) + var(--db-keyboard-inset));
+  padding-right: var(--db-safe-right);
+}
+
+[data-db-layout='single-pane'] .db-shell-editor-area {
+  /* With the drawer closed, the editor also owns the viewport's left edge. */
+  padding-left: var(--db-safe-left);
+}
+
 .db-shell-sidebar {
   width: 260px;
   display: flex;
@@ -1302,6 +1524,62 @@
   position: relative;
 }
 
+/* ── Sidebar as an overlay drawer ─────────────────────────────
+   Single-pane lifts the sidebar out of the flex row and floats it over the
+   editor. Both panes stay mounted: hiding with `visibility` keeps the layout
+   boxes alive, so getBoundingClientRect still works for scrollIntoView, the
+   editor never relayouts, and opening the drawer costs one compositor
+   transform. `visibility` also removes the pane from the tab order and the
+   a11y tree; `inert` (applied from React) covers pointer hit-testing too.
+
+   Do NOT change this to `display: none` — that unmounts the layout box and
+   reintroduces the reflow this replaced. */
+[data-db-layout='single-pane'] .db-shell-sidebar {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  z-index: 30;
+  background: var(--db-bg);
+  width: var(--db-drawer-width);
+  padding-inline-start: var(--db-safe-left);
+  border-inline-end: 1px solid var(--db-border-strong);
+  box-shadow: 0 0 40px var(--db-shadow);
+  visibility: hidden;
+  transform: translateX(calc((var(--db-drawer-progress) - 1) * 100%));
+  transition:
+    transform var(--db-drawer-duration) ease,
+    visibility 0s linear var(--db-drawer-duration);
+}
+
+[data-db-layout='single-pane'][data-db-drawer='open'] .db-shell-sidebar {
+  --db-drawer-progress: 1;
+  visibility: visible;
+  transition-delay: 0s;
+  /* `transform: none`, not `translateX(0)`. ANY non-none transform makes this
+     element the containing block for `position: fixed` descendants, and the
+     modal overlay (.db-dialog-overlay, `position: fixed; inset: 0`) is rendered
+     inside the sidebar rather than portalled to <body>. With a transform here
+     every dialog opened from the app menu is sized and clipped to the drawer
+     instead of the viewport. Removing it once the drawer is open is visually
+     identical, because progress is 1 and translateX(0) moves nothing. */
+  transform: none;
+}
+
+.db-shell-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 25;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: var(--db-drawer-progress);
+  pointer-events: none;
+  transition: opacity var(--db-drawer-duration) ease;
+}
+
+[data-db-drawer='open'] .db-shell-scrim {
+  --db-drawer-progress: 1;
+  pointer-events: auto;
+}
+
 .db-sidebar-collapse-preview {
   position: absolute;
   inset: 0;
@@ -1417,7 +1695,9 @@ body.db-resizing-sidebar * {
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--db-border-strong);
-  padding: 4px;
+  /* Clears the iOS status bar under `apple-mobile-web-app-status-bar-style:
+     black-translucent`; resolves to plain 4px everywhere else. */
+  padding: calc(4px + var(--db-safe-top)) 4px 4px;
   gap: 4px;
   flex-shrink: 0;
   min-height: 40px;
@@ -1457,8 +1737,9 @@ body.db-resizing-sidebar * {
   align-items: center;
   gap: 6px;
   /* Match the status bar's pinned line box + 8px vertical padding + 1px border. */
-  height: 25px;
-  padding: 0 12px 0 18px;
+  height: calc(25px + var(--db-safe-bottom));
+  /* Clears the iOS home indicator; 0px on every other surface. */
+  padding: 0 12px var(--db-safe-bottom) 18px;
   border-top: 1px solid var(--db-border-strong);
   flex-shrink: 0;
   font-size: 11px;
@@ -1517,11 +1798,6 @@ body.db-resizing-sidebar * {
 
 /* ── Mobile Layout ──────────────────────────────────────────── */
 
-.db-shell--mobile .db-shell-sidebar {
-  width: 100%;
-  border-right: none;
-}
-
 .db-shell--mobile:has(.db-mobile-first-run) .db-file-explorer {
   flex: 0 0 170px;
   height: 170px;
@@ -1650,7 +1926,18 @@ body.db-resizing-sidebar * {
 /* The compact layout puts Squisq's overflow trigger part-way along the second
    row, wherever the formatting buttons stop. Its desktop right-aligned
    placement would hang the menu off-canvas from there, so anchor the mobile
-   popover to the viewport instead. */
+   popover to the full-width toolbar instead. The trigger's own wrapper must
+   not be the containing block: an offset from it moves with the trigger, and
+   once Squisq kept Insert inline the trigger moved right and the menu ran
+   89px off a 390px screen. */
+.db-shell--mobile .squisq-toolbar {
+  position: relative;
+}
+
+.db-shell--mobile .squisq-toolbar-overflow {
+  position: static;
+}
+
 .db-shell--mobile .squisq-editor-shell .squisq-toolbar-overflow-menu {
   right: auto !important;
   left: max(4px, env(safe-area-inset-left)) !important;
@@ -1670,19 +1957,30 @@ body.db-resizing-sidebar * {
    caption buttons; see packages/desktop/renderer/titlebar.css. */
 .db-shell--desktop-toolbar-wrapped:not(.db-shell--mobile) {
   --db-toolbar-wrapped-row: 44px;
+  /* Squisq's toolbar keeps this inline-end padding so the second row's last
+     control never touches the pane edge. The tab row is a flex item, so a
+     100% basis would stop at the content box and leave a toolbar-coloured
+     strip beyond the tabs; it has to cover the padding too. */
+  --db-toolbar-wrapped-inline-end: 12px;
 }
 
 .db-shell--desktop-toolbar-wrapped:not(.db-shell--mobile) .squisq-toolbar {
   min-height: calc(var(--db-toolbar-wrapped-row) * 2);
   flex-wrap: wrap;
   align-content: stretch;
+  padding-right: var(--db-toolbar-wrapped-inline-end);
 }
 
+/* The tab row spans the whole toolbar, padding included, so its surface runs
+   edge to edge and its right-hand divider (which separated it from the
+   formatting controls when they shared a row) has nothing left to divide. */
 .db-shell--desktop-toolbar-wrapped:not(.db-shell--mobile) .squisq-toolbar-view-tabs {
   box-sizing: border-box;
-  flex: 0 0 100%;
-  width: 100%;
+  flex: 0 0 auto;
+  width: calc(100% + var(--db-toolbar-wrapped-inline-end));
+  margin-right: calc(-1 * var(--db-toolbar-wrapped-inline-end));
   height: var(--db-toolbar-wrapped-row);
+  border-right: 0;
 }
 
 .db-mobile-back {
@@ -1865,6 +2163,25 @@ body.db-resizing-sidebar * {
   background: rgba(0, 0, 0, 0.4);
 }
 
+/* Palette-style dialogs (quick-open) sit near the top, where the eye already is. */
+.db-dialog-overlay--top {
+  align-items: flex-start;
+  padding-top: min(12vh, 96px);
+}
+
+/* Present to assistive technology, absent from the layout. */
+.db-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .db-dialog {
   box-sizing: border-box;
   background: var(--db-bg);
@@ -1936,11 +2253,13 @@ body.db-resizing-sidebar * {
   text-decoration: underline;
 }
 
+/* Spacing, not "·" glyphs, separates the links: a text separator was left
+   orphaned at the start of the line whenever the row wrapped. */
 .db-dialog-links {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 6px;
+  gap: 6px 16px;
 }
 
 .db-about-beta {
@@ -1982,10 +2301,6 @@ body.db-resizing-sidebar * {
   user-select: all;
 }
 
-.db-dialog-sep {
-  color: var(--db-text-placeholder);
-}
-
 /* ── Settings Dialog ─────────────────────────────────────────── */
 
 .db-settings-fieldset {
@@ -2114,7 +2429,7 @@ body.db-resizing-sidebar * {
   width: 100%;
   padding: 6px 8px;
   font: inherit;
-  font-size: 13px;
+  font-size: var(--db-input-font-size);
   background: var(--db-bg-subtle);
   color: var(--db-text);
   border: 1px solid var(--db-input-border);
@@ -2128,6 +2443,130 @@ body.db-resizing-sidebar * {
   border-color: var(--db-accent);
 }
 
+/* Generated catalog files (index.html, catalog.json): shown, never edited */
+
+.db-generated-file,
+.db-generated-file-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.db-generated-file-notice {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--db-border);
+  background: var(--db-bg-subtle);
+  color: var(--db-text-muted);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.db-generated-file-notice-text {
+  flex: 1 1 240px;
+  min-width: 0;
+}
+
+.db-generated-file-notice strong {
+  color: var(--db-text);
+  font-weight: 600;
+}
+
+.db-generated-file-back {
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--db-text-secondary);
+  font: inherit;
+  cursor: pointer;
+}
+
+/* Show the page as a browser would, whatever the app theme: a page that
+   paints no background of its own is drawn on white, never on the app's dark
+   surface (its dark text would vanish). `color-scheme: light` keeps the frame
+   opaque-light rather than inheriting the host's dark canvas. Themed pages
+   paint their own background over this. */
+.db-generated-file-preview {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  border: 0;
+  background: #fff;
+  color-scheme: light;
+}
+
+/* Workspace settings (`.docblocks/workspace.json`) */
+
+.db-settings-subfields {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 4px 0 10px 24px;
+}
+
+.db-settings-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: var(--db-text);
+  font-size: 13px;
+}
+
+.db-settings-text-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 8px;
+  font: inherit;
+  font-size: var(--db-input-font-size);
+  background: var(--db-bg-subtle);
+  color: var(--db-text);
+  border: 1px solid var(--db-input-border);
+  border-radius: 4px;
+  outline: none;
+}
+
+.db-settings-text-input:focus-visible {
+  border-color: var(--db-accent);
+}
+
+.db-settings-textarea {
+  min-height: 3.5em;
+  resize: vertical;
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+}
+
+.db-settings-number-input {
+  max-width: 8em;
+}
+
+.db-settings-status-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 12px;
+}
+
+.db-settings-status {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--db-text-muted);
+}
+
+.db-settings-status--warning {
+  color: var(--db-danger);
+}
+
+.db-settings-link-btn {
+  margin-top: 8px;
+}
+
 .db-font-picker {
   position: relative;
 }
@@ -2195,11 +2634,7 @@ body.db-resizing-sidebar * {
 .db-font-picker-group {
   padding: 10px 10px 4px;
   color: var(--db-text-muted);
-  font:
-    600 10px/1.2 system-ui,
-    -apple-system,
-    'Segoe UI',
-    sans-serif;
+  font: 600 10px/1.2 var(--db-ui-font);
   letter-spacing: 0.065em;
   text-transform: uppercase;
 }
@@ -2268,11 +2703,7 @@ body.db-resizing-sidebar * {
 .db-font-picker-check {
   flex: 0 0 18px;
   color: var(--db-accent-deep);
-  font:
-    700 14px/1 system-ui,
-    -apple-system,
-    'Segoe UI',
-    sans-serif;
+  font: 700 14px/1 var(--db-ui-font);
   text-align: center;
 }
 
@@ -2309,26 +2740,136 @@ body.db-resizing-sidebar * {
   cursor: default;
 }
 
-.db-settings-accent {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  padding: 7px 8px;
-  border: 1px solid transparent;
-  border-radius: 6px;
+/* The quieter of two actions — Disconnect beside a primary Connect. */
+.db-settings-action--secondary {
+  border-color: var(--db-input-border);
+  background: transparent;
   color: var(--db-text);
-  cursor: pointer;
 }
 
-.db-settings-accent:hover {
+.db-settings-action--secondary:hover:not(:disabled) {
+  border-color: var(--db-accent);
   background: var(--db-bg-subtle);
 }
 
-.db-settings-accent--selected {
-  background: var(--db-accent-soft-08);
-  border-color: var(--db-accent);
+/* A one-time code the person types into Gezel: easy to read and to select. */
+.db-settings-ai-code {
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-size: 15px;
+  letter-spacing: 0.12em;
+  color: var(--db-text);
+  user-select: all;
+}
+
+.db-settings-ai-error {
+  color: var(--db-danger);
+}
+
+.db-settings-ai-models {
+  margin-top: 8px;
+}
+
+.db-settings-ai-model-downloads {
+  margin-top: 10px;
+  padding: 12px;
+  border: 1px solid var(--db-border);
+  border-radius: 6px;
+  background: var(--db-bg-subtle);
+}
+
+.db-settings-ai-model-downloads .db-settings-select {
+  margin-top: 0;
+}
+
+.db-settings-ai-download-progress {
+  display: grid;
+  gap: 6px;
+  margin-top: 12px;
+  color: var(--db-text-secondary);
+  font-size: 12px;
+}
+
+.db-settings-ai-download-progress progress {
+  width: 100%;
+  height: 8px;
+  accent-color: var(--db-accent);
+}
+
+/* Speech settings: dictation and narration model rows. */
+.db-settings-speech-section + .db-settings-speech-section {
+  margin-top: 14px;
+}
+
+.db-settings-subheading {
+  margin: 10px 0 2px;
+  color: var(--db-text);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.db-settings-speech-models {
+  display: grid;
+  gap: 8px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.db-settings-speech-model {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--db-border);
+  border-radius: 6px;
+  background: var(--db-bg-subtle);
+}
+
+.db-settings-speech-model-text {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.db-settings-speech-model-name {
+  color: var(--db-text);
+  font-size: 13px;
+}
+
+.db-settings-speech-model .db-settings-hint {
+  margin: 0;
+}
+
+.db-settings-speech-model .db-settings-ai-download-progress {
+  min-width: 140px;
+  margin-top: 0;
+}
+
+.db-settings-speech-model .db-settings-action {
+  flex-shrink: 0;
+}
+
+.db-settings-accent {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 7px 8px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--db-text);
+  cursor: pointer;
+}
+
+.db-settings-accent:hover {
+  background: var(--db-bg-subtle);
+}
+
+.db-settings-accent--selected {
+  background: var(--db-accent-soft-08);
+  border-color: var(--db-accent);
 }
 
 .db-settings-accent-input {
@@ -2665,7 +3206,7 @@ body.db-resizing-sidebar * {
   display: block;
   width: 100%;
   padding: 6px 8px;
-  font-size: 13px;
+  font-size: var(--db-input-font-size);
   background: var(--db-bg-subtle);
   color: var(--db-text);
   border: 1px solid var(--db-border);
@@ -2690,7 +3231,7 @@ body.db-resizing-sidebar * {
   min-width: 0;
   box-sizing: border-box;
   padding: 6px 8px;
-  font-size: 13px;
+  font-size: var(--db-input-font-size);
   background: var(--db-bg-subtle);
   color: var(--db-text);
   border: 1px solid var(--db-border);
@@ -2974,15 +3515,13 @@ body.db-resizing-sidebar * {
   color: var(--db-text-muted);
 }
 
-@media (max-width: 560px) {
-  .db-share-qr-heading {
-    display: block;
-  }
+[data-db-width='compact'] .db-share-qr-heading {
+  display: block;
+}
 
-  .db-share-qr-actions {
-    justify-content: flex-start;
-    margin-top: 10px;
-  }
+[data-db-width='compact'] .db-share-qr-actions {
+  justify-content: flex-start;
+  margin-top: 10px;
 }
 
 /* ── Squisq editor chrome separators ─────────────────────────── */
@@ -3545,15 +4084,7 @@ body.db-resizing-sidebar * {
    `var(--db-accent-…)` here drops to the squisq fallback (dark slate
    bg + near-white text) because the vars never resolve. */
 html:has(.db-shell) .squisq-tooltip {
-  font-family:
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    sans-serif;
+  font-family: var(--db-ui-font);
   box-shadow: 0 2px 8px rgba(15, 30, 20, 0.35);
   /* Default (light mode + system-light): dark espresso chip, cream
      text — an inverted floating chip against the cream UI. */
@@ -5153,6 +5684,82 @@ html:has(.db-shell[data-theme='dark'])
   outline-offset: 2px;
 }
 
+.db-conflict-columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  flex: 1;
+  min-height: 300px;
+}
+
+.db-conflict-version {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid var(--db-border);
+  border-radius: 8px;
+}
+
+.db-conflict-version h3 {
+  margin: 0;
+  color: var(--db-text);
+  font-size: 15px;
+}
+
+.db-conflict-metadata {
+  margin: 4px 0 12px;
+  color: var(--db-text-muted);
+  font-size: 12px;
+}
+
+.db-conflict-preview {
+  box-sizing: border-box;
+  flex: 1;
+  width: 100%;
+  min-height: 160px;
+  padding: 12px;
+  overflow: auto;
+  color: var(--db-text);
+  background: var(--db-bg-elevated, var(--db-bg));
+  border: 1px solid var(--db-border);
+  border-radius: 4px;
+  font:
+    13px / 1.6 ui-monospace,
+    monospace;
+  resize: none;
+}
+
+.db-conflict-consequence {
+  margin: 12px 0;
+  font-size: 12px;
+}
+
+.db-conflict-dialog button:not(.db-dialog-close) {
+  min-height: var(--db-target-min, 32px);
+  padding: 7px 12px;
+  color: var(--db-text);
+  background: var(--db-bg);
+  border: 1px solid var(--db-border);
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.db-conflict-dialog button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.db-conflict-dialog button:focus-visible,
+.db-conflict-preview:focus-visible {
+  outline: 2px solid var(--db-accent);
+  outline-offset: 2px;
+}
+
+[data-db-width='compact'] .db-conflict-columns {
+  grid-template-columns: minmax(0, 1fr);
+}
+
 /* Browser PWA update notice. It is docked over the right side of Squisq's
    status bar, while extra status-bar padding keeps its contents visible.
    If the status bar is hidden, it becomes a compact floating badge so the
@@ -5304,788 +5911,1868 @@ html:has(.db-shell[data-theme='dark'])
   }
 }
 
-/* ── Git ─────────────────────────────────────────────────────── */
+/* ── AI editor assistance ───────────────────────────────────── */
 
-/* Dialog size modifiers (shared Dialog component) */
-.db-dialog--wide {
-  width: 560px;
-  max-width: 100%;
-  max-height: min(calc(100dvh - 32px), 660px);
+.db-ai-toolbar {
+  border-left: 0;
 }
 
-.db-dialog--full {
-  width: min(1100px, 94vw);
-  height: 82vh;
-  display: flex;
-  flex-direction: column;
+.db-ai-toolbar-trigger {
+  color: var(--db-accent-deep);
 }
 
-.db-dialog--full .db-dialog-body {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
+.db-ai-toolbar-menu {
+  min-width: 220px;
 }
 
-.db-dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 20px 16px;
-  border-top: 1px solid var(--db-border);
+/* Read aloud: the speech menu and its inline transport while playing. */
+.db-speech-toolbar {
+  display: inline-flex;
+  align-items: center;
+  border-left: 0;
 }
 
-/* Buttons used in git dialog footers */
-.db-git-primary-btn {
-  padding: 6px 16px;
-  border: none;
-  border-radius: 5px;
-  background: var(--db-accent);
-  color: var(--db-text-on-accent);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
+.db-speech-toolbar-menu {
+  min-width: 220px;
 }
 
-.db-git-primary-btn:hover:not(:disabled) {
-  background: var(--db-accent-hover);
+.db-speech-transport {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
 }
 
-.db-git-primary-btn:disabled {
-  opacity: 0.5;
-  cursor: default;
+.db-speech-transport-label {
+  min-width: 3.5em;
+  padding: 0 6px;
+  color: var(--db-text-secondary);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
-/* Destructive confirmation (delete, remove workspace). The foreground comes
-   from a token rather than a literal because the two themes need opposite ink:
-   light's danger is deep red and carries white at ~6.5:1, while dark's is a
-   light red where white would fall to ~2.8:1 and fail WCAG AA. */
-.db-git-primary-btn--danger {
-  background: var(--db-danger);
-  color: var(--db-text-on-danger);
+.db-ai-toolbar-status {
+  max-width: 280px;
+  padding: 7px 12px;
+  color: var(--db-text-muted);
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: normal;
 }
 
-.db-git-primary-btn--danger:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--db-danger) 85%, black);
+.db-ai-draft-dialog {
+  width: min(680px, 100%);
 }
 
-.db-git-secondary-btn {
-  padding: 6px 14px;
-  border: 1px solid var(--db-border-strong);
-  border-radius: 5px;
-  background: transparent;
-  color: var(--db-text);
-  font-size: 13px;
-  cursor: pointer;
+.db-ai-draft-dialog .db-dialog-footer {
+  flex-wrap: wrap;
+  align-items: center;
 }
 
-.db-git-secondary-btn:hover:not(:disabled) {
-  background: var(--db-bg-hover);
+.db-ai-draft-dialog .db-dialog-header,
+.db-ai-draft-dialog .db-dialog-footer {
+  flex-shrink: 0;
 }
 
-.db-git-secondary-btn:disabled {
-  opacity: 0.5;
-  cursor: default;
+.db-ai-draft-dialog .db-ai-draft-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
-/* Status bar row in the sidebar */
-.db-git-statusbar {
-  position: relative;
+.db-ai-draft-body > .db-ai-field,
+.db-ai-draft-body > .db-ai-selection-preview,
+.db-ai-draft-body > .db-ai-disclaimer {
   flex-shrink: 0;
-  padding: 2px 8px 4px;
-  border-bottom: 1px solid var(--db-border);
+  margin: 0;
 }
 
-.db-git-statusbar-chip {
+/* Let the draft yield space to the prompt, selection and review note. The
+   body still scrolls when a short viewport cannot fit their minimum sizes. */
+.db-ai-draft-body > .db-ai-draft-field {
   display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 4px 8px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--db-text-secondary);
-  font-size: 12px;
-  cursor: pointer;
-  overflow: hidden;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: calc(96px + 1.6em + 6px);
 }
 
-.db-git-statusbar-chip:hover {
-  background: var(--db-bg-hover);
+.db-ai-draft-body .db-ai-draft-field .db-ai-draft-output {
+  flex: 1 1 auto;
+  height: min(190px, 28dvh);
+  min-height: 96px;
 }
 
-.db-git-branch-glyph {
-  color: var(--db-text-muted);
-  flex-shrink: 0;
+.db-ai-draft-start {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
 }
 
-.db-git-statusbar-branch {
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.db-ai-draft-body .db-ai-selection-preview blockquote {
+  box-sizing: border-box;
+  max-height: min(112px, 16dvh);
 }
 
-.db-git-statusbar-counts {
-  color: var(--db-text-muted);
-  flex-shrink: 0;
+.db-ai-draft-dialog .db-ai-draft-footer {
+  flex-direction: column;
+  align-items: stretch;
 }
 
-.db-git-statusbar-dirty {
-  color: var(--db-git-modified);
-  flex-shrink: 0;
+.db-ai-draft-actions {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
-.db-git-statusbar-merge {
-  color: var(--db-git-conflicted);
-  font-weight: 600;
-  flex-shrink: 0;
+/* Status has its own row, so errors cannot steal space from the actions. */
+.db-ai-footer-status {
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
-.db-git-statusbar-busy {
-  color: var(--db-text-muted);
-  flex-shrink: 0;
+.db-ai-footer-status p {
+  margin: 0;
 }
 
-/* The offer to turn Git on for a folder inside a larger repository. It sits
-   directly above the sidebar footer and borrows its voice: muted, 11px, no
-   icon and no accent — this is a default the user may change, not a fault. */
-.db-git-grant-notice {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
+.db-ai-field {
+  display: grid;
   gap: 6px;
-  flex-shrink: 0;
-  padding: 6px 12px 6px 18px;
-  border-top: 1px solid var(--db-border);
+  margin-bottom: 14px;
+  color: var(--db-text);
+  font-weight: 600;
+}
+
+.db-ai-field textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 72px;
+  padding: 9px 10px;
+  resize: vertical;
+  border: 1px solid var(--db-input-border);
+  border-radius: 5px;
+  outline: none;
+  background: var(--db-bg-subtle);
+  color: var(--db-text);
+  font: 400 var(--db-input-font-size) / 1.5 var(--db-ui-font);
+}
+
+.db-ai-field textarea:focus-visible {
+  border-color: var(--db-accent);
+  box-shadow: 0 0 0 1px var(--db-accent);
+}
+
+.db-ai-field .db-ai-draft-output {
+  min-height: 190px;
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.db-ai-selection-preview {
+  margin: 0 0 14px;
   color: var(--db-text-muted);
-  font-size: 11px;
-  line-height: 1.3;
+  font-size: 12px;
 }
 
-.db-git-grant-notice-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* A whole-document selection must not push the draft below the dialog. */
+.db-ai-selection-preview blockquote {
+  max-height: calc(8 * 1.5em + 16px);
+  border: 1px solid var(--db-input-border);
+  border-radius: 5px;
 }
 
-.db-git-grant-notice-action {
-  flex-shrink: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  line-height: inherit;
-  text-decoration: underline;
-  white-space: nowrap;
-  cursor: pointer;
+.db-ai-selection-preview blockquote:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 2px;
 }
 
-.db-git-grant-notice-action:hover {
+.db-ai-selection-preview blockquote,
+.db-ai-review-excerpt blockquote {
+  margin: 5px 0 0;
+  padding: 8px 10px;
+  overflow: auto;
+  background: var(--db-bg-subtle);
   color: var(--db-text-secondary);
+  font:
+    400 12px/1.5 ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
-.db-git-grant-remember {
+.db-ai-review-excerpt blockquote {
+  border-left: 3px solid var(--db-border-strong);
+}
+
+.db-ai-progress,
+.db-ai-note,
+.db-ai-error,
+.db-ai-disclaimer {
+  font-size: 12px;
+}
+
+.db-ai-progress {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin: 12px 0;
-  font-size: 13px;
-  color: var(--db-text);
-  cursor: pointer;
+  gap: 7px;
+  color: var(--db-text-secondary);
 }
 
-/* Actions dropdown (mirrors db-ws-settings-dropdown) */
-.db-git-menu {
-  position: absolute;
-  top: 100%;
-  left: 8px;
-  right: 8px;
-  z-index: 100;
-  background: var(--db-bg);
-  border: 1px solid var(--db-border);
-  border-radius: 6px;
-  box-shadow: 0 4px 12px var(--db-shadow);
-  padding: 4px 0;
-  margin-top: 2px;
+.db-ai-generation-status {
+  display: grid;
+  gap: 6px;
 }
 
-.db-git-menu-item {
-  display: block;
+.db-ai-generation-status progress {
   width: 100%;
-  padding: 7px 14px;
-  border: none;
-  background: transparent;
-  text-align: left;
-  font-size: 13px;
-  color: var(--db-text);
-  cursor: pointer;
+  height: 6px;
+  accent-color: var(--db-accent);
 }
 
-.db-git-menu-item:hover:not(:disabled),
-.db-git-menu-item:focus-visible {
-  background: var(--db-bg-hover);
+.db-ai-error {
+  color: var(--db-danger);
 }
 
-/* Items are arrow-reachable rather than tab stops, so the ring is the only
-   cue to which one Enter will fire. */
-.db-git-menu-item:focus-visible {
-  outline: 2px solid var(--db-focus);
-  outline-offset: -2px;
+.db-ai-note,
+.db-ai-disclaimer {
+  color: var(--db-text-muted);
 }
 
-.db-git-menu-item:disabled {
-  color: var(--db-text-placeholder);
-  cursor: default;
+.db-ai-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  flex: 0 0 12px;
+  box-sizing: border-box;
+  border: 2px solid var(--db-border-strong);
+  border-top-color: var(--db-accent);
+  border-radius: 50%;
+  animation: db-ai-spin 0.8s linear infinite;
 }
 
-.db-git-menu-divider {
-  height: 1px;
-  background: var(--db-border);
-  margin: 4px 0;
+@keyframes db-ai-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-/* aria-live op-result line — visually subtle, announced politely */
-.db-git-inline-status {
-  display: block;
-  padding: 0 16px;
-  font-size: 11px;
-  color: var(--db-text-muted);
-  min-height: 0;
+.db-text-from-narration button:not(.db-dialog-close),
+.db-ai-draft-dialog .db-dialog-footer button,
+.db-ai-draft-start button,
+.db-ai-review-panel button {
+  min-height: var(--db-target-min);
+  padding: 6px 10px;
+  border: 1px solid var(--db-input-border);
+  border-radius: 5px;
+  background: var(--db-bg);
+  color: var(--db-text-secondary);
+  font: 600 12px/1.2 var(--db-ui-font);
+  cursor: pointer;
 }
 
-.db-git-inline-status:empty {
-  display: none;
+.db-text-from-narration .db-dialog-footer button:last-child,
+.db-ai-draft-dialog .db-dialog-footer button:last-child,
+.db-ai-draft-start button,
+.db-ai-review-finding-actions button:last-child,
+.db-ai-review-actions button {
+  border-color: var(--db-accent);
+  background: var(--db-accent);
+  color: var(--db-text-on-accent);
 }
 
-/* File-tree badges */
-.db-git-badge {
-  margin-left: auto;
-  padding: 0 4px;
-  font-size: 10px;
-  font-weight: 700;
-  flex-shrink: 0;
+.db-text-from-narration button:not(.db-dialog-close):hover:not(:disabled),
+.db-ai-draft-dialog .db-dialog-footer button:hover:not(:disabled),
+.db-ai-draft-start button:hover,
+.db-ai-review-panel button:hover:not(:disabled) {
+  border-color: var(--db-accent-hover);
+  background: var(--db-bg-hover);
+  color: var(--db-text);
 }
 
-.db-tree-row .db-git-badge {
-  margin-left: 4px;
+.db-text-from-narration button:focus-visible,
+.db-text-from-narration textarea:focus-visible,
+.db-ai-draft-dialog .db-dialog-footer button:focus-visible,
+.db-ai-draft-start button:focus-visible,
+.db-ai-review-panel button:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 2px;
 }
 
-.db-git-badge--modified {
-  color: var(--db-git-modified);
+.db-text-from-narration button:disabled,
+.db-ai-draft-dialog .db-dialog-footer button:disabled,
+.db-ai-review-panel button:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
 
-.db-git-badge--added {
-  color: var(--db-git-added);
+.db-ai-review-panel {
+  position: relative;
+  z-index: 5;
+  width: min(360px, 38vw);
+  min-width: 280px;
+  min-height: 0;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  overflow-y: auto;
+  border-left: 1px solid var(--db-border-strong);
+  background: var(--db-bg);
+  color: var(--db-text-secondary);
+  font: 13px/1.45 var(--db-ui-font);
 }
 
-.db-git-badge--untracked {
-  color: var(--db-git-untracked);
+[data-db-width='compact'] .db-ai-review-panel {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  min-width: 0;
+  border-left: 0;
 }
 
-.db-git-badge--renamed {
-  color: var(--db-git-renamed);
+.db-ai-review-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 14px 10px;
+  border-bottom: 1px solid var(--db-border);
+  background: var(--db-bg);
 }
 
-.db-git-badge--deleted {
-  color: var(--db-git-deleted);
+.db-ai-review-header h2 {
+  margin: 0;
+  color: var(--db-text);
+  font-size: 15px;
+  line-height: 1.3;
 }
 
-.db-git-badge--conflicted {
-  color: var(--db-git-conflicted);
+.db-ai-review-count {
+  color: var(--db-text-muted);
+  font-size: 11px;
 }
 
-.db-git-badge--dir {
-  color: var(--db-git-modified);
+.db-ai-review-close {
+  width: var(--db-target-min);
+  padding: 0 !important;
+  border-color: transparent !important;
+  background: transparent !important;
+  font-size: 20px !important;
+  line-height: 1 !important;
 }
 
-.db-tree-context-divider {
-  height: 1px;
-  background: var(--db-border);
-  margin: 4px 0;
+.db-ai-review-actions {
+  padding: 10px 14px 0;
 }
 
-/* Toolbar control */
-.db-git-toolbar-trigger {
-  position: relative;
+.db-ai-review-empty,
+.db-ai-review-stale {
+  margin: 12px 14px;
+  padding: 10px;
+  border: 1px solid var(--db-border);
+  border-radius: 5px;
+  background: var(--db-bg-subtle);
+  color: var(--db-text-muted);
 }
 
-.db-git-toolbar-dot {
-  position: absolute;
-  top: 3px;
-  right: 3px;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--db-git-modified);
+.db-ai-review-stale {
+  border-color: var(--db-accent);
+  color: var(--db-text-secondary);
 }
 
-/* Dialog internals — file lists (commit + conflicts) */
-.db-git-file-list {
-  margin: 8px 0;
-  padding: 0;
+.db-ai-review-list {
+  display: grid;
+  gap: 10px;
+  margin: 12px 0 0;
+  padding: 0 14px;
   list-style: none;
-  max-height: 260px;
-  overflow-y: auto;
+}
+
+.db-ai-review-finding {
+  padding: 12px;
   border: 1px solid var(--db-border);
-  border-radius: 5px;
+  border-radius: 6px;
+  background: var(--db-bg);
+  box-shadow: 0 1px 2px var(--db-shadow);
 }
 
-.db-git-file-row {
+.db-ai-review-finding-meta {
   display: flex;
   align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 6px 10px;
-  border: none;
-  background: transparent;
-  font-size: 12.5px;
-  color: var(--db-text);
-  text-align: left;
-}
-
-.db-git-file-row + .db-git-file-row {
-  border-top: 1px solid var(--db-border);
+  gap: 7px;
+  color: var(--db-text-muted);
+  font-size: 11px;
 }
 
-button.db-git-file-row {
-  cursor: pointer;
+.db-ai-review-severity {
+  padding: 2px 5px;
+  border: 1px solid var(--db-border);
+  border-radius: 3px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
-button.db-git-file-row:hover {
-  background: var(--db-bg-hover);
+.db-ai-review-severity--warning {
+  border-color: var(--db-danger);
+  color: var(--db-danger);
 }
 
-.db-git-file-kind {
-  margin-left: auto;
-  font-size: 10.5px;
-  color: var(--db-text-muted);
-  flex-shrink: 0;
+.db-ai-review-severity--suggestion {
+  border-color: var(--db-accent);
+  color: var(--db-accent-deep);
 }
 
-.db-git-commit-message {
-  width: 100%;
-  min-height: 72px;
-  padding: 8px 10px;
-  border: 1px solid var(--db-input-border);
-  border-radius: 5px;
-  background: var(--db-bg);
+.db-ai-review-finding h3 {
+  margin: 8px 0 5px;
   color: var(--db-text);
   font-size: 13px;
-  font-family: inherit;
-  resize: vertical;
-  box-sizing: border-box;
 }
 
-/* Generic form rows in git dialogs */
-.db-git-form-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 10px 0;
+.db-ai-review-finding p {
+  margin: 0 0 8px;
 }
 
-.db-git-form-label {
-  font-size: 12.5px;
-  color: var(--db-text-secondary);
-  flex-shrink: 0;
+.db-ai-review-excerpt {
+  margin-top: 10px;
+  color: var(--db-text-muted);
+  font-size: 11px;
 }
 
-.db-git-form-input {
-  flex: 1;
-  padding: 6px 10px;
-  border: 1px solid var(--db-input-border);
-  border-radius: 5px;
-  background: var(--db-bg);
-  color: var(--db-text);
-  font-size: 13px;
-  box-sizing: border-box;
+.db-ai-review-excerpt--replacement blockquote {
+  border-left-color: var(--db-accent);
+  background: var(--db-accent-soft-08);
 }
 
-.db-git-form-error,
-.db-export-error {
-  margin: 8px 0 0;
-  color: var(--db-danger);
-  font-size: 12.5px;
+.db-ai-review-finding-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 7px;
+  margin-top: 10px;
 }
 
-.db-git-hint {
-  color: var(--db-text-muted);
-  font-size: 12px;
+.db-settings-ai-knowledge-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-/* Branches dialog */
-.db-git-branch-list {
-  margin: 8px 0;
-  padding: 0;
-  list-style: none;
-  max-height: 280px;
-  overflow-y: auto;
+.db-settings-ai-knowledge-list > li {
+  border-top: 1px solid var(--db-border);
+  padding-block: 12px;
+  overflow-wrap: anywhere;
 }
 
-.db-git-branch-row {
+.db-settings-ai-knowledge-actions {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 8px;
-  width: 100%;
-  padding: 7px 10px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font-size: 13px;
-  color: var(--db-text);
-  text-align: left;
-  cursor: pointer;
 }
 
-.db-git-branch-row:hover {
-  background: var(--db-bg-hover);
+.db-settings-ai-knowledge progress {
+  max-width: 100%;
 }
 
-.db-git-branch-row--current {
-  font-weight: 600;
-  color: var(--db-accent);
-  cursor: default;
+.db-ai-review-disclaimer {
+  margin: 14px;
+  color: var(--db-text-muted);
+  font-size: 11px;
 }
 
-.db-git-branch-row--current:hover {
-  background: transparent;
+/* AI diagrams: the Illustrate panel cards and the Insert diagram dialog. */
+.db-ai-illustrate-kind {
+  border-color: var(--db-accent);
+  color: var(--db-accent-deep);
 }
 
-/* History dialog */
-.db-git-history-list {
-  margin: 8px 0;
-  padding: 0;
-  list-style: none;
+.db-ai-illustrate-actions {
+  flex-wrap: wrap;
+  align-items: center;
 }
 
-.db-git-history-item {
-  padding: 8px 10px;
-  border-bottom: 1px solid var(--db-border);
-  cursor: pointer;
+.db-ai-illustrate-actions select,
+.db-ai-field--inline select {
+  min-height: var(--db-target-min);
+  border: 1px solid var(--db-border-strong);
+  border-radius: 5px;
+  background: var(--db-bg);
+  color: var(--db-text);
+  font: inherit;
 }
 
-.db-git-history-item:hover {
-  background: var(--db-bg-hover);
+.db-ai-illustrate-footer {
+  position: sticky;
+  bottom: 0;
+  padding-bottom: 10px;
+  background: var(--db-bg);
 }
 
-.db-git-history-meta {
-  margin-top: 2px;
-  font-size: 11.5px;
-  color: var(--db-text-muted);
+.db-ai-field--inline {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-.db-git-history-files {
-  margin: 6px 0 0;
-  padding: 0;
-  list-style: none;
+.db-ai-diagram-preview {
+  margin: 10px 0 6px;
+  max-height: 340px;
+  overflow: auto;
+  border: 1px solid var(--db-border);
+  border-radius: 6px;
+  background: var(--db-bg-subtle);
 }
 
-.db-git-history-file {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 4px 8px;
-  border: none;
-  background: transparent;
-  font-size: 12px;
+.db-ai-diagram-dialog .db-ai-diagram-preview {
+  max-height: 420px;
+}
+
+.db-ai-diagram-source {
+  max-height: 220px;
+  overflow: auto;
+  margin: 6px 0 0;
+  padding: 8px;
+  border: 1px solid var(--db-border);
+  border-radius: 5px;
+  background: var(--db-bg-subtle);
   color: var(--db-text-secondary);
-  text-align: left;
-  cursor: pointer;
-  border-radius: 4px;
+  font:
+    11px/1.4 ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  white-space: pre;
 }
 
-.db-git-history-file:hover {
-  background: var(--db-bg-hover);
+.db-ai-link-button {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--db-accent-deep);
+  font: inherit;
+  text-decoration: underline;
+  cursor: pointer;
 }
 
-/* Diff dialog */
-.db-git-diff-host {
-  flex: 1;
-  min-height: 320px;
-  border: 1px solid var(--db-border);
-  border-radius: 5px;
-  overflow: hidden;
+@media (prefers-reduced-motion: reduce) {
+  .db-ai-spinner {
+    animation: none;
+  }
 }
 
-.db-git-diff-loading {
-  padding: 24px;
-  text-align: center;
-  color: var(--db-text-muted);
+/* ── Git ─────────────────────────────────────────────────────── */
+
+/* Dialog size modifiers (shared Dialog component) */
+.db-dialog--wide {
+  width: 560px;
+  max-width: 100%;
+  max-height: min(calc(100dvh - 32px), 660px);
 }
 
-.db-git-diff-labels {
+.db-dialog--full {
+  width: min(1100px, 94vw);
+  height: 82vh;
   display: flex;
-  gap: 12px;
-  margin-bottom: 6px;
-  font-size: 12px;
-  color: var(--db-text-muted);
+  flex-direction: column;
 }
 
-.db-git-diff-labels > span {
+.db-dialog--full .db-dialog-body {
   flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
 }
 
-/* Clone progress */
-.db-git-progress {
-  margin: 12px 0 4px;
+.db-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px 16px;
+  border-top: 1px solid var(--db-border);
 }
 
-.db-git-progress-bar {
-  height: 6px;
-  border-radius: 3px;
-  background: var(--db-accent-soft-15);
-  overflow: hidden;
-  position: relative;
+/* Buttons used in git dialog footers */
+.db-git-primary-btn {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 5px;
+  background: var(--db-accent);
+  color: var(--db-text-on-accent);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
 }
 
-.db-git-progress-bar > span {
-  display: block;
-  height: 100%;
-  background: var(--db-accent);
-  transition: width 0.2s;
+.db-git-primary-btn:hover:not(:disabled) {
+  background: var(--db-accent-hover);
 }
 
-.db-git-progress-text {
-  margin-top: 6px;
-  font-size: 12px;
-  color: var(--db-text-muted);
+.db-git-primary-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .db-workspace-picker-caret,
-  .db-app-menu-caret,
-  .db-ws-settings-btn,
-  .db-shell-sidebar-resizer,
-  .db-sidebar-collapse-preview,
-  .db-export-chip,
-  .db-git-progress-bar > span {
-    transition: none;
-  }
+/* Destructive confirmation (delete, remove workspace). The foreground comes
+   from a token rather than a literal because the two themes need opposite ink:
+   light's danger is deep red and carries white at ~6.5:1, while dark's is a
+   light red where white would fall to ~2.8:1 and fail WCAG AA. */
+.db-git-primary-btn--danger {
+  background: var(--db-danger);
+  color: var(--db-text-on-danger);
+}
 
-  .db-welcome-gateway,
-  .db-save-toast {
-    animation: none;
-  }
+.db-git-primary-btn--danger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--db-danger) 85%, black);
 }
 
-/* History dialog internals added by the expanded-row layout */
-.db-git-history-toggle {
-  display: block;
-  width: 100%;
-  padding: 0;
-  border: none;
+.db-git-secondary-btn {
+  padding: 6px 14px;
+  border: 1px solid var(--db-border-strong);
+  border-radius: 5px;
   background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: left;
+  color: var(--db-text);
+  font-size: 13px;
   cursor: pointer;
 }
 
-.db-git-history-subject {
-  display: block;
-  font-size: 13px;
-  color: var(--db-text);
+.db-git-secondary-btn:hover:not(:disabled) {
+  background: var(--db-bg-hover);
 }
 
-.db-git-history-body {
-  margin: 6px 0 0;
-  padding: 8px 10px;
+.db-git-secondary-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* Status bar row in the sidebar */
+.db-git-statusbar {
+  position: relative;
+  flex-shrink: 0;
+  padding: 2px 8px 4px;
+  border-bottom: 1px solid var(--db-border);
+}
+
+.db-git-statusbar-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 4px 8px;
+  border: none;
   border-radius: 4px;
-  background: var(--db-bg-subtle);
+  background: transparent;
   color: var(--db-text-secondary);
   font-size: 12px;
-  white-space: pre-wrap;
-  font-family: inherit;
+  cursor: pointer;
+  overflow: hidden;
 }
 
-/* ---------------------------------------------------------------------------
-   Window Controls Overlay — installed web app (PWA) custom titlebar.
+.db-git-statusbar-chip:hover {
+  background: var(--db-bg-hover);
+}
 
-   When the manifest's `display_override: ["window-controls-overlay", ...]`
-   is active, the OS caption buttons float over the first shell row and this
-   block turns that row into the titlebar: draggable empty space, insets for
-   the caption buttons, and every interactive descendant opted back out.
+.db-git-branch-glyph {
+  color: var(--db-text-muted);
+  flex-shrink: 0;
+}
 
-   Shares its drag/inset structure with the Electron build in
-   packages/desktop/renderer/titlebar.css. Its compact vertical metrics are
-   intentionally PWA-specific because Electron uses a 42px overlay while this
-   mode follows the OS-provided caption height (32px on Windows). Electron is
-   scoped under `.db-desktop-root` and reports `display-mode: browser`, so this
-   media query can never double-apply there. The media query is live: toggling
-   the overlay chevron flips it with no JS. */
-@media (display-mode: window-controls-overlay) {
-  .db-shell {
-    --db-wco-titlebar-height: env(titlebar-area-height, 32px);
-  }
+.db-git-statusbar-branch {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  /* The first shell row replaces the native titlebar. Empty space can drag
-     the window; every interactive descendant opts back out below. */
-  .db-shell .db-shell-sidebar-header,
-  .db-shell .squisq-editor-header {
-    app-region: drag;
-    -webkit-app-region: drag;
-    box-sizing: border-box;
-    height: var(--db-wco-titlebar-height);
-    min-height: var(--db-wco-titlebar-height);
-  }
+.db-git-statusbar-counts {
+  color: var(--db-text-muted);
+  flex-shrink: 0;
+}
 
-  .db-shell .squisq-toolbar {
-    app-region: drag;
-    -webkit-app-region: drag;
-    box-sizing: border-box;
-    height: 100%;
-    min-height: 0;
-  }
+.db-git-statusbar-dirty {
+  color: var(--db-git-modified);
+  flex-shrink: 0;
+}
 
-  /* The flexible actions lane owns the otherwise-empty gap between Squisq's
-     formatting controls and the fixed document controls. Mark the child
-     explicitly because its overflow clipping can prevent the toolbar's drag
-     region from reaching those pixels. Controls opt out below. */
-  .db-shell .squisq-toolbar-actions {
-    app-region: drag;
-    -webkit-app-region: drag;
-    cursor: grab;
-  }
+.db-git-statusbar-merge {
+  color: var(--db-git-conflicted);
+  font-weight: 600;
+  flex-shrink: 0;
+}
 
-  .db-shell .db-shell-sidebar-header {
-    padding-block: 0;
-    padding-left: max(4px, calc(env(titlebar-area-x, 0px) + 4px));
-    cursor: grab;
-  }
+.db-git-statusbar-busy {
+  color: var(--db-text-muted);
+  flex-shrink: 0;
+}
 
-  /* Keep the shell controls inside the compact native caption band. These
-     overrides apply only to an installed app using Window Controls Overlay;
-     the regular browser toolbar keeps its roomier metrics. */
-  .db-shell .db-app-menu-btn,
-  .db-shell .db-workspace-picker-btn {
-    padding-block: 3px;
-  }
+/* The offer to turn Git on for a folder inside a larger repository. It sits
+   directly above the sidebar footer and borrows its voice: muted, 11px, no
+   icon and no accent — this is a default the user may change, not a fault. */
+.db-git-grant-notice {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  padding: 6px 12px 6px 18px;
+  border-top: 1px solid var(--db-border);
+  color: var(--db-text-muted);
+  font-size: 11px;
+  line-height: 1.3;
+}
 
-  .db-shell .squisq-toolbar-view-tab {
-    padding-top: 4px;
-    padding-bottom: 2px;
-  }
+.db-git-grant-notice-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  /* Keep the compact labels on the same visual center as the action glyphs.
-     Move only the text; the tab hit area and active underline stay anchored
-     to the titlebar edges. */
-  .db-shell .squisq-toolbar-view-tab-label {
-    transform: translateY(1px);
-  }
+.db-git-grant-notice-action {
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  text-decoration: underline;
+  white-space: nowrap;
+  cursor: pointer;
+}
 
-  .db-shell .squisq-use-mode-trigger {
-    padding-bottom: 10px;
-  }
+.db-git-grant-notice-action:hover {
+  color: var(--db-text-secondary);
+}
 
-  /* The 32px caption row leaves little room around Squisq's 28px action
-     buttons. Keep the selected background clear of the header's 1px bottom
-     divider without moving the glyphs off their shared center line. */
-  .db-shell .squisq-toolbar-actions .squisq-toolbar-button {
-    box-sizing: border-box;
-    height: 26px;
-  }
+.db-git-grant-remember {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 12px 0;
+  font-size: 13px;
+  color: var(--db-text);
+  cursor: pointer;
+}
 
-  /* Squisq's overflow measurement deliberately tolerates a 2px overhang.
-     Reserve one pixel beyond that tolerance so the final Insert control
-     moves into More actions instead of being clipped by the caption inset. */
-  .db-shell .squisq-toolbar-actions {
-    margin-right: 3px;
-  }
+/* Actions dropdown (mirrors db-ws-settings-dropdown) */
+.db-git-menu {
+  position: absolute;
+  top: 100%;
+  left: 8px;
+  right: 8px;
+  z-index: 100;
+  background: var(--db-bg);
+  border: 1px solid var(--db-border);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px var(--db-shadow);
+  padding: 4px 0;
+  margin-top: 2px;
+}
 
-  .db-shell .squisq-toolbar-button[aria-label='Insert image'] {
+.db-git-menu-item {
+  display: block;
+  width: 100%;
+  padding: 7px 14px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  font-size: 13px;
+  color: var(--db-text);
+  cursor: pointer;
+}
+
+.db-git-menu-item:hover:not(:disabled),
+.db-git-menu-item:focus-visible {
+  background: var(--db-bg-hover);
+}
+
+/* Items are arrow-reachable rather than tab stops, so the ring is the only
+   cue to which one Enter will fire. */
+.db-git-menu-item:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: -2px;
+}
+
+.db-git-menu-item:disabled {
+  color: var(--db-text-placeholder);
+  cursor: default;
+}
+
+.db-git-menu-divider {
+  height: 1px;
+  background: var(--db-border);
+  margin: 4px 0;
+}
+
+/* aria-live op-result line — visually subtle, announced politely */
+.db-git-inline-status {
+  display: block;
+  padding: 0 16px;
+  font-size: 11px;
+  color: var(--db-text-muted);
+  min-height: 0;
+}
+
+.db-git-inline-status:empty {
+  display: none;
+}
+
+/* File-tree badges */
+.db-git-badge {
+  margin-left: auto;
+  padding: 0 4px;
+  font-size: 10px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.db-tree-row .db-git-badge {
+  margin-left: 4px;
+}
+
+.db-git-badge--modified {
+  color: var(--db-git-modified);
+}
+
+.db-git-badge--added {
+  color: var(--db-git-added);
+}
+
+.db-git-badge--untracked {
+  color: var(--db-git-untracked);
+}
+
+.db-git-badge--renamed {
+  color: var(--db-git-renamed);
+}
+
+.db-git-badge--deleted {
+  color: var(--db-git-deleted);
+}
+
+.db-git-badge--conflicted {
+  color: var(--db-git-conflicted);
+}
+
+.db-git-badge--dir {
+  color: var(--db-git-modified);
+}
+
+.db-tree-context-divider {
+  height: 1px;
+  background: var(--db-border);
+  margin: 4px 0;
+}
+
+/* Toolbar control */
+.db-git-toolbar-trigger {
+  position: relative;
+}
+
+.db-git-toolbar-dot {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--db-git-modified);
+}
+
+/* Dialog internals — file lists (commit + conflicts) */
+.db-git-file-list {
+  margin: 8px 0;
+  padding: 0;
+  list-style: none;
+  max-height: 260px;
+  overflow-y: auto;
+  border: 1px solid var(--db-border);
+  border-radius: 5px;
+}
+
+.db-git-file-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  background: transparent;
+  font-size: 12.5px;
+  color: var(--db-text);
+  text-align: left;
+}
+
+.db-git-file-row + .db-git-file-row {
+  border-top: 1px solid var(--db-border);
+}
+
+button.db-git-file-row {
+  cursor: pointer;
+}
+
+button.db-git-file-row:hover {
+  background: var(--db-bg-hover);
+}
+
+.db-git-file-kind {
+  margin-left: auto;
+  font-size: 10.5px;
+  color: var(--db-text-muted);
+  flex-shrink: 0;
+}
+
+.db-git-commit-message {
+  width: 100%;
+  min-height: 72px;
+  padding: 8px 10px;
+  border: 1px solid var(--db-input-border);
+  border-radius: 5px;
+  background: var(--db-bg);
+  color: var(--db-text);
+  font-size: var(--db-input-font-size);
+  font-family: inherit;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+/* Generic form rows in git dialogs */
+.db-git-form-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 10px 0;
+}
+
+.db-git-form-label {
+  font-size: 12.5px;
+  color: var(--db-text-secondary);
+  flex-shrink: 0;
+}
+
+.db-git-form-input {
+  flex: 1;
+  padding: 6px 10px;
+  border: 1px solid var(--db-input-border);
+  border-radius: 5px;
+  background: var(--db-bg);
+  color: var(--db-text);
+  font-size: var(--db-input-font-size);
+  box-sizing: border-box;
+}
+
+/* New document dialog: label/field pairs in two aligned columns */
+.db-new-document-fields {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px 8px;
+  margin: 10px 0;
+}
+
+.db-git-form-error,
+.db-export-error {
+  margin: 8px 0 0;
+  color: var(--db-danger);
+  font-size: 12.5px;
+}
+
+.db-git-hint {
+  color: var(--db-text-muted);
+  font-size: 12px;
+}
+
+/* Branches dialog */
+.db-git-branch-list {
+  margin: 8px 0;
+  padding: 0;
+  list-style: none;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.db-git-branch-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 10px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  font-size: 13px;
+  color: var(--db-text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.db-git-branch-row:hover {
+  background: var(--db-bg-hover);
+}
+
+.db-git-branch-row--current {
+  font-weight: 600;
+  color: var(--db-accent);
+  cursor: default;
+}
+
+.db-git-branch-row--current:hover {
+  background: transparent;
+}
+
+/* History dialog */
+.db-git-history-list {
+  margin: 8px 0;
+  padding: 0;
+  list-style: none;
+}
+
+.db-git-history-item {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--db-border);
+  cursor: pointer;
+}
+
+.db-git-history-item:hover {
+  background: var(--db-bg-hover);
+}
+
+.db-git-history-meta {
+  margin-top: 2px;
+  font-size: 11.5px;
+  color: var(--db-text-muted);
+}
+
+.db-git-history-files {
+  margin: 6px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.db-git-history-file {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 4px 8px;
+  border: none;
+  background: transparent;
+  font-size: 12px;
+  color: var(--db-text-secondary);
+  text-align: left;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.db-git-history-file:hover {
+  background: var(--db-bg-hover);
+}
+
+/* Diff dialog */
+.db-git-diff-host {
+  flex: 1;
+  min-height: 320px;
+  border: 1px solid var(--db-border);
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.db-git-diff-loading {
+  padding: 24px;
+  text-align: center;
+  color: var(--db-text-muted);
+}
+
+.db-git-diff-labels {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: var(--db-text-muted);
+}
+
+.db-git-diff-labels > span {
+  flex: 1;
+}
+
+/* Clone progress */
+.db-git-progress {
+  margin: 12px 0 4px;
+}
+
+.db-git-progress-bar {
+  height: 6px;
+  border-radius: 3px;
+  background: var(--db-accent-soft-15);
+  overflow: hidden;
+  position: relative;
+}
+
+.db-git-progress-bar > span {
+  display: block;
+  height: 100%;
+  background: var(--db-accent);
+  transition: width 0.2s;
+}
+
+.db-git-progress-text {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--db-text-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .db-workspace-picker-caret,
+  .db-app-menu-caret,
+  .db-ws-settings-btn,
+  .db-shell-sidebar-resizer,
+  .db-sidebar-collapse-preview,
+  .db-export-chip,
+  .db-git-progress-bar > span {
+    transition: none;
+  }
+
+  .db-welcome-gateway,
+  .db-save-toast {
+    animation: none;
+  }
+}
+
+/* History dialog internals added by the expanded-row layout */
+.db-git-history-toggle {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.db-git-history-subject {
+  display: block;
+  font-size: 13px;
+  color: var(--db-text);
+}
+
+.db-git-history-body {
+  margin: 6px 0 0;
+  padding: 8px 10px;
+  border-radius: 4px;
+  background: var(--db-bg-subtle);
+  color: var(--db-text-secondary);
+  font-size: 12px;
+  white-space: pre-wrap;
+  font-family: inherit;
+}
+
+/* ---------------------------------------------------------------------------
+   Window Controls Overlay — installed web app (PWA) custom titlebar.
+
+   When the manifest's `display_override: ["window-controls-overlay", ...]`
+   is active, the OS caption buttons float over the first shell row and this
+   block turns that row into the titlebar: draggable empty space, insets for
+   the caption buttons, and every interactive descendant opted back out.
+
+   Shares its drag/inset structure with the Electron build in
+   packages/desktop/renderer/titlebar.css. Its compact vertical metrics are
+   intentionally PWA-specific because Electron uses a 42px overlay while this
+   mode follows the OS-provided caption height (32px on Windows). Electron is
+   scoped under `.db-desktop-root` and reports `display-mode: browser`, so this
+   media query can never double-apply there. The media query is live: toggling
+   the overlay chevron flips it with no JS. */
+@media (display-mode: window-controls-overlay) {
+  .db-shell {
+    --db-wco-titlebar-height: env(titlebar-area-height, 32px);
+  }
+
+  /* The first shell row replaces the native titlebar. Empty space can drag
+     the window; every interactive descendant opts back out below. */
+  .db-shell .db-shell-sidebar-header,
+  .db-shell .squisq-editor-header {
+    app-region: drag;
+    -webkit-app-region: drag;
+    box-sizing: border-box;
+    height: var(--db-wco-titlebar-height);
+    min-height: var(--db-wco-titlebar-height);
+  }
+
+  .db-shell .squisq-toolbar {
+    app-region: drag;
+    -webkit-app-region: drag;
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+  }
+
+  /* The flexible actions lane owns the otherwise-empty gap between Squisq's
+     formatting controls and the fixed document controls. Mark the child
+     explicitly because its overflow clipping can prevent the toolbar's drag
+     region from reaching those pixels. Controls opt out below. */
+  .db-shell .squisq-toolbar-actions {
+    app-region: drag;
+    -webkit-app-region: drag;
+    cursor: grab;
+  }
+
+  .db-shell .db-shell-sidebar-header {
+    padding-block: 0;
+    padding-left: max(4px, calc(env(titlebar-area-x, 0px) + 4px));
+    cursor: grab;
+  }
+
+  /* Keep the shell controls inside the compact native caption band. These
+     overrides apply only to an installed app using Window Controls Overlay;
+     the regular browser toolbar keeps its roomier metrics. */
+  .db-shell .db-app-menu-btn,
+  .db-shell .db-workspace-picker-btn {
+    padding-block: 3px;
+  }
+
+  .db-shell .squisq-toolbar-view-tab {
+    padding-top: 4px;
+    padding-bottom: 2px;
+  }
+
+  /* Keep the compact labels on the same visual center as the action glyphs.
+     Move only the text; the tab hit area and active underline stay anchored
+     to the titlebar edges. */
+  .db-shell .squisq-toolbar-view-tab-label {
+    transform: translateY(1px);
+  }
+
+  .db-shell .squisq-use-mode-trigger {
+    padding-bottom: 10px;
+  }
+
+  /* The 32px caption row leaves little room around Squisq's 28px action
+     buttons. Keep the selected background clear of the header's 1px bottom
+     divider without moving the glyphs off their shared center line. */
+  .db-shell .squisq-toolbar-actions .squisq-toolbar-button {
+    box-sizing: border-box;
+    height: 26px;
+  }
+
+  /* Squisq's overflow measurement deliberately tolerates a 2px overhang.
+     Reserve one pixel beyond that tolerance so the rightmost control moves
+     into More actions instead of being clipped by the caption inset. */
+  .db-shell .squisq-toolbar-actions {
+    margin-right: 3px;
+  }
+
+  .db-shell .squisq-toolbar-button[aria-label='Insert image'] {
     height: 28px;
   }
 
-  .db-shell .squisq-editor-header--image {
-    padding-block: 0;
-  }
+  .db-shell .squisq-editor-header--image {
+    padding-block: 0;
+  }
+
+  /* Make the draggable header space beside the workspace gear discoverable,
+     matching the Electron titlebar without introducing another control. The
+     12px dotted content and its 8px right padding form one drag region. */
+  .db-shell .db-window-drag-grip {
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    flex: 0 0 20px;
+    padding-right: 8px;
+    background-image: radial-gradient(circle, var(--db-text-muted) 1px, transparent 1.25px);
+    background-clip: content-box;
+    background-origin: content-box;
+    background-position: center;
+    background-size: 4px 4px;
+    opacity: 0.72;
+    app-region: drag;
+    -webkit-app-region: drag;
+  }
+
+  /* Let the workspace menu size itself to its contents and cross the sidebar
+     boundary above the editor. The explorer still clips its own contents. */
+  .db-shell .db-shell-sidebar {
+    overflow: visible;
+  }
+
+  .db-shell .db-workspace-dropdown {
+    box-sizing: border-box;
+    width: max-content;
+  }
+
+  /* The caption buttons normally occupy the right edge. Derive that inset
+     from the overlay safe area rather than assuming a fixed width, so
+     scaling, RTL controls, and OS variants stay clear. The compact sidebar
+     header is full-width, so it needs the same reservation. */
+  .db-shell.db-shell--mobile .db-shell-sidebar-header,
+  .db-shell .squisq-toolbar,
+  .db-shell .squisq-editor-header--image {
+    padding-right: max(
+      12px,
+      calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 8px)
+    );
+  }
+
+  /* In compact mode there is no sidebar to absorb left-side controls such as
+     macOS traffic lights, so the editor toolbar also observes the left inset. */
+  .db-shell.db-shell--mobile .squisq-toolbar,
+  .db-shell.db-shell--mobile .squisq-editor-header--image {
+    padding-left: env(titlebar-area-x, 0px);
+  }
+
+  .db-shell
+    :is(
+      button,
+      a,
+      input,
+      select,
+      textarea,
+      [contenteditable='true'],
+      [role='button'],
+      [role='tab']
+    ) {
+    app-region: no-drag;
+    -webkit-app-region: no-drag;
+  }
+
+  /* Folder and empty states do not render Squisq's toolbar. Preserve a top
+     drag strip in those states and keep folder content below it. */
+  .db-shell .db-shell-empty::before,
+  .db-shell .db-folder-view::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: env(titlebar-area-x, 0px);
+    width: env(titlebar-area-width, 100%);
+    height: var(--db-wco-titlebar-height);
+    app-region: drag;
+    -webkit-app-region: drag;
+  }
+
+  .db-shell .db-folder-view {
+    box-sizing: border-box;
+    padding-top: calc(24px + var(--db-wco-titlebar-height));
+  }
+}
+
+/* Transcript review shares the shell's dialog and theme tokens. */
+.db-text-from-narration {
+  font-family: var(--db-ui-font);
+}
+.db-text-from-narration .db-dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.db-text-from-narration p {
+  margin: 0;
+}
+.db-narration-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.db-narration-transcript {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.db-narration-transcript textarea {
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 160px;
+  resize: vertical;
+  font: inherit;
+  line-height: 1.5;
+  color: var(--db-text);
+  background: var(--db-bg);
+  border: 1px solid var(--db-border);
+  border-radius: 6px;
+  padding: 10px;
+}
+.db-narration-note {
+  color: var(--db-text-secondary);
+  font-size: 12px;
+  line-height: 1.5;
+}
+.db-narration-status {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.db-narration-rewrite {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+/* Presentation review uses the same source and timeline as the saved player. */
+.db-presentation-workspace {
+  display: grid;
+  flex: 1;
+  min-height: 0;
+  grid-template-columns: minmax(140px, 24%) minmax(0, 1fr);
+  gap: 18px;
+  align-items: stretch;
+}
+.db-presentation-beats {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  min-height: 0;
+  padding: 8px;
+  border: 1px solid var(--db-border);
+  border-radius: 8px;
+  background: var(--db-bg-subtle);
+  overflow-y: auto;
+}
+.db-presentation-beats button {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 0 0 auto;
+  gap: 8px;
+  min-width: 0;
+  max-width: 100%;
+  text-align: left;
+  min-height: var(--db-target-min);
+  padding: 12px;
+  border: 1px solid var(--db-input-border);
+  border-radius: 6px;
+  color: var(--db-text);
+  background: var(--db-bg);
+  cursor: pointer;
+  font: inherit;
+  overflow: hidden;
+}
+.db-presentation-beat-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+.db-presentation-beats button:hover {
+  background: var(--db-bg-hover);
+}
+.db-presentation-beats button:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 2px;
+}
+.db-presentation-beats button[aria-current='step'] {
+  border-color: var(--db-accent);
+  background: var(--db-bg-hover);
+  box-shadow: inset 3px 0 0 var(--db-accent);
+}
+.db-presentation-detail {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+}
+.db-presentation-preview {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: clamp(120px, 23vh, 240px);
+  overflow: hidden;
+  border: 1px solid var(--db-input-border);
+  border-radius: 8px;
+}
+.db-presentation-preview > * {
+  width: 100%;
+  height: 100%;
+}
+.db-presentation-fields {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.db-presentation-preferences {
+  align-items: flex-end;
+}
+.db-presentation-beats small {
+  display: block;
+  max-width: 100%;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--db-bg-subtle);
+  color: var(--db-text-muted);
+  overflow-wrap: anywhere;
+}
+.db-presentation label.db-presentation-toggle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.6rem;
+  box-sizing: border-box;
+  width: auto;
+  max-width: 100%;
+  min-height: var(--db-target-min);
+  padding: 8px 0;
+}
+.db-presentation input[type='checkbox'] {
+  width: 1.1rem;
+  height: 1.1rem;
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+  flex: 0 0 auto;
+}
+.db-presentation-fields label {
+  width: min(100%, 320px);
+}
+.db-presentation-source {
+  flex-shrink: 0;
+  padding: 12px;
+  border: 1px solid var(--db-input-border);
+  border-radius: 6px;
+}
+.db-presentation-source-label {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+}
+.db-presentation-source-label h3 {
+  margin: 0;
+  font-size: inherit;
+}
+.db-presentation-source-label span {
+  color: var(--db-text-secondary);
+  font-size: 12px;
+}
+.db-presentation-source p {
+  margin: 8px 0 0;
+  max-height: 150px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  line-height: 1.5;
+}
+.db-presentation-wording summary {
+  cursor: pointer;
+  min-height: var(--db-target-min);
+  align-content: center;
+}
+.db-presentation-wording label + label {
+  margin-top: 12px;
+}
+.db-presentation label {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-weight: 600;
+}
+.db-presentation input,
+.db-presentation select,
+.db-presentation textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--db-target-min);
+  padding: 8px;
+  border: 1px solid var(--db-input-border);
+  border-radius: 5px;
+  background: var(--db-bg);
+  color: var(--db-text);
+  font: inherit;
+}
+.db-presentation [role='alert'] {
+  color: var(--db-danger);
+}
+.db-presentation details p {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--db-text-secondary);
+}
+:root[data-db-width='compact'] .db-presentation-workspace {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 140px) minmax(0, 1fr);
+}
+:root[data-db-width='compact'] .db-presentation-beats {
+  max-height: 140px;
+}
+
+/* ── Workspace search and quick-open ───────────────────────────── */
+
+/* The sidebar shows the file tree or workspace search. The hidden view stays
+   mounted so it keeps its expanded folders or its results. */
+.db-file-explorer.db-sidebar-view--hidden,
+.db-search-panel[hidden] {
+  display: none;
+}
+
+/* Query matches in quick-open and search results. */
+.db-search-match {
+  padding: 0;
+  border-radius: 2px;
+  background: var(--db-accent-soft-25);
+  color: inherit;
+}
+
+.db-quick-open .db-quick-open-body {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 0;
+}
+
+.db-quick-open-input {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 12px 14px;
+  border: none;
+  border-bottom: 1px solid var(--db-border);
+  border-radius: 8px 8px 0 0;
+  background: transparent;
+  color: var(--db-text);
+  font: inherit;
+  font-size: max(15px, var(--db-input-font-size));
+  outline: none;
+}
+
+.db-quick-open-input:focus-visible {
+  box-shadow: inset 0 -2px 0 var(--db-focus);
+}
 
-  /* Make the draggable header space beside the workspace gear discoverable,
-     matching the Electron titlebar without introducing another control. The
-     12px dotted content and its 8px right padding form one drag region. */
-  .db-shell .db-window-drag-grip {
-    box-sizing: border-box;
-    width: 20px;
-    height: 20px;
-    flex: 0 0 20px;
-    padding-right: 8px;
-    background-image: radial-gradient(circle, var(--db-text-muted) 1px, transparent 1.25px);
-    background-clip: content-box;
-    background-origin: content-box;
-    background-position: center;
-    background-size: 4px 4px;
-    opacity: 0.72;
-    app-region: drag;
-    -webkit-app-region: drag;
-  }
+.db-quick-open-list {
+  max-height: min(60vh, 480px);
+  margin: 0;
+  padding: 4px;
+  overflow-y: auto;
+  list-style: none;
+}
 
-  /* Let the workspace menu size itself to its contents and cross the sidebar
-     boundary above the editor. The explorer still clips its own contents. */
-  .db-shell .db-shell-sidebar {
-    overflow: visible;
-  }
+.db-quick-open-list:empty {
+  display: none;
+}
 
-  .db-shell .db-workspace-dropdown {
-    box-sizing: border-box;
-    width: max-content;
-  }
+.db-quick-open-option {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  min-height: var(--db-row-min-height);
+  padding: 6px 10px;
+  border-radius: 4px;
+  color: var(--db-text);
+  cursor: pointer;
+  user-select: none;
+}
 
-  /* The caption buttons normally occupy the right edge. Derive that inset
-     from the overlay safe area rather than assuming a fixed width, so
-     scaling, RTL controls, and OS variants stay clear. The compact sidebar
-     header is full-width, so it needs the same reservation. */
-  .db-shell.db-shell--mobile .db-shell-sidebar-header,
-  .db-shell .squisq-toolbar,
-  .db-shell .squisq-editor-header--image {
-    padding-right: max(
-      12px,
-      calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 8px)
-    );
-  }
+.db-quick-open-option--active {
+  background: var(--db-bg-hover);
+}
 
-  /* In compact mode there is no sidebar to absorb left-side controls such as
-     macOS traffic lights, so the editor toolbar also observes the left inset. */
-  .db-shell.db-shell--mobile .squisq-toolbar,
-  .db-shell.db-shell--mobile .squisq-editor-header--image {
-    padding-left: env(titlebar-area-x, 0px);
-  }
+.db-quick-open-name,
+.db-quick-open-title,
+.db-quick-open-folder {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  .db-shell
-    :is(
-      button,
-      a,
-      input,
-      select,
-      textarea,
-      [contenteditable='true'],
-      [role='button'],
-      [role='tab']
-    ) {
-    app-region: no-drag;
-    -webkit-app-region: no-drag;
-  }
+.db-quick-open-name {
+  flex: 0 1 auto;
+  font-weight: 600;
+}
 
-  /* Folder and empty states do not render Squisq's toolbar. Preserve a top
-     drag strip in those states and keep folder content below it. */
-  .db-shell .db-shell-empty::before,
-  .db-shell .db-folder-view::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: env(titlebar-area-x, 0px);
-    width: env(titlebar-area-width, 100%);
-    height: var(--db-wco-titlebar-height);
-    app-region: drag;
-    -webkit-app-region: drag;
-  }
+.db-quick-open-title {
+  flex: 0 2 auto;
+  color: var(--db-text-secondary);
+}
 
-  .db-shell .db-folder-view {
-    box-sizing: border-box;
-    padding-top: calc(24px + var(--db-wco-titlebar-height));
-  }
+.db-quick-open-folder {
+  flex: 1 3 auto;
+  margin-left: auto;
+  color: var(--db-text-muted);
+  font-size: 12px;
+  text-align: right;
+}
+
+.db-quick-open .db-quick-open-status {
+  margin: 0;
+  padding: 8px 14px;
+  border-top: 1px solid var(--db-border);
+  color: var(--db-text-muted);
+  font-size: 12px;
+}
+
+.db-quick-open .db-quick-open-status:empty {
+  display: none;
+}
+
+.db-search-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  font-size: 13px;
+}
+
+.db-search-form {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px;
+}
+
+.db-search-input {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: var(--db-target-min);
+  padding: 4px 8px;
+  border: 1px solid var(--db-border-strong);
+  border-radius: 4px;
+  background: var(--db-bg);
+  color: var(--db-text);
+  font: inherit;
+  font-size: var(--db-input-font-size);
+}
+
+.db-search-input:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: -1px;
+}
+
+.db-search-toggle {
+  min-width: var(--db-target-min);
+  min-height: var(--db-target-min);
+  padding: 0 6px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: none;
+  color: var(--db-text-muted);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.db-search-toggle--word {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.db-search-toggle:hover {
+  background: var(--db-bg-hover);
+  color: var(--db-text);
+}
+
+.db-search-toggle[aria-pressed='true'] {
+  background: var(--db-bg-selected);
+  color: var(--db-text-on-selected);
+}
+
+.db-search-toggle:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 1px;
+}
+
+.db-search-status,
+.db-search-more {
+  margin: 0;
+  padding: 0 10px 6px;
+  color: var(--db-text-muted);
+  font-size: 12px;
+}
+
+.db-search-status:empty {
+  display: none;
+}
+
+.db-search-results {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 0 4px 8px;
+  overflow-y: auto;
+}
+
+.db-search-document,
+.db-search-line {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-height: var(--db-row-min-height);
+  padding: 4px 6px;
+  overflow: hidden;
+  border-radius: 4px;
+  color: var(--db-text);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+}
+
+.db-search-document:hover,
+.db-search-line:hover {
+  background: var(--db-bg-hover);
+}
+
+.db-search-document:focus-visible,
+.db-search-line:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: -2px;
+}
+
+.db-search-chevron {
+  flex: 0 0 auto;
+  width: 12px;
+  color: var(--db-text-muted);
+  text-align: center;
+}
+
+.db-search-document-title,
+.db-search-document-path,
+.db-search-snippet {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.db-search-document-title {
+  flex: 0 1 auto;
+  font-weight: 600;
+}
+
+.db-search-document-path {
+  flex: 1 1 auto;
+  color: var(--db-text-muted);
+  font-size: 12px;
+}
+
+.db-search-count {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border-radius: 8px;
+  background: var(--db-bg-subtle);
+  color: var(--db-text-secondary);
+  font-size: 11px;
+}
+
+.db-search-line {
+  padding-left: 24px;
+}
+
+.db-search-line-number {
+  flex: 0 0 auto;
+  min-width: 2.5em;
+  color: var(--db-text-muted);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.db-search-snippet {
+  flex: 1 1 auto;
 }