/* SHARED·SWIPEREMOVE (1185) — a kept row slides left just the width of a clay
 * Remove button. First consumer: the Your stuff lists (105 HOME·STUFF card +
 * its full page, grids/your-stuff-full-page.md "Swipe a row — Remove from
 * Your stuff").
 *
 * THE RULING IT BUILDS (Andrew 2026-09-18, "approve, clay" — DECISIONS-2026-09-14.md):
 *   · Remove is CLAY — the "Do" kind colour (D-454). Solid --clay-600 fill +
 *     --text-on-accent label: the same recipe the search surface's call button
 *     (.ssf-call) already ships, 4.7:1 on the text.
 *   · The row slides ONLY the Remove width — never further. The template this
 *     replaces (REPORT-3841, ysfp-4) slid a 180px --danger block that carried
 *     the name clean off the row. Both halves of that are faults; this file is
 *     the correction.
 *   · One number, two consumers: --srm-w is the button's width AND the basis of
 *     the slide (--srm-slide = --srm-w + its right inset). The distance the row
 *     travels cannot drift from the thing revealed, because they are the same
 *     declaration.
 *   · ON A TOOL ROW the button carries one small line under the label, "Your
 *     logs are kept." (Andrew 2026-09-18, "Agree" — HIDE FROM HOME SETTLED,
 *     brief 3896): removing a tool takes it off Your stuff — and so off Home —
 *     while her logs stay in Caïa's record; re-adding the tool via Find a tool
 *     brings it back with its history. THE APP NEVER REMOVES A TOOL BY AGE
 *     (D-588): nothing here fires on its own — removal is parent-led only, and
 *     no age path can reach srmremove.
 *
 * ⚠️ REMOVE IS REACHABLE WITHOUT SWIPING. The button is a real <button> in the
 *   DOM at every state — at rest it sits under the row (the row paints above
 *   it), never display:none, never visibility:hidden, and opacity alone does
 *   not remove an element from the accessibility tree. Keyboard Tab lands on
 *   it and FOCUS REVEALS it: .srm-rm:focus-visible slides the row open with no
 *   JS at all (the button precedes the row, so a sibling selector is enough).
 *   VoiceOver reads "Remove · <row>" per row with no gesture. The swipe is an
 *   accelerator, never the only path.
 *
 * ⚠️ REDUCED MOTION: no glide. Under prefers-reduced-motion: reduce every
 *   transition here is off — the row snaps open/closed and the removed row
 *   collapses instantly. Dragging is direct manipulation either way (the row
 *   follows the finger; the render module drops the transition while a drag
 *   is live).
 *
 * THE STATES (registry list, each demonstrated on the mirror page):
 *   resting  — row covers the button; nothing shows.
 *   mid-swipe— the drag in progress (.is-mid): past halfway, button appearing.
 *   open     — fully slid (.is-open): the clay Remove, the name still readable.
 *   removed  — .is-removed: the row's height collapses and the list closes up
 *              (grid-template-rows 1fr → 0fr — an animatable collapse with no
 *              magic heights).
 *   focus    — the real :focus-visible rule; the mirror page shows it via an
 *              .is-kbd demo alias so a static page can display a focus state.
 *
 * ⚠️ NOT 447 SHARED·DANGERACTIONS (tap trigger → confirm strip; --danger is
 *   ITS colour, this card never touches red) and NOT 1172 SHARED·QUIETSECOND
 *   (text-only, fixed text-secondary — the deliberate opposite of a
 *   kind-coloured action).
 *
 * ⚠️ UNDO AFTER REMOVE IS NOT RULED. No undo ships and none is invented here;
 *   see REPORT-3869's open questions.
 *
 * Card CSS is self-contained under .srm — every element the renderer emits is
 * styled here; the consumer's own row (.ys-row or otherwise) is dropped into
 * .srm-row untouched. The list hairline AROUND a swipe row is consumer glue
 * (the consumer's own `row + row` divider needs one extra selector to see
 * through the wrapper); the fixture shows it, this file does not reach into
 * another card's grammar.
 */

