@bendyline/docblocks-react 2.7.1 → 2.7.3

package/src/styles/docblocks.css

@@ -4,15 +4,19 @@
 
 /* ── Theme Tokens ────────────────────────────────────────────── */
 
-/* DocBlocks accent palette — warm brown on a canvas/parchment base.
-   Think paper on a wooden desk: the editor itself stays white (paper),
-   the chrome around it (sidebar, gutters, panes) reads as cream
-   canvas, and the accent picks up a saturated dark brown for CTAs.
-   Dark mode inverts the metaphor into espresso wood with light tan
-   highlights. Derived shades (`--db-accent-soft-*`,
-   `--db-accent-tint-strong`, `--db-accent-deep`) are defined alongside so every place that needs
-   a tinted background or a readable-on-tint text color pulls from the
-   same source of truth. */
+/* DocBlocks palette — paper, ink, and rust.
+   The page is the one white sheet. Every chrome pane around it (sidebar,
+   toolbar, status bar) shares the cream `--db-bg-subtle`, so nothing but
+   the document competes for attention. Text is ink. The default accent
+   palette, Rust, paints primary buttons, active tabs and toggles in rust,
+   and a selected row is a quiet rust tint marked by a 2px
+   `--db-selected-rule` instead of a filled slab. The other accent palettes
+   (Green, Blue, …) follow the same model in their own hues. Dark mode
+   mirrors it: espresso panes, light ink, a lighter rust.
+   Derived shades (`--db-accent-soft-*`, `--db-accent-tint-strong`,
+   `--db-accent-deep`) are defined alongside so every place that needs a
+   tinted background or a readable-on-tint text color pulls from the same
+   source of truth. */
 /* The palette binds on the document root as well as on the shell. Squisq
    mounts its menus, dialogs and flyouts in PORTALS on <body>, outside the
    shell — without a root binding they cannot see --db-*, which is why the
@@ -20,44 +24,59 @@
    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. */
+  /* Chrome typeface: the bundled `DocBlocks Fixed UI` face, which is Hanken
+     Grotesk — the sans docblocks.com is set in — so the app and the site
+     read as one product and the chrome renders identically on every OS.
+     Settings > Appearance > Interface font > System swaps it for the
+     platform's own face (the block below). */
   --db-ui-font:
-    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    sans-serif;
-  --db-bg: #ffffff;
+    'DocBlocks Fixed UI', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  /* Metadata face: counts, timestamps, version strings, section labels. A
+     small mono sets what you read apart from what you act on. */
+  --db-meta-font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
+  /* Squisq's chrome reads `--squisq-ux-font` with a `system-ui` fallback, the
+     same bridge shape as the `--squisq-*` color tokens further down. Binding
+     it carries the chrome face into the editor toolbar, menus and dialogs.
+     DOCUMENT typography is never touched — a theme's fonts are content the
+     author chose, not chrome. */
+  --squisq-ux-font: var(--db-ui-font);
+  --db-bg: #fffdf9;
   --db-bg-subtle: #f3eede;
   --db-bg-hover: #e9e2cb;
-  --db-bg-selected: #7d6948;
-  --db-bg-selected-hover: #5e4f37;
-  --db-border: #d6cdb0;
-  --db-border-strong: #b5a985;
-  --db-text: #2a2419;
+  --db-bg-selected: #e5ccb6;
+  --db-bg-selected-hover: #e0c0a8;
+  --db-border: #ddd5c3;
+  --db-border-strong: #c7bca3;
+  --db-text: #231f18;
   --db-text-secondary: #3d3528;
-  --db-text-muted: #6b614a;
+  --db-text-muted: #6b6252;
   --db-text-placeholder: #766c54;
-  --db-accent: #7d6948;
-  --db-accent-hover: #5e4f37;
-  --db-text-on-accent: #ffffff;
-  --db-text-on-selected: #ffffff;
-  /* Keyboard focus ring. Deliberately darker than --db-accent: the accent
-     is also the *selected row* fill, so an accent ring vanished against
-     it. Any surface that paints itself --db-bg-selected re-points this
-     token at a contrasting value (see .db-tree-row--selected). */
-  --db-focus: #3d3220;
-  --db-accent-soft-08: rgba(125, 105, 72, 0.08);
-  --db-accent-soft-10: rgba(125, 105, 72, 0.1);
-  --db-accent-soft-12: rgba(125, 105, 72, 0.12);
-  --db-accent-soft-15: rgba(125, 105, 72, 0.15);
-  --db-accent-soft-25: rgba(125, 105, 72, 0.25);
-  --db-accent-tint-strong: #d8d0b5;
-  --db-accent-deep: #3d3220;
-  --db-editor-canvas: #ffffff;
+  --db-accent: #a0461f;
+  --db-accent-hover: #8a3a1a;
+  --db-text-on-accent: #fffdf9;
+  --db-text-on-selected: #231f18;
+  /* The 2px mark down the leading edge of a selected row. Selection is a
+     tint, so this is what carries the state at a glance. */
+  --db-selected-rule: #a0461f;
+  /* Keyboard focus ring, in ink. The accent is rust and paints buttons and
+     the selected-row rule, so a rust ring would vanish against them; ink
+     holds at 14:1 on the cream panes. */
+  --db-focus: #231f18;
+  --db-accent-soft-08: rgba(160, 70, 31, 0.08);
+  --db-accent-soft-10: rgba(160, 70, 31, 0.1);
+  --db-accent-soft-12: rgba(160, 70, 31, 0.12);
+  --db-accent-soft-15: rgba(160, 70, 31, 0.15);
+  --db-accent-soft-25: rgba(160, 70, 31, 0.25);
+  --db-accent-tint-strong: #e8d2be;
+  --db-accent-deep: #7a3418;
+  --db-editor-canvas: #fffdf9;
+  /* Surfaces that float over the chrome: menus, dialogs, popovers. In light
+     mode they are the same warm-white sheet as the page. */
+  --db-bg-raised: var(--db-bg);
   --db-badge-bg: #f3eede;
   --db-badge-text: #3d3220;
-  --db-badge-text-hover: #2a2419;
+  --db-badge-text-hover: #231f18;
   /* The editor "desk": every chrome surface the page floats on — the
      outline pane, the inline-preview gutter, the Monaco line-number
      margin, and (via `--squisq-desk-bg`) the field behind the WYSIWYG
@@ -144,53 +163,63 @@
   }
 }
 
-/* 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 {
+/* Interface font: system.
+   `DocBlocks Fixed UI` (above) is the Hanken Grotesk 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. This block is the opt-out for anyone who wants DocBlocks to look
+   native: the platform UI face, and the platform mono for metadata, so the
+   chrome fetches nothing. Bound on the root, not only the shell, because
+   Squisq portals its menus onto <body>. */
+:root[data-db-interface-font='system'],
+:root[data-db-interface-font='system'] .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. */
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+  --db-meta-font: ui-monospace, SFMono-Regular, Consolas, monospace;
   --squisq-ux-font: var(--db-ui-font);
 }
 
