efficient-easel 0.106.0 → 1.0.0

package/dist/tree/tree.css

@@ -1,361 +1,42 @@
 /*
- * efficient-easel/tree.css — the Layers tree: one row shape at every depth.
+ * efficient-easel/tree.css — what the Layers tree still draws itself.
  *
- * EVERY VALUE HERE WAS READ OFF `efficient-storefront/components/storefront-editor.css`
- * on origin/main (release 14.24.0, 2026-09-17), where the website editor drew
- * the tree as `.sf-tree` / `.sf-row` / `.sf-subtree` / `.sf-group-label` (the
- * owner's "One Ladder", 2026-09-04). Its `--sf-*` tokens alias the `--es-*`
- * tokens spent here. New with the move: `.es-tree-preview` (0.42.0), and the
- * campaign editor's select button, marks, badge, end mark and plain action (0.44.0).
+ * The tree, its rows, groups, labels, actions and empty slot are the shell's
+ * (`Tree`, `TreeRow`, `TreeGroup`, `TreeGroupLabel`, `TreeEmptySlot`,
+ * `IconButton`; harness UI-24, efficient-easel#199), drawn by the shell's CSS,
+ * which a host loads first. What is left here has no shell piece:
  *
- * Needs `efficient-easel/shell.css`.
+ *   · the scroll box round the tree (the shell's `Tree` does not scroll);
+ *   · the lift of a row at the instant the browser takes its drag picture;
+ *   · the size of the marks a row carries after its name, and the rename box.
+ *
+ * The seam, and a draggable row's grip, hint and cursor, are the shell's since
+ * efficient-shell 4.165.0 (`TreeSeam`; `TreeRow`'s `draggable` / `dragHint`).
+ *
+ * Shell tokens only (`--es-*` resolve to them, `--spacing` is the shell's step).
  */
 
 .es-tree {
   flex: 1;
   overflow-y: auto;
-  /* LEFT 8 — the inset a rounded row needs. RIGHT 11 — the room a real,
-     space-taking 11px scrollbar takes, so nothing at a row's end sits under
-     the thumb. Words inside start on one 11px column down the panel. */
+  /* LEFT 8 — the inset a rounded row needs. RIGHT 12 — the room a real,
+     space-taking scrollbar takes, so nothing at a row's end sits under the thumb. */
   padding: 0 12px 12px 8px;
-  /* THE TREE'S RHYTHM, under the shell's names, at the tree's own density: the
-     owner picked 10 between groups and 6 between rows by eye (2026-08-31). They
-     are declared HERE, not on the editor root, so the settings panel beside the
-     tree keeps its own values for the same names. */
-  --es-rhythm-group: 12px;
-  --es-rhythm-between: 8px;
-}
-/* Every seam the tree stacks, spelled out: labels and subtrees interleave with
-   rows, and a rule that knew only rows would leave those seams to chance. */
-.es-tree > .es-tree-row + .es-tree-row,
-.es-tree > .es-subtree + .es-tree-row {
-  margin-top: var(--es-rhythm-between);
 }
 
