@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/left-column.css

@@ -0,0 +1,1628 @@
+/* The left column: rail, outline, resources, the rail's head and its groups, plus the MCP details Help and the Agent chip share. */
+
+/* ---- left rail ---------------------------------------------------------- */
+/* Docked under the top bar, down to the timeline, its seam on the right. A
+   flex column that never scrolls itself: fixed rows (the context head, the
+   search) over ONE scroller, `.rail-scroll`.
+   `clip`, not `hidden`, so a focused control cannot scroll the column. */
+.left-rail {
+  grid-column: edge-l / rail-r;
+  grid-row: main-t / main-b;
+  display: flex;
+  flex-direction: column;
+  overflow: clip;
+  background: var(--surface-panel);
+  border-right: 1px solid var(--line);
+}
+
+/* The chain that bounds the scroller: without `min-height: 0` at every step
+   the panel grows to its rows, nothing scrolls, and the outline cannot
+   virtualise. */
+.left-rail > .file-panel {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* A ZERO BASIS, not `auto`: an auto basis is the whole list's height, and the
+   shrink it forces is shared with the fixed rows above, so a long outline
+   squeezed the tabs off the bar line. */
+.rail-scroll {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-gutter: stable;
+  padding-bottom: var(--space-4);
+}
+
+/* ---- a mode's left column ----------------------------------------------- */
+/* A mode portals its own left column into this slot (cellSlots.tsx), and the
+   Files panel steps aside while it does: hidden, not unmounted, so the
+   outline's scroll and open rows survive the round trip. The slot is
+   the column's one flexible row, bounded like `.rail-scroll`, and the mode
+   brings its own head at `--panel-head-h`. */
+.left-rail > .rail-mode {
+  display: none;
+}
+
+.shell.is-mode .left-rail > .rail-mode {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+.shell.is-mode .left-rail > .file-panel {
+  display: none;
+}
+
+/* ---- the Assets tab ------------------------------------------------------ */
+
+/* The right-aligned byte count on an Other files row. */
+.asset-size {
+  flex: none;
+  margin-left: auto;
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+}
+
+.resource-asset-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+  min-height: var(--row-h);
+  padding: 0 var(--space-4) 0 var(--space-6);
+}
+
+/* ---- the manual ---------------------------------------------------------- */
+/* The dialog's content column, mirroring `.export-dialog`: that is the shape a
+   shared `Dialog`'s children take in this chrome. */
+.help-manual {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  min-width: 0;
+}
+
+.help-basics {
+  list-style: disc;
+  margin: var(--space-3) 0;
+  padding: 0 var(--space-2) 0 var(--space-7);
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+  line-height: var(--leading-body);
+}
+
+.help-basics li + li {
+  margin-top: var(--space-2);
+}
+
+.help-rows {
+  list-style: none;
+  margin: 0 0 var(--space-2);
+  padding: 0 var(--space-2);
+}
+
+/* Fifty-six shortcut rows in four groups, as two balanced columns inside the
+   560px dialog. `break-inside: avoid` on the groups is load-bearing: a column
+   break through a group would leave its heading at the foot of one column and
+   its rows at the head of the other, which reads as two different groups. */
+.help-groups {
+  columns: 2;
+  column-gap: var(--space-8);
+}
+
+.help-groups > div {
+  break-inside: avoid;
+}
+
+.help-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-1) 0;
+  color: var(--ink-2);
+  font-size: var(--type-sm);
+}
+
+.help-row kbd,
+.help-note code {
+  font: inherit;
+  font-size: var(--type-micro);
+  color: var(--ink-1);
+  background: var(--fill-rest);
+  border-radius: var(--radius-xs);
+  padding: 1px var(--space-2);
+  white-space: nowrap;
+}
+
+.help-note {
+  margin: 0 0 var(--space-3);
+  padding: 0 var(--space-2);
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  line-height: var(--leading-body);
+}
+
+/* ---- search -------------------------------------------------------------- */
+/* The library dialog shows the same box in its own bar, with this gap under
+   it. In the column the search is a fixed row, inset like every row, so the
+   column's geometry is scoped to it. */
+.file-search {
+  margin-bottom: var(--space-2);
+}
+
+/* Paper's Studio column insets its search 16px, like its heads. A container,
+   for the floor rule below. */
+.left-rail .file-search {
+  flex: none;
+  margin: 0;
+  padding: var(--space-4) var(--space-7);
+  container: file-search / inline-size;
+}
+
+/* AT THE 168px RAIL FLOOR the field is 136 wide, and after its padding, the
+   magnifier, two gaps and the 20px "/" hint the input kept about 66px:
+   "Search layers" cut to "Search la". The hint gives way first, since the
+   placeholder is the field's only label you can see and the key still works
+   without it. Without the hint the input has about 94px, and the words fit. */
+@container file-search (width < 160px) {
+  .search-field > .kbd {
+    display: none;
+  }
+}
+
+/* THE BARE INPUT, a DIRECT child only. The Files panel wraps its input in the
+   kit's `.search-field` (icon, input, "/" hint), and that recipe styles its
+   own input; a descendant selector here tied it on specificity and painted a
+   second box inside the field. */
+.file-search > input {
+  width: 100%;
+  height: var(--control-h);
+  font: inherit;
+  color: var(--ink-1);
+  background: var(--fill-rest);
+  border: 1px solid transparent;
+  border-radius: var(--control-radius);
+  padding: 0 var(--space-5);
+}
+
+.file-search > input::placeholder {
+  color: var(--ink-3);
+}
+
+.file-search > input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--focus-ring);
+}
+
+/* THE NAVIGATOR'S GROUP LABEL, and there is one spec for it.
+
+   The rail keeps caps micro-labels where the inspector keeps 12px sentence
+   case, on purpose: this is a dense tree, and a group label at row size
+   competes with the rows under it. What was NOT on purpose is that the rail
+   had three of these (SHOTS at 0.07em, a resource lane at 0.07em, MCP at
+   0.04em in a different ink), which is not a register, it is drift. All three
+   now read from here. Paper's column heads set it at 11/600 in the secondary
+   ink, so the register is 11px, not the 10px micro size. */
+.file-section-label,
+.resource-lane-title,
+.mcp-heading {
+  color: var(--ink-2);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-caps);
+  font-size: var(--type-sm);
+  font-weight: var(--weight-semibold);
+}
+
+.file-section-label {
+  margin: var(--space-6) 0 var(--space-3);
+  padding: 0 var(--space-2);
+}
+
+/* A section header with its count or verb on the same line (the Shots and
+   Layers heads). */
+.file-section-label--actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* FULL BLEED: the lanes run edge to edge and every inset is the column's
+   12px. What sits in a lane body carries that inset itself. */
+.resource-lane {
+  margin: 0 0 var(--space-6);
+}
+
+/* A divider BETWEEN two lanes, so the first lane of a stack has none. Hidden
+   file inputs lead some stacks and a lane is a `<section>` or a `<details>`,
+   so neither `:first-child` nor `:first-of-type` names the first lane.
+   `--line-soft` and not `--line`: the panel EDGE is a border, a rule between
+   two groups inside one panel is a divider, and the inspector's sections draw
+   theirs with the softer token too. */
+.resource-lane ~ .resource-lane {
+  border-top: 1px solid var(--line-soft);
+}
+
+.resource-lane-head,
+.resource-lane > summary {
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-2) var(--space-6);
+  color: var(--ink-3);
+  list-style: none;
+}
+
+/* The editable lanes carry both quota/provenance metadata and three add
+   actions. Give those two jobs their own rows in the narrow rail so neither
+   wraps through the other. Read-only summary rows keep the compact flex form. */
+.resource-lane-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: stretch;
+  gap: var(--space-1);
+  padding-top: var(--space-3);
+}
+
+.resource-lane-head > .resource-add-actions {
+  justify-self: end;
+}
+
+.resource-lane-head .resource-lane-title {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+}
+
+.resource-lane > summary {
+  cursor: pointer;
+}
+
+.resource-lane > summary::-webkit-details-marker,
+.resource-row summary::-webkit-details-marker {
+  display: none;
+}
+
+/* ONE DISCLOSURE GLYPH ACROSS THE RAIL. These two lanes drew a `"›"` text
+   character in a `::before` while the outline tree beside them drew the house
+   `IconChevron`, so one rail carried two chevrons at two weights. Both lanes
+   take the icon now; `.chevron.is-open` cannot apply, because a native
+   `<details>` is uncontrolled and no React state knows it opened. */
+.resource-lane > summary > .chevron,
+.mcp-section > summary > .chevron {
+  flex: none;
+  width: 10px;
+  height: 10px;
+  color: var(--ink-3);
+}
+
+.resource-lane[open] > summary > .chevron,
+.mcp-section[open] > summary > .chevron {
+  transform: rotate(90deg);
+}
+
+.resource-lane-title {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+}
+
+.resource-count,
+.resource-usage {
+  color: var(--ink-3);
+  font-variant-numeric: var(--numeric);
+}
+
+.resource-usage {
+  margin-left: auto;
+  white-space: nowrap;
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 400;
+}
+
+.resource-add-actions,
+.resource-row-actions,
+.resource-form-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.resource-add-actions button,
+.resource-row-actions button,
+.resource-form-actions button {
+  min-height: 22px;
+  padding: var(--space-1) var(--space-3);
+  font: inherit;
+  font-size: var(--type-micro);
+  font-weight: 500;
+  color: var(--ink-2);
+  background: var(--fill-rest);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.resource-add-actions button:hover:not(:disabled),
+.resource-row-actions button:hover:not(:disabled),
+.resource-form-actions button:hover:not(:disabled) {
+  color: var(--ink-1);
+  background: var(--fill-hover);
+}
+
+.resource-add-actions button:focus-visible,
+.resource-row-actions button:focus-visible,
+.resource-form-actions button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.resource-add-actions button:disabled,
+.resource-row-actions button:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: default;
+}
+
+.resource-row-actions button.is-danger {
+  color: var(--danger-ink);
+}
+
+.resource-form-actions button.is-primary {
+  color: var(--ink-1);
+  background: var(--accent);
+}
+
+.resource-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* A resource row is a square band, edge to edge, with no card or stripe of
+   its own. The Brand tab's scope is a mark on the column edge: Shot-owned
+   rows lead in the stronger ink. File rows on the Assets tab carry no scope
+   and no mark. */
+.resource-row.is-project {
+  box-shadow: inset 2px 0 0 var(--line);
+}
+
+.resource-row.is-shot {
+  box-shadow: inset 2px 0 0 var(--ink-3);
+}
+
+.resource-row > details > summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: var(--row-h);
+  padding: 0 var(--space-4) 0 var(--space-6);
+  list-style: none;
+  cursor: pointer;
+}
+
+.resource-row > details > summary:hover {
+  background: var(--fill-hover);
+}
+
+.resource-row > details > summary:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.resource-thumb {
+  flex: none;
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xs);
+  background: var(--fill-rest);
+}
+
+.resource-thumb.is-kind {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ink-2);
+  font-size: var(--type-micro);
+  font-weight: 600;
+}
+
+.resource-thumb.is-swatch {
+  box-shadow: inset 0 0 0 1px var(--line-soft);
+}
+
+.resource-label {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-1);
+  font-weight: 500;
+}
+
+.resource-badge,
+.resource-used {
+  flex: none;
+  padding: 1px var(--space-2);
+  color: var(--ink-3);
+  background: var(--fill-rest);
+  border-radius: var(--radius-xs);
+  font-size: var(--type-micro);
+}
+
+.resource-used {
+  color: var(--ink-2);
+}
+
+/* Aligned to the column's content edge, like every row above it. */
+.resource-detail {
+  display: grid;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-6) var(--space-4);
+  color: var(--ink-2);
+  font-size: var(--type-micro);
+}
+
+.resource-detail > div:not(.resource-row-actions) {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr);
+  gap: var(--space-3);
+}
+
+.resource-detail code {
+  overflow: hidden;
+  color: var(--ink-2);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.resource-detail p {
+  margin: 0;
+  line-height: var(--leading-body);
+}
+
+.resource-row-actions {
+  justify-content: flex-end;
+}
+
+.resource-empty,
+.resource-pending {
+  padding: var(--space-2) var(--space-4) var(--space-4);
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  line-height: var(--leading-body);
+}
+
+/* In the column the notes take its 12px inset. The library dialog shows the
+   same empty note at the base inset above. */
+.left-rail .resource-empty,
+.left-rail .resource-pending {
+  padding-inline: var(--space-6);
+}
+
+.resource-form {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0 var(--space-6) var(--space-3);
+  padding: var(--space-4);
+  background: var(--fill-rest);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+}
+
+.resource-form input {
+  width: 100%;
+  min-width: 0;
+  height: 28px;
+  padding: 0 var(--space-4);
+  font: inherit;
+  color: var(--ink-1);
+  background: var(--fill-rest);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+}
+
+.resource-form input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--focus-ring);
+}
+
+.resource-form-value {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--space-2);
+}
+
+.resource-form input[type="color"] {
+  width: 32px;
+  padding: var(--space-1);
+}
+
+.resource-form-actions {
+  justify-content: flex-end;
+}
+
+/* No production caller passes `readOnly`: the board's old rail rendered the
+   panels editable. The prop and this rule stay with the panels' API, which
+   assetDrop.test still mounts read-only. */
+.resource-stack.is-readonly .resource-lane-body {
+  padding-top: var(--space-1);
+}
+
+/* ---- the outline ---------------------------------------------------------- */
+.scene-list,
+.layer-list,
+.layer-children,
+.component-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ONE INDENT SOURCE: every row pads by its own `--depth` (set on its LI), so
+   the nesting ul adds no step (the list reset above zeroes its box). It only
+   draws the guide, a 1px line under its parent's chevron: the parent's depth
+   is what the ul inherits. `pointer-events: none` so the line never takes a
+   row's click. */
+.layer-children {
+  /* The centre of the 14px chevron column, where a guide stands. */
+  --chevron-mid: 7px;
+  position: relative;
+}
+
+.layer-children::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--space-6) + var(--depth, 0) * var(--tree-indent) + var(--mask-inset, 0px) + var(--chevron-mid));
+  width: 1px;
+  background: var(--line-soft);
+  pointer-events: none;
+}
+
+/* Regular, as Paper's layer rows set it. A shot's name is the 500 one, on
+   `.scene-row`, and a component's sits on its own row. */
+.layer-name {
+  font: inherit;
+  font-weight: 400;
+  color: var(--ink-1);
+  background: transparent;
+  border: 0;
+  padding: 0 var(--space-4);
+  height: var(--row-h);
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  /* `--radius-md`, the house rule for a list item (design-system.md, Shape).
+     In the column it only shapes the focus ring: the row is the band. */
+  border-radius: var(--radius-md);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* A SHOT ROW IS ITS LI: the fill runs under the Open button beside the name,
+   so hover and the current mark live on the item. Paper's Studio column draws
+   a shot as an INSET PILL, not a band: 16px in from each edge, 32 tall, the
+   6px radius. A shot is a few big targets, where the layer tree is many small
+   ones, so the two lists keep different shapes. */
+.scene-list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-height: var(--row-h-shot);
+  margin-inline: var(--space-7);
+  padding: 0 var(--space-4);
+  border-radius: var(--radius-sm);
+}
+
+/* The name button fills the row and lays out icon then label; the label
+   ellipsizes on its own (a flex container ignores text-overflow on a bare
+   text node). */
+.scene-row {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: var(--row-h-shot);
+  padding: 0;
+  font: inherit;
+  font-weight: 500;
+  color: var(--ink-1);
+  background: transparent;
+  border: 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.row-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The shot's length, in the chrome's one duration string (`formatDuration`,
+   "18.00s"), in a 48px mono slot so every row's number ends on one column.
+   A floor, not a width: six characters fill it at 12px, and a shot of 100s
+   or more grows its slot instead of painting over the row's edge. */
+.scene-row-duration {
+  flex: none;
+  min-width: 48px;
+  text-align: right;
+  font-family: var(--font-numeric);
+  font-size: var(--type-md);
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-2);
+}
+
+/* Add shot, under the list: the kit's dashed button, full width, on the same
+   16px inset as the shot pills. */
+.scene-list-add {
+  padding: var(--space-4) var(--space-7);
+}
+
+/* 13, Paper's Add shot label, a step over the kit button's 12. */
+.scene-list-add > .btn {
+  width: 100%;
+  font-size: var(--type-lg);
+}
+
+.scene-list-add > .btn svg {
+  flex: none;
+  width: 16px;
+  height: 16px;
+}
+
+/* FULL BLEED: square, edge to edge, and inset 12px plus the row's own depth.
+   The three lists do NOT start on one edge, and Paper draws them that way: a
+   shot is an inset pill (16 margin plus 8 padding, so 24), a layer is a band
+   across the column (12), and a component is a bordered row on the 12px edge
+   (12 margin, 1 border, 4 padding, so 17). */
+.layer-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  /* `--mask-inset` is the room a mask's bracket takes (maskMarks.tsx). */
+  padding-left: calc(var(--space-6) + var(--depth, 0) * var(--tree-indent) + var(--mask-inset, 0px));
+  padding-right: var(--space-4);
+  min-height: var(--row-h);
+}
+
+/* The components list, with the instance count pulling right so a
+   definition's reach is readable at a glance: that number is what "editing
+   this changes N things" means. Paper's Rows board draws a component as a
+   BORDERED row, a thing you place rather than a node of the tree, 32 tall and
+   standing on the column's 12px edge. The list is flat, so there is no depth
+   to indent by. */
+.component-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0 var(--space-6) var(--space-2);
+  padding: 0 var(--space-3) 0 var(--space-2);
+  min-height: var(--row-h-shot);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xs);
+}
+
+/* The rows' states: hover the soft state fill, selection the selected fill
+   (the kit's two state tokens) with the name in accent ink. Selection carries
+   a `:hover` twin so it outranks the hover by a class rather than by coming
+   later. */
+.scene-list-item:hover,
+.layer-row:hover,
+.component-row:hover {
+  background: var(--fill-state-soft);
+}
+
+.scene-list-item.is-current,
+.scene-list-item.is-current:hover,
+.layer-row.is-selected,
+.layer-row.is-selected:hover,
+.component-row.is-current,
+.component-row.is-current:hover {
+  background: var(--fill-selected);
+}
+
+.layer-row.is-selected .layer-name,
+.component-row.is-current .layer-name {
+  color: var(--accent-ink);
+}
+
+/* The current SHOT inverts that: Paper keeps its name in the primary ink and
+   strokes the clapper in the accent, the pill's border colour. */
+.scene-row.is-current .layer-kind {
+  color: var(--accent);
+}
+
+/* The kind icon. Fixed width so every name in the tree starts on the same
+   column.
+   NEUTRAL, and the shape carries the meaning — the Figma read. Every kind
+   painted in one accent made fifteen distinct glyphs read as one repeated blob,
+   which is the opposite of a taxonomy. Dim at rest, full ink on the row you are
+   pointing at or have selected.
+   THE COMPONENT FAMILY IS THE ONE EXCEPTION, and it is the point: the diamonds
+   (lone = a code component, diamond-in-diamond = a placed definition,
+   four-diamond = the definition itself) keep the accent, so components pop out
+   of a tree of shapes exactly the way they do in Figma and Framer. It stays
+   last so it survives hover and selection. */
+.layer-kind {
+  flex: none;
+  width: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ink-2);
+  user-select: none;
+}
+
+.layer-kind svg {
+  width: 16px;
+  height: 16px;
+}
+
+.layer-row:hover .layer-kind,
+.layer-row.is-selected .layer-kind {
+  color: var(--ink-1);
+}
+
+.layer-kind.is-component {
+  color: var(--accent-ink);
+}
+
+/* A MASK'S OWN ROW keeps the accent too (Paper page 25): the glyph says "this
+   cuts", and its Mask group's glyph stays neutral. */
+.layer-kind.is-mask {
+  color: var(--accent-ink);
+}
+
+/* A HIDDEN MASK switches masking off. Its row dims to the disabled ink and its
+   badge reads Off, so the cause of an unmasked picture is visible. */
+.layer-row.is-mask-off .layer-name,
+.layer-row.is-mask-off .layer-kind,
+.layer-row.is-mask-off .mask-badge,
+.lifespan-row.is-mask-off .lifespan-name,
+.lifespan-row.is-mask-off .layer-kind,
+.lifespan-row.is-mask-off .mask-badge {
+  color: var(--ink-disabled);
+}
+
+/* A live mask with nothing in front of it: one quiet line under its row, on
+   the name's column. */
+.layer-mask-hint {
+  height: 22px;
+  display: flex;
+  align-items: center;
+  padding-left: calc(var(--space-6) + var(--depth, 0) * var(--tree-indent) + var(--mask-inset, 0px) + var(--space-8) + var(--space-7) + var(--space-2));
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  color: var(--ink-disabled);
+  pointer-events: none;
+}
+
+/* The disclosure chevron. Always visible on a row that can fold (unlike the
+   hover-only flags: a fold changes what the LIST shows, so its affordance
+   cannot be a secret), pointing right and rotating open — the ui package's
+   IconChevron convention. The spacer keeps leaf rows' kind icons on the same
+   column. */
+.layer-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ink-2);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  padding: var(--space-1);
+  flex: none;
+  width: 14px;
+}
+
+.layer-toggle svg {
+  width: 10px;
+  height: 10px;
+  transition: transform var(--dur-fast) var(--ease);
+}
+
+.layer-toggle.is-open svg {
+  transform: rotate(90deg);
+}
+
+.layer-toggle:hover {
+  color: var(--ink-1);
+  background: var(--fill-hover);
+}
+
+.layer-toggle-spacer {
+  flex: none;
+  width: 14px;
+}
+
+/* A row's flags rest QUIET, not hidden. A control nobody can see is a
+   capability nobody finds, so the design system's rule is a low resting
+   opacity rather than opacity 0. Full strength on hover, focus, or when it is
+   ON. The outline's eye and lock go further and stay visible (below). */
+.layer-flag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ink-2);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  opacity: 0.28;
+  border-radius: var(--radius-xs);
+  padding: var(--space-2);
+  flex: none;
+}
+
+.layer-flag svg {
+  width: 13px;
+  height: 13px;
+}
+
+/* Paper's layer rows size the pair apart: the eye 14, the lock 12. Every
+   layer row carries both, so the columns still line up row to row. */
+.layer-row .layer-flag.is-eye svg {
+  width: 14px;
+  height: 14px;
+}
+
+.layer-row .layer-flag.is-lock svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* EVERY ROW THAT CARRIES THESE FLAGS, because a clip row's label cell holds
+   the same three buttons and only the outliner's row was lifting them: eye,
+   lock and mute sat at 0.28 through a hover that was visibly over them. A
+   shot's Open and a component's Place are flags too, and lift with their row.
+   No new colour and no fill step: the fix is the resting opacity lifting,
+   which is the rule already proven in both appearances. */
+.layer-row:hover .layer-flag,
+.lifespan-row:hover .layer-flag,
+.scene-list-item:hover .layer-flag,
+.component-row:hover .layer-flag,
+.layer-flag[aria-pressed="true"],
+.layer-flag:focus-visible,
+.layer-flag:hover {
+  opacity: 1;
+}
+
+.layer-flag:hover {
+  background: var(--fill-hover);
+}
+
+/* THE OUTLINE'S FLAGS ARE VISIBLE AT REST. Paper's layer rows draw the eye
+   and the lock at full opacity in the tertiary ink, so the outline (and a
+   component row's Place) does not hide them behind a hover. ON and pointed-at
+   step up to the primary ink, which is what the resting opacity used to say.
+   The quiet rest above still holds for the timeline's lifespan rows and a
+   shot's Open. */
+.layer-row .layer-flag,
+.component-row .layer-flag {
+  opacity: 1;
+  color: var(--ink-3);
+}
+
+.layer-row .layer-flag[aria-pressed="true"],
+.layer-row .layer-flag:hover,
+.layer-row .layer-flag:focus-visible,
+.component-row .layer-flag:hover,
+.component-row .layer-flag:focus-visible {
+  color: var(--ink-1);
+}
+
+.layer-rename {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  color: var(--ink-1);
+  background: var(--fill-rest);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  padding: var(--space-1) var(--space-3);
+}
+
+.layer-rename:focus {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* ---- MCP (workspace endpoint, Project target) ---------------------------- */
+/* A compact patch-bay row. Status stays visible in the summary, while the
+   private hosted command and setup detail remain behind an explicit expand.
+   Help and the Agent chip's popover both wear it. */
+.mcp-section {
+  margin: 0 0 var(--space-2);
+  border-top: 1px solid var(--line-soft);
+}
+
+.mcp-section > summary {
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0 var(--space-2);
+  cursor: pointer;
+  list-style: none;
+}
+
+.mcp-section > summary::-webkit-details-marker {
+  display: none;
+}
+
+.mcp-section > summary:hover {
+  background: var(--fill-rest);
+}
+
+.mcp-section > summary:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.mcp-heading,
+.mcp-status {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* One line: in a narrow column the name ellipsizes before it wraps the row. */
+.mcp-heading {
+  min-width: 0;
+  gap: var(--space-3);
+  white-space: nowrap;
+}
+
+.mcp-heading > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mcp-heading svg,
+.mcp-status svg,
+.mcp-readiness > svg {
+  flex: none;
+  width: 12px;
+  height: 12px;
+}
+
+.mcp-heading svg {
+  color: var(--ink-3);
+}
+
+.mcp-status {
+  margin-left: auto;
+  gap: var(--space-1);
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  white-space: nowrap;
+}
+
+.mcp-status.is-read svg,
+.mcp-readiness.is-read > svg {
+  color: var(--accent-ink);
+}
+
+.mcp-readiness.is-write > svg {
+  color: var(--success);
+}
+
+.mcp-status.is-write svg {
+  color: var(--success);
+}
+
+.mcp-status.is-off svg,
+.mcp-readiness.is-off > svg {
+  color: var(--warn);
+}
+
+.mcp-body {
+  display: grid;
+  gap: var(--space-4);
+  padding: 0 var(--space-2) var(--space-4);
+}
+
+.mcp-project {
+  display: grid;
+  gap: var(--space-2);
+  min-width: 0;
+  padding: var(--space-4);
+  background: var(--fill-rest);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--control-radius);
+}
+
+.mcp-kicker,
+.mcp-command > span {
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  font-weight: 600;
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+}
+
+.mcp-project strong {
+  overflow: hidden;
+  color: var(--ink-1);
+  font-size: var(--type-sm);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mcp-project-name {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+}
+
+.mcp-project-name code {
+  overflow: hidden;
+  color: var(--ink-2);
+  font: var(--type-micro)/var(--leading-none) var(--font-mono);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The handoff: what the copied prompt names, and its Copy. */
+.mcp-handoff {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+}
+
+.mcp-project p,
+.mcp-note,
+.mcp-footnote {
+  margin: 0;
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  line-height: var(--leading-body);
+}
+
+.mcp-note code,
+.mcp-footnote code,
+.mcp-readiness code {
+  color: var(--ink-2);
+  font: var(--type-micro)/var(--leading-none) var(--font-mono);
+}
+
+.mcp-readiness {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--space-3);
+  padding: var(--space-3) 0;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.mcp-readiness.is-unknown {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.mcp-readiness > div {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.mcp-readiness strong {
+  color: var(--ink-2);
+  font-size: var(--type-micro);
+  font-weight: 500;
+}
+
+.mcp-readiness span {
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  line-height: var(--leading-body);
+}
+
+/* The hosted write switch: the label and what it means, the house toggle at
+   the row's end, and a refusal under both. */
+.mcp-writes {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--space-2) var(--space-3);
+  padding-bottom: var(--space-3);
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.mcp-writes > div {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.mcp-writes strong {
+  color: var(--ink-2);
+  font-size: var(--type-micro);
+  font-weight: 500;
+}
+
+.mcp-writes span,
+.mcp-writes-problem {
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  line-height: var(--leading-body);
+}
+
+.mcp-writes-problem {
+  grid-column: 1 / -1;
+  margin: 0;
+  color: var(--danger-ink);
+}
+
+.mcp-setup {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.mcp-command {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.mcp-command > div {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--space-2);
+}
+
+.mcp-command code {
+  min-width: 0;
+  padding: var(--space-2) var(--space-3);
+  color: var(--ink-1);
+  background: var(--fill-rest);
+  border-radius: var(--radius-sm);
+  font: var(--type-micro)/var(--leading-none) var(--font-mono);
+  line-height: var(--leading-body);
+  word-break: break-all;
+}
+
+.mcp-project-name button,
+.mcp-handoff button,
+.mcp-command button,
+.mcp-readiness button,
+.mcp-connect-link {
+  min-height: 22px;
+  padding: var(--space-1) var(--space-3);
+  color: var(--ink-2);
+  background: var(--fill-rest);
+  border: 0;
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--type-micro);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.mcp-project-name button:hover,
+.mcp-handoff button:hover,
+.mcp-command button:hover,
+.mcp-readiness button:hover,
+.mcp-connect-link:hover {
+  color: var(--ink-1);
+  background: var(--fill-hover);
+}
+
+.mcp-project-name button:focus-visible,
+.mcp-handoff button:focus-visible,
+.mcp-command button:focus-visible,
+.mcp-readiness button:focus-visible,
+.mcp-connect-link:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Hosted, the one connect step: a link drawn as the rows' buttons, sized to
+   its words rather than the grid's width. */
+.mcp-connect-link {
+  justify-self: start;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+/* The Agent chip's details, floated under the top bar by `Popover` (portaled
+   to <body>, so nothing here may depend on the bar's ancestors). The cap is
+   measured at the open (McpPopover), and the body scrolls inside it. */
+.mcp-popover-body {
+  width: 320px;
+  max-width: calc(100vw - 2 * var(--space-6));
+  overflow-y: auto;
+  padding: var(--space-6);
+}
+
+.mcp-popover-body > .mcp-body {
+  padding: 0;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   THE UX OVERHAUL: SAYING WHERE YOU ARE
+   ═══════════════════════════════════════════════════════════════════════════
+
+   One complaint underlies most of this section: the chrome knew which context
+   the author was in (`enteredScene`, `editingDef`, the selection) and never
+   said so out loud. The trail that named it was 11px of --text-dim with no
+   back affordance, so the only control that LOOKED like a way out was a chip
+   in the timeline head labelled with the shot's own name — which reads as a
+   title, not a button.
+
+   So the same facts are now stated in the same words and with the same
+   grammar in the header breadcrumb, the rail's head, the inspector's head,
+   the canvas bar's back chip and the timeline's corner (which names the place
+   and no longer leaves it). None of them is a new piece of state; all of them
+   read the context bits that already existed.
+   ────────────────────────────────────────────────────────────────────────── */
+
+/* ---- the rail's head ---------------------------------------------------- */
+/* Replaces the flat crumb strip. ONE ROW, Paper's shot browser head
+   (2026-10-13 design review): the way OUT first, in the accent ink with its
+   chevron, then a slash, then what you are IN at 12/600. It was two stacked
+   rows (about 42px), which only fit the old 48px head line by centring; the
+   head line is 40 now, and one row reads the same two answers left to right.
+   It is the panel's FIRST child, so it takes the shell's head line: exactly
+   one panel head tall (`--panel-head-h`) with the hairline under it, 16px in
+   like Paper's head. A fixed HEIGHT, not a floor: a long name ellipsizes
+   inside the row rather than growing it past the seam the dockedShellE2e
+   pins at the canvas bar's foot. */
+.rail-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  height: var(--panel-head-h);
+  min-width: 0;
+  padding: 0 var(--space-7);
+  overflow: hidden;
+  border-bottom: 1px solid var(--line);
+}
+
+/* The way back, one level. A real control with a chevron, in the accent ink
+   Paper gives the way out: this is the control that was missing, and the dim
+   text crumb it replaces is why the author reported having none. It gives
+   way to the subject: the subject is the row's heading. */
+.rail-back {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  max-width: 60%;
+  font: inherit;
+  font-size: var(--type-md);
+  color: var(--accent-ink);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-xs);
+  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rail-back:hover {
+  background: var(--fill-hover);
+}
+
+.rail-back svg {
+  flex: none;
+  width: 14px;
+  height: 14px;
+}
+
+/* What you are inside. A heading, not a crumb: semibold and full ink, so
+   the panel has a subject the eye lands on before the tree under it. */
+.rail-subject {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+/* After the way back, Paper's slash between the two answers. Decorative, so
+   its alternative text is empty and a reader hears the two controls alone.
+   The subject's own glyph steps aside there: the slash already says "inside",
+   and Paper's row has none. */
+.rail-back + .rail-subject::before {
+  content: "/" / "";
+  flex: none;
+  color: var(--ink-2);
+}
+
+.rail-back + .rail-subject .rail-subject-icon {
+  display: none;
+}
+
+.rail-subject-icon {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  color: var(--ink-2);
+}
+
+.rail-subject-icon svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* The component family keeps the accent here for the reason it keeps it in the
+   outliner: a definition is a different KIND of subject, not just another one.
+   Two classes, so it outranks the neutral rule. */
+.rail-subject-icon.is-component {
+  color: var(--accent-ink);
+}
+
+.rail-subject-name {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* A definition edits every placement at once, so its heading takes the accent. */
+.rail-subject.is-definition .rail-subject-name {
+  color: var(--accent-ink);
+}
+
+/* ---- section labels that carry a count ---------------------------------- */
+/* A collapsed section still has to say what is inside it, which a bare caps
+   label does not. Right-aligned so the labels stay a column. */
+.file-section-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* Mono 11 in the secondary ink, Paper's LAYERS and COMPONENTS counts. */
+.file-section-count {
+  margin-left: auto;
+  font-family: var(--font-numeric);
+  font-size: var(--type-sm);
+  font-weight: 400;
+  color: var(--ink-2);
+  font-variant-numeric: var(--numeric);
+  letter-spacing: 0;
+}
+
+/* A section head: the kit's section header height (32) on Paper's 16px
+   inset, the same inset as the head, the search and the shot pills.
+
+   The count MUST be a sibling of `.file-section-label`, never a child: the
+   resourcesPanel column tests compare that element's textContent by equality
+   against "Layers" and "Inside", so a nested span renames
+   the section rather than annotating it. The Components group needs no rule of
+   its own, its `summary` already is this row. The wrapper owns the spacing and
+   the label drops its own. */
+.file-section-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: var(--section-header-h);
+  margin-top: var(--space-3);
+  padding: 0 var(--space-7);
+}
+
+.file-section-head > .file-section-label {
+  margin: 0;
+  padding: 0;
+  flex: 1;
+}
+
+/* ---- a collapsible rail group ------------------------------------------- */
+/* A native `details`, like the MCP row, and NOT the inspector's section
+   component: that one unmounts its body when collapsed, and the outliner's
+   rows have to stay queryable and measurable whether or not the group is
+   open. Its summary is a section head. */
+.rail-group {
+  margin: 0;
+}
+
+.rail-group > summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  list-style: none;
+  /* 28 under a full `--line`, Paper's COMPONENTS head: a row-height divider,
+     a step shorter than the 32 section heads above it. */
+  min-height: var(--row-h);
+  margin-top: var(--space-3);
+  padding: 0 var(--space-7);
+  border-top: 1px solid var(--line);
+}
+
+.rail-group > summary::-webkit-details-marker {
+  display: none;
+}
+
+.rail-group > summary .file-section-label {
+  margin: 0;
+  padding: 0;
+  flex: 1;
+}
+
+.rail-group-chevron {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  color: var(--ink-3);
+  transition: transform var(--dur-fast) var(--ease);
+}
+
+.rail-group[open] .rail-group-chevron {
+  transform: rotate(90deg);
+}
+
+.rail-group-chevron svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* The group's own create verb. NOT `.layer-flag`: that class rests at 0.28 and
+   is lifted by its row's hover, and this button is not inside a row, so it
+   sat permanently dimmed with no hover that could ever reach it. */
+.rail-group-action {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  font: inherit;
+  font-size: var(--type-lg);
+  line-height: var(--leading-none);
+  color: var(--ink-2);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+}
+
+.rail-group-action:hover {
+  color: var(--ink-1);
+  background: var(--fill-hover);
+}
+
+/* The subject name is a BUTTON in the Project and Shot contexts (it carries the
+   `scene-crumb` / `shot-crumb` contract), and a plain span where the subject
+   cannot act. The heading rule styles the text; this strips the UA button chrome
+   so the two render identically. */
+button.rail-subject-name {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* The two families are two lists (authored definitions, then the repo
+   components a shot places). Adjacent means both are present, and the gap is
+   what keeps them from reading as one run of rows. */
+.component-list + .component-list {
+  margin-top: var(--space-2);
+}
+
+/* A span on a definition row and a BUTTON on a code row (where it selects the
+   placements), so the chrome reset is here rather than at the call site: the
+   number has to read identically whichever it is, or the two lists look like
+   two products. */
+.component-count {
+  margin-left: auto;
+  padding: 0 var(--space-1);
+  border: 0;
+  background: transparent;
+  font: inherit;
+  color: var(--ink-3);
+  font-variant-numeric: var(--numeric);
+}
+
+button.component-count {
+  border-radius: var(--radius-md);
+  cursor: pointer;
+}
+
+button.component-count:hover:not(:disabled) {
+  background: var(--fill-hover);
+  color: var(--ink-1);
+}
+
+/* Not `opacity`: the number still has to be readable. Nothing to press is the
+   claim, and a cursor that says so is the whole affordance. */
+button.component-count:disabled {
+  cursor: default;
+}
+
+/* Outline drop feedback. A LINE for "beside this row", a filled ring for
+   "inside it" — the two gestures have to look different before the drop, or
+   reparenting happens by accident. The layers outline is FRONT FIRST, so the
+   line above a row lands in front of it and the line below lands behind it;
+   the storyboard outline shares the two lines under its own meaning. */
+.layer-row.is-drop-before {
+  box-shadow: inset 0 2px 0 var(--accent);
+}
+
+.layer-row.is-drop-after {
+  box-shadow: inset 0 -2px 0 var(--accent);
+}
+
+.layer-row.is-drop-into {
+  box-shadow: inset 0 0 0 2px var(--accent);
+}
+
+/* The lower line of an EXPANDED parent sits over its first child row, and it
+   drops INTO the parent, at the front (Figma's rule). So it starts at the
+   children's indent rather than the parent's, and reads as "inside" before the
+   drop. A background layer, not a shadow, because a shadow cannot be inset
+   from one side; the longhands leave the hover and selection fill alone. */
+.layer-row.is-drop-inside {
+  background-image: linear-gradient(var(--accent), var(--accent));
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  background-size: calc(100% - var(--space-6) - (var(--depth, 0) + 1) * var(--tree-indent) - var(--mask-inset, 0px)) 2px;
+}
+
+/* JUST PLACED: a layer the Insert drawer added without selecting it ("Use as
+   background"). The row takes the accent wash and the name the accent ink,
+   arriving once, so the eye finds where it went. The next selection clears
+   it (`justPlaced`). Paper page 27, artboard 5. */
+@keyframes layer-just-placed-in {
+  from { background: var(--accent-quiet); }
+}
+
+.layer-row.is-just-placed,
+.layer-row.is-just-placed:hover {
+  background: var(--accent-soft);
+}
+
+.layer-row.is-just-placed .layer-name,
+.layer-row.is-just-placed .layer-kind {
+  color: var(--accent-ink);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .layer-row.is-just-placed { animation: layer-just-placed-in var(--dur-med) var(--ease); }
+}
+
+.layer-placed-note {
+  margin: 0;
+  padding: var(--space-4) var(--space-6) 0;
+  font-size: var(--type-sm);
+  line-height: var(--leading-xs);
+  color: var(--ink-3);
+}