@jxsuite/studio 2.0.0 → 2.1.0

package/styles/panels.css

@@ -0,0 +1,1701 @@
+/* Jx Studio — panel rails.
+   Load after tokens.css, after shell.css and canvas.css.
+
+   Owns the activity bar, the right-rail panel tabs, the file tree and the
+   layers tree, plus the drag-and-drop chrome that belongs to them: the
+   layers drop indicator, the canvas drop indicator, git diff highlighting
+   and the insertion helper. The two canvas-side drop affordances live here
+   rather than in canvas.css because they are authored inline with the
+   layers drag logic and must keep their original cascade position.
+
+   Also owns the teaching empty-state layout emitted by
+   src/panels/empty-state.ts, which every panel in the shell renders through. */
+
+/* ─── Navigator rail (labelled, grouped by level) ──────── */
+/* 56px, and every button names itself in 11px text under its icon. An icon whose only name is a
+   hover tooltip is not named (spec §12 region ②) — there were thirteen of those. */
+.rail-groups {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
+}
+.rail-group {
+  display: flex;
+  flex-direction: column;
+}
+/* The divider IS the level boundary: PROJECT above, DOCUMENT below. */
+.rail-divider {
+  height: 1px;
+  margin: 6px 10px;
+  background: var(--border);
+}
+.rail-footer {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 6px 0;
+}
+.rail-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  width: 100%;
+  padding: 6px 2px;
+  border: none;
+  border-left: 2px solid transparent;
+  background: none;
+  color: var(--fg-dim);
+  cursor: pointer;
+  opacity: 0.7;
+}
+.rail-item:hover {
+  opacity: 1;
+  background: var(--hover-bg);
+}
+.rail-item.selected {
+  opacity: 1;
+  color: var(--fg);
+  border-left-color: var(--accent);
+}
+.rail-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+.rail-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+}
+.rail-label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--spectrum-font-size-50, 11px);
+  line-height: 1.2;
+}
+.activity-badge {
+  position: absolute;
+  top: 6px;
+  right: 4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: var(--spectrum-corner-radius-200, 8px);
+  background: var(--accent);
+  color: var(--spectrum-white);
+  font-size: 9px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+/* ─── Panel header (title · level) ────────────── */
+/* Every Navigator panel renders under one. Six of eight had no header at all, so nothing on
+   screen said which panel you were in — or, for Packages, which of its two meanings it had. */
+.panel-header {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border);
+}
+.panel-header-title {
+  font-size: var(--spectrum-font-size-50, 11px);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fg);
+}
+.panel-header-level::before {
+  content: "·";
+  margin-right: 6px;
+}
+.panel-header-level {
+  font-size: var(--spectrum-font-size-50, 11px);
+  color: var(--fg-dim);
+}
+.panel-content {
+  min-height: 0;
+}
+
+/* ─── Panel tabs (right: horizontal icon tabs) ── */
+.panel-tabs {
+  border-bottom: 1px solid var(--border);
+}
+.panel-tabs sp-tabs {
+  --mod-tabs-item-horizontal-spacing: 0px;
+  --mod-tabs-start-to-tab-item: 0px;
+  --mod-tabs-color: var(--fg-dim);
+  --mod-tabs-color-selected: var(--fg);
+  --spectrum-tabs-top-to-text: 0px;
+  --spectrum-tabs-bottom-to-text: 0px;
+}
+.panel-tabs sp-tab {
+  padding: 4px 10px;
+  color: var(--fg-dim);
+  opacity: 0.7;
+  min-block-size: unset;
+  block-size: 36px;
+  box-sizing: border-box;
+}
+.panel-tabs sp-tab:hover {
+  opacity: 1;
+}
+.panel-tabs sp-tab[selected] {
+  color: var(--fg);
+  opacity: 1;
+}
+.panel-body {
+  padding: 0;
+}
+
+/* ─── File tree ──────────────────────────────── */
+.files-toolbar {
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border);
+  align-items: center;
+}
+.files-toolbar sp-search {
+  flex: 1;
+  --spectrum-textfield-height: 24px;
+}
+.file-tree {
+  overflow-y: auto;
+}
+/* `block-size` is a CONTRACT, not a look: the tree is windowed (files/files.ts `FILE_ROW_HEIGHT`,
+   ui/virtual-window.ts), and a window can only reserve the right amount of scroll for the rows it
+   did not draw if every row is the same known height. 24px is what the box already computed to —
+   3px + 3px of padding around an 18px line box (12px font × the 1.5 line-height in tokens.css) —
+   so declaring it changes nothing on screen and stops the next padding tweak from silently
+   desynchronising the scrollbar. The renderer measures a real row anyway and believes the
+   measurement over this number. */
+.file-tree-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  block-size: 24px;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--fg);
+  user-select: none;
+}
+.file-tree-item:hover {
+  background: var(--hover-bg);
+}
+/* The language chip. Deliberately declares no `block-size`, no padding and no line-height: the row
+   above is 24px by CONTRACT (see the note there), and a chip that grew the box would desynchronise
+   the window's scroll reservation from `FILE_ROW_HEIGHT`. It only ever shrinks the text. */
+.file-tree-locale {
+  margin-inline-start: auto;
+  flex-shrink: 0;
+  font-size: var(--spectrum-font-size-50, 11px);
+  color: var(--fg-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-inline-size: 6em;
+}
+/* Roving tabindex (src/files/files.ts) moves focus between rows, so the ring is
+   the only thing telling a keyboard user where they are. */
+.file-tree-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+.file-tree-item.selected {
+  background: var(--accent-20);
+}
+.file-tree-item.dragging {
+  opacity: 0.4;
+}
+.file-tree-item.drag-over {
+  background: var(--accent-20);
+  outline: 1px solid var(--accent);
+  outline-offset: -1px;
+}
+.file-tree.drag-over-root {
+  background: var(--hover-bg);
+}
+.file-tree-toggle {
+  width: 14px;
+  text-align: center;
+  font-size: 8px;
+  color: var(--fg-dim);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.file-tree-toggle.empty {
+  visibility: hidden;
+}
+.file-tree-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.file-tree-icon sp-icon-folder,
+.file-tree-icon sp-icon-folder-open,
+.file-tree-icon sp-icon-document,
+.file-tree-icon sp-icon-file-code,
+.file-tree-icon sp-icon-file-txt,
+.file-tree-icon sp-icon-file-css,
+.file-tree-icon sp-icon-image {
+  --spectrum-icon-size-100: 16px;
+}
+.file-tree-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.file-tree-empty {
+  padding: 24px;
+  text-align: center;
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-75, 12px);
+}
+.project-header {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border);
+  gap: 6px;
+}
+.project-name {
+  font-size: var(--spectrum-font-size-75, 12px);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ─── Layers ─────────────────────────────────── */
+/* The Outline used to scroll sideways inside a 240px column: `overflow-y: auto` on #left-panel
+   computes overflow-x to `auto` too, and a row's intrinsic width was indent (16px × unbounded
+   depth) + badge (a full custom-element tag) + label + five in-flow action buttons. All four are
+   bounded now — the indent caps at 6 levels (layers-panel.ts `indentWidth`), the badge truncates,
+   the label shrinks, and the action cluster is positioned out of flow. */
+/* The fixed `block-size` is the same contract the file tree carries, for the same reason
+   (panels/layers-panel.ts `OUTLINE_ROW_HEIGHT`): the Outline is windowed, and a window reserves
+   scroll height for rows it did not draw. 24px is what an Outline row already computed to — the
+   18px line box of a 12px label, plus 3px of padding either side — and it makes the chevron rows
+   and the text-node rows agree, which they only did by coincidence before. */
+.layer-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  block-size: 24px;
+  box-sizing: border-box;
+  cursor: grab;
+  white-space: nowrap;
+  user-select: none;
+  border-left: 2px solid transparent;
+  transition: transform 150ms ease;
+}
+.layer-row:hover {
+  background: var(--hover-bg);
+}
+.layer-row.selected {
+  background: var(--accent-20);
+  border-left-color: var(--accent);
+}
+.layer-row:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+.layer-row.dragging {
+  opacity: 0.4;
+  transition: none;
+}
+.layer-row.drop-target {
+  background: var(--accent-15);
+  outline: 1px dashed var(--accent);
+  outline-offset: -1px;
+}
+.layer-indent {
+  flex-shrink: 0;
+}
+/* Row actions exist for the SELECTED row and the hovered one, and for no other row — five
+   sp-action-buttons per row is ~5 custom elements with shadow roots per visible row, which is what
+   made a large document's layer tree slow to render, and a row that always shows its verbs has no
+   way to show which row is being acted on. This is a DOM rule, not a `display:none` one
+   (layers-panel.ts `mountHoverActions`): a hidden custom element still costs everything but the
+   pixels. On every other row the span below is empty, so it draws nothing. The row itself stays
+   fully draggable (dnd's canDrag excludes only .layer-actions), so reordering is unaffected.
+
+   The cluster is absolutely positioned so it never contributes to the row's intrinsic width: in a
+   240px column, four in-flow buttons plus an indent is exactly what pushed the tree sideways. */
+.layer-actions {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: var(--spectrum-corner-radius-75, 2px);
+}
+.layer-actions:not(:empty) {
+  padding-left: 8px;
+  background: var(--bg-panel);
+  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.4);
+}
+.layer-row:hover .layer-drag-handle,
+.layer-row.selected .layer-drag-handle,
+.layer-row:focus-within .layer-drag-handle {
+  display: inline-block;
+}
+/* Renaming owns the row: the verbs would sit on top of the input's right edge. */
+.layer-row:has(.layer-title-input) .layer-actions {
+  display: none;
+}
+/* The grab affordance is a plain span, so it stays on every row (revealed on hover) while the
+   Spectrum action buttons are built for the selected row only. It sits OUTSIDE .layer-actions
+   so dnd's canDrag no longer refuses drags that start on it. */
+.layer-drag-handle {
+  display: none;
+  color: var(--fg-dim);
+  opacity: 0.6;
+  font-size: var(--spectrum-font-size-50, 11px);
+  cursor: grab;
+  padding: 0 4px 0 0;
+}
+.layer-toggle {
+  width: 14px;
+  text-align: center;
+  font-size: 9px;
+  color: var(--fg-dim);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.layer-tag {
+  padding: 0 4px;
+  font-size: 10px;
+  border-radius: var(--spectrum-corner-radius-75, 2px);
+  color: var(--accent-fg);
+  background: var(--tag);
+  flex-shrink: 0;
+  /* A long custom-element tag is a badge, not a paragraph: it truncates rather than pushing the
+     label out of a 240px column. */
+  max-width: 12ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.layer-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 24px;
+  flex: 1;
+}
+/* Stretches into the row's content box rather than setting its own height: the row is a fixed 24px
+   now, and an input taller than that would push its borders through the rows either side. */
+.layer-title-input {
+  width: 100%;
+  align-self: stretch;
+  box-sizing: border-box;
+  background: var(--bg);
+  color: inherit;
+  border: 1px solid var(--accent, #3b82f6);
+  border-radius: var(--spectrum-corner-radius-75, 2px);
+  font: inherit;
+  font-size: inherit;
+  padding: 0 2px;
+}
+.layer-title-input:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -1px;
+}
+.layer-dot {
+  font-size: 9px;
+  flex-shrink: 0;
+}
+/* One rule for every registry-rendered row verb; `.layer-delete` is the `destructive: true` half. */
+.layer-action {
+  flex-shrink: 0;
+}
+.layer-overflow {
+  flex-shrink: 0;
+}
+.layer-delete {
+  color: var(--danger);
+}
+.map-tag {
+  background: var(--map) !important;
+  color: var(--accent-fg) !important;
+  font-size: 9px;
+  letter-spacing: 0.5px;
+}
+.repeater-perimeter {
+  border: 1px dashed color-mix(in srgb, var(--map) 25%, transparent);
+  border-radius: var(--radius);
+  padding: 4px;
+  min-height: 24px;
+  position: relative;
+}
+.repeater-perimeter::before {
+  content: "↻ Repeater";
+  position: absolute;
+  top: -9px;
+  left: 6px;
+  font-size: 9px;
+  color: color-mix(in srgb, var(--map) 50%, transparent);
+  background: var(--spectrum-white, #fff);
+  padding: 0 3px;
+  font-family: var(--font-mono);
+  pointer-events: none;
+}
+/* Empty element placeholders (design/edit mode only) */
+.empty-media-placeholder {
+  display: inline-block;
+  min-width: 120px;
+  min-height: 80px;
+  border: 1px dashed color-mix(in srgb, var(--fg-dim, #808080) 30%, transparent);
+  border-radius: var(--radius);
+  background: color-mix(in srgb, var(--fg-dim, #808080) 5%, transparent)
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none'%3E%3Crect x='4' y='8' width='32' height='24' rx='2' stroke='%23808080' stroke-opacity='.4' stroke-width='1.5'/%3E%3Ccircle cx='13' cy='16' r='3' stroke='%23808080' stroke-opacity='.4' stroke-width='1.5'/%3E%3Cpath d='M8 28l8-8 5 5 4-4 7 7' stroke='%23808080' stroke-opacity='.4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+    center / 40px no-repeat;
+  color: transparent;
+  font-size: 0;
+  overflow: hidden;
+}
+.empty-text-placeholder:not([contenteditable])::after {
+  content: "Click here to add text...";
+  color: color-mix(in srgb, var(--fg-dim, #808080) 40%, transparent);
+  font-style: italic;
+  font-size: 13px;
+  pointer-events: none;
+}
+.empty-container-placeholder {
+  border: 1px dashed color-mix(in srgb, var(--fg-dim, #808080) 25%, transparent);
+  border-radius: var(--radius);
+  min-height: 32px;
+  position: relative;
+}
+.empty-container-placeholder::after {
+  content: "Drag elements here...";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: color-mix(in srgb, var(--fg-dim, #808080) 40%, transparent);
+  font-style: italic;
+  font-size: var(--spectrum-font-size-50, 11px);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  pointer-events: none;
+  white-space: nowrap;
+}
+[contenteditable="plaintext-only"]:focus {
+  outline: 1px solid var(--accent) !important;
+  outline-offset: -1px;
+}
+.switch-tag {
+  background: var(--switch-c) !important;
+  color: var(--accent-fg) !important;
+}
+.case-tag {
+  background: var(--case-c) !important;
+  color: var(--accent-fg) !important;
+  font-style: italic;
+  font-size: 9px;
+  max-width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.slot-tag {
+  background: var(--slot-c) !important;
+  color: var(--accent-fg) !important;
+}
+.component-row {
+  opacity: 0.9;
+  cursor: grab;
+}
+.component-row.available {
+  opacity: 0.6;
+}
+.component-row.available:hover {
+  opacity: 0.8;
+}
+.component-tag {
+  font-size: 9px;
+  width: 18px;
+  text-align: center;
+}
+.components-section {
+  padding: 0 0 2px;
+}
+.imports-panel {
+  overflow-y: auto;
+  padding: 4px;
+}
+.imports-section {
+  margin-bottom: 12px;
+}
+/* The Page panel's door to Search appearance — pushed to the right edge of the section header, so
+   the section still reads as a heading and the button as its affordance. */
+.head-seo-btn {
+  margin-left: auto;
+  text-transform: none;
+  letter-spacing: normal;
+}
+.imports-section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px 2px;
+  font-size: var(--spectrum-font-size-50, 11px);
+  font-weight: 600;
+  color: var(--fg-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.imports-count {
+  font-weight: 400;
+  color: var(--text-hint);
+}
+.imports-list {
+  padding: 0 4px;
+}
+.import-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 4px;
+  font-size: var(--spectrum-font-size-50, 11px);
+  border-radius: var(--radius);
+}
+.import-row:hover {
+  background: var(--hover-bg);
+}
+.import-name {
+  font-weight: 500;
+  white-space: nowrap;
+}
+.import-path {
+  color: var(--fg-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  white-space: nowrap;
+  font-family: var(--font-mono, monospace);
+  font-size: 10px;
+}
+.import-mono {
+  font-family: var(--font-mono, monospace);
+}
+.import-add-form {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+}
+.import-add-form sp-textfield {
+  flex: 1;
+}
+.import-picker {
+  width: 100%;
+}
+/* Head panel */
+.head-section-body {
+  padding: 0 4px;
+}
+.head-section-body .style-row > sp-textfield,
+.head-section-body .style-row > .media-picker {
+  width: 100%;
+}
+.head-add-form {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+}
+.head-add-form sp-textfield {
+  flex: 1;
+}
+.head-add-form sp-picker {
+  min-width: 70px;
+}
+.element-card {
+  cursor: grab;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  margin-bottom: 6px;
+}
+.element-card:hover {
+  border-color: var(--accent);
+}
+.element-card-preview {
+  background: var(--spectrum-white, #fff);
+  padding: 6px 8px;
+  min-height: 32px;
+  max-height: 120px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  pointer-events: none;
+}
+.element-card-preview > * {
+  max-width: 100%;
+  color: var(--canvas-fg-2);
+  margin: 0;
+  padding: 0;
+}
+.element-card-preview > hr {
+  width: 100%;
+  border: none;
+  border-top: 1px solid var(--canvas-muted);
+}
+.element-card-preview > input,
+.element-card-preview > textarea,
+.element-card-preview > select,
+.element-card-preview > button,
+.element-card-preview > progress,
+.element-card-preview > meter {
+  font-size: 10px;
+}
+.element-card-label {
+  padding: 2px 6px;
+  font-size: 10px;
+  color: var(--fg-dim);
+  background: var(--bg-input);
+  text-align: center;
+  font-family: var(--font-mono);
+}
+.elements-list {
+  border: none;
+}
+.elements-list sp-accordion-item {
+  --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-50, 11px);
+  border-bottom: 1px solid var(--border);
+}
+
+/* ─── Teaching empty states ──────────────────── */
+/* The one empty-state pattern, emitted by src/panels/empty-state.ts: a sentence
+   saying what the region is for, then the button that fills it. `.empty-state`
+   itself (padding, centring, dimmed colour) is declared in overlays.css; these
+   rules add the teaching layout on top of it, and the compact variant wins on
+   specificity because overlays.css loads last. */
+.empty-state--teach {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.empty-state-message {
+  max-width: 34ch;
+  line-height: 1.5;
+}
+.empty-state-detail {
+  max-width: 34ch;
+  font-size: var(--spectrum-font-size-50, 11px);
+  color: var(--fg-dim);
+  opacity: 0.8;
+}
+.empty-state-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+.empty-state-action {
+  flex: none;
+}
+/* Inline section inside an otherwise populated panel — reads as a note above its
+   own add form rather than as a whole empty region. */
+.empty-state.empty-state--compact {
+  align-items: flex-start;
+  gap: 4px;
+  padding: 8px 12px;
+  text-align: left;
+  font-size: var(--spectrum-font-size-50, 11px);
+}
+.empty-state--compact .empty-state-actions {
+  justify-content: flex-start;
+}
+
+/* ─── Drop indicator ──────────────────────────── */
+.drop-indicator {
+  display: none;
+  position: absolute;
+  height: 2px;
+  background: var(--accent);
+  z-index: 5;
+  pointer-events: none;
+}
+
+/* ─── Canvas drop indicator ───────────────────── */
+.canvas-drop-indicator {
+  position: absolute;
+  pointer-events: none;
+  z-index: 11;
+}
+.canvas-drop-indicator.line {
+  height: 2px;
+  background: var(--accent);
+}
+.canvas-drop-indicator.inside {
+  border: 2px dashed var(--accent);
+  background: var(--accent-8);
+}
+/* An external file drop over an existing image: "this picture is about to be replaced".
+   Solid, not dashed, so it reads differently from the insert indicator above. */
+.canvas-replace-target {
+  position: absolute;
+  pointer-events: none;
+  z-index: 11;
+  border: 2px solid var(--accent);
+  background: var(--accent-8);
+  border-radius: var(--radius);
+}
+
+/* ─── Insertion helper ─────────────────────────── */
+.insertion-helper {
+  position: absolute;
+  position-anchor: --jx-insert;
+  z-index: 12;
+  pointer-events: auto;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1.5px solid var(--accent);
+  background: var(--bg-panel);
+  color: var(--accent);
+  font-size: var(--spectrum-font-size-100, 14px);
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  display: none;
+  place-items: center;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.insertion-helper.visible {
+  display: grid;
+  opacity: 1;
+}
+.insertion-helper:hover {
+  background: var(--accent);
+  color: var(--accent-fg);
+  transform: scale(1.15);
+}
+/* Line pseudo element — extends beyond button as a visual cue */
+.insertion-helper::before {
+  content: "";
+  position: absolute;
+  background: var(--accent);
+  opacity: 0.5;
+  pointer-events: none;
+  border-radius: 1px;
+}
+/* Horizontal edges (column / block layout) */
+.insertion-helper[data-edge="top"],
+.insertion-helper[data-edge="bottom"] {
+  left: anchor(center);
+  translate: -50% 0;
+}
+.insertion-helper[data-edge="top"] {
+  bottom: anchor(top);
+  translate: -50% 50%;
+}
+.insertion-helper[data-edge="bottom"] {
+  top: anchor(bottom);
+  translate: -50% -50%;
+}
+.insertion-helper[data-edge="top"]::before,
+.insertion-helper[data-edge="bottom"]::before {
+  width: 80px;
+  height: 2px;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  z-index: -1;
+}
+/* Vertical edges (row / inline layout) */
+.insertion-helper[data-edge="left"],
+.insertion-helper[data-edge="right"] {
+  top: anchor(center);
+  translate: 0 -50%;
+}
+.insertion-helper[data-edge="left"] {
+  right: anchor(left);
+  translate: 50% -50%;
+}
+.insertion-helper[data-edge="right"] {
+  left: anchor(right);
+  translate: -50% -50%;
+}
+.insertion-helper[data-edge="left"]::before,
+.insertion-helper[data-edge="right"]::before {
+  height: 80px;
+  width: 2px;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  z-index: -1;
+}
+/* Empty container center */
+.insertion-helper[data-edge="center"] {
+  top: anchor(center);
+  left: anchor(center);
+  translate: -50% -50%;
+}
+
+/* ─── ⑪ Problems ──────────────────────────────────────────────────────────────
+   The same body in two hosts: the Navigator dock (rail button, badge, ⌘4) and the Bottom dock's
+   first tab. Grouped by SOURCE with the severity as a glyph, because a reader who has just saved
+   wants the save's failures together and a list that reorders as it grows cannot be read. */
+.problems-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+}
+.problems-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+.problems-clear,
+.activity-clear {
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--spectrum-corner-radius-75, 2px);
+  background: transparent;
+  color: var(--fg-dim);
+  font: inherit;
+  font-size: var(--spectrum-font-size-50, 11px);
+  cursor: pointer;
+}
+.problems-clear:hover,
+.activity-clear:hover {
+  color: var(--fg);
+  background: var(--hover-bg);
+}
+/* One source's rows, under its heading. A section rather than a run of rows so the heading and
+   the problems it names cannot be separated by a scroll position. */
+.problem-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.problem-group-title {
+  margin: 0 0 2px;
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-50, 11px);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.problem-list,
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.problem-row,
+.activity-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 8px;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--fg-dim);
+  border-radius: var(--radius);
+  background: var(--bg-panel);
+  color: var(--fg);
+  font-size: var(--spectrum-font-size-75, 12px);
+}
+.problem-row--success {
+  border-left-color: var(--success);
+}
+.problem-row--info {
+  border-left-color: var(--accent);
+}
+.problem-row--warn {
+  border-left-color: var(--warning);
+}
+.problem-row--error {
+  border-left-color: var(--danger);
+}
+.problem-icon,
+.activity-icon {
+  flex: none;
+  width: 14px;
+  text-align: center;
+  font-weight: 700;
+  line-height: 1.5;
+}
+.problem-row--success .problem-icon {
+  color: var(--success);
+}
+.problem-row--info .problem-icon {
+  color: var(--accent);
+}
+.problem-row--warn .problem-icon {
+  color: var(--warning);
+}
+.problem-row--error .problem-icon {
+  color: var(--danger);
+}
+.problem-body,
+.activity-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.problem-message {
+  overflow-wrap: anywhere;
+}
+/* The path is a control, not a label: it opens the file the problem is about, which is the
+   click-through §7.1 asks for. Underlined on hover only — a permanently underlined path in a
+   dense list reads as a paragraph of links. */
+.problem-path {
+  align-self: flex-start;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--accent);
+  font: inherit;
+  font-family: var(--font-mono);
+  font-size: var(--spectrum-font-size-50, 11px);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.problem-path:hover {
+  text-decoration: underline;
+}
+/* The captured log the progress modal used to own. It scrolls inside the row rather than growing
+   it, so one 400-line `bun install` failure does not become the whole panel. */
+.problem-detail,
+.activity-log {
+  max-height: 180px;
+  margin: 2px 0 0;
+  padding: 6px;
+  overflow: auto;
+  border-radius: var(--spectrum-corner-radius-75, 2px);
+  background: var(--bg);
+  color: var(--fg-dim);
+  font-family: var(--font-mono);
+  font-size: var(--spectrum-font-size-50, 11px);
+  white-space: pre-wrap;
+}
+.problem-action,
+.activity-cancel {
+  flex: none;
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--spectrum-corner-radius-75, 2px);
+  background: transparent;
+  color: var(--accent);
+  font: inherit;
+  cursor: pointer;
+}
+.problem-action:hover:not(:disabled),
+.activity-cancel:hover:not(:disabled) {
+  background: var(--hover-bg);
+}
+.problem-action:disabled {
+  color: var(--fg-dim);
+  cursor: default;
+}
+.problem-dismiss {
+  flex: none;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  border-radius: var(--spectrum-corner-radius-75, 2px);
+  background: transparent;
+  color: var(--fg-dim);
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+.problem-dismiss:hover {
+  color: var(--fg);
+  background: var(--hover-bg);
+}
+
+/* ─── ⑪ Activity ──────────────────────────────────────────────────────────────
+   One row per operation, newest LAST, because this is a log and not a menu: an install that starts
+   while you are reading the clone above it must not push that clone off the top. */
+.activity-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+}
+.activity-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+.activity-row--running {
+  border-left-color: var(--accent);
+}
+.activity-row--done {
+  border-left-color: var(--success);
+}
+.activity-row--failed {
+  border-left-color: var(--danger);
+}
+.activity-row--cancelled {
+  border-left-color: var(--fg-dim);
+}
+.activity-row--running .activity-icon {
+  color: var(--accent);
+}
+.activity-row--done .activity-icon {
+  color: var(--success);
+}
+.activity-row--failed .activity-icon {
+  color: var(--danger);
+}
+.activity-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+.activity-title {
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.activity-source,
+.activity-duration {
+  flex: none;
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-50, 11px);
+}
+/* The duration is pushed to the far edge so a column of rows reads as a column of times. */
+.activity-duration {
+  margin-left: auto;
+}
+.activity-status {
+  color: var(--fg-dim);
+  overflow-wrap: anywhere;
+}
+/* The plan, declared up front, so "which of the three steps is this on" is answered by looking
+   rather than by reading the status line and remembering what came before it. */
+.activity-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin: 2px 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--spectrum-font-size-50, 11px);
+}
+.activity-step {
+  display: flex;
+  gap: 6px;
+  color: var(--fg-dim);
+}
+.activity-step--running {
+  color: var(--fg);
+}
+.activity-step--done .activity-step-icon {
+  color: var(--success);
+}
+.activity-step--failed .activity-step-icon {
+  color: var(--danger);
+}
+.activity-step-icon {
+  flex: none;
+  width: 10px;
+  text-align: center;
+}
+.activity-log-toggle {
+  align-self: flex-start;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--accent);
+  font: inherit;
+  font-size: var(--spectrum-font-size-50, 11px);
+  cursor: pointer;
+}
+.activity-log-toggle:hover {
+  text-decoration: underline;
+}
+
+/* ─── The one blocking progress surface ───────────────────────────────────────
+   Dependency install, and nothing else (§7.3). Its error view has left for Problems, so what is
+   left is a spinner, a line and the two ways out. */
+.progress-modal {
+  position: fixed;
+  inset: 0;
+  /* Above its own scrim. `sp-underlay` paints at `z-index: 1`, and this card — its sibling in the
+     modal layer — sat at `auto`, so the scrim covered it: the surface was VISIBLE (the scrim is
+     translucent) and every click landed on the underlay instead. `Run in the background` was the
+     only way out of a running install and could not be pressed. 1000 is what the other four
+     underlay-bearing cards use (.settings-modal, .about-modal, .new-project-modal, .seo-modal). */
+  z-index: 1000;
+  margin: auto;
+  width: min(420px, calc(100vw - 48px));
+  max-height: calc(100vh - 96px);
+  height: max-content;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+  border: 1px solid var(--border);
+  border-radius: var(--spectrum-corner-radius-200, 8px);
+  background: var(--bg-panel);
+  color: var(--fg);
+  box-shadow: 0 8px 32px rgb(0 0 0 / 40%);
+}
+.progress-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.progress-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.progress-title {
+  font-size: var(--spectrum-font-size-100, 14px);
+}
+.progress-status {
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-75, 12px);
+  overflow-wrap: anywhere;
+}
+.progress-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* ─── Project Settings, in the pane ───────────────────────────────────────────
+   The settings document (settings/settings-document.ts, panels/settings-pane.ts). Its section
+   internals are the .settings-* rules in overlays.css, unchanged: the modal's IA was never the
+   problem, its modality was, so only the SHELL is new. It fills the pane cell instead of an
+   inset:40px overlay, which is why there is no header row here — the tab strip already names the
+   document and the pane already has a frame. */
+.settings-doc {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  background: var(--bg);
+  text-align: initial;
+}
+.settings-doc-nav {
+  width: 180px;
+  min-width: 180px;
+  padding: 8px 0;
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+.settings-doc-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  min-width: 0;
+}
+/* One row of a simple key list — an extension package, and whatever else turns out to be a name
+   with one action beside it. */
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 8px;
+}
+.settings-row-name {
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--fg);
+  overflow-wrap: anywhere;
+}
+.settings-extension-name {
+  flex: 1;
+  min-width: 0;
+}
+.settings-build-adapter {
+  max-width: 320px;
+}
+/* project.json as it is saved. Scrolls in its own box: a 250-line file must not push the "Edit as
+   code" action off the bottom of the section. */
+.settings-raw-json {
+  margin: 0 0 12px;
+  padding: 12px;
+  max-height: 420px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-dim, var(--bg));
+  font-family: var(--font-mono);
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--fg);
+  white-space: pre;
+}
+.settings-edit-as-code {
+  align-self: flex-start;
+}
+
+/* ─── The Document Header card's SEO block ───────────────────────────────────
+   Two rendered previews of the MERGED site → layout → page $head, the resolved fields with their
+   character counters and provenance chips, and the named warnings. No score: there is deliberately
+   no rule here that can render a total (plan §9.2, §14).
+
+   The card itself is styled in styles/canvas.css, beside .doc-header — it is drawn in the stage,
+   not in a panel. These rules live here because the SEO block landed in the phase that owns this
+   stylesheet; they belong beside their siblings and should move when the two are next touched
+   together. */
+.seo-previews {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 4px 0 8px;
+}
+.seo-card {
+  flex: 1 1 220px;
+  min-width: 0;
+  margin: 0;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg);
+}
+/* The two cards want different floors before they wrap: the result row is text and reads badly
+   narrow, the social card is a fixed-height image with two lines under it. */
+.seo-card--serp {
+  flex-basis: 260px;
+}
+.seo-card--social {
+  flex-basis: 200px;
+}
+.seo-card-label {
+  display: block;
+  padding-bottom: 6px;
+  font-size: var(--spectrum-font-size-50, 11px);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fg-dim);
+}
+/* A search result, in its own proportions: the URL line small, the title the largest thing in the
+   card, the snippet two lines. Clamped rather than truncated at a character count — where a given
+   engine cuts is its business, and the counter beside the field is what states the budget. */
+.seo-serp-url {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--spectrum-font-size-50, 11px);
+  color: var(--fg-dim);
+}
+.seo-serp-title {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  padding: 2px 0;
+  font-size: var(--spectrum-font-size-200, 16px);
+  color: var(--accent);
+}
+.seo-serp-desc {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--fg);
+}
+.seo-social-media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 96px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-panel);
+}
+.seo-social-media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.seo-social-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-top: 6px;
+}
+.seo-social-domain {
+  font-size: var(--spectrum-font-size-50, 11px);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--fg-dim);
+}
+.seo-social-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--spectrum-font-size-75, 12px);
+  font-weight: 700;
+  color: var(--fg);
+}
+.seo-social-desc {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  font-size: var(--spectrum-font-size-50, 11px);
+  color: var(--fg-dim);
+}
+/* Absence, said once and in one colour, wherever a preview has nothing to draw. */
+.seo-unset {
+  font-style: italic;
+  color: var(--fg-dim);
+}
+.seo-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0 0 6px;
+  list-style: none;
+}
+.seo-field {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  font-size: var(--spectrum-font-size-50, 11px);
+}
+.seo-field-label {
+  flex: 0 0 96px;
+  color: var(--fg-dim);
+}
+.seo-field-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg);
+}
+/* The counter is a reference line, not a verdict — over budget is stated, never scored. */
+.seo-field-count {
+  flex: 0 0 auto;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--fg-dim);
+}
+.seo-field-count--over {
+  color: var(--warning);
+}
+.seo-warnings {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0 0 6px;
+  list-style: none;
+}
+.seo-warning {
+  display: flex;
+  gap: 6px;
+  min-width: 0;
+  font-size: var(--spectrum-font-size-50, 11px);
+  color: var(--fg-dim);
+}
+.seo-warning-field {
+  flex: 0 0 auto;
+  font-family: var(--font-mono);
+  color: var(--warning);
+}
+
+/* ─── ⑪ · Logic — the formula workspace and the function editor ──────── */
+/* Both surfaces moved out of their canvas takeovers into the Bottom dock (plan §12 P8.5), and a
+   dock is not a stage: the whole surface has to fit ~240px with the page still rendering above it.
+   So the header, the chip pipeline and the result are one line each, and only the two middle
+   columns scroll. These rules replace the inline `style=` attributes the takeover carried, which
+   is why seventeen `fw-*` classes have left check-styles.ts's orphan list. */
+.formula-workspace {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  background: var(--bg-panel);
+}
+.fw-header {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border);
+}
+.fw-title {
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--fg);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.fw-kind {
+  flex-shrink: 0;
+  font-size: var(--spectrum-font-size-50, 11px);
+  color: var(--fg-dim);
+}
+.fw-header-gap {
+  flex: 1;
+  min-width: 0;
+}
+.fw-chips {
+  flex-shrink: 0;
+  overflow-x: auto;
+  padding: 4px 10px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+/* The two columns, and the only thing in the tab that scrolls vertically. */
+.fw-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.fw-editor {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+  padding: 8px 10px;
+}
+.fw-selected {
+  padding-bottom: 6px;
+  font-size: var(--spectrum-font-size-50, 11px);
+  color: var(--fg-dim);
+}
+.fw-selected-node {
+  font-family: var(--font-mono);
+}
+/* Narrower than the takeover's 280px slab: at dock height it is a reference column beside the
+   editor, and the live values it used to be the only source of are on the canvas now. */
+.fw-context {
+  flex: 0 0 200px;
+  overflow: auto;
+  padding: 8px 10px;
+  border-left: 1px solid var(--border);
+}
+.fw-context-title {
+  padding-bottom: 6px;
+  font-size: var(--spectrum-font-size-50, 11px);
+  letter-spacing: 0.5px;
+  color: var(--fg-dim);
+  text-transform: uppercase;
+}
+.fw-context-entry {
+  margin-bottom: 8px;
+}
+.fw-context-head {
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+}
+.fw-context-name {
+  font-family: var(--font-mono);
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--fg);
+}
+.fw-context-type {
+  font-size: var(--spectrum-font-size-50, 11px);
+  color: var(--fg-dim);
+}
+.fw-result {
+  flex-shrink: 0;
+  overflow: hidden;
+  padding: 6px 10px;
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--success);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.fw-result--error {
+  color: var(--danger);
+}
+.fw-result--pending {
+  font-family: inherit;
+  color: var(--fg-dim);
+}
+.fw-result-note {
+  color: var(--fg-dim);
+}
+/* Monaco's host. It must have a real height of its own — the editor measures its container, and a
+   flex item with `auto` minimum would report the editor's own content height back at itself. */
+.fw-code {
+  flex: 1;
+  min-height: 0;
+}
+/* The code surface has no chip strip, no rail and no result line, so the editor takes the height
+   the formula surface spends on all three. */
+.formula-workspace--code {
+  overflow: hidden;
+}
+
+/* ─── Languages (parity grid) ─────────────────────────────────────────────────
+   A grid over ABSENCE: one row per translation key, one column per declared locale, and a cell
+   that is a button whichever of the three states it is in. The glyph carries the state and the
+   colour repeats it, the way `.problem-row--*` does, because a column of squares is read by
+   scanning rather than by reading. */
+.i18n-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  min-width: 0;
+}
+.i18n-actions {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+.i18n-summary {
+  margin: 0;
+  min-width: 0;
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-50, 11px);
+}
+.i18n-rescan {
+  flex: none;
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--spectrum-corner-radius-75, 2px);
+  background: transparent;
+  color: var(--fg-dim);
+  font: inherit;
+  font-size: var(--spectrum-font-size-50, 11px);
+  cursor: pointer;
+}
+.i18n-rescan:hover {
+  color: var(--fg);
+  background: var(--hover-bg);
+}
+/* A directory the scan could not read makes the whole grid a partial answer, so it says so above
+   the table rather than letting an unreadable `content/` read as a project with no content. */
+.i18n-incomplete {
+  margin: 0;
+  padding: 4px 6px;
+  border-left: 3px solid var(--warning);
+  border-radius: var(--radius);
+  background: var(--bg-panel);
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-50, 11px);
+}
+/* The Navigator is narrow and a key is a path, so the table scrolls sideways rather than wrapping
+   every path onto four lines. */
+.i18n-parity {
+  display: block;
+  overflow-x: auto;
+  border-collapse: collapse;
+  font-size: var(--spectrum-font-size-75, 12px);
+}
+.i18n-key-head,
+.i18n-locale-head {
+  padding: 2px 6px;
+  border-bottom: 1px solid var(--border);
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-50, 11px);
+  font-weight: 700;
+  text-align: start;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+.i18n-default-mark {
+  margin-inline-start: 4px;
+  color: var(--accent);
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: normal;
+}
+.i18n-row:hover {
+  background: var(--hover-bg);
+}
+.i18n-key {
+  max-width: 220px;
+  overflow: hidden;
+  padding: 2px 6px;
+  color: var(--fg);
+  font-family: var(--font-mono);
+  font-size: var(--spectrum-font-size-50, 11px);
+  font-weight: 400;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.i18n-cell {
+  padding: 2px 6px;
+  text-align: center;
+}
+.i18n-cell-button {
+  inline-size: 22px;
+  block-size: 18px;
+  border: 1px solid var(--border);
+  border-radius: var(--spectrum-corner-radius-75, 2px);
+  background: transparent;
+  color: var(--fg-dim);
+  font: inherit;
+  font-size: var(--spectrum-font-size-75, 12px);
+  line-height: 1;
+  cursor: pointer;
+}
+.i18n-cell-button:hover:not(:disabled) {
+  background: var(--hover-bg);
+}
+.i18n-cell-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+.i18n-cell-button--present {
+  color: var(--success);
+}
+.i18n-cell-button--stale {
+  color: var(--warning);
+  border-color: var(--warning);
+}
+.i18n-cell-button--missing {
+  color: var(--accent);
+  border-style: dashed;
+}
+.i18n-truncated {
+  margin: 0;
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-50, 11px);
+}