-.es-tree-group {
-  font-size: 10.5px;
-  font-weight: 600;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-  color: var(--es-muted);
-  padding: var(--es-rhythm-group) 12px var(--es-rhythm-between);
-}
-
-/* THE ONLY THING IN THE TREE THAT SAYS DEPTH: 16px of indent and a hairline
-   that runs the height of the group. Rows inside sit exactly as far apart as
-   rows outside, so the ladder reads as one list at several depths. */
-.es-subtree {
-  margin: var(--es-rhythm-between) 0 var(--es-rhythm-between) 16px;
-  padding-left: 8px;
-  border-left: 1px solid var(--es-line);
-  display: flex;
-  flex-direction: column;
-  gap: var(--es-rhythm-between);
-}
-
-.es-tree-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: var(--es-row-radius);
-  cursor: pointer;
-  transition: background 0.12s;
-  /* Anchors the drop rules and the out-of-flow drag handle. */
-  position: relative;
-  /* The ground this row is painted on, as a value its children can read: the
-     actions' fade must end in the colour really behind the row. Every rule that
-     changes the row's background changes this in the same block. */
-  --es-row-scrim: var(--es-panel);
-}
-.es-tree-row:hover {
-  --es-row-scrim: var(--es-hover);
-  background: var(--es-row-scrim);
-}
-.es-tree-row.is-dragging {
-  opacity: 0.4;
-}
-.es-tree-row.is-drop-before::before,
-.es-tree-row.is-drop-after::after {
-  content: "";
-  position: absolute;
-  left: 8px;
-  right: 8px;
-  height: 2px;
-  background: var(--es-accent);
-  border-radius: 2px;
-  pointer-events: none;
-}
-/* THE ONE DROP LINE (0.74.0): centred in the gap, where a seam draws its own —
-   so a drop between two rows looks the same whether the pointer is over the
-   lower half of one, the gap, or the upper half of the next. */
-.es-tree-row.is-drop-before::before {
-  top: calc(-1px - var(--es-rhythm-between) / 2);
-}
-.es-tree-row.is-drop-after::after {
-  bottom: calc(-1px - var(--es-rhythm-between) / 2);
-}
-/* An outline, not a border: a border would move every row below by 2px as the
-   pointer crossed, which reads as the list flinching. */
-.es-tree-row.is-drop-into {
-  outline: 2px solid var(--es-accent);
-  outline-offset: -2px;
-  border-radius: 6px;
-  background: var(--es-accent-tint);
-}
-.es-tree-row.is-selected {
-  --es-row-scrim: var(--es-accent-tint);
-  background: var(--es-row-scrim);
-  box-shadow: inset 2px 0 0 var(--es-accent);
-}
-.es-tree-row.is-selected .es-tree-chip {
+/* On for the instant the browser takes the drag picture: the row that follows
+   the pointer is this one, raised. */
+.es-tree-row.is-lifting {
   background: var(--es-raised);
-  color: var(--es-accent);
-}
-.es-tree-row.is-selected .es-tree-name {
-  color: var(--es-accent-text);
-  font-weight: 600;
-}
-
-/* No ground and no rule: every row carries a glyph, so the glyph is the mark. */
-.es-tree-chip {
-  width: 18px;
-  height: 18px;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  flex: none;
-  background: transparent;
-  color: var(--es-icon);
-}
-.es-tree-chip svg {
-  width: 13px;
-  height: 13px;
-}
-
-/* The name's box: what the actions are positioned against, so they cover the
-   name's tail and never the caret. */
-.es-tree-name-box {
-  position: relative;
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-}
-/* One size at every depth — 12px / 500, the group pill's size at a row's weight. */
-.es-tree-name {
-  flex: 1;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--es-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-/* NEW in 0.42.0: the thing's own first words after its type — "Text  BACK IN
-   STOCK NOW" — quieter than the name, and the first thing to be cut when the
-   panel is narrow (it sits inside the name's own ellipsis). */
-.es-tree-preview {
-  margin-left: 8px;
-  font-weight: 400;
-  color: var(--es-muted);
-}
-.es-tree-row.is-selected .es-tree-preview {
-  color: var(--es-accent-text);
-  font-weight: 400;
-}
-.es-tree-row.is-hidden .es-tree-name {
-  color: var(--es-muted);
-  text-decoration: line-through;
-}
-
-.es-tree-actions {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  /* 22px of fade so the name dissolves under the buttons instead of being
-     chopped, ending in the ground this row is really painted on. */
-  padding-left: 22px;
-  background: linear-gradient(to right, transparent 0, var(--es-row-scrim) 22px);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.12s;
-}
-/* Hover AND focus. Bound to hover alone, a keyboard user who tabs to the trash
-   gets it painted onto the name with nothing behind it. */
-.es-tree-row:hover .es-tree-actions,
-.es-tree-row:focus-within .es-tree-actions {
-  opacity: 1;
-}
-/* THE STRIP NEVER TAKES THE POINTER — only the buttons in it do, and each arms
-   its own as it shows (0.44.1). On a short row the fade covers most of the name,
-   and a row that selects from its NAME button (`onSelect`) must still get the
-   click: with the strip taking it, a hovered row could not be selected at all.
-   A row that selects through its own onClick is unaffected — the click lands on
-   the name and bubbles to the row as before. */
-/* A hidden row keeps its eye showing, back in the flow, so it can always be
-   un-hidden without a scrim parked over its struck-through name. */
-.es-tree-row.is-hidden .es-tree-actions {
-  position: static;
-  opacity: 1;
-  background: none;
-  padding-left: 0;
-}
-
-.es-tree-del,
-.es-tree-eye {
-  width: 22px;
-  height: 22px;
-  border: none;
-  background: transparent;
-  border-radius: 5px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  opacity: 0;
-  pointer-events: none;
-  flex: none;
-}
-.es-tree-del svg,
-.es-tree-eye svg {
-  width: 14px;
-  height: 14px;
-}
-.es-tree-del {
-  color: var(--es-danger);
-  transition: opacity 0.12s, background 0.12s, color 0.12s;
-}
-.es-tree-eye {
-  color: var(--es-muted);
-  transition: opacity 0.12s, background 0.12s;
-}
-.es-tree-row:hover .es-tree-del,
-.es-tree-row:focus-within .es-tree-del,
-.es-tree-row:hover .es-tree-eye,
-.es-tree-row:focus-within .es-tree-eye {
-  opacity: 0.7;
-  pointer-events: auto;
-}
-.es-tree-del:hover {
-  opacity: 1;
-  background: var(--es-danger-tint);
-  color: var(--es-danger-strong);
-}
-.es-tree-eye:hover {
-  opacity: 1;
-  background: var(--es-hover);
-}
-.es-tree-row.is-hidden .es-tree-eye {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* The ONLY drag source and keyboard reorder route. It may be made invisible;
-   it may never be made unreachable — opacity only, never display or visibility. */
-.es-tree-handle {
-  position: absolute;
-  left: 1px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--es-disabled);
-  font-family: inherit;
-  font-size: 11px;
-  line-height: 1;
-  letter-spacing: -2px;
-  width: 9px;
-  flex: none;
-  cursor: grab;
-  opacity: 0;
-  transition: opacity 0.12s;
-  padding: 0;
-  border: none;
-  background: transparent;
-  touch-action: none;
-}
-.es-tree-row:hover .es-tree-handle,
-.es-tree-handle:focus-visible {
-  opacity: 1;
-}
-.es-tree-handle:active {
-  cursor: grabbing;
-}
-.es-tree-handle:focus-visible {
-  outline: 2px solid var(--es-accent);
-  outline-offset: 1px;
-  border-radius: 3px;
-  color: var(--es-text-secondary);
-}
-
-/* The caret LEADS the row (One Ladder). A row that does not fold holds the
-   column open with the spacer, so every glyph below lines up. */
-.es-tree-caret {
-  width: 14px;
-  height: 14px;
-  margin-left: -2px;
-  flex: none;
-  padding: 0;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  color: var(--es-muted);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-.es-tree-caret:hover {
-  background: var(--es-hover);
-  color: var(--es-text);
-}
-.es-tree-caret-spacer {
-  width: 14px;
-  margin-left: -2px;
-  flex: none;
-}
-.es-tree-chev {
-  transition: transform 0.14s;
-}
-.es-tree-chev.is-open {
-  transform: rotate(90deg);
+  box-shadow: var(--rosh-glass-solid-shadow);
 }
 
-/* ── 0.44.0 — the campaign editor's rows ─────────────────────────────────── */
-/* The name as a button, for keyboard selection. It must not move the row by a
-   pixel against a row without one: no chrome, no padding, the same flex run. */
-.es-tree-select {
-  all: unset;
-  box-sizing: border-box;
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  border-radius: 4px;
-}
-.es-tree-select:focus-visible {
-  outline: 2px solid var(--es-accent);
-  outline-offset: 2px;
-}
-/* With a mark or a badge after it, the name hugs its words so the mark sits
-   beside them rather than at the far end. A plain row keeps `flex: 1`. */
-.es-tree-select .es-tree-name,
-.es-tree-name:has(~ .es-tree-mark),
-.es-tree-name:has(~ .es-tree-badge) {
-  flex: 0 1 auto;
-}
-/* A named state after the name — quiet, never a control. */
-.es-tree-mark {
-  flex: none;
+/* ── A row's marks: named pictures after its name, never controls ───────── */
+.es-tree-mark,
+.es-tree-trailing {
   display: inline-flex;
+  vertical-align: middle;
+  margin-left: 4px;
   color: var(--es-muted);
 }
 .es-tree-mark svg,
@@ -363,86 +44,9 @@
   width: 13px;
   height: 13px;
 }
-.es-tree-badge {
-  flex: none;
-  font-size: 10px;
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-  color: var(--es-muted);
-  background: var(--es-chip-bg);
-  border-radius: 4px;
-  padding: 2px 4px;
-}
-.es-tree-trailing {
-  flex: none;
-  display: inline-flex;
-  color: var(--es-muted);
-}
-/* Any other row action, in the neutral colour — the eye's twin. */
-.es-tree-act {
-  width: 22px;
-  height: 22px;
-  border: none;
-  background: transparent;
-  border-radius: 5px;
-  cursor: pointer;
-  color: var(--es-muted);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  opacity: 0;
-  pointer-events: none;
-  flex: none;
-  transition: opacity 0.12s, background 0.12s;
-}
-.es-tree-act svg {
-  width: 14px;
-  height: 14px;
-}
-.es-tree-row:hover .es-tree-act,
-.es-tree-row:focus-within .es-tree-act {
-  opacity: 0.7;
-  pointer-events: auto;
-}
-.es-tree-act:hover {
-  opacity: 1;
-  background: var(--es-hover);
-}
-.es-tree-act:disabled {
-  color: var(--es-disabled);
-  cursor: default;
-}
-/* A toggle that is ON stays visible at rest, like a hidden row's eye: the state
-   has to be readable without hovering. */
-.es-tree-act[aria-pressed="true"] {
-  opacity: 1;
-  pointer-events: auto;
-  color: var(--es-accent);
-}
-/* …which means its strip must show too. Same answer as a hidden row's eye: the
-   strip goes back into the flow, with no scrim over the name, and the other
-   actions in it still wait for hover. */
-.es-tree-actions:has(.es-tree-act[aria-pressed="true"]) {
-  position: static;
-  opacity: 1;
-  background: none;
-  padding-left: 0;
-}
-/* In the flow, the actions still waiting for hover must not hold their width
-   open at rest — that would cut the name down to make room for buttons nobody
-   can see. They come back when the row is hovered or focus enters it (the name
-   button is the row's first tab stop, so the keyboard reaches them). */
-.es-tree-actions:has(.es-tree-act[aria-pressed="true"]) > :not([aria-pressed="true"]) {
-  display: none;
-}
-.es-tree-row:hover .es-tree-actions:has(.es-tree-act[aria-pressed="true"]) > :not([aria-pressed="true"]),
-.es-tree-row:focus-within .es-tree-actions:has(.es-tree-act[aria-pressed="true"]) > :not([aria-pressed="true"]) {
-  display: flex;
-}
 
 /* A rename box stands in for the name. It must not move the row by a pixel:
-   same font and size, no border, no padding of its own. */
+   the name's own font, no border, no padding of its own. */
 .es-tree-rename {
   flex: 1 1 auto;
   min-width: 0;
@@ -450,240 +54,14 @@
   border: 0;
   background: transparent;
   font: inherit;
-  font-size: 12px;
-  font-weight: 500;
   color: inherit;
   outline: none;
 }
 
-/* ── Picking a row up (efficient-easel/drag, 0.74.0) ───────────────────────
-   The whole row is the handle. It says so four ways, and none of them is a
-   target of its own: the grab cursor, a faint ⋮ at its left on hover, a hint
-   after 0.7 s, and — while it moves — the row lifted with a shadow. */
-.es-tree-row.is-draggable,
-.es-tree-row.is-draggable .es-tree-select {
-  cursor: grab;
-}
-.es-tree-row.is-draggable:active,
-.es-tree-row.is-draggable:active .es-tree-select {
-  cursor: grabbing;
-}
-.es-tree-grip {
-  position: absolute;
-  left: 2px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 12px;
-  line-height: 1;
-  color: var(--es-disabled);
-  opacity: 0;
-  transition: opacity 0.12s;
-  pointer-events: none;
-}
-.es-tree-row.is-draggable:hover .es-tree-grip {
-  opacity: 0.8;
-}
-/* The hint waits 0.7 s on the way in and none on the way out — a delay in the
-   transition, not a timer, so nothing re-renders while the pointer rests. */
-.es-tree-hint {
-  position: absolute;
-  left: 24px;
-  top: calc(100% + 4px);
-  z-index: 5;
-  padding: 4px 8px;
-  border-radius: 6px;
-  background: var(--es-toast-bg);
-  color: var(--es-on-accent);
-  font-size: 11px;
-  line-height: 1.3;
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.1s;
-}
-.es-tree-row.is-draggable:hover .es-tree-hint {
-  opacity: 1;
-  transition-delay: 0.7s;
-}
-.es-tree-row.is-dragging .es-tree-hint,
-.es-tree-row.is-lifting .es-tree-hint {
-  display: none;
-}
-/* On for the instant the browser takes the drag picture: the row that follows
-   the pointer is this one, raised. */
-.es-tree-row.is-lifting {
-  background: var(--es-raised);
-  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.1);
-}
-
-/* ── The seam — the gap between two rows, as a place (0.74.0) ───────────────
-   A drop between rows lands here, and a host may offer a "+" that adds here.
-   IT IS THE GAP: every rule below takes back the space a seam would otherwise
-   add, so a list reads exactly the same with seams in it or without. A list's
-   gaps are uniform — seams in every gap of it, or in none. */
-.es-tree-seam {
-  position: relative;
-  z-index: 1;
-  flex: none;
-  height: var(--es-rhythm-between);
-}
-/* A little more than the gap to aim at, over the rows' own edges. */
-.es-tree-seam::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -4px;
-  bottom: -4px;
-}
-.es-tree-seam::after {
-  content: "";
-  position: absolute;
-  left: 8px;
-  right: 8px;
-  top: calc(50% - 1px);
-  height: 2px;
-  background: var(--es-accent);
-  border-radius: 2px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.12s;
-}
-.es-tree-seam.is-drop::after,
-.es-tree-seam.has-add:hover::after,
-.es-tree-seam.has-add:focus-within::after {
-  opacity: 1;
-}
-.es-tree-seam-add {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 18px;
-  height: 18px;
-  margin: -9px 0 0 -9px;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  background: var(--es-accent);
-  color: var(--es-on-accent);
-  font: 600 13px/18px var(--es-font);
-  cursor: pointer;
-  opacity: 0;
-  transform: scale(0.7);
-  transition: opacity 0.12s, transform 0.12s;
-}
-.es-tree-seam.has-add:hover .es-tree-seam-add,
-.es-tree-seam-add:focus-visible {
-  opacity: 1;
-  transform: scale(1);
-}
-.es-tree-seam-add:focus-visible {
-  outline: 2px solid var(--es-accent);
-  outline-offset: 2px;
-}
-/* While something is being dropped, the line alone. */
-.es-tree-seam.is-drop .es-tree-seam-add {
-  opacity: 0;
-}
-/* The top level stacks as blocks, and margins there collapse: a seam after a
-   subtree, beside a group label, or at an end hands its height back. */
-.es-tree > .es-subtree + .es-tree-seam,
-.es-tree > .es-tree-group + .es-tree-seam,
-.es-tree > .es-tree-seam:last-child {
-  margin-top: calc(-1 * var(--es-rhythm-between));
-}
-.es-tree > .es-tree-seam:has(+ .es-tree-group),
-.es-tree > .es-tree-seam:first-child {
-  margin-bottom: calc(-1 * var(--es-rhythm-between));
-}
-/* …once: a seam both after a subtree and before a label has already handed its
-   height back above. */
-.es-tree > .es-subtree + .es-tree-seam:has(+ .es-tree-group) {
-  margin-bottom: 0;
-}
-/* One level down is a flex column with a gap: a seamed list's seams ARE its
-   gaps, a nested list keeps the gap-and-margin it had, and the ends reach into
-   the list's own margins. */
-.es-subtree:has(> .es-tree-seam) {
-  gap: 0;
-}
-.es-subtree:has(> .es-tree-seam) > .es-subtree {
-  margin-top: calc(2 * var(--es-rhythm-between));
-}
-.es-subtree > .es-tree-seam:first-child {
-  margin-top: calc(-1 * var(--es-rhythm-between));
-}
-.es-subtree > .es-tree-seam:last-child {
-  margin-bottom: calc(-1 * var(--es-rhythm-between));
-}
-
-/* ── An empty list, as a place (second host, 2026-10-06) ───────────────────
-   Where a slot holds nothing yet: a box the size of a row, that takes a drop
-   and — when the host offers it — adds there. NOT a seam: a seam is the gap
-   between two rows and takes back the space it adds (above), so alone in a
-   list it was a strip 8px tall with nothing drawn in it, and a drop aimed at
-   "into this empty column" landed on whatever was really under the pointer.
-
-   Dashed, because the thing is not there yet — the canvas says the same with
-   its "+ Add block" cell (`.es-canvas-empty`, drag.css). Read off the campaign
-   designer's `.cd-tree-add` (efficient-admin-portal), which drew one of its
-   own; 34px is a row's height (8 + 18 + 8). */
-.es-tree-empty {
-  box-sizing: border-box;
-  flex: none;
-  min-height: 34px;
-  display: flex;
-  align-items: stretch;
-  border: 1px dashed var(--es-line);
-  border-radius: var(--es-row-radius);
-  color: var(--es-text-secondary);
-  font: 500 12px/1.3 var(--es-font);
-  transition: border-color 0.12s, color 0.12s, background 0.12s;
-}
-.es-tree-empty-add,
-.es-tree-empty-note {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 12px;
-}
-/* The whole box is the button. A bare one: a native button ignores an author's
-   background and border on some platforms, so the box draws them. */
-.es-tree-empty-add {
-  border: none;
-  border-radius: inherit;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-.es-tree-empty-add:focus-visible {
-  outline: 2px solid var(--es-accent);
-  outline-offset: -2px;
-}
-/* Nothing to do here: the list is empty, and that is all it says. It SAYS it,
-   so it is a grey that can be read: it was `--es-disabled` (#9ca3af), 2.5:1 on
-   the panel, which axe-core failed on a read-only tree (2026-10-07). Held by
-   ratio in tests/contrast-small-text.test.ts. */
-.es-tree-empty-note {
-  color: var(--es-muted);
-}
-.es-tree-empty.has-add:hover,
-.es-tree-empty.is-drop {
-  border-color: var(--es-accent);
-  color: var(--es-accent-text);
-}
-.es-tree-empty.is-drop {
-  background: var(--es-accent-tint);
-}
-.es-tree-empty.is-drop .es-tree-empty-note {
-  color: inherit;
-}
-/* At the top level rows stack as blocks: keep the row's own distance from one above. */
-.es-tree > .es-tree-row + .es-tree-empty,
-.es-tree > .es-subtree + .es-tree-empty {
-  margin-top: var(--es-rhythm-between);
+/* A row action off WITH A REASON (`aria-disabled`, so the keyboard reaches it
+   and its Tooltip says why): the shell IconButton's own disabled fade, which
+   only `:disabled` draws. SHELL GAP: the kit has no focusable-disabled look. */
+.es-tree-act-off {
+  opacity: 0.6;
+  cursor: not-allowed;
 }