@bendyline/docblocks-react 2.7.0 → 2.7.2

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);
@@ -2297,7 +2376,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 +2393,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;
 }
@@ -2329,6 +2409,12 @@ body.db-resizing-sidebar * {
   line-height: 1.5;
 }
 
+/* A status line stays mounted while empty so later changes are announced, but
+   it should not leave a gap. */
+.db-settings-hint:empty {
+  margin: 0;
+}
+
 .db-settings-hint code {
   font-size: 11px;
   background: var(--db-bg-subtle);
@@ -2626,7 +2712,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);
 }
@@ -2898,8 +2984,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 {
@@ -3127,7 +3213,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);
@@ -3549,6 +3635,12 @@ body.db-resizing-sidebar * {
   background: rgba(255, 255, 255, 0.04);
 }
 
+/* Squisq also assigns this token directly on its dark toolbar. Bind it at
+   that boundary so readable heading glyphs never inherit placeholder ink. */
+.db-shell[data-theme] .squisq-editor-shell .squisq-toolbar {
+  --squisq-toolbar-icon: var(--db-text-muted);
+}
+
 .db-shell[data-theme='dark'] .squisq-toolbar-view-tabs {
   background: var(--db-editor-canvas);
 }
@@ -3586,6 +3678,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. */
@@ -3743,31 +3836,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);
@@ -3780,6 +3872,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
@@ -3944,7 +4054,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);
 }
@@ -4076,38 +4186,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 ─── */
@@ -4127,64 +4214,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);
@@ -4193,13 +4285,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);
@@ -4213,8 +4306,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;
@@ -4262,8 +4355,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;
@@ -4311,8 +4404,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;
@@ -4360,8 +4453,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;
@@ -4409,8 +4502,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;
@@ -4458,8 +4551,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;
@@ -4508,7 +4601,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),
@@ -4544,7 +4637,7 @@ html:has(.db-shell)
 }
 
 html:has(.db-shell) .squisq-use-mode-menu .squisq-use-mode-menu-summary {
-  color: var(--db-text-muted);
+  color: var(--db-text-secondary);
 }
 
 html:has(.db-shell) .squisq-use-mode-menu .squisq-use-mode-menu-check {
@@ -4619,7 +4712,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);
@@ -4642,12 +4735,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);
 }
@@ -4708,7 +4801,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);
@@ -5271,20 +5364,19 @@ 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 {
-  background: var(--db-accent-tint-strong);
+  --squisq-text-muted: var(--db-text-secondary);
+  background: var(--db-bg-subtle);
   border-top-color: var(--db-border-strong);
 }
 
-/* Status bar "✓ OK" indicator — squisq paints this in saturated emerald
-   (#059669 light, #34d399 dark). Re-tone to the sage accent so the
-   status indicator harmonizes with the rest of the chrome. */
+/* The stronger accent keeps small status text readable on the tinted bar. */
 .db-shell .squisq-status-ok {
-  color: var(--db-accent);
+  color: var(--db-accent-hover);
 }
 
 .db-shell[data-theme='dark'] .squisq-status-ok {
@@ -5319,48 +5411,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);
@@ -5368,16 +5461,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);
@@ -5385,66 +5476,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);
 }
 
@@ -5528,7 +5617,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);
 }
@@ -5567,7 +5656,7 @@ html:has(.db-shell[data-theme='dark'])
   gap: 12px;
   max-width: min(640px, calc(100% - 32px));
   padding: 10px 10px 10px 16px;
-  background: var(--db-bg);
+  background: var(--db-bg-raised);
   border: 1px solid var(--db-border-strong);
   border-radius: 10px;
   box-shadow: 0 10px 32px var(--db-shadow);
@@ -6218,7 +6307,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);
 }
@@ -6241,7 +6330,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 {
@@ -6664,7 +6753,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);
@@ -6873,6 +6962,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;
@@ -7408,6 +7582,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;