.srm {
  /* The ONE number: button width == slide basis. 104 = 48 + 48 + 8 — measured
   * against the real label at 2× (see REPORT-3869) and snapped to the grid. */
  --srm-w: calc(var(--space-48) + var(--space-48) + var(--space-8));
  --srm-slide: calc(var(--srm-w) + var(--space-12));

  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--duration-200) var(--ease-standard);
}
.srm.is-removed { grid-template-rows: 0fr; }

/* The clip. min-height: 0 is what lets the grid row actually collapse. */
.srm-clip { overflow: hidden; min-height: 0; position: relative; }

/* ── THE CLAY REMOVE ──────────────────────────────────────────────────────────
   A compact pill, vertically centred — NOT a full-height block (that block is
   the fault this card replaces). Width is the declared --srm-w, exactly; the
   content centres inside it. At rest it sits UNDER the row (the row's opaque
   surface covers it) — in the DOM, focusable, on the accessibility tree, with
   no display/visibility/opacity tricks to hide it. */
.srm-rm { position: absolute; z-index: 0; top: 50%; right: var(--space-12);
  transform: translateY(-50%); height: var(--dim-40); width: var(--srm-w);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  background: var(--clay-600); color: var(--text-on-accent); border: 0;
  border-radius: var(--radius-pill); padding: 0; cursor: pointer;
  font-family: var(--font-label); font-size: var(--text-meta); font-weight: var(--weight-700);
  letter-spacing: var(--tracking-05); text-transform: uppercase; }
.srm-rm:active { background: var(--clay-700); }
.srm-rm:focus-visible { outline: var(--radius-2) solid var(--accent);
  outline-offset: var(--radius-2); }
.srm-rm-ic { display: inline-flex; width: var(--size-14); height: var(--size-14); }
.srm-rm-ic svg { width: 100%; height: 100%; display: block; }

/* ── THE SLIDING ROW ─────────────────────────────────────────────────────────
   The consumer's row, untouched, wrapped. The wrapper paints the panel surface
   so it covers the button at rest (the row is z-index 1, the button 0).

   WHAT "SLIDES" IS: the row's RIGHT EDGE slides left exactly --srm-slide — the
   Remove width plus its inset — and the row's content keeps its place. That is
   the ruling's own test applied literally: "slides only the Remove width" AND
   "(name stays readable)". A translate by the same distance was measured before
   this was written: it carries the name's first 100px under the clip edge and
   leaves ~5px of "Starting solids" on the row — the fault again, one inch from
   the old one. The name is anchored; the row makes room. The slide is a custom
   property (--srm-pull) so the drag (render module) and the states move the
   same width. */
.srm-row { position: relative; z-index: 1; background: var(--surface-card);
  width: calc(100% - var(--srm-pull, 0px));
  transition: width var(--duration-200) var(--ease-standard); }

.srm.is-open .srm-row { --srm-pull: var(--srm-slide); }

/* Mid-swipe: the drag's still point for the pictures — past halfway, no glide.
   The button needs no fade: it is revealed by the row uncovering it. */
.srm.is-mid .srm-row { --srm-pull: calc(0.55 * var(--srm-slide)); transition: none; }

/* Keyboard focus opens the row with no JS: the button precedes the row. */
.srm-rm:focus-visible + .srm-row { --srm-pull: var(--srm-slide); }

/* ── REDUCED MOTION — no glide, full stop ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .srm, .srm-row { transition: none; }
}

/* ── THE TOOL VARIANT — "Your logs are kept." (brief 3896) ───────────────────
   The same swipe, on a TOOL row: the button becomes a two-line column —
   [✕ REMOVE] over the reassurance — inside the SAME --srm-w (the one number
   still feeds both the width and the slide), the pill grown by its own content
   under the same min-height, still vertically centred in the row.
   WITHOUT .has-sub nothing changes: the DOM and the painted pill stay
   byte-identical to the blessed collection-row shape (REPORT-3869). */
.srm-rm.has-sub { flex-direction: column; gap: var(--space-4);
  height: auto; min-height: var(--dim-40); padding: var(--space-4) 0; }
.srm-rm-top { display: inline-flex; align-items: center; gap: var(--space-8); }
.srm-rm-sub { font-family: var(--font-body); font-size: var(--text-micro);
  font-weight: var(--weight-500); letter-spacing: normal; text-transform: none;
  line-height: 1; white-space: nowrap; }