@ingcreators/annot-core 0.1.0

package/styles/editor.css

@@ -0,0 +1,1912 @@
+/* ingcreators brand theme — design tokens.
+ *
+ * The two `:root` blocks below define the dark (default) and light
+ * palettes. Tokens are grouped into five semantic sections in the
+ * SAME ORDER in both blocks so a side-by-side diff between palettes
+ * stays readable. Adding a new token? Pick the section that matches
+ * its USE, not its colour family. Adding a new section? Reflect it
+ * in `docs/design-system.md` and in `ThemeTokenName` in
+ * `packages/editor/src/theme-overrides.ts` (the symmetry test in
+ * `theme-overrides.test.ts` fails the build if you forget).
+ *
+ * Contrast targets (WCAG 2.1 AA):
+ *   text-primary on bg-primary: ≥ 7:1 (AAA)
+ *   text-secondary on bg-primary: ≥ 4.5:1 (AA)
+ *   text-muted on bg-primary / bg-secondary: ≥ 4.5:1 (AA)
+ *   accent (interactive) on bg-primary: ≥ 4.5:1
+ *   borders: ≥ 3:1 for non-text UI
+ *   focus ring: ≥ 3:1 and ≥ 2px thick
+ *
+ * See `docs/design-system.md` for the full token reference and
+ * `docs/plans/design-system-foundations.md` for the roadmap (the
+ * `--annot-*` Phase 2 namespace migration is what these grouping
+ * comments anticipate).
+ */
+
+/* Dark theme (default) ----------------------------------------- */
+:root {
+  /* === Surface — page / panel backdrops + chromeless decoration === */
+  --annot-bg-primary: #0f1730;
+  --annot-bg-secondary: #0b1020;
+  --annot-bg-panel: #121933;
+  --annot-bg-panel-deep: #0f1730;
+  --annot-border-color: rgba(255, 255, 255, 0.22); /* bumped from 0.08 for ≥3:1 on interactive */
+  --annot-border-subtle: rgba(255, 255, 255, 0.08); /* keeps old value for decorative dividers */
+  --annot-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
+
+  /* === Content — foreground text + reading primitives === */
+  --annot-text-primary: #eef2ff; /* ~18:1 on bg-primary (AAA) */
+  --annot-text-secondary: #b7c0e0; /* ~10:1 on bg-primary (AAA) */
+  --annot-text-muted: #9097b8; /* ~6.2:1 on bg-primary (AA) — was 5.3:1 */
+  --annot-preview-line: #b7c0e0;
+
+  /* === Accent — brand colour, active highlight, focus indicator === */
+  --annot-accent: #7c9cff; /* ~7.5:1 on bg-primary (AAA) */
+  --annot-accent-2: #7ef0c5;
+  --annot-accent-bg: rgba(124, 156, 255, 0.18);
+  --annot-accent-hover: rgba(124, 156, 255, 0.26);
+  --annot-active-bg: rgba(124, 156, 255, 0.18);
+  --annot-active-border: #7c9cff;
+  --annot-chip-bg: rgba(124, 156, 255, 0.14);
+  --annot-focus-ring: #7ef0c5; /* accent-2 green contrasts against blue accent for clarity */
+
+  /* === Interaction — pointer + form states === */
+  --annot-hover-bg: rgba(255, 255, 255, 0.08);
+  --annot-hover-border: rgba(255, 255, 255, 0.22);
+  --annot-choice-bg: transparent;
+  --annot-choice-hover: rgba(124, 156, 255, 0.1);
+  --annot-choice-active: rgba(124, 156, 255, 0.18);
+  --annot-input-bg: rgba(255, 255, 255, 0.06);
+  --annot-input-border: rgba(255, 255, 255, 0.22); /* ≥3:1 for form borders */
+
+  /* === Canvas — editor backdrop + transparency-grid checkerboard === */
+  --annot-canvas-bg: #0b1020;
+  --annot-canvas-check: #121933;
+}
+
+/* Light theme -------------------------------------------------- */
+:root.light {
+  /* === Surface === */
+  --annot-bg-primary: #f5f7ff;
+  --annot-bg-secondary: #ffffff;
+  --annot-bg-panel: #ffffff;
+  --annot-bg-panel-deep: #fafbff;
+  --annot-border-color: #bfc6de; /* ~3:1 against bg-primary for visible UI boundaries */
+  --annot-border-subtle: #d8ddef; /* fainter dividers */
+  --annot-shadow: rgba(0, 0, 0, 0.08);
+
+  /* === Content === */
+  --annot-text-primary: #0b1020; /* ~16:1 on bg-primary (AAA) */
+  --annot-text-secondary: #3a4568; /* ~8:1 on bg-primary (AAA) — was #4a5580 (~6:1) */
+  --annot-text-muted: #616984; /* ~4.6:1 on bg-primary (AA) — was #8890b0 (~3.2:1 FAIL) */
+  --annot-preview-line: #2a3050;
+
+  /* === Accent === */
+  --annot-accent: #3456c9; /* ~6.3:1 on bg-primary (AA+) — was #5b7ee5 (~4.2:1 marginal) */
+  --annot-accent-2: #188a5c; /* ~5.2:1 for secondary accent */
+  --annot-accent-bg: #edf1ff;
+  --annot-accent-hover: #dce4ff;
+  --annot-active-bg: #dce4ff;
+  --annot-active-border: #3456c9;
+  --annot-chip-bg: #edf1ff;
+  --annot-focus-ring: #3456c9;
+
+  /* === Interaction === */
+  --annot-hover-bg: #eef1fa;
+  --annot-hover-border: #8893b8;
+  --annot-choice-bg: transparent;
+  --annot-choice-hover: #eef1fa;
+  --annot-choice-active: #dce4ff;
+  --annot-input-bg: #ffffff;
+  --annot-input-border: #8893b8;
+
+  /* === Canvas === */
+  --annot-canvas-bg: #e8ecf5;
+  --annot-canvas-check: #dde2ef;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--annot-bg-primary, #2a2a2a);
+  color: var(--annot-text-primary, #e0e0e0);
+}
+
+#canvas-container {
+  position: absolute;
+  top: 48px;
+  left: 0;
+  right: 0;
+  bottom: 28px;
+  overflow: auto;
+  background: var(--annot-canvas-bg);
+  background-image:
+    linear-gradient(45deg, var(--annot-canvas-check) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--annot-canvas-check) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--annot-canvas-check) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--annot-canvas-check) 75%);
+  background-size: 20px 20px;
+  background-position:
+    0 0,
+    0 10px,
+    10px -10px,
+    -10px 0;
+}
+
+/* Editor SVG root.
+ *
+ * Two selectors — id `#svg-root` and attribute `[data-annot-shell-root]` —
+ * resolve to the same SVG element across hosts. The PWA + Tauri desktop
+ * ship a pre-baked `<svg id="svg-root">` in their index.html so first-
+ * render CSS hits the styled element before JS boots; the VSCode webview
+ * (and any future host that doesn't pre-bake the SVG) lets `EditorShell`
+ * create an anonymous `<svg data-annot-shell-root="1">` inside its
+ * container. Both surfaces match the same rules so editor styling stays
+ * consistent regardless of how the SVG was provisioned. */
+#svg-root,
+[data-annot-shell-root] {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+  background: #fff;
+  cursor: default;
+  display: block;
+  margin: 20px auto;
+  /* SVG `<text>` is selectable by default. During a drag — especially
+     when smart-guide overlays appear and the cursor crosses an
+     annotation's text — the browser would otherwise interpret the
+     pointer travel as a text-selection range and paint the blue
+     highlight on the just-touched run. The contentEditable text-edit
+     overlay opts back in via its own inline `user-select: text`. */
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* The contentEditable overlay lives inside a `<foreignObject>` —
+   bring text selection back so the user can mark / replace runs
+   while editing. */
+#svg-root foreignObject [contenteditable="true"],
+[data-annot-shell-root] foreignObject [contenteditable="true"] {
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+#statusbar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 28px;
+  background: var(--annot-bg-panel, #1e1e1e);
+  border-top: 1px solid var(--annot-border-color, #333);
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 16px;
+  font-size: 12px;
+  color: #888;
+}
+
+/* Save toast notification */
+.save-toast {
+  position: fixed;
+  bottom: 48px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: var(--annot-accent, #00d4ff);
+  color: #000;
+  padding: 6px 24px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  opacity: 0;
+  transition:
+    opacity 0.3s,
+    transform 0.3s;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.save-toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* ---- Tag editor ---- */
+
+.tag-editor {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tag-chips {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  flex-wrap: wrap;
+}
+
+.tag-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  background: var(--annot-chip-bg, #16213e);
+  color: var(--annot-text-primary);
+  font-size: 11px;
+  white-space: nowrap;
+  border: 1px solid var(--annot-border-color);
+}
+
+.tag-chip-label {
+  pointer-events: none;
+}
+
+.tag-chip-delete {
+  border: none;
+  background: none;
+  color: var(--annot-text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 0 1px;
+  line-height: 1;
+}
+
+.tag-chip-delete:hover {
+  color: #e44;
+}
+
+.tag-add-btn {
+  border: 1px dashed var(--annot-border-color);
+  background: transparent;
+  color: var(--annot-text-muted);
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 10px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.tag-add-btn:hover {
+  border-color: var(--annot-accent);
+  color: var(--annot-accent);
+}
+
+.tag-input-row {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  display: flex;
+  gap: 4px;
+  background: var(--annot-bg-panel-deep, #1e1e2e);
+  border: 1px solid var(--annot-border-color);
+  border-radius: 6px;
+  padding: 6px 8px;
+  box-shadow: 0 -4px 12px var(--annot-shadow);
+  z-index: 200;
+}
+
+.tag-input {
+  height: 24px;
+  border: 1px solid var(--annot-input-border, #444);
+  border-radius: 4px;
+  background: var(--annot-input-bg, #2a2a2a);
+  color: var(--annot-text-primary);
+  font-size: 12px;
+  padding: 0 6px;
+  outline: none;
+}
+
+.tag-input-key {
+  width: 80px;
+}
+
+.tag-input-value {
+  width: 120px;
+}
+
+.tag-input:focus {
+  border-color: var(--annot-accent);
+}
+
+.tag-ok-btn,
+.tag-cancel-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tag-ok-btn {
+  background: var(--annot-accent);
+  color: #000;
+}
+
+.tag-ok-btn:hover {
+  opacity: 0.8;
+}
+
+.tag-cancel-btn {
+  background: transparent;
+  color: var(--annot-text-muted);
+}
+
+.tag-cancel-btn:hover {
+  color: #e44;
+}
+
+/* Tag chips in gallery cards */
+.gallery-tag-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  margin-top: 3px;
+}
+
+.gallery-tag {
+  font-size: 10px;
+  padding: 0 5px;
+  border-radius: 8px;
+  background: var(--annot-chip-bg, #16213e);
+  color: var(--annot-text-secondary);
+  border: 1px solid var(--annot-border-color);
+  white-space: nowrap;
+}
+
+#statusbar span {
+  white-space: nowrap;
+}
+
+/* Zoom controls */
+#zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--annot-input-bg, #2a2a2a);
+  border: 1px solid var(--annot-border-color, #444);
+  border-radius: 4px;
+  padding: 0 2px;
+}
+
+.zoom-btn {
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  color: var(--annot-text-secondary, #888);
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+}
+
+.zoom-btn:hover {
+  background: var(--annot-hover-bg, #333);
+  color: var(--annot-accent, #00d4ff);
+}
+
+.zoom-label {
+  min-width: 42px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  color: var(--annot-text-primary, #ccc);
+  font-size: 11px;
+  cursor: pointer;
+  text-align: center;
+  padding: 0 4px;
+}
+
+.zoom-label:hover {
+  color: var(--annot-accent, #00d4ff);
+}
+
+.zoom-select-wrap {
+  position: relative;
+}
+
+.zoom-menu {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 4px;
+  background: var(--annot-bg-panel-deep, #1e1e2e);
+  border: 1px solid var(--annot-border-color, #444);
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 -4px 16px var(--annot-shadow, rgba(0, 0, 0, 0.4));
+  z-index: 200;
+  min-width: 90px;
+}
+
+.zoom-menu-item {
+  display: block;
+  width: 100%;
+  padding: 6px 14px;
+  border: none;
+  background: transparent;
+  color: var(--annot-text-primary, #ccc);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.zoom-menu-item:hover {
+  background: var(--annot-choice-hover, #2a2a40);
+  color: var(--annot-accent, #00d4ff);
+}
+
+.zoom-menu-item.active {
+  color: var(--annot-accent, #00d4ff);
+  font-weight: bold;
+}
+
+.zoom-menu-sep {
+  height: 1px;
+  background: var(--annot-border-color, #444);
+  margin: 2px 0;
+}
+
+/* ---- Gallery toolbar ---- */
+
+.gallery-toolbar-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--annot-accent);
+  padding: 0 4px;
+  white-space: nowrap;
+}
+
+.gallery-toolbar-search {
+  flex: 1;
+  max-width: 360px;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--annot-border-color);
+  border-radius: 6px;
+  background: var(--annot-input-bg);
+  color: var(--annot-text-primary);
+  font-size: 13px;
+  outline: none;
+}
+
+.gallery-toolbar-search:focus {
+  border-color: var(--annot-accent);
+}
+
+/* ---- File details drawer ----
+ *
+ * Right-side slide-in panel that consolidates file metadata and full tag
+ * management. Non-modal (canvas stays interactive outside the drawer) and
+ * pinned below editor-header + toolbar and above the statusbar.
+ */
+.file-details-backdrop {
+  position: absolute;
+  top: 48px;
+  right: 0;
+  bottom: 28px;
+  left: 0;
+  background: rgba(0, 0, 0, 0);
+  pointer-events: none;
+  transition: background 0.2s ease-out;
+  z-index: 19;
+}
+.file-details-backdrop.open {
+  background: rgba(0, 0, 0, 0.2);
+  pointer-events: auto;
+}
+
+.file-details-drawer {
+  position: absolute;
+  top: 48px;
+  right: 0;
+  bottom: 28px;
+  width: 360px;
+  max-width: 80vw;
+  background: var(--annot-bg-panel);
+  border-left: 1px solid var(--annot-border-color);
+  box-shadow: -4px 0 28px rgba(0, 0, 0, 0.35);
+  transform: translateX(calc(100% + 28px)); /* include shadow in off-screen */
+  transition: transform 0.22s ease-out;
+  z-index: 20;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+.file-details-drawer.open {
+  transform: translateX(0);
+}
+
+.file-details-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--annot-border-color);
+  flex-shrink: 0;
+}
+.file-details-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--annot-text-primary);
+}
+.file-details-close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: var(--annot-text-secondary);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.file-details-close:hover {
+  background: var(--annot-hover-bg);
+  color: var(--annot-text-primary);
+}
+
+.file-details-section {
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--annot-border-subtle);
+}
+.file-details-section:last-child {
+  border-bottom: none;
+}
+.file-details-section-title {
+  margin: 0 0 10px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--annot-text-muted);
+}
+
+.file-details-row {
+  display: grid;
+  grid-template-columns: 92px 1fr;
+  gap: 12px;
+  padding: 5px 0;
+  font-size: 13px;
+  line-height: 1.45;
+}
+.file-details-row-label {
+  color: var(--annot-text-muted);
+}
+.file-details-row-value {
+  color: var(--annot-text-primary);
+  word-break: break-word;
+  min-width: 0;
+}
+.file-details-row-value.mono {
+  font-family:
+    SF Mono,
+    Menlo,
+    Consolas,
+    monospace;
+  font-size: 12px;
+}
+.file-details-row-value.selectable {
+  user-select: text;
+}
+a.file-details-row-value {
+  color: var(--annot-accent);
+  text-decoration: none;
+}
+a.file-details-row-value:hover {
+  text-decoration: underline;
+}
+
+.file-details-tags-editor {
+  /* TagEditor renders its own layout; this wrapper just sizes it. */
+  min-height: 32px;
+}
+
+/* Author avatar inside the Last commit section. Rendered inline with
+ * the author name so the row height stays consistent with the other
+ * metadata rows. */
+.file-details-avatar {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  margin-right: 6px;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+/* Abbreviated commit SHA shown alongside the message. Monospace so it
+ * reads as a git ref rather than prose. */
+.file-details-sha {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: var(--annot-text-secondary);
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--annot-input-bg, rgba(255, 255, 255, 0.04));
+}
+
+/* External-link section ("View on GitHub", etc). One link per row,
+ * icon + label, styled like a prominent action rather than a value. */
+.file-details-link-row {
+  display: block;
+}
+.file-details-external-link,
+.file-details-external-link:visited {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--annot-accent);
+  text-decoration: none;
+  font-size: 13px;
+  padding: 4px 0;
+}
+.file-details-external-link:hover {
+  text-decoration: underline;
+}
+.file-details-external-link annot-icon {
+  font-size: 16px;
+}
+
+/* Anchors inside a row value (e.g. the commit-message link in the
+ * Last commit section). Override the browser's default :visited
+ * color — on a dark panel it drops to a near-black purple that the
+ * user reported as unreadable. Keeping the accent color across
+ * states matches how `a.file-details-row-value` handles the
+ * top-level Source link. */
+.file-details-row-value a,
+.file-details-row-value a:visited {
+  color: var(--annot-accent);
+  text-decoration: underline;
+}
+.file-details-row-value a:hover {
+  opacity: 0.85;
+}
+
+/* Inline rename affordance on the Name row. The input occupies the
+ * same visual slot as a read-only span value — NO border or padding
+ * offset — so the text baseline and left edge line up perfectly with
+ * the "Location", "Dimensions", etc. rows below. Only a subtle box-
+ * shadow hover / focus state hints that the field is editable.
+ * Matches the Finder / macOS settings-panel pattern where values
+ * inline-edit without visible field chrome. */
+.file-details-name-wrap {
+  min-width: 0;
+}
+.file-details-name-input {
+  display: block;
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--annot-text-primary);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.45;
+  padding: 0;
+  margin: 0;
+  border-radius: 3px;
+  transition:
+    background 0.15s,
+    box-shadow 0.15s;
+  min-width: 0;
+  text-overflow: ellipsis;
+}
+.file-details-name-input:hover:not(:focus) {
+  background: var(--annot-hover-bg);
+  box-shadow: inset 0 -1px 0 var(--annot-border-subtle);
+}
+.file-details-name-input:focus {
+  background: var(--annot-input-bg, rgba(255, 255, 255, 0.04));
+  box-shadow: inset 0 0 0 1px var(--annot-accent);
+  text-overflow: clip;
+}
+.file-details-name-input:disabled {
+  opacity: 0.55;
+  cursor: wait;
+}
+
+.file-details-name-error {
+  color: var(--danger, #ff7070);
+  font-size: 11px;
+  line-height: 1.3;
+  margin-top: 4px;
+  min-height: 0; /* collapses when empty */
+}
+.file-details-name-error:empty {
+  display: none;
+}
+
+/* ---- Editor header ----
+ *
+ * #editor-header sits above #toolbar in editor mode and carries the
+ * per-file context (brand, breadcrumb + filename, save status, help,
+ * theme). It is hidden by default and revealed via body.editor-mode
+ * so that gallery mode keeps its single-row top (brand + search + …).
+ *
+ * When editor-header is visible, #toolbar is pushed down by 48px and
+ * #canvas-container by another 48px so both rows stay visible.
+ */
+#editor-header {
+  display: none;
+}
+/* Editor header — compact single-row layout, 48px:
+ *
+ *   [A]  Device › test › image-1234.png  ⓘ              [?] [☀]
+ *
+ * Industry-standard pattern used by Google Drive, Finder, VS Code, etc.
+ * The filename is the final breadcrumb segment (styled bold + active),
+ * so path and filename share one coherent unit. Tags moved to the
+ * file-details drawer (opened via ⓘ), leaving the header free for
+ * navigation + a pair of global actions.
+ */
+body.editor-mode #editor-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 0 14px;
+  gap: 10px;
+  /* One level deeper than the toolbar (--bg-panel) so the header
+   * reads as page-level context and the toolbar as the elevated
+   * "action surface". Same palette in both themes (dark: #0f1730
+   * vs #121933; light: #fafbff vs #ffffff) — subtle, just enough
+   * to establish hierarchy without adding visual noise. */
+  background: var(--annot-bg-panel-deep);
+  border-bottom: 1px solid var(--annot-border-color);
+  z-index: 11;
+  /* `overflow: visible` so the custom CSS tooltip on header buttons
+   * (positioned at `bottom: -40px`) can extend below the 48px header
+   * without being clipped. Long breadcrumb paths are already
+   * controlled by the `.editor-header-path` container's own
+   * `overflow: hidden` + per-segment `text-overflow: ellipsis`, so
+   * dropping the parent's clip has no effect on the breadcrumb
+   * layout. */
+  overflow: visible;
+}
+
+.editor-header-brand {
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: transparent;
+  padding: 0;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+.editor-header-brand:hover {
+  background: var(--annot-hover-bg);
+}
+.editor-header-brand:focus-visible {
+  outline: 2px solid var(--annot-accent);
+  outline-offset: 2px;
+}
+
+/* Breadcrumb as full path + filename (the last, bold, non-clickable
+ * "active" segment).
+ *
+ * Flex-shrink priorities (from least important → most important):
+ *   ancestor segments (Device, test, …) : flex-shrink: 1  → shrink first
+ *   filename                             : flex-shrink: 0  → stays visible
+ *   info button                          : flex-shrink: 0  → stays visible
+ *
+ * Result: when space is tight, only the ancestor path segments ellipsize.
+ * The filename and info button remain fully visible. When space is
+ * abundant (as in the usual case), filename renders at natural width
+ * with no artificial max-width cap.
+ */
+.editor-header-path {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+}
+.editor-header-path .breadcrumb-item {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
+}
+.editor-header-path .breadcrumb-filename {
+  flex-shrink: 0;
+  font-weight: 600;
+  color: var(--annot-text-primary);
+}
+.editor-header-path .breadcrumb-filename:hover {
+  background: none;
+  color: var(--annot-text-primary);
+  cursor: default;
+}
+.editor-header-path .editor-header-info-btn {
+  flex-shrink: 0;
+}
+
+/* File actions cluster in the editor header right side (Open / Copy /
+ * Save ▼). Reuses .header-info-btn for baseline styling so these
+ * buttons match the help + theme toggle next to them. Grouped in their
+ * own container so there's subtle spacing between "file actions" and
+ * "global actions" (help, theme). */
+.editor-header-file-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-right: 4px;
+  padding-right: 4px;
+  border-right: 1px solid var(--annot-border-subtle);
+  flex-shrink: 0;
+}
+/* The header Save dropdown arrow needs its own layout — the shared
+ * .tool-dropdown-arrow in toolbar.css is absolutely positioned below a
+ * tool icon (vertical-stack case), which doesn't fit horizontal-header
+ * placement. Reset it and let flex lay it out next to the save icon. */
+.header-save-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+}
+.header-save-wrap .tool-dropdown-arrow {
+  position: static;
+  transform: none;
+  width: 14px;
+  height: 28px;
+  background: transparent;
+  color: var(--annot-text-muted);
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: -4px;
+}
+.header-save-wrap .tool-dropdown-arrow:hover {
+  color: var(--annot-accent);
+  background: var(--annot-hover-bg);
+  border-radius: 4px;
+}
+
+/* Inline rename input that replaces the filename span on double-click.
+ * Styled to match the filename's visual weight (same font-weight,
+ * size, line-height) so swapping in/out of edit mode doesn't shift
+ * the baseline or the row height. */
+.breadcrumb-filename-input {
+  flex-shrink: 0;
+  min-width: 160px;
+  max-width: 420px;
+  font: inherit;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--annot-text-primary);
+  background: var(--annot-input-bg, rgba(255, 255, 255, 0.04));
+  border: 1px solid var(--annot-accent);
+  border-radius: 4px;
+  padding: 1px 6px;
+  outline: none;
+}
+.breadcrumb-filename-input:disabled {
+  opacity: 0.55;
+  cursor: wait;
+}
+
+/* In editor mode, the top #toolbar is replaced by the left
+ * #editor-sidebar. Hide the top toolbar entirely and make room for
+ * the sidebar on the left edge of the canvas area.
+ *
+ * Doc mode + split-editor mode follow the same chrome contract:
+ * each surface ships its own dedicated header (`<annot-doc-header>`
+ * / `.split-editor-header`) carrying brand + actions + theme
+ * toggle, so the gallery's search-bearing #toolbar is redundant
+ * and the search box (meaningless on a single-doc editor or a
+ * modal split-editor task) would otherwise leak into chrome. */
+body.editor-mode #toolbar,
+body.annot-doc-mode #toolbar,
+body.split-editor-active #toolbar {
+  display: none;
+}
+#editor-sidebar {
+  display: none; /* hidden by default (gallery mode) */
+}
+body.editor-mode #editor-sidebar {
+  position: absolute;
+  top: 48px;
+  left: 0;
+  bottom: 28px;
+  width: 48px;
+  background: var(--annot-bg-panel);
+  border-right: 1px solid var(--annot-border-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6px 0;
+  gap: 2px;
+  z-index: 10;
+  /* `overflow: visible` (both axes) so tooltips positioned to the
+   * right of a tool button can escape the 48px strip into the canvas
+   * area. Per CSS spec, mixing `overflow-x: visible` with
+   * `overflow-y: auto` causes the browser to promote `visible` to
+   * `auto`, which would re-introduce the clipping. So we stay fully
+   * visible and accept that on extremely short viewports the
+   * bottom-most tools may overflow past the sidebar's visual end.
+   * With 9 tools × ~38 px = ~342 px total + 6 px top padding, the
+   * full stack fits in any viewport ≥ 396 px tall — well below the
+   * ~500 px minimum any modern laptop / tablet provides.
+   *
+   * The old "clip dropdown-arrow bleed" justification no longer
+   * applies: the caret element was removed when the variant badge
+   * took over the flyout-trigger role, and the badge's hit-zone
+   * expansion (::before inset: -6px) stays within the button's
+   * 36 px footprint. */
+  overflow: visible;
+}
+body.editor-mode #canvas-container {
+  top: 48px; /* below editor-header only */
+  left: 48px; /* right of the sidebar */
+}
+
+/* Right property panel — context-aware:
+ *   Tool active (not Select)  → shows tool default properties
+ *   Selection present         → shows selection properties
+ *   Otherwise                 → hidden (body.has-right-panel removed)
+ * Host (app.ts) toggles `body.has-right-panel` to show/hide.
+ */
+#editor-right-panel {
+  display: none;
+}
+body.editor-mode.has-right-panel #editor-right-panel {
+  position: absolute;
+  top: 48px;
+  right: 0;
+  bottom: 28px;
+  width: 280px;
+  background: var(--annot-bg-panel);
+  border-left: 1px solid var(--annot-border-color);
+  display: flex;
+  flex-direction: column;
+  z-index: 10;
+  overflow-y: auto;
+}
+body.editor-mode.has-right-panel #canvas-container {
+  right: 280px; /* leave room for the right panel */
+}
+body.editor-mode.has-right-panel .file-details-drawer,
+body.editor-mode.has-right-panel .file-details-backdrop {
+  /* The details drawer also lives on the right — let it slide over
+   * the property panel so the user can still access file details
+   * while a tool/selection is active. */
+  z-index: 25;
+}
+
+.editor-right-panel-section {
+  /* Tightened from 14 px → 10 px vertical to densify the right
+   * panel for the screenshot-annotation flow (Figma-class
+   * density). Horizontal stays at 16 px so the level-2 column
+   * alignment with `.prop-panel-docked` is preserved. */
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--annot-border-subtle);
+}
+/* Dynamic section title (e.g. "Rectangle" / "Arrow" / "Callout").
+ * Rendered as a readable, sentence-case heading rather than the
+ * older "SECTION" uppercase pill — the title now names the element
+ * the user is editing, so readability matters more than category
+ * emphasis. Sentence case + slightly larger weight makes it read as
+ * "this IS the thing" rather than "a section labeled …". */
+.editor-right-panel-section-title {
+  /* Was 0 0 10px — tightened to 6 px so the section title binds
+   * closer to the first level-2 sub-section header below it. */
+  margin: 0 0 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--annot-text-primary);
+}
+
+/* Actions section — transform / arrange / align / group button
+ * rows (rotate / flip / z-order / align / distribute / group /
+ * ungroup). Shown only when selection is non-empty. Markup
+ * mirrors the Selected card: the section's body wrapper is a
+ * `.prop-panel.prop-panel-docked`, and each sub-group is a
+ * `.pp-section` with a `.pp-section-header` label. That gives
+ * Actions the same level-2 alignment as TYPE / FILL / LINE for
+ * free, no Actions-specific overrides required. The only thing
+ * still needing a custom class is the row container, where the
+ * tight 2 px button gap (vs `.pp-section-body`'s 6 px) is
+ * intentional for icon-button rows. */
+.editor-right-panel-actions-row {
+  display: flex;
+  gap: 2px;
+  /* Indent the action row slightly so it visually hangs off the
+   * `.pp-section-header` above, matching `.pp-section-body`'s 10
+   * px indent in the property panel. */
+  padding-left: 10px;
+}
+.editor-right-panel-actions-row:not(:last-child) {
+  margin-bottom: 0;
+}
+
+/* Action buttons inherit the full 36×36 `.toolbar-btn` size + 20 px
+ * font-size from the sidebar/toolbar rules so Icon weight matches
+ * across surfaces. Panel is 208 px inner after padding; 4 buttons
+ * × 36 + 3 × 2 gap = 150 px, leaving ~58 px margin — comfortably
+ * fits without needing a compact-size override. */
+
+/* Custom-SVG action buttons (flip / z-order) — SVG renders at 22 px
+ * to match the optical weight of the 20 px Material-Symbols glyph
+ * in a 36 px button. `currentColor` inside the SVG picks up the
+ * button's color + hover / active states automatically. */
+.editor-right-panel-actions-row .action-btn-svg > svg {
+  width: 22px;
+  height: 22px;
+}
+
+/* Tooltips on action buttons sit INSIDE the 280 px right panel,
+ * whose `overflow-y: auto` implicitly clips horizontal overflow too.
+ * The default centered tooltip (left:50%, nowrap) extends past the
+ * panel's left/right edges for the EXTREMITY buttons (leftmost
+ * overflows left, rightmost overflows right) and gets clipped.
+ *
+ * Fix: keep the tooltip BELOW (matching the rest of the editor's
+ * tooltip convention — all toolbar buttons drop downward), but
+ * anchor to the INSIDE edge for the first / last buttons of each
+ * row so the bubble always extends INTO the panel rather than out
+ * of it. Middle buttons stay centered as usual. Multi-line wrapping
+ * (`white-space: normal`) keeps the bubble narrow enough to fit the
+ * column width. */
+.editor-right-panel-actions-row .toolbar-btn[data-tooltip]::after {
+  bottom: auto;
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 180px;
+  white-space: normal;
+  text-align: center;
+  line-height: 1.3;
+}
+/* First button: align tooltip's LEFT edge to the button's left edge
+ * so it extends rightward into the panel (never past panel-left). */
+.editor-right-panel-actions-row .toolbar-btn:first-child[data-tooltip]::after {
+  left: 0;
+  right: auto;
+  transform: none;
+  text-align: left;
+}
+/* Last button: mirror — align tooltip's RIGHT edge to the button's
+ * right edge so it extends leftward (never past panel-right). */
+.editor-right-panel-actions-row .toolbar-btn:last-child[data-tooltip]::after {
+  left: auto;
+  right: 0;
+  transform: none;
+  text-align: right;
+}
+
+/* Apply-redactions-to-image button — labeled action surface in the
+ * right-panel's apply-redactions section (`#renderApplyRedactions`
+ * in `right-panel.ts`). Phase 3 of
+ * `_done/redact-burn-into-image.md` initially reused the
+ * `.toolbar-btn` class but that's a 36 × 36 icon-only chrome —
+ * dropping a label inside overflows the box. This is the dedicated
+ * labeled-button rule: full-width row, icon + label, opaque
+ * destructive background so the user recognises it as the
+ * irreversibility-confirming gesture. */
+.annot-apply-redactions-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 36px;
+  padding: 8px 12px;
+  border: 1px solid var(--annot-border-color);
+  border-radius: 8px;
+  background: var(--annot-bg-elevated, var(--annot-bg-panel));
+  color: var(--annot-text-primary);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.1s,
+    border-color 0.1s;
+}
+.annot-apply-redactions-btn:hover:not(:disabled) {
+  background: var(--annot-hover-bg);
+  border-color: var(--annot-hover-border);
+}
+.annot-apply-redactions-btn:focus-visible {
+  outline: 2px solid var(--annot-focus-ring, var(--annot-accent));
+  outline-offset: 2px;
+}
+.annot-apply-redactions-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.annot-apply-redactions-btn > annot-icon {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+.annot-apply-redactions-btn > .annot-apply-redactions-label {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  white-space: normal;
+  /* Allow up to two lines for a graceful long-language wrap; tall
+   * single-line containers (the common case) just stay one line. */
+  line-height: 1.3;
+}
+
+/* Empty-state shown when the panel has no active tool AND no
+ * selection. Keeps the always-visible panel feeling intentional
+ * rather than "broken / blank". */
+.editor-right-panel-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 48px 24px;
+  text-align: center;
+  color: var(--annot-text-muted);
+}
+.editor-right-panel-empty-icon {
+  font-size: 36px;
+  opacity: 0.4;
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 300,
+    "GRAD" 0,
+    "opsz" 40;
+}
+.editor-right-panel-empty-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--annot-text-secondary);
+}
+.editor-right-panel-empty-hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  max-width: 180px;
+}
+
+/* Scratchpad section — always-visible bottom area of the right panel.
+ * Pinned to the bottom by margin-top:auto inside the flex-column
+ * container so tool/selection content fills the top and scratchpad
+ * stays anchored. Top border differentiates it as a distinct area. */
+.editor-right-panel-scratchpad {
+  margin-top: auto;
+  border-top: 1px solid var(--annot-border-color);
+  border-bottom: none;
+  background: var(--annot-bg-panel-deep);
+  flex-shrink: 0;
+}
+
+.scratchpad-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.scratchpad-section-header .editor-right-panel-section-title {
+  margin: 0;
+}
+
+.scratchpad-save-btn {
+  width: 22px;
+  height: 22px;
+  border: 1px solid var(--annot-border-color);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--annot-text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    color 0.15s;
+}
+.scratchpad-save-btn:not(:disabled):hover {
+  background: var(--annot-accent-bg);
+  border-color: var(--annot-accent);
+  color: var(--annot-accent);
+}
+.scratchpad-save-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.scratchpad-save-btn annot-icon {
+  font-size: 16px;
+}
+
+.scratchpad-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
+  gap: 6px;
+}
+
+.scratchpad-item {
+  position: relative;
+  aspect-ratio: 1 / 1;
+  background: var(--annot-canvas-bg, #0b1020);
+  border: 1px solid var(--annot-border-subtle);
+  border-radius: 6px;
+  cursor: pointer;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    border-color 0.15s,
+    transform 0.15s;
+}
+.scratchpad-item:hover {
+  border-color: var(--annot-accent);
+  transform: translateY(-1px);
+}
+/* Armed state — the user clicked this item and the paste tool is
+ * waiting for a canvas click. Stronger accent so the "which item
+ * will land next?" question is answered at a glance. */
+.scratchpad-item.active {
+  border-color: var(--annot-accent);
+  background: var(--annot-accent-bg);
+  box-shadow: 0 0 0 1px var(--annot-accent) inset;
+}
+.scratchpad-item-thumb {
+  max-width: 80%;
+  max-height: 80%;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
+}
+
+.scratchpad-item-delete {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 500,
+    "GRAD" 0,
+    "opsz" 20;
+}
+.scratchpad-item:hover .scratchpad-item-delete {
+  opacity: 1;
+}
+.scratchpad-item-delete:hover {
+  background: var(--danger, #ff7070);
+}
+
+.scratchpad-empty {
+  margin: 0;
+  font-size: 12px;
+  color: var(--annot-text-muted);
+  line-height: 1.5;
+}
+
+/* ---- Save status indicator ----
+ *
+ * Sits between the filename and the right-edge help/theme actions in the
+ * editor header. Reports the save lifecycle without blocking; matches
+ * the Google Docs / Notion convention of a small, muted indicator that
+ * briefly animates while writing.
+ */
+/* Padding matches .breadcrumb-item (2px 6px) so vertical rhythm aligns
+ * with the filename segment it sits next to. Icon kept at 14px to keep
+ * the indicator visually "inline metadata" rather than a chunky chip. */
+.save-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+  flex-shrink: 0; /* stays intact next to the filename */
+  color: var(--annot-text-muted);
+  transition:
+    color 0.15s,
+    background 0.15s;
+}
+.save-status-icon {
+  font-size: 14px;
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 400,
+    "GRAD" 0,
+    "opsz" 20;
+}
+
+/* Saved — neutral, at rest */
+.save-status.save-status-saved {
+  color: var(--annot-text-muted);
+}
+
+/* Edited — slightly brighter than saved, signals "something's queued" */
+.save-status.save-status-pending {
+  color: var(--annot-text-secondary);
+}
+
+/* Saving — accent color + spinning icon */
+.save-status.save-status-saving {
+  color: var(--annot-accent);
+}
+.save-status.save-status-saving .save-status-icon {
+  animation: save-status-spin 1s linear infinite;
+}
+@keyframes save-status-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Error — danger color, stays visible until next save attempt */
+.save-status.save-status-error {
+  color: var(--danger, #ff7070);
+  background: rgba(255, 112, 112, 0.1);
+}
+
+/* The descendant rule `.editor-header-path .editor-header-info-btn`
+ * earlier in the file intentionally has higher specificity — it's a
+ * contextual tweak for buttons inside the breadcrumb path. Keeping
+ * the base class here with a documented suppression is cleaner than
+ * fragmenting the "editor header info button" styling across two
+ * sections just to satisfy the linter. */
+/* biome-ignore lint/style/noDescendingSpecificity: base rule deliberately follows contextual .editor-header-path descendant */
+.editor-header-info-btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: var(--annot-text-muted);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 18px;
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 400,
+    "GRAD" 0,
+    "opsz" 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+.editor-header-info-btn:hover {
+  background: var(--annot-hover-bg);
+  color: var(--annot-accent);
+}
+.editor-header-info-btn:focus-visible {
+  outline: 2px solid var(--annot-accent);
+  outline-offset: 2px;
+}
+
+/* ---- Breadcrumb ---- */
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* Breadcrumb items may be either <button> (clickable ancestors) or
+ * <span> (the non-clickable filename segment). Without the font resets
+ * below, <button> falls back to the UA system font while <span>
+ * inherits Sora — the two have different metrics and the filename
+ * appears visually lower than sibling clickable segments.
+ *
+ * `font: inherit` pulls the parent's full font specification into the
+ * button, then we override the few properties we actually want to pin
+ * (size, weight). Setting `display: inline-flex + align-items: center`
+ * also normalizes vertical alignment between span and button so the
+ * glyph baselines line up across element types.
+ *
+ * Same pattern as `.editor-header-info-btn` above: the descendant
+ * rule `.editor-header-path .breadcrumb-item` earlier in the file
+ * is a contextual override, and the base rule lives here with the
+ * rest of the breadcrumb section. */
+/* biome-ignore lint/style/noDescendingSpecificity: base rule deliberately follows contextual .editor-header-path descendant */
+.breadcrumb-item {
+  font: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.4;
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  background: none;
+  color: var(--annot-text-secondary);
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+.breadcrumb-item:hover {
+  background: var(--annot-hover-bg);
+  color: var(--annot-accent);
+}
+
+.breadcrumb-item.active {
+  color: var(--annot-text-primary);
+  font-weight: 600;
+  cursor: default;
+}
+
+.breadcrumb-item.active:hover {
+  background: none;
+  color: var(--annot-text-primary);
+}
+
+.breadcrumb-sep {
+  color: var(--annot-text-muted);
+  font-size: 16px;
+  user-select: none;
+}
+
+/* ---- Folder cards ---- */
+
+.gallery-folder {
+  border-style: dashed;
+}
+
+.gallery-folder:hover {
+  border-style: solid;
+}
+
+.gallery-folder-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--annot-bg-secondary);
+}
+
+.gallery-folder-name {
+  font-weight: 600;
+}
+
+/* ---- Gallery panel ---- */
+
+/* #gallery-container removed — gallery now renders inside #file-manager > #main-content */
+
+.gallery-panel {
+  /* Block display is required because `.gallery-panel` is now applied
+   * to `<annot-gallery-page>` (a custom element, defaults to inline);
+   * without this the horizontal padding collapses around the block
+   * `.gallery-grid` child and the left/right gutter disappears. */
+  display: block;
+  padding: 16px 24px;
+  /* Fill the available main-content area — let the gallery grid wrap
+   * naturally instead of clamping to a fixed max-width. */
+  margin: 0 auto;
+}
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.gallery-empty {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--annot-text-muted);
+  font-size: 14px;
+}
+
+.gallery-item {
+  border: 1px solid var(--annot-border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--annot-bg-panel);
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    transform 0.15s;
+}
+
+.gallery-item:hover {
+  border-color: var(--annot-accent);
+  transform: translateY(-2px);
+}
+
+.gallery-thumb {
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: #111;
+}
+
+.gallery-thumb img {
+  width: 100%;
+  height: 100%;
+  /* Thumbnails are pre-rendered at 16:9 with letterboxing / top-crop
+   * baked in, so the card just displays them 1:1. `contain` prevents
+   * any further browser-side upscaling and keeps short images crisp. */
+  object-fit: contain;
+  object-position: center;
+  display: block;
+  /* Progressive enhancement: browsers that don't recognise `high-
+   * quality` fall back to `-webkit-optimize-contrast` or the plain
+   * `auto` declaration earlier in the stack. This is a deliberate
+   * cross-browser pattern, not a typo. */
+  /* biome-ignore-start lint/suspicious/noDuplicateProperties: deliberate CSS fallback stack */
+  image-rendering: auto;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: high-quality;
+  /* biome-ignore-end lint/suspicious/noDuplicateProperties: deliberate CSS fallback stack */
+}
+
+/* Document-card fallback when `thumbnailDataUrl` is empty —
+ * Phase 11 of `annot-html-document.md` shipped doc cards but
+ * with no thumb-generation path, so the default `.gallery-thumb`
+ * `background:#111` showed through as a black rectangle. The
+ * `<annot-icon spec="article">` fallback rendered into the top-
+ * left corner without sizing because nothing centered it. The
+ * rules below: center the icon, give it a readable size, swap
+ * the dark background for a friendlier panel-coloured tile so
+ * docs feel like papers / preview tiles rather than missing
+ * media. Documents with image blocks override this via the
+ * pre-rendered `<img>` (sibling `.gallery-thumb img` rule
+ * above). */
+.gallery-document-item .gallery-thumb {
+  background: var(--annot-bg-panel, #2a2a2a);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--annot-border-color, transparent);
+}
+.gallery-document-item .gallery-thumb annot-icon {
+  width: 56px;
+  height: 56px;
+  color: var(--annot-text-secondary, #9ca3af);
+}
+.gallery-document-item .gallery-thumb annot-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.gallery-item-info {
+  padding: 8px 10px;
+  position: relative;
+}
+
+.gallery-item-name {
+  font-size: 12px;
+  color: var(--annot-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 20px;
+}
+
+.gallery-item-meta {
+  font-size: 11px;
+  color: var(--annot-text-muted);
+  margin-top: 2px;
+}
+
+.gallery-item-delete {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(200, 0, 0, 0.6);
+  color: #fff;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+  padding: 0;
+}
+
+.gallery-item:hover .gallery-item-delete {
+  opacity: 1;
+}
+
+.gallery-item-delete:hover {
+  background: rgba(220, 0, 0, 0.9);
+}
+
+/* ---- Selection checkbox ---- */
+
+.gallery-checkbox {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.4);
+  color: #888;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+  z-index: 2;
+}
+
+.gallery-checkbox annot-icon {
+  font-size: 18px;
+}
+
+.gallery-item:hover .gallery-checkbox,
+.gallery-item.selected .gallery-checkbox {
+  opacity: 1;
+}
+
+.gallery-item.selected .gallery-checkbox {
+  background: var(--annot-accent);
+  color: #000;
+}
+
+.gallery-item.selected {
+  border-color: var(--annot-accent);
+  box-shadow: 0 0 0 2px var(--annot-accent);
+}
+
+.gallery-item {
+  position: relative;
+}
+
+/* ---- Selection action bar ---- */
+
+.gallery-action-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.gallery-footer-text {
+  font-size: 12px;
+  color: var(--annot-text-secondary);
+  white-space: nowrap;
+}
+
+.gallery-action-btn {
+  border: 1px solid var(--annot-border-color);
+  background: var(--annot-bg-panel);
+  color: var(--annot-text-primary);
+  font-size: 12px;
+  padding: 2px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.gallery-action-btn:hover {
+  border-color: var(--annot-accent);
+  color: var(--annot-accent);
+}
+
+.gallery-action-danger:hover {
+  border-color: #e44;
+  color: #e44;
+}
+
+/* ---- Folder picker dialog ---- */
+
+.folder-picker-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.folder-picker-dialog {
+  background: var(--annot-bg-panel);
+  border: 1px solid var(--annot-border-color);
+  border-radius: 10px;
+  padding: 16px;
+  min-width: 300px;
+  max-width: 450px;
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.folder-picker-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--annot-text-primary);
+  margin-bottom: 12px;
+}
+
+.folder-picker-list {
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 12px;
+}
+
+.folder-picker-item {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--annot-text-primary);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.folder-picker-item:hover {
+  background: var(--annot-choice-hover);
+  color: var(--annot-accent);
+}
+
+.folder-picker-cancel {
+  align-self: flex-end;
+  border: 1px solid var(--annot-border-color);
+  background: transparent;
+  color: var(--annot-text-secondary);
+  font-size: 13px;
+  padding: 6px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.folder-picker-cancel:hover {
+  border-color: var(--annot-accent);
+  color: var(--annot-accent);
+}
+
+/* =============================================================================
+ * Elements panel — sidebar list of detected DOM elements (button /
+ * link / input / heading / etc.) for a screenshot captured by the
+ * browser extension. Rows show icon + label + sub-type. Hover →
+ * highlight on canvas; click → insert a rectangle annotation.
+ * Section is hidden entirely when the current image has no metadata.
+ * ============================================================================= */
+.editor-right-panel-elements {
+  /* Inherits .editor-right-panel-section padding/border. */
+}
+.editor-right-panel-elements-hint {
+  margin: 0 0 8px 0;
+  font-size: 11px;
+  color: var(--annot-text-muted);
+}
+.editor-right-panel-elements-search {
+  width: 100%;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--annot-border-color);
+  border-radius: 6px;
+  background: var(--annot-bg-panel-deep);
+  color: var(--annot-text-primary);
+  font-size: 12px;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+}
+.editor-right-panel-elements-search:focus {
+  outline: none;
+  border-color: var(--annot-accent);
+}
+.editor-right-panel-elements-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  max-height: 320px;
+  overflow-y: auto;
+  /* Negative margin pulls the list to the section padding edge so
+   * scroll bar doesn't waste horizontal space. */
+  margin: 0 -4px;
+}
+.editor-right-panel-element-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: left;
+  font-size: 12px;
+  color: var(--annot-text-primary);
+  transition: background 0.1s;
+  width: 100%;
+}
+.editor-right-panel-element-row:hover {
+  background: var(--annot-hover-bg);
+}
+.editor-right-panel-element-icon {
+  font-size: 16px;
+  color: var(--annot-text-secondary);
+  flex-shrink: 0;
+}
+.editor-right-panel-element-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.editor-right-panel-element-sub {
+  font-size: 10px;
+  color: var(--annot-text-muted);
+  text-transform: lowercase;
+  flex-shrink: 0;
+}
+.editor-right-panel-elements-empty {
+  padding: 12px 4px;
+  font-size: 11px;
+  color: var(--annot-text-muted);
+  text-align: center;
+}