+/* Form controls take the chrome face. Browsers give <button>, <input>,
+   <select> and <textarea> a UA font of their own (Arial in Chromium on
+   Windows), so every label inside a button — the view tabs, H1–H3, the
+   workspace picker — rendered in a second sans beside the chrome's.
+   Zero specificity, so any rule that names a font still wins; unscoped,
+   because Squisq portals its menus and dialogs onto <body>. */
+:where(button, input, select, textarea) {
+  font-family: inherit;
+}
+
 :root:has(.db-shell[data-theme='dark']),
 .db-shell[data-theme='dark'] {
   --db-bg: #1a1812;
   --db-bg-subtle: #262219;
   --db-bg-hover: #3a3528;
-  --db-bg-selected: #3a3528;
-  --db-bg-selected-hover: #4d4636;
-  --db-border: #4d4636;
-  --db-border-strong: #6b6448;
-  --db-text: #e8e2d0;
+  --db-bg-selected: #433021;
+  --db-bg-selected-hover: #513625;
+  --db-border: #342e27;
+  --db-border-strong: #4a4238;
+  --db-text: #ece6d8;
   --db-text-secondary: #d4ccb0;
-  --db-text-muted: #a89a7c;
+  --db-text-muted: #a39885;
   --db-text-placeholder: #6b614a;
-  --db-accent: #c8b48f;
-  --db-accent-hover: #dec79d;
+  --db-accent: #e0835a;
+  --db-accent-hover: #eb9a76;
   --db-text-on-accent: #1a1812;
-  --db-text-on-selected: #e8e2d0;
-  --db-focus: #e8e2d0;
-  --db-accent-soft-08: rgba(200, 180, 143, 0.08);
-  --db-accent-soft-10: rgba(200, 180, 143, 0.1);
-  --db-accent-soft-12: rgba(200, 180, 143, 0.12);
-  --db-accent-soft-15: rgba(200, 180, 143, 0.18);
-  --db-accent-soft-25: rgba(200, 180, 143, 0.28);
-  --db-accent-tint-strong: #3a382e;
-  --db-accent-deep: #e6dcc0;
+  --db-text-on-selected: #ece6d8;
+  --db-selected-rule: #e0835a;
+  --db-focus: #ece6d8;
+  /* Dark mode reverses that: a floating surface must sit LIGHTER than the
+     panes it opens over, or a menu reads as a hole in the chrome. Derived
+     from the palette's own steps, so every accent palette gets one. */
+  --db-bg-raised: color-mix(in srgb, var(--db-bg-subtle), var(--db-bg-hover) 40%);
+  --db-accent-soft-08: rgba(224, 131, 90, 0.08);
+  --db-accent-soft-10: rgba(224, 131, 90, 0.1);
+  --db-accent-soft-12: rgba(224, 131, 90, 0.12);
+  --db-accent-soft-15: rgba(224, 131, 90, 0.18);
+  --db-accent-soft-25: rgba(224, 131, 90, 0.28);
+  --db-accent-tint-strong: #533725;
+  --db-accent-deep: #f0c2aa;
   --db-editor-canvas: #16110b;
   --db-badge-bg: #3a2f1f;
   --db-badge-text: #fff4d6;
@@ -220,25 +249,30 @@
     --db-bg: #1a1812;
     --db-bg-subtle: #262219;
     --db-bg-hover: #3a3528;
-    --db-bg-selected: #3a3528;
-    --db-bg-selected-hover: #4d4636;
-    --db-border: #4d4636;
-    --db-border-strong: #6b6448;
-    --db-text: #e8e2d0;
+    --db-bg-selected: #433021;
+    --db-bg-selected-hover: #513625;
+    --db-border: #342e27;
+    --db-border-strong: #4a4238;
+    --db-text: #ece6d8;
     --db-text-secondary: #d4ccb0;
-    --db-text-muted: #a89a7c;
+    --db-text-muted: #a39885;
     --db-text-placeholder: #6b614a;
-    --db-accent: #c8b48f;
-    --db-accent-hover: #dec79d;
+    --db-accent: #e0835a;
+    --db-accent-hover: #eb9a76;
     --db-text-on-accent: #1a1812;
-    --db-text-on-selected: #e8e2d0;
-    --db-focus: #e8e2d0;
-    --db-accent-soft-08: rgba(200, 180, 143, 0.08);
-    --db-accent-soft-12: rgba(200, 180, 143, 0.12);
-    --db-accent-soft-15: rgba(200, 180, 143, 0.18);
-    --db-accent-soft-25: rgba(200, 180, 143, 0.28);
-    --db-accent-tint-strong: #3a382e;
-    --db-accent-deep: #e6dcc0;
+    --db-text-on-selected: #ece6d8;
+    --db-selected-rule: #e0835a;
+    --db-focus: #ece6d8;
+    /* Dark mode reverses that: a floating surface must sit LIGHTER than the
+       panes it opens over, or a menu reads as a hole in the chrome. Derived
+       from the palette's own steps, so every accent palette gets one. */
+    --db-bg-raised: color-mix(in srgb, var(--db-bg-subtle), var(--db-bg-hover) 40%);
+    --db-accent-soft-08: rgba(224, 131, 90, 0.08);
+    --db-accent-soft-12: rgba(224, 131, 90, 0.12);
+    --db-accent-soft-15: rgba(224, 131, 90, 0.18);
+    --db-accent-soft-25: rgba(224, 131, 90, 0.28);
+    --db-accent-tint-strong: #533725;
+    --db-accent-deep: #f0c2aa;
     --db-input-border: #c8b48f;
     --db-danger: #f87171;
     --db-danger-bg: #1c1917;
@@ -293,10 +327,11 @@
 }
 
 .db-explorer-title {
-  font-weight: 600;
-  font-size: 12px;
+  font-family: var(--db-meta-font);
+  font-weight: 500;
+  font-size: 11px;
   text-transform: uppercase;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.06em;
   color: var(--db-text-muted);
 }
 
@@ -337,7 +372,7 @@
   padding: 8px 10px 5px;
 }
 
