@jxsuite/studio 4.0.0 → 5.0.0

package/styles/panels.css

@@ -1,226 +1,3 @@
-/* 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);
-}
-/* The gear while its menu is open.
-
-   Deliberately NOT `.selected`: that class means "this is the panel you are looking at" and paints
-   the accent left-border, so reusing it would draw the gear as a seventh selected panel. What this
-   says is narrower — the menu you opened is still up. */
-.rail-item--menu-open {
-  opacity: 1;
-  color: var(--fg);
-  background: var(--hover-bg);
-}
-.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);
 }
@@ -235,94 +12,13 @@
 .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;
@@ -332,34 +28,6 @@
   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 {
@@ -369,83 +37,6 @@
 .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);
@@ -460,7 +51,7 @@
   left: 6px;
   font-size: 9px;
   color: color-mix(in srgb, var(--map) 50%, transparent);
-  background: var(--spectrum-white, #fff);
+  background: white;
   padding: 0 3px;
   font-family: var(--font-mono);
   pointer-events: none;
@@ -502,7 +93,7 @@
   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-size: var(--jx-text-sm, 11px);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   pointer-events: none;
   white-space: nowrap;
@@ -511,132 +102,15 @@
   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;
@@ -651,7 +125,7 @@
   border-color: var(--accent);
 }
 .element-card-preview {
-  background: var(--spectrum-white, #fff);
+  background: white;
   padding: 6px 8px;
   min-height: 32px;
   max-height: 120px;
@@ -687,45 +161,12 @@
   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);
+  font-size: var(--jx-text-sm, 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 {
@@ -733,20 +174,7 @@
   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;
+  font-size: var(--jx-text-sm, 11px);
 }
 
 /* ─── Canvas drop indicator ───────────────────── */
@@ -786,7 +214,7 @@
   border: 1.5px solid var(--accent);
   background: var(--bg-panel);
   color: var(--accent);
-  font-size: var(--spectrum-font-size-100, 14px);
+  font-size: var(--jx-text-lg, 14px);
   font-weight: 500;
   line-height: 1;
   cursor: pointer;
@@ -866,848 +294,3 @@
   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);
-}