@crewlethq/ui 0.6.3 → 0.7.0

package/dist/styles.css

@@ -88,7 +88,7 @@
 }
 
 
-/* AddPill-IJQYCY6C.css */
+/* AddPill-V4TQXJ53.css */
 /*
  * The control that adds a child (AddPill.tsx).
  *
@@ -180,7 +180,6 @@
  * card's own translucent step, in one declaration, which is exactly what a
  * node is painted with: the two are the same grey wherever the chart is
  * scrolled to, and the pair is OPAQUE, which the card's step alone is not.
- * The resting hairline and the 150ms it fades over are that chart's as well.
  *
  * FULLY OPAQUE, ALWAYS. It used to fade with the rest of the control at rest,
  * and a mask at a little over half opacity is not a mask: the branch was drawn
@@ -192,11 +191,12 @@
   height: var(--spacing-4);
   background-color: var(--color-surface-background);
   background-image: linear-gradient(var(--color-surface-subtle), var(--color-surface-subtle));
-  border: 1px solid var(--color-border-default);
+  /* NO BOUNDARY OF ITS OWN: the mark drawn over it is the console's
+     add-circle, whose ring sits at the disc's edge, and a hairline under it
+     was a second ring a pixel outside the first. */
+  border: 0;
   border-radius: var(--radius-circle);
-  transition:
-    background-color var(--motion-duration-base) var(--motion-easing-default),
-    border-color var(--motion-duration-base) var(--motion-easing-default);
+  transition: background-color var(--motion-duration-base) var(--motion-easing-default);
 }
 
 /* A row has no branch to mask, so there is no disc and no boundary either:
@@ -209,11 +209,6 @@
   border-color: transparent;
 }
 
-.crewlet-add-pill__mark:hover .crewlet-add-pill__disc,
-.crewlet-add-pill__mark:focus-visible .crewlet-add-pill__disc {
-  border-color: var(--color-node-green-line);
-}
-
 /*
  * QUIET IS THE PLUS ITSELF. It is one mark per branch on a chart of a hundred,
  * and at rest it says a child can go here and nothing more. The step is the
@@ -233,9 +228,11 @@
   transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/* The console table's own add-circle, 18px across: at the 20px step the plus
+   stood heavier than every other control on the row. */
 .crewlet-add-pill[data-size='md'] .crewlet-add-pill__mark svg {
-  width: var(--spacing-5);
-  height: var(--spacing-5);
+  width: calc(var(--spacing-4) + var(--spacing-1) / 2);
+  height: calc(var(--spacing-4) + var(--spacing-1) / 2);
 }
 
 .crewlet-add-pill__mark:hover svg,
@@ -283,8 +280,10 @@
   animation: crewlet-add-pill-open var(--motion-duration-moderate) var(--motion-easing-spring);
 }
 
+/* The console table's pill is 18px tall, under half the row: drawn at the
+   row's whole control step it was a second row of buttons inside the row. */
 .crewlet-add-pill[data-size='md'] .crewlet-add-pill__sections {
-  height: var(--size-control-sm);
+  height: calc(var(--spacing-4) + var(--spacing-1) / 2);
 }
 
 .crewlet-add-pill[data-layout='split'] .crewlet-add-pill__sections {
@@ -393,12 +392,14 @@
     background-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-/* A row's step is the target, so there is no overhang and nothing to clip. */
+/* A ROW'S CHOICE IS HIT AT THE ROW'S CONTROL STEP, by the same overhang the
+   branch's pill takes: padding past the drawn 18px pill, with the tint clipped
+   to its content box, so a hovered choice tints the pill and stops at its
+   edges. Its width is the pointer-target floor every choice keeps. */
 .crewlet-add-pill[data-size='md'] .crewlet-add-pill__section {
-  width: var(--size-control-sm);
   height: var(--size-control-sm);
-  margin: 0;
-  padding: 0;
+  margin: calc((var(--spacing-4) + var(--spacing-1) / 2 - var(--size-control-sm)) / 2) 0;
+  padding: calc((var(--size-control-sm) - var(--spacing-4) - var(--spacing-1) / 2) / 2) 0;
 }
 
 /*
@@ -426,7 +427,7 @@
 }
 
 .crewlet-add-pill[data-size='md'] .crewlet-add-pill__divider {
-  height: var(--spacing-5);
+  height: var(--spacing-3);
 }
 
 /*
@@ -481,8 +482,8 @@
  * of each caller, because the pill is what decides it is drawn in one colour.
  */
 .crewlet-add-pill__section svg {
-  width: var(--spacing-3);
-  height: var(--spacing-3);
+  width: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  height: calc(var(--spacing-2) + var(--spacing-1) / 2);
 }
 
 .crewlet-add-pill__section svg,
@@ -506,8 +507,8 @@
 }
 
 .crewlet-add-pill[data-size='md'] .crewlet-add-pill__section svg {
-  width: var(--spacing-4);
-  height: var(--spacing-4);
+  width: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  height: calc(var(--spacing-2) + var(--spacing-1) / 2);
 }
 
 /*
@@ -534,7 +535,7 @@
 }
 
 
-/* AppShell-XARELGIH.css */
+/* AppShell-CEVLW4QG.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -615,10 +616,12 @@
   transition: transform var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/* One ring, over the link's own boundary rather than 2px off it, which is two
+   edges with a gap between them: the rule every field keeps (see Input.css). */
 .crewlet-app-shell__skip:focus-visible {
   transform: translateY(0);
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 /*
@@ -1480,7 +1483,7 @@
 }
 
 
-/* Button-EXU36DEH.css */
+/* Button-UWKBTKYD.css */
 /*
  * The button, and the link drawn as one.
  *
@@ -1556,6 +1559,24 @@
   outline-offset: 2px;
 }
 
+/*
+ * ONE RING, OVER THE BOUNDARY, on every button that draws one. A secondary,
+ * an outline, a danger and a pressed toggle each carry a visible border, and a
+ * ring standing 2px off it was two edges with a gap between them, which reads
+ * as a second outline rather than as focus. On the inset offset the ring
+ * covers the border instead, the rule every field keeps (see Input.css).
+ *
+ * A FILLED OR BORDERLESS BUTTON KEEPS THE OUTSET RING. There is no edge for it
+ * to double, and an inset ring on the accent fill would be drawn in nearly the
+ * fill's own colour, which is a focus nobody can see.
+ */
+.crewlet-btn--secondary:focus-visible,
+.crewlet-btn--outline:focus-visible,
+.crewlet-btn--danger:focus-visible,
+.crewlet-btn[aria-pressed='true']:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 .crewlet-btn:disabled,
 .crewlet-btn[aria-disabled='true'] {
   opacity: 0.5;
@@ -2061,7 +2082,7 @@
 }
 
 
-/* Canvas-Q6JETCWR.css */
+/* Canvas-YVXHMWLN.css */
 /*
  * A bounded viewport (Canvas.tsx). It fills the box it is given and clips; the
  * page's own scroller is never involved.
@@ -2084,6 +2105,19 @@
   border-radius: var(--radius-lg);
 }
 
+/*
+ * A DOTTED FIELD, for content that is moved by dragging the field itself: the
+ * dots say it pans before anybody drags it. They are the strong hairline's ink
+ * in both themes, one spacing step apart so density scales the grid with the
+ * cards on it, and drawn on the frame rather than on the world, so they stay
+ * put while the content moves over them. Longhands, so the ground under them
+ * is the canvas's own.
+ */
+.crewlet-canvas[data-ground='dotted'] {
+  background-image: radial-gradient(var(--color-border-strong) 1px, transparent 1.2px);
+  background-size: var(--spacing-5) var(--spacing-5);
+}
+
 .crewlet-canvas__viewport {
   position: absolute;
   inset: 0;
@@ -2379,7 +2413,7 @@
 }
 
 
-/* Card-GLP7SUV6.css */
+/* Card-KJOYHDTJ.css */
 /*
  * Card, THE surface. Everything on a screen is a card, a row inside one, or a
  * control.
@@ -2580,9 +2614,13 @@
   border-color: var(--color-border-hover);
 }
 
+/* One ring, over the card's own boundary rather than 2px off it, which is two
+   edges with a gap between them: the rule every field keeps (see Input.css).
+   A chosen card keeps an accent line inside the ring, since the selection
+   ring below is two pixels deep and the focus ring covers one of them. */
 .crewlet-card.is-interactive:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 /*
@@ -3584,7 +3622,7 @@
 }
 
 
-/* Checkbox-BOXQ747I.css */
+/* Checkbox-UE7TEPAM.css */
 /*
  * Checkbox: a box, its label and its consequence as one target.
  *
@@ -3692,9 +3730,17 @@
   opacity: 0.6;
 }
 
+/*
+ * OUTSIDE THE BOX, AND AGAINST IT. The box IS the target, and 2px eaten off a
+ * 16px square leaves no middle, so the ring stays outside it. But it stands on
+ * the box's own edge rather than 2px off it: a ring with a gap round a box
+ * that already draws its own boundary is two edges, which reads as a second
+ * outline rather than as focus. Flush, the ring and the box are one edge, and
+ * the ring is still drawn whole on the ground around it.
+ */
 .crewlet-checkbox__control:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: 0;
 }
 
 