-.db-pinned-documents-title i {
+.db-pinned-documents-title svg {
   font-size: 10px;
 }
 
@@ -383,9 +418,9 @@
 .db-pinned-document-row--selected,
 .db-pinned-document-row--selected:hover,
 .db-pinned-document-row--selected:has(:focus-visible) {
-  --db-focus: #ffffff;
   background: var(--db-bg-selected);
   color: var(--db-text-on-selected);
+  box-shadow: inset 2px 0 0 var(--db-selected-rule);
 }
 
 .db-pinned-document-more {
@@ -445,7 +480,7 @@
   right: 4px;
   left: 4px;
   margin: 0;
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
 }
 
 .db-explorer-btn {
@@ -695,6 +730,14 @@
   opacity: 0.65;
 }
 
+/* What a non-Markdown type means: written in Markdown, saved as that format. */
+.db-new-item-hint {
+  margin: 4px 8px 0;
+  color: var(--db-text-muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
 /* ── Tree ────────────────────────────────────────────────────── */
 
 .db-tree {
@@ -793,14 +836,6 @@
   outline-offset: -2px;
 }
 
-/* A selected/drop-target row is filled with --db-bg-selected, which in
-   light mode *is* the accent brown — the default ring would disappear
-   into it. Re-point the token rather than duplicating the rule. */
-.db-tree-row--selected,
-.db-tree-row--drop-target {
-  --db-focus: #ffffff;
-}
-
 .db-tree-row--dragging {
   opacity: 0.45;
 }
@@ -816,6 +851,7 @@
 .db-tree-row--selected {
   background: var(--db-bg-selected);
   color: var(--db-text-on-selected);
+  box-shadow: inset 2px 0 0 var(--db-selected-rule);
 }
 
 .db-tree-row--selected:hover {
@@ -846,7 +882,8 @@
   margin-left: 8px;
   overflow: hidden;
   color: var(--db-text-secondary);
-  font-size: 11px;
+  font-family: var(--db-meta-font);
+  font-size: 10.5px;
   font-variant-numeric: tabular-nums;
   text-align: right;
   text-overflow: ellipsis;
@@ -946,7 +983,7 @@
 .db-tree-context {
   position: fixed;
   z-index: 1000;
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   border: 1px solid var(--db-border);
   border-radius: 4px;
   box-shadow: 0 4px 12px var(--db-shadow);
@@ -1049,7 +1086,7 @@
   z-index: 60;
   min-width: calc(100% - 16px);
   max-width: min(320px, 90vw);
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   border: 1px solid var(--db-border);
   border-radius: 4px;
   box-shadow: 0 4px 12px var(--db-shadow);
@@ -1288,11 +1325,21 @@
   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 {
+/* Hosts pass a light and a dark wordmark; the shell shows the one drawn for
+   its resolved appearance. The dark one is painted as on a hull (white faces,
+   black shade), which an inverted light logo can't reproduce. */
+.db-app-menu-logo--dark,
+.db-shell[data-theme='dark'] .db-app-menu-logo--light {
+  display: none;
+}
+
+.db-shell[data-theme='dark'] .db-app-menu-logo--dark {
+  display: block;
+}
+
+/* A host with only one logo gets it inverted in dark mode — fine for a flat
+   black-on-transparent mark, the case this fallback exists for. */
+.db-shell[data-theme='dark'] .db-app-menu-logo--invert {
   filter: invert(1) brightness(0.88) sepia(0.15);
 }
 
@@ -1318,7 +1365,7 @@
   left: 0;
   z-index: 70;
   min-width: 200px;
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   border: 1px solid var(--db-border);
   border-radius: 4px;
   box-shadow: 0 4px 12px var(--db-shadow);
@@ -1342,6 +1389,18 @@
   background: var(--db-bg-hover);
 }
 
+.db-app-menu-item--with-shortcut {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.db-app-menu-shortcut {
+  color: var(--db-text-muted);
+  font-size: 12px;
+}
+
 .db-app-menu-item--danger {
   color: var(--db-danger);
 }
@@ -1392,7 +1451,7 @@
   right: 0;
   z-index: 100;
   min-width: 200px;
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   border: 1px solid var(--db-border);
   border-radius: 6px;
   box-shadow: 0 4px 12px var(--db-shadow);
@@ -1517,6 +1576,9 @@
 
 .db-shell-sidebar {
   width: 260px;
+  /* The sidebar is chrome, so it shares the toolbar's paper; only the page
+     itself is white. */
+  background: var(--db-bg-subtle);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -1539,7 +1601,7 @@
   inset-block: 0;
   inset-inline-start: 0;
   z-index: 30;
-  background: var(--db-bg);
+  background: var(--db-bg-subtle);
   width: var(--db-drawer-width);
   padding-inline-start: var(--db-safe-left);
   border-inline-end: 1px solid var(--db-border-strong);
@@ -1729,6 +1791,7 @@ body.db-resizing-sidebar * {
    box here so both chrome regions are 25px everywhere. */
 .db-shell .squisq-status-bar {
   line-height: 16px;
+  font-family: var(--db-meta-font);
 }
 
 .db-shell-sidebar-footer {
@@ -1761,8 +1824,7 @@ body.db-resizing-sidebar * {
   text-decoration: underline;
 }
 
-.db-shell-sidebar-footer-separator,
-.db-shell-sidebar-footer-action {
+.db-shell-sidebar-footer-separator {
   color: var(--db-text-muted);
 }
 
@@ -1771,20 +1833,37 @@ body.db-resizing-sidebar * {
   opacity: 0.65;
 }
 
+/* The backup action is the footer's one control that protects work, so it is a
+   bordered button with a 22px target (24px including the spacing around it)
+   rather than another 11px text link. */
 .db-shell-sidebar-footer-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   flex-shrink: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
+  min-height: 22px;
+  margin-left: auto;
+  padding: 0 8px;
+  border: 1px solid var(--db-border-strong);
+  border-radius: 999px;
+  background: var(--db-bg);
+  color: var(--db-text-secondary);
   font: inherit;
-  line-height: inherit;
-  text-decoration: underline;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
   white-space: nowrap;
   cursor: pointer;
 }
 
 .db-shell-sidebar-footer-action:hover {
-  color: var(--db-text-secondary);
+  border-color: var(--db-accent);
+  color: var(--db-text);
+}
+
+.db-shell-sidebar-footer-action:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 1px;
 }
 
 .db-shell-empty {
@@ -1938,7 +2017,7 @@ body.db-resizing-sidebar * {
   position: static;
 }
 
-.db-shell--mobile .squisq-editor-shell .squisq-toolbar-overflow-menu {
+html:has(.db-shell--mobile) .squisq-toolbar-overflow-menu {
   right: auto !important;
   left: max(4px, env(safe-area-inset-left)) !important;
   max-width: calc(100vw - 8px);
@@ -2184,7 +2263,7 @@ body.db-resizing-sidebar * {
 
 .db-dialog {
   box-sizing: border-box;
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   border: 1px solid var(--db-border);
   border-radius: 8px;
   box-shadow: 0 8px 32px var(--db-shadow);
@@ -2262,21 +2341,6 @@ body.db-resizing-sidebar * {
   gap: 6px 16px;
 }
 
-.db-about-beta {
-  margin-bottom: 10px;
-  padding: 10px 12px;
-  border: 1px solid var(--db-accent);
-  border-radius: 6px;
-  background: var(--db-accent-soft-08);
-  color: var(--db-text-secondary);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.db-about-beta strong {
-  color: var(--db-accent-deep);
-}
-
 .db-about-version {
   display: flex;
   align-items: center;
@@ -2297,7 +2361,7 @@ body.db-resizing-sidebar * {
 
 .db-about-version code {
   color: var(--db-text);
-  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-family: var(--db-meta-font);
   user-select: all;
 }
 
@@ -2314,10 +2378,11 @@ body.db-resizing-sidebar * {
 }
 
 .db-settings-legend {
-  font-size: 12px;
-  font-weight: 600;
+  font-family: var(--db-meta-font);
+  font-size: 11px;
+  font-weight: 500;
   text-transform: uppercase;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.06em;
   color: var(--db-text-muted);
   margin-bottom: 8px;
 }
@@ -2632,7 +2697,7 @@ body.db-resizing-sidebar * {
   border: 1px solid var(--db-border-strong);
   border-radius: 6px;
   outline: none;
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   color: var(--db-text);
   box-shadow: 0 10px 28px var(--db-shadow);
 }
@@ -2904,8 +2969,8 @@ body.db-resizing-sidebar * {
   box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
 }
 
-.db-settings-accent-swatch--brown {
-  background: #7d6948;
+.db-settings-accent-swatch--rust {
+  background: #a0461f;
 }
 
 .db-settings-accent-swatch--green {
@@ -3133,7 +3198,7 @@ body.db-resizing-sidebar * {
   margin-top: 4px;
   z-index: 70;
   min-width: 200px;
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   border: 1px solid var(--db-border);
   border-radius: 4px;
   box-shadow: 0 4px 12px var(--db-shadow);
@@ -3598,6 +3663,7 @@ body.db-resizing-sidebar * {
   --squisq-row-hover: var(--db-bg-hover);
   --squisq-hover-bg: var(--db-bg-hover);
   --squisq-panel-bg: var(--db-bg);
+  --squisq-surface-overlay: var(--db-bg-raised);
 
   /* The desk the editing page floats on — the WYSIWYG backing, the block
      card and its preview panel, the outline pane, the Monaco margin. */
@@ -3755,31 +3821,30 @@ body.db-resizing-sidebar * {
   background: var(--squisq-desk-bg);
 }
 
-/* ── Inline preview gutter: thematic green ──────────────────── */
+/* ── Inline preview gutter ──────────────────────────────────── */
 /* Rebind squisq's `--squisq-preview-*` custom properties so the
-   gutter chrome (vertical bracket, diagonal connector + dots,
-   "FACTCARD" template label) reads as sage green instead of indigo,
-   and the card surface tones harmonize with the rest of docblocks.
-   The preview-block renderer's own theme is unaffected — that's a
-   document-level concern, not chrome. */
+   gutter chrome (vertical bracket, diagonal connector + dots)
+   draws as hairlines in the rule color rather than in the accent,
+   and the card surface tones harmonize with the rest of docblocks. The preview-block renderer's own theme is unaffected —
+   that's a document-level concern, not chrome. */
 .db-shell[data-theme='light'] .squisq-editor-shell[data-theme='light'] {
-  --squisq-preview-accent: var(--db-accent);
-  --squisq-preview-accent-muted: var(--db-text-muted);
+  --squisq-preview-accent: var(--db-border-strong);
+  --squisq-preview-accent-muted: var(--db-border);
   --squisq-preview-gutter-bg: var(--db-gutter-bg);
-  --squisq-preview-card-bg: #ffffff;
+  --squisq-preview-card-bg: var(--db-bg);
   --squisq-preview-card-border: var(--db-border);
   --squisq-preview-card-shadow: 0 1px 2px rgba(40, 30, 15, 0.08);
   --squisq-preview-card-title: var(--db-accent-deep);
   --squisq-preview-card-svg-bg: var(--db-bg-subtle);
   --squisq-preview-dot-halo: var(--db-gutter-bg);
-  --squisq-preview-empty-bg: #ffffff;
+  --squisq-preview-empty-bg: var(--db-bg);
   --squisq-preview-empty-border: var(--db-border);
   --squisq-preview-empty-text: var(--db-accent-deep);
 }
 
 .db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] {
-  --squisq-preview-accent: var(--db-accent-hover);
-  --squisq-preview-accent-muted: var(--db-text-muted);
+  --squisq-preview-accent: var(--db-border-strong);
+  --squisq-preview-accent-muted: var(--db-border);
   --squisq-preview-gutter-bg: var(--db-gutter-bg);
   --squisq-preview-card-bg: var(--db-bg);
   --squisq-preview-card-border: var(--db-border);
@@ -3792,6 +3857,24 @@ body.db-resizing-sidebar * {
   --squisq-preview-empty-text: var(--db-text-muted);
 }
 
+/* Squisq colors the card's template label with the same
+   `--squisq-preview-accent` as the hairlines above, and a rule color is
+   too faint for text. Keep the label at the muted text tone so it meets
+   WCAG AA contrast on the card surface. */
+.db-shell .squisq-editor-shell .squisq-inline-preview-card-template {
+  color: var(--db-text-muted);
+}
+
+/* The extent bar shows a block's reach; at Squisq's 4px it read as a cable
+   running beside the page. Squisq has no width token for it. */
+.db-shell .squisq-editor-shell .squisq-inline-preview-extent {
+  width: 2px;
+}
+
+.db-shell .squisq-editor-shell .squisq-inline-preview-extent--untagged {
+  width: 1px;
+}
+
 /* ── Squisq dark-theme override ──────────────────────────────── */
 /* Squisq has hardcoded slate-blue surfaces in its dark mode. We re-tone
    them via the DocBlocks dark palette so the editor reads as warm dark
@@ -3956,7 +4039,7 @@ body.db-resizing-sidebar * {
 }
 
 .db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-context-menu {
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   border-color: var(--db-border);
   box-shadow: 0 12px 28px var(--db-shadow);
 }
@@ -4088,38 +4171,15 @@ body.db-resizing-sidebar * {
   border-color: var(--db-border-strong);
 }
 
-/* ── Tooltips (portal): sans-serif + thematic chip ───────────── */
-/* Tooltips render via portal into document.body, OUTSIDE `.db-shell`
-   — so the `--db-accent-*` variables (scoped to `.db-shell`) don't
-   cascade into them. We reach the portaled element with
-   `html:has(.db-shell)` and emit explicit colors per theme; using
-   `var(--db-accent-…)` here drops to the squisq fallback (dark slate
-   bg + near-white text) because the vars never resolve. */
+/* ── Tooltips (portal): sans-serif + ink chip ───────────────── */
+/* Tooltips portal into document.body, outside `.db-shell`; the palette is
+   hoisted to the root, so the tokens resolve there. The chip inverts the
+   chrome: ink on cream in light mode, light ink on espresso in dark. */
 html:has(.db-shell) .squisq-tooltip {
   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. */
-  background: #3d3220;
-  color: #f3eede;
-}
-
-html:has(.db-shell[data-theme='dark']) .squisq-tooltip {
-  /* Dark mode: cream chip, dark text — an inverted floating chip
-     against the espresso UI. Contrast ratio ~12:1 between
-     `#e6dcc0` and `#1f1a10`. */
-  background: #e6dcc0;
-  color: #1f1a10;
-}
-
-@media (prefers-color-scheme: dark) {
-  /* Shell defaults to system theme when `data-theme` is unset —
-     mirror the dark-mode override so the tooltip stays readable
-     without an explicit user choice. */
-  html:has(.db-shell:not([data-theme='light'])) .squisq-tooltip {
-    background: #e6dcc0;
-    color: #1f1a10;
-  }
+  background: var(--db-text);
+  color: var(--db-bg-subtle);
 }
 
 /* ── Template picker accents (dark): indigo → thematic green ─── */
@@ -4139,64 +4199,69 @@ html:has(.db-shell[data-theme='dark']) .squisq-tooltip {
 
 /* The template gallery and file-tree context menu render into document.body
    via createPortal, so they live outside `.db-shell`. Hoist the same
-   brown/canvas tokens onto the html element (gated by the resolved shell
+   palette tokens onto the html element (gated by the resolved shell
    theme) so every portaled surface keeps the DocBlocks palette. */
 html:has(.db-shell[data-theme='dark']) {
   --db-bg: #1a1812;
   --db-bg-subtle: #262219;
   --db-bg-hover: #3a3528;
-  --db-border: #4d4636;
-  --db-border-strong: #6b6448;
-  --db-text: #e8e2d0;
+  --db-border: #342e27;
+  --db-border-strong: #4a4238;
+  --db-text: #ece6d8;
   --db-text-secondary: #d4ccb0;
-  --db-text-muted: #a89a7c;
+  --db-text-muted: #a39885;
   --db-danger: #f87171;
   --db-danger-bg: #1c1917;
   --db-text-on-danger: #1c1917;
   --db-shadow: rgba(0, 0, 0, 0.4);
-  --db-accent: #c8b48f;
-  --db-accent-hover: #dec79d;
+  --db-accent: #e0835a;
+  --db-accent-hover: #eb9a76;
   --db-text-on-accent: #1a1812;
-  --db-accent-soft-15: rgba(200, 180, 143, 0.18);
-  --db-accent-soft-25: rgba(200, 180, 143, 0.28);
-  --db-accent-tint-strong: #3a382e;
-  --db-accent-deep: #e6dcc0;
+  --db-accent-soft-15: rgba(224, 131, 90, 0.18);
+  --db-accent-soft-25: rgba(224, 131, 90, 0.28);
+  --db-accent-tint-strong: #533725;
+  --db-accent-deep: #f0c2aa;
   --db-gutter-bg: #16110b;
+  --db-bg-raised: color-mix(in srgb, var(--db-bg-subtle), var(--db-bg-hover) 40%);
 }
 
 html:has(.db-shell[data-theme='light']) {
-  --db-bg: #ffffff;
+  --db-bg: #fffdf9;
   --db-bg-subtle: #f3eede;
   --db-bg-hover: #e9e2cb;
-  --db-border: #d6cdb0;
-  --db-border-strong: #b5a985;
-  --db-text: #2a2419;
+  --db-border: #ddd5c3;
+  --db-border-strong: #c7bca3;
+  --db-text: #231f18;
   --db-text-secondary: #3d3528;
-  --db-text-muted: #6b614a;
+  --db-text-muted: #6b6252;
   --db-danger: #b22b1b;
   --db-danger-bg: #fdf0ee;
   --db-text-on-danger: #ffffff;
   --db-shadow: rgba(40, 30, 15, 0.12);
-  --db-accent: #7d6948;
-  --db-accent-hover: #5e4f37;
-  --db-text-on-accent: #ffffff;
-  --db-accent-soft-15: rgba(125, 105, 72, 0.15);
-  --db-accent-soft-25: rgba(125, 105, 72, 0.25);
-  --db-accent-tint-strong: #d8d0b5;
-  --db-accent-deep: #3d3220;
+  --db-accent: #a0461f;
+  --db-accent-hover: #8a3a1a;
+  --db-text-on-accent: #fffdf9;
+  --db-accent-soft-15: rgba(160, 70, 31, 0.15);
+  --db-accent-soft-25: rgba(160, 70, 31, 0.25);
+  --db-accent-tint-strong: #e8d2be;
+  --db-accent-deep: #7a3418;
   --db-gutter-bg: #efe8d4;
 }
 
-/* Accent variants keep Brown as the untouched default while recoloring the
+/* Accent variants keep Rust as the untouched default while recoloring the
    full chrome palette for either appearance. The same tokens are hoisted to
    `html` so Squisq portals and file-tree menus inherit the active variant. */
-.db-shell[data-theme='light']:not([data-accent='brown']),
-html:has(.db-shell[data-theme='light']:not([data-accent='brown'])) {
+.db-shell[data-theme='light']:not([data-accent='rust']),
+html:has(.db-shell[data-theme='light']:not([data-accent='rust'])) {
   --db-accent-soft-08: rgb(var(--db-accent-rgb) / 8%);
   --db-accent-soft-10: rgb(var(--db-accent-rgb) / 10%);
   --db-accent-soft-12: rgb(var(--db-accent-rgb) / 12%);
   --db-accent-soft-15: rgb(var(--db-accent-rgb) / 15%);
   --db-accent-soft-25: rgb(var(--db-accent-rgb) / 25%);
+  --db-text-on-selected: var(--db-text);
+  --db-selected-rule: var(--db-accent);
+  --db-bg: #ffffff;
+  --db-editor-canvas: #ffffff;
   --db-gallery-backdrop: rgba(30, 30, 30, 0.24);
   --db-gallery-panel-bg: var(--db-bg);
   --db-gallery-raised-bg: var(--db-bg);
@@ -4205,13 +4270,14 @@ html:has(.db-shell[data-theme='light']:not([data-accent='brown'])) {
   --db-gallery-placeholder: var(--db-text-muted);
 }
 
-.db-shell[data-theme='dark']:not([data-accent='brown']),
-html:has(.db-shell[data-theme='dark']:not([data-accent='brown'])) {
+.db-shell[data-theme='dark']:not([data-accent='rust']),
+html:has(.db-shell[data-theme='dark']:not([data-accent='rust'])) {
   --db-accent-soft-08: rgb(var(--db-accent-rgb) / 8%);
   --db-accent-soft-10: rgb(var(--db-accent-rgb) / 10%);
   --db-accent-soft-12: rgb(var(--db-accent-rgb) / 12%);
   --db-accent-soft-15: rgb(var(--db-accent-rgb) / 18%);
   --db-accent-soft-25: rgb(var(--db-accent-rgb) / 28%);
+  --db-selected-rule: var(--db-accent);
   --db-gallery-backdrop: rgba(0, 0, 0, 0.58);
   --db-gallery-panel-bg: var(--db-bg);
   --db-gallery-header-bg: var(--db-editor-canvas);
@@ -4225,8 +4291,8 @@ html:has(.db-shell[data-theme='dark']:not([data-accent='brown'])) {
 html:has(.db-shell[data-theme='light'][data-accent='green']) {
   --db-bg-subtle: #edf4ef;
   --db-bg-hover: #dfece3;
-  --db-bg-selected: #4f715d;
-  --db-bg-selected-hover: #3d5949;
+  --db-bg-selected: #cfe0d3;
+  --db-bg-selected-hover: #c2d6c7;
   --db-border: #c6d8cb;
   --db-border-strong: #98b3a1;
   --db-text: #202a23;
@@ -4274,8 +4340,8 @@ html:has(.db-shell[data-theme='dark'][data-accent='green']) {
 html:has(.db-shell[data-theme='light'][data-accent='blue']) {
   --db-bg-subtle: #eef2f7;
   --db-bg-hover: #e1e8f0;
-  --db-bg-selected: #526f91;
-  --db-bg-selected-hover: #3c5675;
+  --db-bg-selected: #d0dbe7;
+  --db-bg-selected-hover: #c3d0de;
   --db-border: #c7d1de;
   --db-border-strong: #99aabd;
   --db-text: #202733;
@@ -4323,8 +4389,8 @@ html:has(.db-shell[data-theme='dark'][data-accent='blue']) {
 html:has(.db-shell[data-theme='light'][data-accent='purple']) {
   --db-bg-subtle: #f3eff6;
   --db-bg-hover: #e9e1ef;
-  --db-bg-selected: #735b8c;
-  --db-bg-selected-hover: #59436f;
+  --db-bg-selected: #ddd0e4;
+  --db-bg-selected-hover: #d2c3db;
   --db-border: #d5c8dd;
   --db-border-strong: #b19cbe;
   --db-text: #29222e;
@@ -4372,8 +4438,8 @@ html:has(.db-shell[data-theme='dark'][data-accent='purple']) {
 html:has(.db-shell[data-theme='light'][data-accent='maroon']) {
   --db-bg-subtle: #f7eff2;
   --db-bg-hover: #eedfe5;
-  --db-bg-selected: #805365;
-  --db-bg-selected-hover: #643d4d;
+  --db-bg-selected: #e6d0d8;
+  --db-bg-selected-hover: #dcc3cd;
   --db-border: #dec8d0;
   --db-border-strong: #bd9ba8;
   --db-text: #2f2227;
@@ -4421,8 +4487,8 @@ html:has(.db-shell[data-theme='dark'][data-accent='maroon']) {
 html:has(.db-shell[data-theme='light'][data-accent='orange']) {
   --db-bg-subtle: #f8f1e9;
   --db-bg-hover: #f0e4d6;
-  --db-bg-selected: #8a5a32;
-  --db-bg-selected-hover: #6d4323;
+  --db-bg-selected: #ead8c5;
+  --db-bg-selected-hover: #e1cbb4;
   --db-border: #e0cfbc;
   --db-border-strong: #c2a282;
   --db-text: #30271f;
@@ -4470,8 +4536,8 @@ html:has(.db-shell[data-theme='dark'][data-accent='orange']) {
 html:has(.db-shell[data-theme='light'][data-accent='gray']) {
   --db-bg-subtle: #f2f2f2;
   --db-bg-hover: #e6e6e6;
-  --db-bg-selected: #676767;
-  --db-bg-selected-hover: #505050;
+  --db-bg-selected: #d8d8d8;
+  --db-bg-selected-hover: #cdcdcd;
   --db-border: #d1d1d1;
   --db-border-strong: #a8a8a8;
   --db-text: #252525;
@@ -4520,7 +4586,7 @@ html:has(.db-shell[data-theme='dark'][data-accent='gray']) {
    above so its surface, states, icons, and text follow every DocBlocks theme
    and accent instead of falling back to Squisq's standalone blue/slate UI. */
 html:has(.db-shell) .squisq-use-mode-menu {
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   border-color: var(--db-border);
   box-shadow:
     0 12px 32px var(--db-shadow),
@@ -4631,7 +4697,7 @@ html:has(.db-shell)
    same menu surfaces as the rest of the shell. The selector also covers the
    nested Mermaid and code-snippet menus, which share this portal class. */
 html:has(.db-shell) .squisq-insert-menu {
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   border-color: var(--db-border);
   color: var(--db-text-secondary);
   box-shadow: 0 4px 12px var(--db-shadow);
@@ -4654,12 +4720,12 @@ html:has(.db-shell) .squisq-insert-menu .squisq-insert-menu-header--separated {
   border-top-color: var(--db-border);
 }
 
-html:has(.db-shell[data-theme='light']:not([data-accent='brown'])) .squisq-tooltip {
+html:has(.db-shell[data-theme='light']:not([data-accent='rust'])) .squisq-tooltip {
   background: var(--db-accent-deep);
   color: var(--db-bg-subtle);
 }
 
-html:has(.db-shell[data-theme='dark']:not([data-accent='brown'])) .squisq-tooltip {
+html:has(.db-shell[data-theme='dark']:not([data-accent='rust'])) .squisq-tooltip {
   background: var(--db-accent-deep);
   color: var(--db-bg);
 }
@@ -4720,7 +4786,7 @@ html:has(.db-shell[data-theme='dark'])
 
 html:has(.db-shell[data-theme='light'])
   .squisq-template-gallery-dialog[data-theme='light']:has([data-squisq-template-gallery-portal]) {
-  --squisq-template-gallery-backdrop: var(--db-gallery-backdrop, rgba(42, 36, 25, 0.24));
+  --squisq-template-gallery-backdrop: var(--db-gallery-backdrop, rgba(35, 31, 24, 0.24));
   --squisq-template-gallery-panel-bg: var(--db-gallery-panel-bg, #fffdf7);
   --squisq-template-gallery-panel-border: var(--db-border);
   --squisq-template-gallery-header-bg: var(--db-bg-subtle);
@@ -5283,13 +5349,13 @@ html:has(.db-shell[data-theme='dark'])
 }
 
 .db-shell[data-theme='light'] .squisq-editor-shell[data-theme='light'] .squisq-toolbar-view-tabs {
-  background: var(--db-gutter-bg);
+  background: var(--db-bg-subtle);
   border-right-color: var(--db-border);
 }
 
 .db-shell[data-theme='light'] .squisq-editor-shell[data-theme='light'] .squisq-status-bar {
   --squisq-text-muted: var(--db-text-secondary);
-  background: var(--db-accent-tint-strong);
+  background: var(--db-bg-subtle);
   border-top-color: var(--db-border-strong);
 }
 
@@ -5330,48 +5396,49 @@ html:has(.db-shell[data-theme='dark'])
   border-left: 1px solid var(--db-border);
 }
 
-/* Toolbar overflow menu. Squisq intentionally ships a neutral slate
+/* Toolbar overflow menu. Squisq portals it onto <body> (2.12+), outside the
+   shell, so these rules reach it through `html:has(.db-shell)` like the
+   Insert and Use mode menus. Squisq intentionally ships a neutral slate
    palette; inside DocBlocks this popover should use the same surfaces,
    borders, text, and interaction colors as our other shell menus. The
    contextual template/transition controls need explicit treatment too,
    since they bring their own Squisq surfaces into the popover. */
-.db-shell .squisq-editor-shell .squisq-toolbar-overflow-menu {
-  background: var(--db-bg);
+html:has(.db-shell) .squisq-toolbar-overflow-menu {
+  background: var(--db-bg-raised);
   border-color: var(--db-border);
   box-shadow: 0 4px 12px var(--db-shadow);
 }
 
-.db-shell .squisq-editor-shell .squisq-toolbar-overflow-menu--up {
+html:has(.db-shell) .squisq-toolbar-overflow-menu--up {
   box-shadow: 0 -4px 12px var(--db-shadow);
 }
 
-.db-shell .squisq-editor-shell .squisq-toolbar-overflow-item {
+html:has(.db-shell) .squisq-toolbar-overflow-item {
   color: var(--db-text-secondary);
 }
 
-.db-shell .squisq-editor-shell .squisq-toolbar-overflow-item:hover {
+html:has(.db-shell) .squisq-toolbar-overflow-item:hover {
   background: var(--db-bg-hover);
 }
 
-.db-shell .squisq-editor-shell .squisq-toolbar-overflow-heading {
+html:has(.db-shell) .squisq-toolbar-overflow-heading {
   color: var(--db-text-muted);
 }
 
-.db-shell .squisq-editor-shell .squisq-toolbar-overflow-menu > .squisq-toolbar-separator {
+html:has(.db-shell) .squisq-toolbar-overflow-menu > .squisq-toolbar-separator {
   background: var(--db-border);
 }
 
-.db-shell .squisq-editor-shell .squisq-toolbar-overflow-item--danger {
+html:has(.db-shell) .squisq-toolbar-overflow-item--danger {
   color: var(--db-danger);
 }
 
-.db-shell .squisq-editor-shell .squisq-toolbar-overflow-item--danger:hover {
+html:has(.db-shell) .squisq-toolbar-overflow-item--danger:hover {
   background: var(--db-danger-bg);
   color: var(--db-danger);
 }
 
-.db-shell
-  .squisq-editor-shell
+html:has(.db-shell)
   .squisq-toolbar-overflow-menu
   :is(.squisq-template-picker-trigger, .squisq-transition-picker-trigger) {
   background: var(--db-bg-subtle);
@@ -5379,16 +5446,14 @@ html:has(.db-shell[data-theme='dark'])
   color: var(--db-text-secondary);
 }
 
-.db-shell
-  .squisq-editor-shell
+html:has(.db-shell)
   .squisq-toolbar-overflow-menu
   :is(.squisq-template-picker-trigger, .squisq-transition-picker-trigger):hover {
   background: var(--db-bg-hover);
   border-color: var(--db-border-strong);
 }
 
-.db-shell
-  .squisq-editor-shell
+html:has(.db-shell)
   .squisq-toolbar-overflow-menu
   :is(.squisq-template-picker-trigger--open, .squisq-transition-picker-trigger--open) {
   background: var(--db-bg-hover);
@@ -5396,66 +5461,64 @@ html:has(.db-shell[data-theme='dark'])
   outline-color: var(--db-accent-soft-25);
 }
 
-.db-shell
-  .squisq-editor-shell
+html:has(.db-shell)
   .squisq-toolbar-overflow-menu
   :is(.squisq-template-picker-trigger-label, .squisq-transition-picker-trigger-label),
-.db-shell
-  .squisq-editor-shell
+html:has(.db-shell)
   .squisq-toolbar-overflow-menu
   :is(.squisq-template-picker-trigger-caret, .squisq-transition-picker-trigger svg) {
   color: var(--db-text-muted);
 }
 
-.db-shell
-  .squisq-editor-shell
+html:has(.db-shell)
   .squisq-toolbar-overflow-menu
   :is(.squisq-template-picker-trigger-value, .squisq-transition-picker-trigger-value) {
   color: var(--db-text-secondary);
 }
 
-.db-shell .squisq-editor-shell .squisq-toolbar-overflow-menu .squisq-template-picker-trigger-thumb {
+html:has(.db-shell) .squisq-toolbar-overflow-menu .squisq-template-picker-trigger-thumb {
   background: var(--db-bg);
   border-color: var(--db-border);
 }
 
-/* View menu. Squisq's dark appearance otherwise replaces its generic
-   variables with a fixed slate-blue palette. Keep the popover and its
-   controls on the same host palette as the DocBlocks app and overflow
-   menus, including the native radio/checkbox selection color. */
-.db-shell .squisq-editor-shell .squisq-view-menu-popover {
-  background: var(--db-bg);
+/* View menu — portaled onto <body> like the overflow menu, so reached
+   through `html:has(.db-shell)`. Squisq's dark appearance otherwise
+   replaces its generic variables with a fixed slate-blue palette. Keep the
+   popover and its controls on the same host palette as the DocBlocks app
+   and overflow menus, including the native radio/checkbox selection color. */
+html:has(.db-shell) .squisq-view-menu-popover {
+  background: var(--db-bg-raised);
   border-color: var(--db-border);
   box-shadow: 0 4px 12px var(--db-shadow);
   color: var(--db-text-secondary);
 }
 
-.db-shell .squisq-editor-shell .squisq-view-menu-row:hover,
-.db-shell .squisq-editor-shell .squisq-view-menu-radio-row:hover {
+html:has(.db-shell) .squisq-view-menu-row:hover,
+html:has(.db-shell) .squisq-view-menu-radio-row:hover {
   background: var(--db-bg-hover);
 }
 
-.db-shell .squisq-editor-shell .squisq-view-menu-row--select:hover,
-.db-shell .squisq-editor-shell .squisq-view-menu-row--radios:hover {
+html:has(.db-shell) .squisq-view-menu-row--select:hover,
+html:has(.db-shell) .squisq-view-menu-row--radios:hover {
   background: transparent;
 }
 
-.db-shell .squisq-editor-shell .squisq-view-menu-row--select .squisq-view-menu-label,
-.db-shell .squisq-editor-shell .squisq-view-menu-row--radios > .squisq-view-menu-label {
+html:has(.db-shell) .squisq-view-menu-row--select .squisq-view-menu-label,
+html:has(.db-shell) .squisq-view-menu-row--radios > .squisq-view-menu-label {
   color: var(--db-text-muted);
 }
 
-.db-shell .squisq-editor-shell .squisq-view-menu-select {
+html:has(.db-shell) .squisq-view-menu-select {
   background: var(--db-bg-subtle);
   border-color: var(--db-border);
   color: var(--db-text-secondary);
 }
 
-.db-shell .squisq-editor-shell .squisq-view-menu-separator {
+html:has(.db-shell) .squisq-view-menu-separator {
   background: var(--db-border);
 }
 
-.db-shell .squisq-editor-shell :is(.squisq-view-menu-checkbox, .squisq-view-menu-radio) {
+html:has(.db-shell) :is(.squisq-view-menu-checkbox, .squisq-view-menu-radio) {
   accent-color: var(--db-accent);
 }
 
@@ -5539,7 +5602,7 @@ html:has(.db-shell[data-theme='dark'])
 }
 
 .db-shell[data-theme='dark'] .squisq-version-history-popover {
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   border-color: var(--db-border);
   color: var(--db-text);
 }
@@ -5562,62 +5625,149 @@ html:has(.db-shell[data-theme='dark'])
    already autosaved on every keystroke; this just confirms it
    so muscle-memory savers feel at ease. */
 
-/* ── Welcome gateway ─────────────────────────────────────────── */
-/* One-time first-run callout floated over the welcome doc's Play
-   view. Names the mode the user landed in and offers a one-click
-   path into the editor. Dismissed forever via localStorage. */
+/* ── Welcome screen ─────────────────────────────────────────── */
+/* First visit on a two-pane layout: covers the editor area -- the welcome
+   document mounts, inert, beneath it -- with what DocBlocks is and two
+   choices. Dismissed for good via localStorage. Phones keep their card in
+   the file pane (`.db-mobile-first-run`). The class names predate this
+   screen; they were a toast over a slideshow. */
+
+.db-shell-editor-content {
+  display: contents;
+}
 
 .db-welcome-gateway {
   position: absolute;
-  bottom: 56px;
-  left: 50%;
-  transform: translateX(-50%);
+  inset: 0;
   z-index: 60;
   display: flex;
   align-items: center;
-  gap: 12px;
-  max-width: min(640px, calc(100% - 32px));
-  padding: 10px 10px 10px 16px;
-  background: var(--db-bg);
-  border: 1px solid var(--db-border-strong);
-  border-radius: 10px;
-  box-shadow: 0 10px 32px var(--db-shadow);
+  justify-content: center;
+  overflow-y: auto;
+  padding: calc(var(--db-safe-top) + 40px) 40px 40px;
+  background:
+    radial-gradient(circle at 88% 8%, var(--db-accent-soft-12), transparent 42%), var(--db-bg);
   color: var(--db-text);
-  font-size: 13px;
-  line-height: 1.45;
-  animation: db-welcome-gateway-in 0.4s ease-out;
+  container-type: inline-size;
 }
 
-.db-welcome-gateway-cta {
-  flex-shrink: 0;
-  padding: 6px 14px;
-  font-size: 13px;
+.db-welcome-gateway-body {
+  display: grid;
+  width: min(1040px, 100%);
+  margin: auto 0;
+  gap: 36px;
+  align-items: center;
+}
+
+@container (min-width: 980px) {
+  .db-welcome-gateway-body {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 56px;
+  }
+}
+
+.db-welcome-gateway-eyebrow {
+  margin: 0 0 12px;
+  color: var(--db-accent);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.db-welcome-gateway h1 {
+  margin: 0;
+  color: var(--db-text);
+  font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
+  font-size: clamp(30px, 4.4cqi, 46px);
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.01em;
+}
+
+.db-welcome-gateway-copy > p:not(.db-welcome-gateway-eyebrow) {
+  max-width: 34em;
+  margin: 16px 0 0;
+  color: var(--db-text-secondary);
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.db-welcome-gateway-copy > .db-welcome-gateway-note {
+  margin-top: 8px;
+  color: var(--db-text-muted);
+  font-size: 14px;
+}
+
+.db-welcome-gateway-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 28px;
+}
+
+.db-welcome-gateway-actions button,
+.db-welcome-gateway-actions a {
+  min-height: 44px;
+  padding: 10px 20px;
+  border: 1px solid var(--db-border-strong);
+  border-radius: 8px;
+  background: var(--db-bg);
+  color: var(--db-text);
+  font: inherit;
+  font-size: 15px;
   font-weight: 600;
+  cursor: pointer;
+}
+
+/* The apps link wears the button treatment; this centers its label the way a
+   button's is and drops the underline. */
+.db-welcome-gateway-actions a {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.db-welcome-gateway-actions button:hover,
+.db-welcome-gateway-actions a:hover {
+  border-color: var(--db-accent);
+  background: var(--db-bg-hover);
+}
+
+.db-welcome-gateway-actions .db-welcome-gateway-primary {
+  border-color: var(--db-accent);
   background: var(--db-accent);
   color: var(--db-text-on-accent);
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  white-space: nowrap;
 }
 
-.db-welcome-gateway-cta:hover {
+.db-welcome-gateway-actions .db-welcome-gateway-primary:hover {
+  border-color: var(--db-accent-hover);
   background: var(--db-accent-hover);
 }
 
+.db-welcome-gateway-actions button:focus-visible,
+.db-welcome-gateway-actions a:focus-visible,
+.db-welcome-gateway-dismiss:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 2px;
+}
+
 .db-welcome-gateway-dismiss {
-  flex-shrink: 0;
+  position: absolute;
+  top: calc(var(--db-safe-top) + 12px);
+  right: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 26px;
-  height: 26px;
-  font-size: 16px;
-  line-height: 1;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 8px;
   background: transparent;
   color: var(--db-text-muted);
-  border: none;
-  border-radius: 6px;
+  font-size: 20px;
+  line-height: 1;
   cursor: pointer;
 }
 
@@ -5626,20 +5776,247 @@ html:has(.db-shell[data-theme='dark'])
   color: var(--db-text);
 }
 
-@keyframes db-welcome-gateway-in {
-  from {
-    transform: translate(-50%, 8px);
-  }
-  to {
-    transform: translate(-50%, 0);
-  }
+/* One Markdown file becoming a PDF page, a slide and a video frame on a 9 s
+   loop. The frames share one stage and take turns; each label lights with
+   its frame. The page and slide colors are fixed: they depict output, which
+   looks the same whatever theme the app is in. */
+.db-welcome-loop {
+  display: grid;
+  grid-template-columns: minmax(0, 0.95fr) auto minmax(0, 1.1fr);
+  align-items: center;
+  gap: 14px 16px;
 }
 
-.db-save-toast {
-  position: fixed;
-  bottom: 32px;
-  left: 50%;
-  transform: translateX(-50%);
+.db-welcome-loop-source {
+  padding: 14px 16px;
+  border: 1px solid var(--db-border-strong);
+  border-radius: 10px;
+  background: var(--db-bg-subtle);
+  box-shadow: 0 10px 28px var(--db-shadow);
+}
+
+.db-welcome-loop-file {
+  display: block;
+  margin-bottom: 10px;
+  color: var(--db-text-muted);
+  font: 600 11px/1 var(--db-meta-font);
+  letter-spacing: 0.04em;
+}
+
+.db-welcome-loop-source code {
+  display: block;
+  overflow: hidden;
+  color: var(--db-text-secondary);
+  font: 12px/1.65 var(--db-meta-font);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.db-welcome-loop-mark {
+  color: var(--db-accent);
+}
+
+.db-welcome-loop-arrow {
+  color: var(--db-accent);
+  font-size: 24px;
+  animation: db-welcome-loop-nudge 3s ease-in-out infinite;
+}
+
+.db-welcome-loop-stage {
+  position: relative;
+  aspect-ratio: 4 / 3;
+}
+
+.db-welcome-loop-frame {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: auto;
+  padding: 18px;
+  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: 0 14px 34px var(--db-shadow);
+  font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
+  opacity: 0;
+  animation: db-welcome-loop-frame 9s ease-in-out infinite both;
+}
+
+.db-welcome-loop-frame strong {
+  font-size: 17px;
+  line-height: 1.2;
+}
+
+.db-welcome-loop-frame span {
+  font-size: 11.5px;
+  line-height: 1.4;
+}
+
+.db-welcome-loop-frame em {
+  margin-top: 4px;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.db-welcome-loop-frame--page {
+  width: 74%;
+  border: 1px solid #e3dccb;
+  background: #fffdf8;
+  color: #2b241c;
+}
+
+.db-welcome-loop-frame--slide,
+.db-welcome-loop-frame--video {
+  height: 75%;
+  justify-content: center;
+  background: radial-gradient(circle at 30% 20%, #5a3322, #24170f 72%);
+  color: #f6ecdc;
+}
+
+.db-welcome-loop-frame--slide {
+  align-items: center;
+  text-align: center;
+  animation-delay: 3s;
+}
+
+.db-welcome-loop-frame--slide strong {
+  font-size: 21px;
+}
+
+.db-welcome-loop-frame--video {
+  justify-content: flex-start;
+  animation-delay: 6s;
+}
+
+.db-welcome-loop-play {
+  position: absolute;
+  bottom: 11px;
+  left: 14px;
+  font-size: 10px;
+  font-style: normal;
+}
+
+.db-welcome-loop-progress {
+  position: absolute;
+  right: 14px;
+  bottom: 15px;
+  left: 32px;
+  height: 3px;
+  border-radius: 2px;
+  background: rgba(246, 236, 220, 0.25);
+}
+
+.db-welcome-loop-progress::after {
+  position: absolute;
+  inset: 0;
+  width: 0;
+  border-radius: inherit;
+  background: #e7a36d;
+  content: '';
+  animation: db-welcome-loop-progress 9s linear infinite both;
+  animation-delay: 6s;
+}
+
+.db-welcome-loop-labels {
+  display: flex;
+  grid-column: 3;
+  justify-content: center;
+  gap: 20px;
+  margin: 0;
+  padding: 0;
+  color: var(--db-text-muted);
+  font: 600 11px/1 var(--db-meta-font);
+  letter-spacing: 0.08em;
+  list-style: none;
+  text-transform: uppercase;
+}
+
+.db-welcome-loop-labels li {
+  animation: db-welcome-loop-label 9s ease-in-out infinite both;
+}
+
+.db-welcome-loop-labels li:nth-child(2) {
+  animation-delay: 3s;
+}
+
+.db-welcome-loop-labels li:nth-child(3) {
+  animation-delay: 6s;
+}
+
+@keyframes db-welcome-loop-frame {
+  0% {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  4%,
+  28% {
+    opacity: 1;
+    transform: none;
+  }
+  32%,
+  100% {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.99);
+  }
+}
+
+@keyframes db-welcome-loop-label {
+  0%,
+  32%,
+  100% {
+    color: var(--db-text-muted);
+  }
+  4%,
+  28% {
+    color: var(--db-accent);
+  }
+}
+
+@keyframes db-welcome-loop-progress {
+  0% {
+    width: 0;
+  }
+  33%,
+  100% {
+    width: 100%;
+  }
+}
+
+@keyframes db-welcome-loop-nudge {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Without motion, hold on the page: the labels still name all three. */
+  .db-welcome-loop-arrow,
+  .db-welcome-loop-labels li {
+    animation: none;
+  }
+
+  .db-welcome-loop-frame--page {
+    opacity: 1;
+    animation: none;
+  }
+
+  .db-welcome-loop-frame--slide,
+  .db-welcome-loop-frame--video {
+    display: none;
+  }
+}
+
+.db-save-toast {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 200;
   padding: 8px 16px;
   font-size: 13px;
@@ -6172,6 +6549,8 @@ html:has(.db-shell[data-theme='dark'])
 
 .db-text-from-narration button:not(.db-dialog-close),
 .db-ai-draft-dialog .db-dialog-footer button,
+.db-ai-study-dialog .db-dialog-footer button,
+.db-ai-study-saved button,
 .db-ai-draft-start button,
 .db-ai-review-panel button {
   min-height: var(--db-target-min);
@@ -6186,6 +6565,7 @@ html:has(.db-shell[data-theme='dark'])
 
 .db-text-from-narration .db-dialog-footer button:last-child,
 .db-ai-draft-dialog .db-dialog-footer button:last-child,
+.db-ai-study-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 {
@@ -6196,6 +6576,8 @@ html:has(.db-shell[data-theme='dark'])
 
 .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-study-dialog .db-dialog-footer button:hover:not(:disabled),
+.db-ai-study-saved button:hover,
 .db-ai-draft-start button:hover,
 .db-ai-review-panel button:hover:not(:disabled) {
   border-color: var(--db-accent-hover);
@@ -6206,6 +6588,8 @@ html:has(.db-shell[data-theme='dark'])
 .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-study-dialog .db-dialog-footer button:focus-visible,
+.db-ai-study-saved button:focus-visible,
 .db-ai-draft-start button:focus-visible,
 .db-ai-review-panel button:focus-visible {
   outline: 2px solid var(--db-focus);
@@ -6214,6 +6598,7 @@ html:has(.db-shell[data-theme='dark'])
 
 .db-text-from-narration button:disabled,
 .db-ai-draft-dialog .db-dialog-footer button:disabled,
+.db-ai-study-dialog .db-dialog-footer button:disabled,
 .db-ai-review-panel button:disabled {
   opacity: 0.5;
   cursor: default;
@@ -6229,7 +6614,7 @@ html:has(.db-shell[data-theme='dark'])
   box-sizing: border-box;
   overflow-y: auto;
   border-left: 1px solid var(--db-border-strong);
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   color: var(--db-text-secondary);
   font: 13px/1.45 var(--db-ui-font);
 }
@@ -6252,7 +6637,7 @@ html:has(.db-shell[data-theme='dark'])
   gap: 12px;
   padding: 14px 14px 10px;
   border-bottom: 1px solid var(--db-border);
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
 }
 
 .db-ai-review-header h2 {
@@ -6468,6 +6853,133 @@ html:has(.db-shell[data-theme='dark'])
   cursor: pointer;
 }
 
+/* Report AI output: the flag beside each AI disclaimer and its dialog. */
+.db-ai-report-button {
+  white-space: nowrap;
+}
+
+.db-ai-report-intro {
+  margin: 0 0 14px;
+  color: var(--db-text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.db-ai-report-dialog .db-settings-fieldset {
+  margin-bottom: 14px;
+}
+
+/* Study aids: Summarize document, Create quiz, Create flashcards. */
+.db-ai-study-dialog .db-dialog-header,
+.db-ai-study-dialog .db-dialog-footer {
+  flex-shrink: 0;
+}
+
+.db-ai-study-dialog .db-ai-study-footer {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.db-ai-study-start,
+.db-ai-study-result,
+.db-ai-study-running {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.db-ai-study-start p,
+.db-ai-study-result p,
+.db-ai-study-running p {
+  margin: 0;
+}
+
+/* In the full-height deck dialog the result fills the body, and the deck
+   takes whatever the notes and disclaimer leave. */
+.db-ai-study-result {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.db-ai-study-intro,
+.db-ai-study-stage,
+.db-ai-study-saved-title {
+  color: var(--db-text);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.db-ai-study-stage,
+.db-ai-study-saved-title {
+  font-weight: 600;
+}
+
+.db-ai-study-saved {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--db-border);
+  border-radius: 6px;
+  background: var(--db-bg-subtle);
+}
+
+.db-ai-study-saved-text {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.db-ai-study-stale {
+  color: var(--db-accent-deep);
+  font-size: 12px;
+}
+
+.db-ai-study-summary,
+.db-ai-study-deck {
+  border: 1px solid var(--db-border);
+  border-radius: 6px;
+  background: var(--db-bg-subtle);
+}
+
+.db-ai-study-summary {
+  max-height: min(52dvh, 460px);
+  overflow: auto;
+}
+
+/* Squisq's compact deck fills the pane it is given and scrolls its own card,
+   so the frame takes the height the dialog has left and hands all of it
+   over. The minimum is what the deck's toolbar and a few card lines need;
+   the body scrolls instead only when a short window cannot fit even that. */
+.db-ai-study-deck {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-height: min(280px, 50dvh);
+  overflow: hidden;
+}
+
+.db-ai-study-deck > .squisq-flashcards {
+  flex: 1 1 auto;
+  height: auto;
+  min-height: 0;
+}
+
+/* The deck dialog spends its height on the deck. */
+.db-ai-study-dialog.db-dialog--full .db-ai-study-body {
+  padding-block: 12px;
+}
+
+.db-ai-study-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 12px;
+  font-size: 12px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .db-ai-spinner {
     animation: none;
@@ -6675,7 +7187,7 @@ html:has(.db-shell[data-theme='dark'])
   left: 8px;
   right: 8px;
   z-index: 100;
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   border: 1px solid var(--db-border);
   border-radius: 6px;
   box-shadow: 0 4px 12px var(--db-shadow);
@@ -6884,6 +7396,91 @@ button.db-git-file-row:hover {
   margin: 10px 0;
 }
 
+.db-new-document-hint {
+  grid-column: 2;
+  margin: -4px 0 0;
+  color: var(--db-text-muted);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+/* ── Keyboard shortcut sheet ─────────────────────────────────── */
+
+/* Two columns of sections on a desktop screen, so the sheet reads at a
+   glance instead of scrolling; one column on narrow windows. */
+.db-dialog.db-shortcuts-dialog {
+  width: 780px;
+  max-height: min(calc(100dvh - 32px), 780px);
+}
+
+.db-shortcuts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 18px 32px;
+  align-items: start;
+}
+
+.db-shortcuts:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 4px;
+}
+
+.db-shortcuts-heading {
+  margin: 0 0 6px;
+  color: var(--db-text);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.db-shortcuts-list {
+  margin: 0;
+}
+
+.db-shortcuts-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--db-border);
+}
+
+.db-shortcuts-action {
+  color: var(--db-text-secondary);
+  font-size: 13px;
+}
+
+.db-shortcuts-keys {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 4px;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.db-shortcuts-or {
+  color: var(--db-text-muted);
+  font-size: 12px;
+}
+
+.db-shortcuts-chord kbd {
+  display: inline-block;
+  min-width: 1.6em;
+  margin-left: 2px;
+  padding: 1px 5px;
+  border: 1px solid var(--db-border-strong);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  background: var(--db-bg-subtle);
+  color: var(--db-text);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: center;
+}
+
 .db-git-form-error,
 .db-export-error {
   margin: 8px 0 0;
@@ -7046,7 +7643,6 @@ button.db-git-file-row:hover {
     transition: none;
   }
 
-  .db-welcome-gateway,
   .db-save-toast {
     animation: none;
   }
@@ -7249,10 +7845,12 @@ button.db-git-file-row:hover {
     -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. */
+  /* Folder and empty states do not render Squisq's toolbar, and the first-run
+     welcome screen covers it. 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 {
+  .db-shell .db-folder-view::before,
+  .db-shell .db-welcome-gateway::before {
     content: '';
     position: absolute;
     top: 0;
@@ -7267,6 +7865,11 @@ button.db-git-file-row:hover {
     box-sizing: border-box;
     padding-top: calc(24px + var(--db-wco-titlebar-height));
   }
+
+  /* Clear the caption buttons at the top right. */
+  .db-shell .db-welcome-gateway-dismiss {
+    top: calc(var(--db-wco-titlebar-height) + 8px);
+  }
 }
 
 /* Transcript review shares the shell's dialog and theme tokens. */
@@ -7419,6 +8022,42 @@ button.db-git-file-row:hover {
   color: var(--db-text-muted);
   overflow-wrap: anywhere;
 }
+.db-presentation-beat-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-width: 100%;
+}
+/* Marks the slide a request is open for, then every slide with AI wording. */
+.db-presentation-beats small.db-presentation-beat-ai {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  background: var(--db-accent-soft-12);
+  color: var(--db-accent-deep);
+}
+.db-presentation-beat-ai .db-ai-spinner {
+  width: 10px;
+  height: 10px;
+  flex-basis: 10px;
+}
+/* While slides are being suggested, this takes the Suggest button's place in
+   the footer, with Stop beside it, so progress sits where the action started. */
+.db-presentation-progress {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+  min-height: var(--db-target-min);
+  color: var(--db-text-secondary);
+  font: 600 12px/1.2 var(--db-ui-font);
+}
+.db-presentation-progress progress {
+  width: 120px;
+  height: 6px;
+  accent-color: var(--db-accent);
+}
 .db-presentation label.db-presentation-toggle {
   display: flex;
   flex-direction: row;