@@ -4440,7 +4486,7 @@
 }
 
 
-/* DataTable-OLHPF7D4.css */
+/* DataTable-WZK3V62B.css */
 /* ─────────────────────────────────────────────────────────────────
  * Default variant.
  *
@@ -4822,8 +4868,19 @@ body.crewlet-data-table-resizing {
   color: var(--color-text-on-accent);
 }
 
+/*
+ * One ring, over the chip's own boundary rather than 2px off it, which is two
+ * edges with a gap between them: the rule every field keeps (see Input.css).
+ * The active size is filled with the accent and its border is the fill, so
+ * there is no edge to double there, and an inset ring on that fill would be
+ * drawn in nearly the fill's own colour: it keeps the outset ring.
+ */
 .crewlet-data-table__items-per-page-btn:focus-visible {
   outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-data-table__items-per-page-btn.is-active:focus-visible {
   outline-offset: 2px;
 }
 
@@ -6909,7 +6966,7 @@ body.crewlet-data-table-resizing {
 }
 
 
-/* DateTimePicker-22VNXRWC.css */
+/* DateTimePicker-4AZBTODT.css */
 /*
  * DateTimePicker: a Select-shaped trigger over a calendar dialog.
  *
@@ -6953,12 +7010,17 @@ body.crewlet-data-table-resizing {
  * Focus and open are drawn alike, and the ring is an OUTLINE: forced-colors
  * mode drops every box-shadow and keeps outlines, so a ring drawn as a shadow
  * disappears for exactly the readers who most need one.
+ *
+ * ONE RING, OVER THE BOUNDARY. It stood 2px off the box with the border
+ * recoloured to the focus colour as well, which is an accent hairline, a gap
+ * and an accent band: two rings from one state. On the inset offset the ring
+ * covers the border, and the border keeps its own colour under it, the rule
+ * every field keeps (see Input.css).
  */
 .crewlet-datetime:focus-visible,
 .crewlet-datetime.is-open {
-  outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
-  border-color: var(--color-focus);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-datetime.is-disabled,
@@ -7081,10 +7143,10 @@ svg.crewlet-datetime__chevron {
   margin: 0;
 }
 
+/* The same one ring the trigger draws, over the box's own boundary. */
 .crewlet-datetime__time-input:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
-  border-color: var(--color-focus);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-datetime__footer {
@@ -7718,7 +7780,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* FilterChip-GTGLLOXE.css */
+/* FilterChip-EZ4QMW4E.css */
 /*
  * The filter chip: neutral until it is on, and then the accent.
  *
@@ -7789,9 +7851,12 @@ svg.crewlet-datetime__chevron {
   color: var(--color-text-primary);
 }
 
+/* One ring, over the chip's own boundary rather than 2px off it, which is two
+   edges with a gap between them: the rule every field keeps (see Input.css).
+   A chip that is on still says so under the ring, in its fill and its ink. */
 .crewlet-filter-chip:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 .crewlet-filter-chip:disabled {
@@ -7828,7 +7893,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* IconButton-TVEUWK6L.css */
+/* IconButton-VYWP6SGW.css */
 /*
  * IconButton: a square icon-only control.
  *
@@ -7865,6 +7930,21 @@ svg.crewlet-datetime__chevron {
   outline-offset: 2px;
 }
 
+/*
+ * ONE RING, OVER THE BOUNDARY, on every square that draws one: the secondary
+ * and the soft-brand at rest, and the ghost-brand, which grows one under the
+ * pointer. A ring standing 2px off a visible border is two edges with a gap
+ * between them, which reads as a second outline rather than as focus; on the
+ * inset offset it covers the border instead, the rule every field keeps (see
+ * Input.css). The other ghosts never draw an edge, so they keep the outset
+ * ring.
+ */
+.crewlet-icon-btn--secondary:focus-visible,
+.crewlet-icon-btn--soft-brand:focus-visible,
+.crewlet-icon-btn--ghost-brand:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 .crewlet-icon-btn:disabled,
 .crewlet-icon-btn[aria-disabled='true'] {
   opacity: 0.5;
@@ -7989,7 +8069,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* ImageUpload-YCHJMUGX.css */
+/* ImageUpload-L2GE4JUM.css */
 /*
  * ImageUpload, the click-to-upload affordance built on Avatar.
  *
@@ -8173,9 +8253,13 @@ svg.crewlet-datetime__chevron {
   cursor: default;
 }
 
+/* One ring, drawn OVER the badge's knockout ring rather than 2px outside it:
+   over the image the knockout is an edge of its own, and a ring standing off
+   it was two rings round one small disc. On the inset offset the focus ring
+   takes the knockout's place, which still parts the disc from the image. */
 .crewlet-image-upload__remove:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 .crewlet-image-upload__input {
@@ -8267,7 +8351,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Input-2PU5CPKK.css */
+/* Input-DRFNI26F.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -8344,11 +8428,14 @@ svg.crewlet-datetime__chevron {
  * forced-colors mode drops every box-shadow and keeps outlines: a ring drawn
  * as a shadow disappears for exactly the readers who most need one.
  *
- * It is drawn INSIDE the box, on the offset every focusable in a clipping
- * scroller takes, so it covers the boundary rather than standing outside it.
- * Two things follow: a scroller cannot clip it, and the field does not grow a
- * four-pixel halo the moment a caret lands in it, which is what a filter box
- * in a toolbar of them did to the row it sits in.
+ * It is ONE PIXEL, LAID EXACTLY ON THE BOUNDARY: the field's own hairline,
+ * drawn in the focus colour, which is how the console's fields say focus. At
+ * two pixels it was a heavy band round every box a caret landed in, and on a
+ * form of them the field being typed in read as the loudest thing on the page.
+ * Drawn on the boundary rather than outside it, a scroller cannot clip it and
+ * the field does not grow a halo the moment a caret lands in it, which is what
+ * a filter box in a toolbar of them did to the row it sits in. Every boxed
+ * field in the package rings this way (`Input.test.tsx` holds them to it).
  *
  * THE BORDER IS LEFT ALONE. Recolouring it under the ring says nothing the
  * ring has not already said, and it is what cost the error state its own
@@ -8364,8 +8451,8 @@ svg.crewlet-datetime__chevron {
  * on a pointer press as well as on a tab.
  */
 .crewlet-input:has(.crewlet-input__control:focus-visible) {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-input.is-error {
@@ -8624,8 +8711,8 @@ svg.crewlet-datetime__chevron {
    on the control itself: a textarea is the field, with nothing wrapped round
    it and nothing focusable inside it. */
 .crewlet-textarea:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-textarea.is-error {
@@ -8641,10 +8728,37 @@ svg.crewlet-datetime__chevron {
   cursor: not-allowed;
 }
 
+/*
+ * ONE LINE THAT GROWS STARTS AT THE SINGLE-LINE FIELD'S HEIGHT. A box that
+ * grows to fit what is typed was drawn at the large control step while it held
+ * one line, so the box a list item is written in stood sixteen pixels taller
+ * than the fields above and below it. One line now stands at the medium step,
+ * the height of every single-line field, with the line centred in it as an
+ * input's is: the block padding is what that step leaves once the two border
+ * pixels and one line are paid for. Each line past the first grows it from
+ * there.
+ */
 .crewlet-textarea.is-auto-resize {
   resize: none;
   overflow: hidden;
-  min-height: var(--size-control-lg);
+  min-height: var(--size-control-md);
+  padding-block: max(
+    0px,
+    calc((var(--size-control-md) - 2px - var(--font-line-height-normal) * var(--font-size-compact)) / 2)
+  );
+}
+
+/*
+ * AND WHAT TRAILS IT SITS ON ITS FIRST LINE, centred in the band one line
+ * takes, which is exactly where an input's trailing hint sits. Pinned a spacing
+ * step from the top, it sat above the line's middle and level with nothing;
+ * on the first line it stays put as the box grows under it.
+ */
+.crewlet-textarea-shell:has(> .crewlet-textarea.is-auto-resize) > .crewlet-input__trailing {
+  top: 0;
+  display: flex;
+  align-items: center;
+  height: var(--size-control-md);
 }
 
 .crewlet-textarea::placeholder {
@@ -8886,7 +9000,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Kbd-JPLDVJIP.css */
+/* Kbd-MCWJTRTT.css */
 /*
  * A keycap: the key's name on a small raised tile.
  *
@@ -8931,9 +9045,20 @@ svg.crewlet-datetime__chevron {
  * platform prints a chord. It is a `kbd` of its own because that is what a key
  * inside a key combination is, and a user agent's `kbd` rule would otherwise
  * set its own face and size on it.
+ *
+ * AND IT TAKES NO BOX FROM ANYBODY ELSE. An application stylesheet that draws
+ * a bare `kbd` as a cap of its own (a common enough rule) reached each key in
+ * here and framed it, so one chord drew a frame round a run of framed keys.
+ * The key states every part of its box, so whatever a page says about `kbd`,
+ * a chord is one cap.
  */
 .crewlet-kbd__key {
   font: inherit;
+  color: inherit;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: 0;
 }
 
 /*
@@ -10610,7 +10735,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* NewItemsNotice-T4DSSPVV.css */
+/* NewItemsNotice-Q5ED73BQ.css */
 /*
  * The pill that holds finished rows back.
  *
@@ -10661,9 +10786,11 @@ svg.crewlet-datetime__chevron {
   color: var(--color-brand-accent-ink);
 }
 
+/* One ring, over the pill's own boundary rather than 2px off it, which is two
+   edges with a gap between them: the rule every field keeps (see Input.css). */
 .crewlet-new-items:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -10673,7 +10800,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* OrgLabel-CR233G34.css */
+/* OrgLabel-6WSKJQOT.css */
 /*
  * What a node of an org chart and a row of an org table both say
  * (OrgLabel.tsx).
@@ -10762,6 +10889,44 @@ svg.crewlet-datetime__chevron {
   fill: currentColor;
 }
 
+/*
+ * A PERSON IS A FIGURE INSIDE A DASHED RING, as the console chart draws one:
+ * the boundary says this seat is held by someone outside the system. The ring
+ * is the 24px target step and the figure inside it a step smaller than a
+ * container's glyph, which leaves the air a boundary needs to read as one: at
+ * the zone's own step the figure touched the ring on every side.
+ *
+ * THE RING IS DECORATION, drawn in the step kept for it, and the figure is the
+ * mark: the ring says how the seat is held, never what it is.
+ */
+.crewlet-org-label__icon--ring {
+  position: relative;
+}
+
+.crewlet-org-label__icon--ring::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--size-target-min);
+  height: var(--size-target-min);
+  border: 1px dashed var(--color-text-muted);
+  border-radius: var(--radius-circle);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.crewlet-org-label__icon--ring > svg {
+  width: var(--font-size-md);
+  height: var(--font-size-md);
+}
+
+/* A ROW DRAWS THE FIGURE ALONE, as the console table does: a ring on a line
+   of text is a second boundary inside the row's own. */
+.crewlet-org-label--row .crewlet-org-label__icon--ring::before {
+  content: none;
+}
+
 /* ---- The name and its caption -------------------------------------------- */
 
 /*
@@ -10960,7 +11125,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* OrgNode-BT7T2Q2X.css */
+/* OrgNode-TCHJH5FO.css */
 /*
  * What a node of an org chart carries beyond what it says (OrgNode.tsx).
  *
@@ -10996,6 +11161,15 @@ svg.crewlet-datetime__chevron {
 
 /* ---- A unit's lead ------------------------------------------------------ */
 
+/*
+ * NO LINE OF ITS OWN. The console chart rules a hairline over this strip and
+ * frames a set lead's pill inside it, 4px in from the node's own edge: inside
+ * a card that is already framed, that is a box drawn twice, with a second line
+ * running beside the card's edge on three sides and a third across the top.
+ * A set lead is a ground instead, and a ground needs no line to divide it from
+ * the name above. Only an EMPTY slot keeps an edge, dashed (below), because
+ * the dash is what says a place is waiting rather than a frame round a value.
+ */
 .crewlet-org-node-lead {
   position: relative;
   display: flex;
@@ -11004,28 +11178,11 @@ svg.crewlet-datetime__chevron {
   padding: 0 var(--spacing-1) var(--spacing-1);
 }
 
-/*
- * THE SEPARATOR IS INSET, like every hairline inside a node of the console
- * chart (it draws this one from 4 to `nw - 4`). Edge to edge it cut the card
- * in two and the node read as two stacked cells rather than as a card with a
- * fact along its bottom edge. Drawn rather than bordered for that reason
- * alone: a border cannot be shorter than the box it is on.
- */
-.crewlet-org-node-lead::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: var(--spacing-1);
-  left: var(--spacing-1);
-  height: 1px;
-  background: var(--color-border-default);
-}
-
 /*
  * A PILL RATHER THAN A LINE OF TEXT, so the lead reads as one value attached
- * to this unit rather than as a second caption. The empty state is the same
- * pill with a dashed edge and the word alone: a unit with no lead has a place
- * for one, which is what invites the reader to set it.
+ * to this unit rather than as a second caption. RAISED, on the step a chip
+ * with no boundary of its own takes (the palette suite holds it off the card
+ * on both themes), so it is found by its ground rather than by a frame.
  */
 .crewlet-org-node-lead__pill {
   display: flex;
@@ -11040,32 +11197,30 @@ svg.crewlet-datetime__chevron {
   font-weight: var(--font-weight-medium);
   line-height: var(--font-line-height-tight);
   color: var(--color-text-secondary);
-  /*
-   * THE BOUNDARY IS THE HOVER STEP, not the resting hairline, which is what
-   * the console chart draws around this one pill and nowhere else inside a
-   * node: every other line in there is the separator step and this is a
-   * boundary around a value. At the separator's own alpha the pill was a
-   * rectangle a reader had to look for, on the one fact a unit's node states.
-   */
-  border: 1px solid var(--color-border-hover);
+  background: var(--color-surface-elevated);
   border-radius: var(--radius-sm);
 }
 
 /*
- * AND AN EMPTY ONE IS THE SAME PILL, DASHED. The console chart separates the
- * two by the DASH and by the ink, and its two boundary alphas are 0.15 and
- * 0.12, which is one step of this ramp: written as two tokens the difference
- * would be invisible beside the dash that already carries it.
+ * AND AN EMPTY ONE IS AN EMPTY SLOT: no ground, a dashed edge and the word
+ * alone in the quieter ink, as the console chart draws it. A unit with no lead
+ * has a place for one, and the dash is what says the place is waiting to be
+ * filled, which is what invites the reader to set it. It is the one edge drawn
+ * inside a node, and only while the slot is empty: a set lead is a raised
+ * ground with no edge at all. The edge is the hover step rather than the
+ * resting hairline, because at the hairline's own step the slot was a
+ * rectangle a reader had to look for.
  */
 .crewlet-org-node-lead__pill--empty {
   color: var(--color-text-tertiary);
-  border-style: dashed;
+  background: none;
+  border: 1px dashed var(--color-border-hover);
 }
 
 /*
  * A LEAD THAT CAN BE CHANGED IS STILL A LEAD. Where the pill holds a control
  * rather than a word, the control IS the pill: it fills it, carries the pill's
- * own type and ink, and draws no second boundary inside the one already there.
+ * own type and ink, and draws no boundary or ground of its own on the pill's.
  * Left at its own size, a control step inside a half-rank strip is a button
  * that overflows the node it sits in.
  *
@@ -11092,6 +11247,35 @@ svg.crewlet-datetime__chevron {
   color: var(--color-text-primary);
 }
 
+/*
+ * WHATEVER WRAPS THE CONTROL FILLS THE PILL TOO. A menu's trigger arrives
+ * inside the menu's own anchor, and the anchor was a shrink-wrapped item of
+ * the pill's row: the control was the width of the word "Lead" in a pill as
+ * wide as the node, and a press anywhere else in the pill did nothing.
+ */
+.crewlet-org-node-lead__pill > :has(> .crewlet-btn) {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+
+/*
+ * REACHED, THE WHOLE PILL LIGHTS, because the whole pill is the control. The
+ * ghost control's own hover and press grounds were a patch the size of the
+ * word inside the pill, so it paints neither, and the pill takes the row hover
+ * step over its own ground while the control is pointed at or its menu is
+ * open. Its ink still goes to full, above.
+ */
+.crewlet-org-node-lead__pill
+  .crewlet-btn:is(:hover, :active):not(:disabled):not([aria-disabled='true']) {
+  background: none;
+}
+
+.crewlet-org-node-lead__pill:has(.crewlet-btn:hover:not(:disabled):not([aria-disabled='true'])),
+.crewlet-org-node-lead__pill:has(.crewlet-btn[aria-expanded='true']) {
+  background-image: linear-gradient(var(--color-surface-hover), var(--color-surface-hover));
+}
+
 /* The name of the lead, not the chevron beside it, is what truncates. */
 .crewlet-org-node-lead__pill .crewlet-btn > span {
   overflow: hidden;
@@ -11110,25 +11294,42 @@ svg.crewlet-datetime__chevron {
  *
  * DRAWN SMALL, HIT FULL SIZE, the rule the whole node keeps: the strip is half
  * a rank, so the target is grown past the pill's own edge into the node's
- * bottom padding, exactly as the lead's own control is. It takes its room from
- * the pill rather than overlaying the name, so the lead truncates beside it
- * instead of running under it: the console chart shifts its text 5px left for
- * the same reason, which a row of flex items does on its own.
+ * bottom padding, exactly as the lead's own control is.
+ *
+ * AND IT DOES NOT MOVE THE NAME. Taking its room from the row, it pushed the
+ * name half its own width off the pill's middle, so "Lead: Ada" sat left of
+ * centre on every unit that had one. It is drawn over the pill's right end
+ * instead, out of the row, and the lead's control keeps the same room at both
+ * of its ends while it is there: the name is centred on the whole pill and
+ * truncates before it reaches the clear, and the control is still the whole
+ * pill to press.
  */
 .crewlet-org-node-lead__clear {
-  position: relative;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  z-index: 1;
   display: inline-flex;
-  flex: none;
   align-items: center;
   justify-content: center;
+  transform: translateY(-50%);
+}
+
+.crewlet-org-node-lead__pill:has(> .crewlet-org-node-lead__clear) {
+  position: relative;
+}
+
+.crewlet-org-node-lead__pill:has(> .crewlet-org-node-lead__clear)
+  .crewlet-btn:not(.crewlet-org-node-lead__clear *) {
+  padding-inline: var(--spacing-4);
 }
 
 /*
- * THE GROUND IS A STEP OFF THE CARD'S, rather than that chart's own alpha. Its
- * 0.08 of white over a dark card is a disc a reader can see; on this package's
- * LIGHT theme the step at that alpha is the card's own value, so the disc
- * would disappear on half the deployments. The step past the card is the same
- * relationship in both themes, which is what the drawing was after.
+ * THE DISC IS ITS RING. Its ground is the raised step the pill itself is
+ * drawn on, rather than that chart's own alpha (0.08 of white is the card's
+ * own value on this package's light theme, so a disc drawn by its ground
+ * would disappear on half the deployments), and so what draws it on the pill
+ * is the hairline round it.
  */
 .crewlet-org-node-lead__disc {
   position: absolute;
@@ -11166,6 +11367,14 @@ svg.crewlet-datetime__chevron {
   color: var(--color-text-primary);
 }
 
+/* AND NOTHING ELSE FILLS EITHER: a ghost control's own hover and press grounds
+   are painted on its whole 24px target, which drew a circle twice the disc's
+   size round a 12px mark the moment it was pointed at. */
+.crewlet-org-node-lead__clear
+  :is(.crewlet-btn, .crewlet-icon-btn):is(:hover, :active):not(:disabled):not([aria-disabled='true']) {
+  background: none;
+}
+
 .crewlet-org-node-lead__clear:hover .crewlet-org-node-lead__disc {
   border-color: var(--color-border-control);
 }
@@ -11177,7 +11386,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* OrgTable-VWMFC3TB.css */
+/* OrgTable-JZSYTUIK.css */
 /*
  * An organization as an indented table of rows (OrgTable.tsx).
  *
@@ -11204,8 +11413,11 @@ svg.crewlet-datetime__chevron {
    */
   --crewlet-org-table-indent: var(--spacing-8);
   /* The wire arriving at a row, and what it fades to at the row's own end.
-     Rebound per hue below. */
-  --crewlet-org-table-wire: var(--color-border-control);
+     It leaves the trunk in the TRUNK'S own step, as the console table's does,
+     so the two read as one line; started brighter than the trunk, every
+     branch was a dash floating beside a trunk nobody could see. Rebound per
+     hue below. */
+  --crewlet-org-table-wire: var(--color-border-strong);
   --crewlet-org-table-wire-fade: var(--color-border-default);
   /* What a row's name and its mark are drawn in. Rebound per hue below. */
   --crewlet-org-table-ink: var(--color-text-primary);
@@ -11314,8 +11526,15 @@ svg.crewlet-datetime__chevron {
  * follows, so the trunk is one line down the whole table rather than one per
  * level. The cell's padding is taken back and the wire element carries the
  * level instead.
+ *
+ * AND THE CELL IS THE ROW'S FULL HEIGHT, because the wire in it is. The grid
+ * centres its cells in a row taller than they are, and a trunk drawn down a
+ * centred cell stopped short of both edges of every row, so the line its
+ * segments were meant to stack into read as one dash per row. The cell still
+ * centres what it holds.
  */
 .crewlet-org-table [role='gridcell']:first-child {
+  align-self: stretch;
   padding-inline-start: var(--spacing-2);
 }
 
@@ -11350,12 +11569,19 @@ svg.crewlet-datetime__chevron {
  * segments stack into one line. Neutral, always: it belongs to the table
  * rather than to any row, and a trunk that took each row's hue in turn would
  * be a striped line saying nothing.
+ *
+ * IN THE STRONG STEP, where the console table draws its trunk a notch above
+ * the row's ground. In the plain border step it all but vanished on the
+ * table's own ground, and the branches beside it read as loose dashes.
+ *
+ * It starts one hairline above the cell, over the grid's rule between rows,
+ * so the segments meet rather than being cut by that rule.
  */
 .crewlet-org-table__wire[data-trunk]::before {
-  inset-block: 0;
+  inset-block: -1px 0;
   inset-inline-start: 0;
   width: 2px;
-  background: var(--color-border-default);
+  background: var(--color-border-strong);
 }
 
 /* A root row's trunk starts at the row's middle: nothing hangs above the
@@ -11364,6 +11590,13 @@ svg.crewlet-datetime__chevron {
   inset-block-start: 50%;
 }
 
+/* The last row a root shows ends the trunk at its own branch: no row below it
+   hangs off the line, and a trunk run on to the next tree or the table's edge
+   is a line to nowhere. */
+.crewlet-org-table__wire[data-last][data-trunk]::before {
+  inset-block-end: 50%;
+}
+
 /*
  * THE BRANCH: from the trunk across the gutter to the row's own mark, fading
  * as it arrives. It reaches one cell gap past the wire's own width, which is
@@ -11631,7 +11864,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Popover-WJGCF3ZQ.css */
+/* Popover-QCINR7WG.css */
 /*
  * The anchored panel.
  *
@@ -11674,10 +11907,13 @@ svg.crewlet-datetime__chevron {
   transform-origin: bottom left;
 }
 
-/* A panel that takes focus shows it on the panel, not only on what is inside. */
+/* A panel that takes focus shows it on the panel, not only on what is inside,
+   and shows it ONCE: over the panel's own boundary rather than 2px off it,
+   which is two edges with a gap between them (the rule every field keeps, see
+   Input.css). */
 .crewlet-popover:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 /* Up from under its anchor, which is where it is about to be. */
@@ -11819,7 +12055,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* PricingCard-7EFXRSD2.css */
+/* PricingCard-HTAHG4ST.css */
 /*
  * PricingCard, the plan-tier card surface.
  *
@@ -11886,9 +12122,13 @@ svg.crewlet-datetime__chevron {
   border-color: var(--color-brand-accent-soft-strong);
 }
 
+/* One ring, over the card's own boundary rather than 2px off it, which is two
+   edges with a gap between them: the rule every field keeps (see Input.css).
+   The chosen plan keeps an accent line inside the ring, since the selection
+   ring below is two pixels deep and the focus ring covers one of them. */
 .crewlet-pricing-card:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 /* The chosen plan takes the selection ring, which is the same inset rule
@@ -12214,7 +12454,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* SearchTrigger-Z5D4AAY7.css */
+/* SearchTrigger-KIZLWBEH.css */
 /*
  * A button drawn as the field it stands in for.
  *
@@ -12275,9 +12515,12 @@ svg.crewlet-datetime__chevron {
   color: var(--color-text-primary);
 }
 
+/* One ring, over the trigger's own boundary rather than 2px off it, which is
+   two edges with a gap between them: the rule every field keeps (see
+   Input.css). */
 .crewlet-search-trigger:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 .crewlet-search-trigger__icon {
@@ -12459,7 +12702,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* SegmentedControl-X3BI3XU4.css */
+/* SegmentedControl-76HODRBT.css */
 /*
  * SegmentedControl: the pill row, drawn with the Tabs classes.
  *
@@ -12509,6 +12752,13 @@ svg.crewlet-datetime__chevron {
   font-size: var(--font-size-compact);
 }
 
+/* One ring, over the card's own boundary rather than 2px off it, which is two
+   edges with a gap between them: the rule every field keeps (see Input.css).
+   The chosen card still says so under the ring, in its tint and its ink. */
+.crewlet-segmented--cards .crewlet-segmented__option:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 /* The one card that is chosen takes the accent, which is what "here, this
    one" means everywhere else in the product. */
 .crewlet-segmented--cards .crewlet-segmented__option.is-active {
@@ -12517,6 +12767,91 @@ svg.crewlet-datetime__chevron {
   color: var(--color-brand-accent-ink);
 }
 
+/*
+ * A ROW OF SEPARATE CHIPS, for a setting with more choices than a well holds
+ * on one line: the console's own row of unit types. It wraps rather than
+ * running off the panel it sits in, and each chip stands on the raised ground
+ * a chip with no edge of its own takes (held off the card by the palette
+ * suite), so no chip draws a frame inside the panel's. Two classes, for the
+ * reason the card row gives above.
+ */
+.crewlet-tabs.crewlet-segmented--chips {
+  /* The chip's own drawing (below) is the --crewlet-segmented-chip-height
+     band inside a target-floor box, so it is the same height at every
+     density the console's 11px chip is drawn at. */
+  --crewlet-segmented-chip-height: calc(var(--size-target-min) - var(--spacing-1));
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  /* No gap between ROWS: each chip's target already overhangs its drawing by
+     half a step above and below, so two rows' drawings stand a whole step
+     apart while their targets meet. */
+  gap: 0 var(--spacing-1);
+}
+
+/*
+ * SMALL, AS THE CONSOLE'S ARE, AND DRAWN SMALL BUT HIT FULL SIZE, the rule the
+ * org chart's own controls keep. A chip is a word in the 11px face with a step
+ * of room either side, drawn as a band shorter than the pointer-target floor;
+ * the button around it stays at the floor, so the band can be the console's
+ * size without being a target a finger misses. At the small control step a
+ * row of ten was a second row of buttons under the field's label rather than a
+ * row of answers to it.
+ *
+ * The band is the button's own ::before, behind the label, rather than its
+ * background clipped to the content box: a clip takes the corner's curve in by
+ * the padding it removes, and a chip this small would lose its radius.
+ */
+.crewlet-segmented--chips .crewlet-segmented__option {
+  position: relative;
+  isolation: isolate;
+  min-height: var(--size-target-min);
+  padding: 0 var(--spacing-2);
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-segmented--chips .crewlet-segmented__option::before {
+  content: '';
+  position: absolute;
+  inset: calc((var(--size-target-min) - var(--crewlet-segmented-chip-height)) / 2) 0;
+  z-index: -1;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  pointer-events: none;
+}
+
+/* The chosen chip is FILLED with the accent: on a row of up to ten raised
+   chips, a fill is the one thing that says "this one" at a glance, as the
+   console's row says it. Its ring stands off it, because an edge drawn on an
+   accent fill in the focus colour is nearly the fill's own colour. */
+.crewlet-segmented--chips .crewlet-segmented__option.is-active {
+  color: var(--color-text-on-accent);
+}
+
+.crewlet-segmented--chips .crewlet-segmented__option.is-active::before {
+  background: var(--color-brand-accent);
+}
+
+/* What completes the last choice sits in the row, at the chips' own height
+   and in their face: a field at its own control step stood taller than every
+   chip beside it. */
+.crewlet-segmented__trailing {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.crewlet-segmented--chips .crewlet-segmented__trailing .crewlet-input {
+  min-height: var(--crewlet-segmented-chip-height);
+}
+
+.crewlet-segmented--chips .crewlet-segmented__trailing .crewlet-input__control {
+  font-size: var(--font-size-2xs);
+}
+
 .crewlet-segmented__description {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-regular);
@@ -12642,7 +12977,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Select-E24U5LBC.css */
+/* Select-4ANVLHUY.css */
 /*
  * Select: one chrome over two controls, and the product's only dropdown.
  *
@@ -12713,8 +13048,8 @@ svg.crewlet-datetime__chevron {
  * leave the other bare.
  */
 .crewlet-select:focus-within {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 /*
@@ -12992,8 +13327,8 @@ svg.crewlet-select__chevron {
  * outset ring on the input would be cut by the menu's own `overflow: hidden`.
  */
 .crewlet-select__search:focus-within {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-select__search {
@@ -14537,7 +14872,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Switch-U4OWK4CL.css */
+/* Switch-66RAQCRE.css */
 /*
  * Switch: a setting that takes effect as it moves.
  *
@@ -14651,14 +14986,17 @@ svg.crewlet-select__chevron {
  * control's own :focus-visible. The track is the same box: the control is
  * `inset: 0` over it.
  *
- * OUTSET, like a Checkbox's and unlike a text field's. A 20px pill has no
- * room to draw a ring inside itself, and there is no boundary to cover out
- * there either: the track's own border goes the accent colour of its fill
- * when the switch is on, so the ring is the only edge in that space.
+ * OUTSIDE THE TRACK, like a Checkbox's and unlike a text field's: a 20px pill
+ * has no room to draw a ring inside itself. But AGAINST it, not 2px off it.
+ * Off, the track draws a real boundary of its own, and a ring standing off
+ * that boundary was two edges with a gap between them, which reads as a
+ * second outline rather than as focus. Flush, the ring and the track are one
+ * edge in both states, and the ring is still drawn whole on the ground around
+ * the pill, where it is measured.
  */
 .crewlet-switch__track:has(.crewlet-switch__control:focus-visible) {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: 0;
 }
 
 .crewlet-switch__text {
@@ -14881,7 +15219,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Tabs-XCNPHA7B.css */
+/* Tabs-BWFQSWY3.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -15172,6 +15510,18 @@ svg.crewlet-select__chevron {
   outline-offset: 2px;
 }
 
+/*
+ * A CHIP RINGS ON ITS OWN EDGE, flush rather than 2px off it. The chip that
+ * is on draws a hairline round itself, and a ring standing off that hairline
+ * was two edges with a gap between them, which reads as a second outline
+ * rather than as focus. Flush, the ring covers the hairline, and it stays
+ * inside the well's 2px inset: two pixels wide, it meets the well's own
+ * boundary rather than leaving a sliver of the well between the two.
+ */
+.crewlet-tabs--pill .crewlet-tabs__tab:focus-visible {
+  outline-offset: 0;
+}
+
 .crewlet-tabs__tab.is-disabled,
 .crewlet-tabs__tab:disabled {
   opacity: 0.55;
@@ -15211,7 +15561,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Tag-4OXGO2DU.css */
+/* Tag-4BRQS6GN.css */
 /*
  * The tag: a small pill naming a state, a category or a value.
  *
@@ -15478,11 +15828,38 @@ svg.crewlet-select__chevron {
   box-shadow: inset 0 0 0 1px var(--crewlet-tag-ink);
 }
 
+/*
+ * ONE RING, ON THE PILL'S OWN EDGE, never off it. A pill draws a border
+ * whenever it is neutral, pointed at or pressed, and a ring standing off that
+ * border is two edges with a gap between them, which reads as a second
+ * outline rather than as focus. So every control here rings over the pill's
+ * border, and the offset that puts it there is each control's own, because
+ * the three boxes meet that border in different places:
+ *
+ * - a whole actionable tag IS the pill, so -1px covers the border and one
+ *   pixel outside it;
+ * - the press half of a split pill stops at the border's inside edge, so 0
+ *   puts its ring on the same two pixels;
+ * - the remove reaches over the border at the top and the bottom (see its
+ *   rule below), so -1px puts its ring there as well.
+ *
+ * ONE PIXEL INTO THE PILL AT MOST, not a field's two, because a pressed tag
+ * says so in an ink line just inside its border: a ring two pixels deep would
+ * cover the one change that pressing it makes.
+ */
 .crewlet-tag--actionable:focus-visible,
 .crewlet-tag__press:focus-visible,
 .crewlet-tag__remove:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+}
+
+.crewlet-tag--actionable:focus-visible,
+.crewlet-tag__remove:focus-visible {
+  outline-offset: -1px;
+}
+
+.crewlet-tag__press:focus-visible {
+  outline-offset: 0;
 }
 
 /* ── the pill that holds two controls ──────────────────────────────────── */
@@ -15618,7 +15995,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* TagGroup-APC2EFH4.css */
+/* TagGroup-BCQZD7ZD.css */
 /*
  * A labelled list of tags with the tail behind a count.
  *
@@ -15684,9 +16061,12 @@ svg.crewlet-select__chevron {
   color: var(--color-text-primary);
 }
 
+/* One ring, over the dashed boundary rather than 2px off it, which is two
+   edges with a gap between them: the rule every field keeps (see Input.css).
+   The list above has no edge of its own, so its ring stays outset. */
 .crewlet-tag-group__more:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -15696,7 +16076,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* TagsInput-W4P36PRJ.css */
+/* TagsInput-P2HS5QL4.css */
 /*
  * TagsInput: several values in one field.
  *
@@ -15771,8 +16151,8 @@ svg.crewlet-select__chevron {
  * the whole reason they sit above the field instead of inside it.
  */
 .crewlet-tags-input__box:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-tags-input.is-disabled {
@@ -16024,7 +16404,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* TimeWindowPicker-7I7KWCMU.css */
+/* TimeWindowPicker-GBF4JDFI.css */
 /*
  * TimeWindowPicker: one trigger over one panel.
  *
@@ -16064,11 +16444,17 @@ svg.crewlet-select__chevron {
   border-color: var(--color-border-hover);
 }
 
+/*
+ * ONE RING, OVER THE BOUNDARY, for focus and for open alike. It stood 2px off
+ * the box with the border recoloured to the focus colour as well, which is an
+ * accent hairline, a gap and an accent band: two rings from one state. On the
+ * inset offset the ring covers the border, and the border keeps its own colour
+ * under it, the rule every field keeps (see Input.css).
+ */
 .crewlet-time-window:focus-visible,
 .crewlet-time-window.is-open {
-  outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
-  border-color: var(--color-focus);
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-time-window.is-disabled,
@@ -16328,11 +16714,18 @@ svg.crewlet-time-window__tick {
   transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-.crewlet-time-window__masked:focus-within {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  border-color: var(--color-focus);
-  box-shadow: var(--shadow-focus);
+/*
+ * THE BOX RINGS ONCE, AS A FIELD DOES. It drew the field register's old
+ * indicator: the border recoloured to the focus colour AND --shadow-focus,
+ * which is itself a ring (a background-coloured gap, then a band), so a
+ * focused box showed two accent edges with a gap between them, and the
+ * transparent outline under them was a third that forced-colors mode paints.
+ * What is left is the field's one outline on the inset offset, over the box's
+ * own boundary (see Input.css), keyed on the box's own input.
+ */
+.crewlet-time-window__masked:has(.crewlet-time-window__masked-input:focus-visible) {
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
 .crewlet-time-window__masked-input {
@@ -17013,7 +17406,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* TreeCanvas-HVOV4SQN.css */
+/* TreeCanvas-L2XYONWL.css */
 /*
  * A hierarchy drawn as cards on a canvas (TreeCanvas.tsx).
  *
@@ -17119,32 +17512,21 @@ svg.crewlet-time-window__tick {
 }
 
 /*
- * The halo: a hairline ring OUTSIDE the card's own boundary, at the lightest
- * of the hue's three alphas. It is what says a card is toned at all from the
- * far end of a chart, where the fill is a few pixels of tint; drawn as its own
- * ring rather than a second border so it never competes with the boundary that
- * says where the card ends. Pointer-transparent, because it is drawn over the
- * gap the next card's controls reach into.
- */
-.crewlet-tree-canvas__card[data-tone]::after {
-  content: '';
-  position: absolute;
-  inset: -3px;
-  border: 1px solid var(--crewlet-tree-canvas-card-halo);
-  border-radius: var(--radius-lg);
-  pointer-events: none;
-}
-
-/*
- * The six hues, each as the four steps a toned card draws: the fill it sits
- * on, the boundary around it, the halo outside that, and the ink its name is
- * written in. The ink is published as a variable rather than applied here
- * because WHICH text is the name is the caller's to say.
+ * ONE BOUNDARY, AND NO HALO. A toned card used to carry a second hairline ring
+ * 3px outside its boundary, at the lightest of the hue's alphas, so a toned
+ * card was framed twice: two parallel lines round one node read as a double
+ * border, which is the one thing no box in this package draws. The fill and
+ * the boundary in the hue already say the card is toned from across a chart.
+ *
+ * The six hues, each as the steps a toned card draws: the fill it sits on, the
+ * boundary around it, the ink its name is written in and the accent its mark
+ * takes. The ink and the accent are published as variables rather than applied
+ * here because WHICH text is the name and which drawing the mark is are the
+ * caller's to say.
  */
 .crewlet-tree-canvas__card[data-tone='purple'] {
   --crewlet-tree-canvas-card-fill: var(--color-node-purple-fill);
   --crewlet-tree-canvas-card-line: var(--color-node-purple-line);
-  --crewlet-tree-canvas-card-halo: var(--color-node-purple-halo);
   --crewlet-tree-canvas-card-ink: var(--color-node-purple-ink);
   --crewlet-tree-canvas-card-accent: var(--color-node-purple);
 }
@@ -17152,7 +17534,6 @@ svg.crewlet-time-window__tick {
 .crewlet-tree-canvas__card[data-tone='cyan'] {
   --crewlet-tree-canvas-card-fill: var(--color-node-cyan-fill);
   --crewlet-tree-canvas-card-line: var(--color-node-cyan-line);
-  --crewlet-tree-canvas-card-halo: var(--color-node-cyan-halo);
   --crewlet-tree-canvas-card-ink: var(--color-node-cyan-ink);
   --crewlet-tree-canvas-card-accent: var(--color-node-cyan);
 }
@@ -17160,7 +17541,6 @@ svg.crewlet-time-window__tick {
 .crewlet-tree-canvas__card[data-tone='green'] {
   --crewlet-tree-canvas-card-fill: var(--color-node-green-fill);
   --crewlet-tree-canvas-card-line: var(--color-node-green-line);
-  --crewlet-tree-canvas-card-halo: var(--color-node-green-halo);
   --crewlet-tree-canvas-card-ink: var(--color-node-green-ink);
   --crewlet-tree-canvas-card-accent: var(--color-node-green);
 }
@@ -17168,7 +17548,6 @@ svg.crewlet-time-window__tick {
 .crewlet-tree-canvas__card[data-tone='amber'] {
   --crewlet-tree-canvas-card-fill: var(--color-node-amber-fill);
   --crewlet-tree-canvas-card-line: var(--color-node-amber-line);
-  --crewlet-tree-canvas-card-halo: var(--color-node-amber-halo);
   --crewlet-tree-canvas-card-ink: var(--color-node-amber-ink);
   --crewlet-tree-canvas-card-accent: var(--color-node-amber);
 }
@@ -17176,7 +17555,6 @@ svg.crewlet-time-window__tick {
 .crewlet-tree-canvas__card[data-tone='rose'] {
   --crewlet-tree-canvas-card-fill: var(--color-node-rose-fill);
   --crewlet-tree-canvas-card-line: var(--color-node-rose-line);
-  --crewlet-tree-canvas-card-halo: var(--color-node-rose-halo);
   --crewlet-tree-canvas-card-ink: var(--color-node-rose-ink);
   --crewlet-tree-canvas-card-accent: var(--color-node-rose);
 }
@@ -17184,7 +17562,6 @@ svg.crewlet-time-window__tick {
 .crewlet-tree-canvas__card[data-tone='blue'] {
   --crewlet-tree-canvas-card-fill: var(--color-node-blue-fill);
   --crewlet-tree-canvas-card-line: var(--color-node-blue-line);
-  --crewlet-tree-canvas-card-halo: var(--color-node-blue-halo);
   --crewlet-tree-canvas-card-ink: var(--color-node-blue-ink);
   --crewlet-tree-canvas-card-accent: var(--color-node-blue);
 }
@@ -17220,18 +17597,43 @@ svg.crewlet-time-window__tick {
  * canvas clips, so an outset ring is cut away on the cards nearest the frame.
  * This component hands out the tab stop, so the indicator is its to draw; left
  * to the caller it was drawn on some charts and on others not at all.
- */
-.crewlet-tree-canvas__card [role='treeitem']:focus-visible {
+ *
+ * A CARD'S OWN NODE RINGS THE WHOLE CARD. Where the treeitem is the card's
+ * direct child, the card's edge IS the node's edge, and a ring drawn on the
+ * treeitem did two things wrong: it stopped short of anything the card holds
+ * under the node (a unit's lead), and it stood beside the card's boundary as a
+ * second line. So the ring is drawn on the card, over its boundary, and the
+ * treeitem draws none in any state, the way a field's control leaves its ring
+ * to the field. A row deeper inside a card (`*` between the two, because a row
+ * is always inside something the caller drew) has no boundary of its own, and
+ * keeps its ring.
+ */
+.crewlet-tree-canvas__card * [role='treeitem']:focus-visible,
+.crewlet-tree-canvas__card:has(> [role='treeitem']:focus-visible) {
   outline: 2px solid var(--color-focus);
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
+.crewlet-tree-canvas__card > [role='treeitem'] {
+  outline: none;
+}
+
 /* The selection is where the reader is, so it takes the accent. Inset, for the
    same reason the ring is. */
 .crewlet-tree-canvas__card [role='treeitem'][aria-selected='true'] {
   box-shadow: inset 0 0 0 1px var(--color-brand-accent);
 }
 
+/* On a card's own node the selection IS the card's boundary, in the accent: an
+   inset ring beside the boundary drew two lines where one says it. */
+.crewlet-tree-canvas__card:has(> [role='treeitem'][aria-selected='true']) {
+  border-color: var(--color-brand-accent);
+}
+
+.crewlet-tree-canvas__card > [role='treeitem'][aria-selected='true'] {
+  box-shadow: none;
+}
+
 /*
  * THE POINTER'S CONTROLS, drawn over the end of the card and quiet until it is
  * reached.
@@ -17376,8 +17778,8 @@ svg.crewlet-time-window__tick {
  * The space around the whole chart, as a token, for the reason the gaps are
  * one. None by default: a chart of panels is read inside its own frame, and
  * the space around it is the page's. The `node` appearance takes the console
- * chart's own margin below, which is what keeps the outermost node's halo and
- * its focus ring off the canvas's clip.
+ * chart's own margin below, which is what keeps the control hanging under the
+ * outermost node off the canvas's clip.
  */
 .crewlet-tree-canvas__margin {
   width: var(--spacing-0);
@@ -17651,8 +18053,8 @@ svg.crewlet-time-window__tick {
  *   drawn distance is the same number either way, and the room simply moved
  *   from the card's box into the gap with the control that needs it.
  * - AROUND: `--spacing-8`, 40px against 36, and deliberately the step above
- *   rather than below: the canvas CLIPS, and the outermost node's halo and
- *   focus ring have to clear the frame.
+ *   rather than below: the canvas CLIPS, and what hangs under the outermost
+ *   node has to clear the frame.
  */
 .crewlet-tree-canvas--node .crewlet-tree-canvas__gap {
   width: var(--spacing-9);
@@ -17996,6 +18398,27 @@ svg.crewlet-time-window__tick {
   border-radius: 0;
 }
 
+/*
+ * AND THEY ANSWER THE POINTER WITH THEIR INK, NOT A GROUND, as the console
+ * chart's do: the edit mark turns to the accent and the trash to the critical
+ * hue, and nothing is painted under either. A cell is a whole share of the
+ * node's corner, so a ground painted over it was a square standing past the
+ * card's rounded corner, the one place on a node with no room for a square.
+ */
+.crewlet-tree-canvas--node
+  .crewlet-tree-canvas__actions
+  .crewlet-icon-btn:hover:not(:disabled):not([aria-disabled='true']) {
+  background: none;
+  border-color: transparent;
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-tree-canvas--node
+  .crewlet-tree-canvas__actions
+  .crewlet-icon-btn--ghost-danger:hover:not(:disabled):not([aria-disabled='true']) {
+  color: var(--color-feedback-danger-ink);
+}
+
 /*
  * A CONTROL ON AN EDGE IS A DISC: a ground of its own, so the line it sits on,
  * or the card it straddles, stops at its edge rather than running through it.
@@ -18097,38 +18520,29 @@ svg.crewlet-time-window__tick {
   background-image: linear-gradient(var(--color-surface-subtle), var(--color-surface-subtle));
   border: 1px dashed var(--color-brand-accent-soft-strong);
   box-shadow: var(--shadow-md);
-  animation: crewlet-tree-canvas-ghost-card var(--motion-duration-slow) var(--motion-easing-emphasized)
-    var(--motion-duration-base) both;
-}
-
-/*
- * THE RING THAT BREATHES, outside the boundary, exactly where a toned card's
- * halo is: it is what says the card is waiting for the reader from the far
- * end of a chart, where a dashed hairline is a few pixels. It is decoration
- * over the gap the next card's controls reach into, so it takes no pointer.
- */
-.crewlet-tree-canvas__card--composing::after {
-  content: '';
-  position: absolute;
-  inset: -3px;
-  border: 1px solid var(--color-brand-accent-soft-strong);
-  border-radius: var(--radius-lg);
-  pointer-events: none;
+  /*
+   * THE BOUNDARY BREATHES, which is what says the card is waiting for the
+   * reader from the far end of a chart, where a dashed hairline is a few
+   * pixels. It used to be a second ring 3px outside the boundary that
+   * breathed instead, two lines round one card where every box in this
+   * package draws one, so the dashed boundary itself moves between the soft
+   * accent and the full one.
+   */
   animation:
-    crewlet-tree-canvas-ghost-glow var(--motion-duration-slow) var(--motion-easing-default)
-      var(--motion-duration-moderate) both,
+    crewlet-tree-canvas-ghost-card var(--motion-duration-slow) var(--motion-easing-emphasized)
+      var(--motion-duration-base) both,
     /* A BREATH RATHER THAN A TRANSITION, so it is a multiple of the scale's
        longest step (1.8s) rather than a number off it: the scale tops out at
        one UI transition, and a pulse held there would strobe. The console
-       chart's own is 2s. It starts where the fade in ends. */
+       chart's own is 2s. It starts where the card's arrival ends. */
       crewlet-tree-canvas-ghost-pulse calc(var(--motion-duration-slow) * 6)
-      var(--motion-easing-in-out)
-      calc(var(--motion-duration-moderate) + var(--motion-duration-slow)) infinite;
+      var(--motion-easing-in-out) calc(var(--motion-duration-base) + var(--motion-duration-slow))
+      infinite;
 }
 
 /*
  * THE FORM ARRIVES LAST, and from slightly above and behind: the wire, then
- * the card, then the glow, then what is inside it, which is the order a reader
+ * the card, then what is inside it, which is the order a reader
  * follows from the node they pressed to the thing they have to fill in. The
  * caller's own element, whatever it drew, because the ghost's contents are
  * entirely the caller's.
@@ -18172,24 +18586,14 @@ svg.crewlet-time-window__tick {
   }
 }
 
-@keyframes crewlet-tree-canvas-ghost-glow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
 @keyframes crewlet-tree-canvas-ghost-pulse {
   0%,
   100% {
-    opacity: 0.5;
+    border-color: var(--color-brand-accent-soft-strong);
   }
 
   50% {
-    opacity: 1;
+    border-color: var(--color-brand-accent);
   }
 }
 
@@ -18209,8 +18613,8 @@ svg.crewlet-time-window__tick {
  * A READER WHO ASKED FOR LESS gets the ghost DRAWN, in place, at once. Nothing
  * about the add is behind the motion: the chart still makes room, the branch
  * is still dashed, the view still moves onto it and focus still lands in the
- * form. Only the arrival, the breath and the rise are dropped, and the ring
- * stays at the bright end of the pulse rather than wherever it was stopped.
+ * form. Only the arrival, the breath and the rise are dropped, and the
+ * boundary rests at the soft step it breathes from.
  */
 @media (prefers-reduced-motion: reduce) {
   /* NOT `transform` on the card itself: its transform is where the layout
@@ -18230,11 +18634,6 @@ svg.crewlet-time-window__tick {
     transform: none;
     animation: none;
   }
-
-  .crewlet-tree-canvas__card--composing::after {
-    opacity: 1;
-    animation: none;
-  }
 }