/* =========================================================================
   cue-item.css — the canonical cue row/card + the CueIdentity fragment.
   One component, two anatomies, one `density` prop with three values
   (full · compact · mini) — matching the shipped CueFilterBar API exactly.

   Tokens only (tokens.css). Invents no colors. Reuses .nt-* primitives.
   Anatomy donors: full  = live NsRow (app/notes.jsx)
                   stacked = live SxCueRow (helper/ui/sfxsel-sspt.jsx)
   Founder intensity rule (2026-07-08): the SAME data, but the visual
   INTENSITY of resolved/flag/assignee/category treatment scales BY DENSITY.
   ========================================================================= */

/* DH #507 D2: exact ladder rungs only; Default preserves prior values. */

/* ============================ CueIdentity =============================== *
 * The atomic fragment: timecode + text (+ optional category chip) with its
 * decorations. History rows, Notification threads and the SFX-tab header
 * EMBED this — they are records ABOUT a cue, not cue rows.                  */
.ci-ident {
  display: inline-flex; align-items: baseline; gap: var(--ep-gap); min-width: 0;
  font-family: var(--ui); color: var(--fg);
}
.ci-ident.block { display: flex; }
.ci-ident .ci-tc {
  font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1;
  font-size: var(--ep-fs); letter-spacing: .02em; color: var(--tc-green);
  flex-shrink: 0; position: relative; white-space: nowrap;
}
.ci-ident .ci-tc.click { cursor: pointer; border-radius: var(--r-1); }
.ci-ident .ci-tc.click:hover { color: var(--fg-strong); }
.ci-ident .ci-tc.weak { color: var(--st-flagged); }
.ci-ident .ci-body {
  font-size: var(--ep-fs-base); color: var(--fg); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci-ident .ci-warn { color: var(--st-flagged); display: inline-flex; flex-shrink: 0; align-self: center; }
.ci-ident .ci-orphan {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; align-self: center;
  background: var(--cue-amber); box-shadow: 0 0 0 3px rgba(193,147,85,.15);
  cursor: help;
}
.ci-ident .ci-raw {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--fg-dim);
}
.ci-ident .ci-raw b { color: var(--fg-mute); font-weight: 500; }
.ci-ident.resolved .ci-tc,
.ci-ident.resolved .ci-body { color: var(--fg-dim); }
.ci-ident.deleted .ci-body { text-decoration: line-through; text-decoration-color: var(--fg-faint); color: var(--fg-dim); }

/* click-copy "Copied" flash */
.ci-copied {
  position: absolute; left: 0; top: -20px; z-index: 6;
  font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ss-accent); background: var(--ss-accent-bg); border: 1px solid var(--ss-accent-line);
  border-radius: var(--r-1); padding: 2px var(--ep-gap-xs); white-space: nowrap;
  animation: ci-copyflash 1s ease-out forwards; pointer-events: none;
}
@keyframes ci-copyflash {
  0% { opacity: 0; transform: translateY(3px); }
  18% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* category chip (used by identity + full row) */
.ci-cat {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--ep-gap-xs); flex-shrink: 0;
  padding: 2px var(--ep-gap-sm) 2px var(--ep-gap-xs); border-radius: var(--r-1);
  background: var(--bg-sub); border: 1px solid var(--line); color: var(--fg-mute);
}
.ci-cat::before { content: ''; width: 3px; height: 10px; border-radius: 1px; background: var(--cbar, var(--fg-dim)); }

/* UCS chip (cat › sub) — mirrors sx-ucs */
.ci-ucs {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-family: var(--mono); font-size: var(--ep-fs-kbd); letter-spacing: .04em;
  padding: 1px var(--ep-gap-xs); border-radius: var(--r-1);
  border: 1px solid var(--line); background: var(--bg-deep); color: var(--fg-mute);
}
.ci-ucs .b { font-size: var(--ep-fs-xs); letter-spacing: .14em; color: var(--fg-dim); }
.ci-ucs .s { color: var(--fg-faint); }
.ci-ucs .u { color: var(--fg); }
.ci-nocat { display: inline-flex; align-items: center; gap: var(--ep-gap-xs); font-size: var(--ep-fs-sm); color: var(--fg-dim); }
.ci-nocat .rd { width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--fg-faint); }

/* status pill (full) */
.ci-pill {
  font-family: var(--ui); font-size: var(--ep-fs-sm); text-transform: uppercase; letter-spacing: .1em;
  padding: 2px var(--ep-gap-md); border-radius: var(--r-1); height: 17px;
  display: inline-flex; align-items: center; border: 1px solid currentColor; background: transparent;
  flex-shrink: 0; white-space: nowrap;
}
.ci-pill.open     { color: var(--st-open); border-color: var(--line-strong); }
.ci-pill.flagged  { color: var(--st-flagged); background: var(--st-flagged-bg); }
.ci-pill.resolved { color: var(--st-resolved); background: var(--st-resolved-bg); }

/* coverage chip — deliberately a BAR marker (never a status dot). Three states:
   Needs sound · Pulled · Laid ("Laid" is the brand term; #6835 retired "Spotted"). */
.ci-cov {
  font-family: var(--ui); font-size: 10px; color: var(--fg-mute);
  display: inline-flex; align-items: center; gap: var(--ep-gap-xs); flex-shrink: 0;
  padding: 2px var(--ep-gap-md) 2px var(--ep-gap-sm); border-radius: var(--r-1);
  border: 1px solid var(--line); background: var(--bg-sub); white-space: nowrap;
}
.ci-cov .bar { width: 10px; height: 4px; border-radius: 1px; background: var(--fg-dim); flex-shrink: 0; }
.ci-cov.needs       .bar { background: var(--cue-amber); }
/* #7002 — the retired PULLED rung reads as NEEDS SOUND, so it wears the SAME
   amber bar. A distinct colour under identical copy would say there were two
   states when there is one. */
.ci-cov.preselected .bar { background: var(--cue-amber); }
.ci-cov.spotted     .bar { background: var(--st-resolved); }
.ci-cov.spotted { color: var(--st-resolved); border-color: rgba(122,154,134,.28); background: var(--st-resolved-bg); }

/* canonical / N-sugg chips (rooms · elite · SSPT) */
.ci-canon {
  font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 2px var(--ep-gap-sm); border-radius: var(--r-1);
  color: var(--ss-accent); background: var(--ss-accent-bg); border: 1px solid var(--ss-accent-line);
}
.ci-canon .d { width: 4px; height: 4px; border-radius: 50%; background: var(--ss-accent); }
.ci-sugg { font-family: var(--mono); font-size: 8px; color: var(--fg-dim); flex-shrink: 0; white-space: nowrap; }

/* cost $ (supervisor-only) */
.ci-cost { display: inline-flex; gap: 1px; flex-shrink: 0; }
.ci-cost i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.ci-cost i.on { background: var(--cue-amber); }

/* assignee / comment count */
.ci-cnt {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-family: var(--mono); font-size: 10px; color: var(--fg-dim); font-feature-settings: "tnum" 1;
}
.ci-cnt.has { color: var(--fg-mute); }

/* ============================== CueItem ================================= */
.ci-row {
  position: relative; cursor: pointer; font-family: var(--ui);
  border-bottom: 1px solid var(--line-soft); background: var(--bg-app);
  transition: background .12s;
}
:root {
  /* Opaque equivalents of the old 7% moss / 4.5–7.5% amber washes over
     --bg-app. The chip gap must be the already-painted pixel, not a second
     translucent composite of the same wash. */
  --ci-selected-card:   #393C37;
}
/* WAVE 1 — the full row's bed is --bg-row (design .b-row), the value the
   pre-CueItem NsRow used. Placed BEFORE the .sel/.multi/.cued rules below so
   those equal-specificity selection backgrounds still win. */
.ci-row.full { background: var(--bg-row); }
.ci-row .ci-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cbar, var(--fg-dim)); opacity: .85;
}
.ci-row.sel  { background: var(--ci-selected-card); box-shadow: inset 6px 0 0 var(--ss-accent); }
.ci-row.sel .ci-rail { opacity: 0; }
.ci-row.multi { background: var(--ci-selected-card); box-shadow: inset 3px 0 0 var(--ss-accent); }
/* Playhead proximity is not a second selected state. */
.ci-row.cued { }

/* leading slot — multi-select check + done toggle */
.ci-lead { display: inline-flex; align-items: center; gap: var(--ep-gap-sm); flex-shrink: 0; }
.ci-check, .ci-done {
  width: 17px; height: 17px; border-radius: var(--r-1); flex-shrink: 0;
  border: 1px solid var(--line-strong); background: var(--bg-deep);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.ci-check:hover, .ci-done:hover { border-color: var(--fg-mute); }
.ci-check.on { background: var(--ss-accent-bg); border-color: var(--ss-accent-line); color: var(--ss-accent); }
.ci-done {
  border-radius: 50%;
  /* hold-to-resolve fill: driven by --hold (0→1) as a conic wipe */
  background:
    conic-gradient(var(--st-resolved) calc(var(--hold, 0) * 360deg), transparent 0) border-box,
    var(--bg-deep) padding-box;
}
.ci-done.on { background: var(--st-resolved-bg); border-color: rgba(122,154,134,.5); color: var(--st-resolved); }

/* =============================== FULL ================================== *
 * Single-line grid row. Breathing room. Resolved deemphasizes SOFTLY —
 * rail fades to .4, text softens, quiet pill, NO strikethrough.           */
.ci-row.full {
  display: flex; align-items: center; gap: var(--ep-gap-lg);
  min-height: 33px; padding: var(--ep-gap-xs) 12px var(--ep-gap-xs) 15px;
}
.ci-row.full:hover { background: var(--bg-row-hover); }
.ci-row.full.sel:hover { background: var(--ci-selected-card); }
.ci-row.full .ci-tc { font-size: var(--ep-fs); cursor: pointer; }
.ci-row.full .ci-tc.click:hover { color: var(--fg-strong); }
/* #5537 (FOUNDER, measured) — the category cell must CENTRE its chip, not drop
   it on a text baseline. Before this rule the cell had no `display`, so as a
   <span> flex-item of .ci-row.full it blockified to `display:block` and opened
   an inline formatting context. .ci-cat is inline-level (inline-flex), so it
   landed on that line's baseline — a baseline owned by the CELL'S OWN STRUT,
   which is var(--ui) at the inherited 16px, while the chip is var(--mono) at
   8px. The gap is exactly
       ½·[(strut ascent − strut descent) − (chip ascent − chip descent)]
     = ½·[(15 − 3) − (8 − 2)] = 3px low,
   which is what the founder saw and slt-ss measured (+2.5 vs −0.5 for every
   sibling). Deliberately NOT a −3px nudge: that 3 is a function of the chip's
   size, the chip's family, the row's inherited font-size and any line-height
   that ever lands here — pin none of them, centre the box instead. Restores
   the `display:flex; align-items:center` the anatomy donor NsRow carried
   inline on .ns-catcell (notes.jsx:2467) and that the CueItem migration
   (#4195 W3 A-sub) dropped. */
.ci-row.full .ci-catcell { width: 52px; flex-shrink: 0; display: flex; align-items: center; }
.ci-sfxmark {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; height: 14px;
  color: var(--ss-accent, #CCDE49); opacity: .78;
  font-family: var(--mono); font-size: 8px; letter-spacing: .04em;
  font-feature-settings: "tnum" 1; line-height: 1;
}
.ci-sfxmark svg { display: block; flex-shrink: 0; }
.ci-row.full .ci-bodycell {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px;
}
.ci-row.full .ci-body { font-size: 12.5px; }
.ci-row.full .ci-meta { display: inline-flex; align-items: center; gap: var(--ep-gap); flex-shrink: 0; }
.ci-row.full .ci-people { display: inline-flex; align-items: center; gap: var(--ep-gap-lg); flex-shrink: 0; }
.ci-row.full .ci-trailing {
  display: inline-flex; align-items: center; gap: var(--ep-gap-sm); flex-shrink: 0;
  opacity: 0; transition: opacity .12s; margin-left: 2px;
}
.ci-row.full:hover .ci-trailing { opacity: 1; }
/* weak-TC inline Confirm (full only) */
.ci-confirm {
  font-family: var(--ui); font-size: var(--ep-fs-sub); color: var(--st-flagged);
  border: 1px solid rgba(193,147,85,.4); background: var(--st-flagged-bg);
  border-radius: var(--r-1); height: var(--ep-mark); padding: 0 var(--ep-gap-md); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.ci-confirm:hover { border-color: var(--st-flagged); }
.ci-sfxlink {
  font-family: var(--mono); font-size: var(--ep-fs-sm); letter-spacing: .04em;
  color: var(--cat-fx); flex-shrink: 0; cursor: pointer;
}
.ci-sfxlink:hover { text-decoration: underline; }

/* ── WAVE 1 · CATEGORY = BARE COLOUR ───────────────────────────────────────
   Design intent, verbatim: "the category chip went bare, the two axes now
   read as opposites: category = bare colour, family = boxed grey."
   Scoped to .ci-row.full because `full` is the Notes row and nothing else —
   Cue Room and SFX render density=compact and keep the boxed .ci-cat, as does
   CueIdentity wherever History / Notifications embed it.
   --cbar already carries the category hue (inline style, cue-item.jsx); it
   moves off the 3px ::before bar and onto the text. */
.ci-row.full .ci-cat {
  font-size: 8px; letter-spacing: .14em; opacity: .92;
  width: 52px; height: auto; gap: 0; padding: 0;
  border: 0; background: none; color: var(--cbar, var(--fg-mute));
}
.ci-row.full .ci-cat::before { display: none; }

/* #7031/DH674 owns the full-row identity primitive in sv3a-chip.css.
   Compact/mini keep the legacy .ci-as treatment below until their surfaces
   adopt the shared attribution payload. */

/* FULL status is a row treatment, never a badge or tick. Resolved loses
   emphasis and mutes its timecode; flagged reads amber at row scale. */
.ci-row.full.resolved { background: var(--bg-deep); }
.ci-row.full.resolved .ci-rail { opacity: .24; }
.ci-row.full.resolved .ci-body { color: var(--fg-dim); }
.ci-row.resolved .ss-dead,
.ci-row.deleted .ss-dead,
.ci-ident.resolved .ss-dead,
.ci-ident.deleted .ss-dead { color: inherit; }
.ci-row.full.resolved .ci-tc { color: var(--fg-faint); }
.ci-row.full.resolved .ci-catcell,
.ci-row.full.resolved .ci-meta,
.ci-row.full.resolved .ci-people,
.ci-row.full.resolved .ci-cov { opacity: .52; }
.ci-row.full.resolved:hover { background: var(--bg-row-hover); }
.ci-row.full.resolved.sel,
.ci-row.full.resolved.sel:hover { background: var(--ci-selected-card); }
/* ══ #6377 · FLAGGED IS THE QUIETEST OF THE THREE, NOT THE LOUDEST ══════════
   FOUNDER 2026-08-21, near-verbatim: "flagging a cue shouldnt color the whole
   card so strongly — current flag color is nearly as visually strong as the
   selected cue." He is right, and the numbers say why. The old rule painted the
   flagged bed at rgba(193,147,85,.10) while SELECTED paints at .07, so a flag
   was literally a STRONGER fill than the selection it is not allowed to
   outrank — and it added a 6px amber GLOW to the rail on top of that, which
   nothing else in the row vocabulary has.

   HIERARCHY INVARIANT, in his words: the selected GREEN cue must dominate, and
   resolved-vs-unresolved must stay legible underneath everything.

   HE PICKED A. Both treatments were built and shot side by side in a real
   browser; asked "A or B", the founder answered "A" in lane 2 at
   2026-08-22T03:52Z. A is whole-card colour KEPT and made quiet. B — no card
   colour, a small flag badge instead — is DELETED, per his own rule that the
   loser goes rather than sitting in the product behind a flag. Its rules, its
   .ci-flagmark element and the data-ss-flag switch are all gone; nothing in
   cue-item.jsx remained, so that file is byte-identical to before this card.

   HE MAY CHANGE HIS MIND about whole-card colouring, and said so. That costs
   two numbers, not a rewrite: the token pair below is the whole treatment. */
:root {
  /* Its own value, not --st-flagged-bg, because that token is also the fill
     behind flag PILLS and CONFIRM buttons — small chips that need to be seen,
     where a card-sized wash needs to be barely there. .045 sits deliberately
     BELOW --ss-accent-bg's .07 so the selected row wins on fill alone, before
     its solid 6px accent bar is even counted. Warm gold rather than the
     token's bronze because he asked for yellow, and far enough round the wheel
     from #CCDE49 that a faint wash cannot be misread as a faint selection. */
  --ci-flag-card:       #363637;
  --ci-flag-card-hover: #3B3A38;
}
.ci-row.full.flagged { background: var(--ci-flag-card); }
/* The rail keeps the flag colour — a 3px edge is a legitimate quiet signal —
   but LOSES THE GLOW. A halo is the one thing in this row vocabulary that says
   "look here first", and that belongs to selection. */
.ci-row.full.flagged .ci-rail { background: var(--st-flagged); }
.ci-row.full.flagged:hover { background: var(--ci-flag-card-hover); }
/* .flagged.sel is REDUNDANT ON PAPER and stays anyway: .ci-row.sel already
   paints the accent bed, but .ci-row.full.flagged above is (0,3,0) against its
   (0,2,0), so deleting this line hands a flagged row's fill to the flag the
   moment it is also selected. The rejected variant B proved that exact failure
   in the real browser — a flagged+selected row measured rgb(47,48,55), the
   plain bed, with only the 6px inset bar left of the green. Same specificity
   trap, one class further down. Do not tidy this away. */
.ci-row.full.flagged.sel,
.ci-row.full.flagged.sel:hover { background: var(--ci-selected-card); }

/* =========================== COMPACT + MINI ============================ *
 * 2-line rail card (anatomy donor: SxCueRow).
 * line 1 = TC + text · line 2 = category/UCS + status meta · trailing = coverage/action */
.ci-row.compact, .ci-row.mini {
  display: grid; grid-template-columns: 1fr auto; gap: var(--ep-gap); align-items: center;
}
.ci-row.compact { padding: var(--ep-gap-sm) var(--ep-pad-btn) var(--ep-gap-sm) 11px; }
.ci-row.mini    { padding: var(--ep-pad-btn) 11px var(--ep-pad-btn) 12px; }
.ci-row.compact:hover { background: var(--bg-row-hover); }
.ci-stack { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ci-l1 { display: flex; align-items: center; gap: var(--ep-gap-md); min-width: 0; }
.ci-l2 { display: flex; align-items: center; gap: var(--ep-gap-md); min-width: 0; }
.ci-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ci-row.compact .ci-body { font-size: 11.5px; }
.ci-row.compact .ci-lead { align-self: start; padding-top: 1px; }

.ci-row.mini .ci-lead { align-self: center; }
.ci-row.mini .ci-l1 .ci-tc { font-size: var(--ep-fs); }
.ci-row.mini .ci-body {
  font-size: 12.5px; line-height: 1.35; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* mini touch targets ≥34px */
.ci-row.mini .ci-check, .ci-row.mini .ci-done { width: 34px; height: 34px; }
.ci-row.mini .ci-tap {
  min-height: 34px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center;
}

/* COMPACT · resolved — HEAVIER (darker row + strikethrough on body) */
.ci-row.compact.resolved { background: var(--bg-deep); }
.ci-row.compact.resolved .ci-body { text-decoration: line-through; text-decoration-color: var(--fg-faint); color: var(--fg-dim); }
.ci-row.compact.resolved .ci-tc { color: var(--fg-dim); }
.ci-row.compact.resolved .ci-rail { opacity: .5; }
/* MINI · resolved — strikethrough + dimmed (clamp keeps height stable) */
.ci-row.mini.resolved .ci-body { text-decoration: line-through; text-decoration-color: var(--fg-faint); color: var(--fg-dim); }
.ci-row.mini.resolved .ci-tc { color: var(--fg-dim); }
.ci-row.mini.resolved .ci-rail { opacity: .45; }
/* COMPACT/MINI · flagged — edge accent only */
.ci-row.compact.flagged .ci-rail, .ci-row.mini.flagged .ci-rail { background: var(--st-flagged); box-shadow: 0 0 6px rgba(193,147,85,.35); }

/* weak-TC marker (compact/mini): small △ inline */
.ci-warn-sm { color: var(--st-flagged); display: inline-flex; flex-shrink: 0; }

/* mini companion relation tags — "latest" / "from other" */
.ci-rel {
  font-family: var(--mono); font-size: var(--ep-fs-label); letter-spacing: .14em; text-transform: uppercase;
  padding: 1px var(--ep-gap-xs); border-radius: var(--r-1); flex-shrink: 0;
}
.ci-rel.latest { color: var(--ss-accent); background: var(--ss-accent-bg); border: 1px solid var(--ss-accent-line); }
.ci-rel.other  { color: var(--fg-dim); background: var(--bg-sub); border: 1px solid var(--line); }
.ci-row.mini.latest { box-shadow: inset 3px 0 0 var(--ss-accent); }

/* mini trailing action buttons (DONE/UNDO + FLAG on companion) */
.ci-mact {
  font-family: var(--ui); font-size: var(--ep-fs); color: var(--fg-mute);
  border: 1px solid var(--line); background: var(--btn-grad);
  border-radius: var(--r-2); min-height: 34px; padding: 0 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--ep-gap-xs); box-shadow: var(--inset-panel);
}
.ci-mact.done { color: var(--st-resolved); border-color: rgba(122,154,134,.4); }
.ci-mact.flag { color: var(--st-flagged); border-color: rgba(193,147,85,.4); }

/* chevron / seek glyph / age (trailing on Cue Room / queues) */
.ci-age { font-family: var(--mono); font-size: var(--ep-fs-kbd); color: var(--fg-dim); flex-shrink: 0; white-space: nowrap; }
.ci-seek, .ci-chev {
  width: var(--ep-control-h); height: var(--ep-control-h); border-radius: var(--r-1); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-dim); border: 1px solid transparent;
}
.ci-seek:hover, .ci-chev:hover { color: var(--fg); background: var(--bg-sub); }

/* =============================== expansion ============================= *
 * active/open row: AttachmentBar · search-term chips · reply thread.       */
.ci-expansion {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--line); margin-top: 3px; padding-top: var(--ep-gap);
  animation: ci-expand .16s ease-out;
}
.ci-row.full .ci-expansion { width: 100%; }
@keyframes ci-expand { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ============================== skeleton =============================== */
.ci-row.skeleton { pointer-events: none; }
.ci-skel {
  height: 9px; border-radius: 2px;
  background: linear-gradient(90deg, var(--bg-sub) 25%, var(--bg-row-hover) 37%, var(--bg-sub) 63%);
  background-size: 400% 100%; animation: ci-shimmer 1.3s ease-in-out infinite;
}
@keyframes ci-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ============================== avatars ================================ */
.ci-as {
  width: var(--ep-control-h); height: var(--ep-control-h); border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; letter-spacing: .04em; color: rgba(0,0,0,.66);
}
.ci-as.sm { width: var(--ep-chip-h); height: var(--ep-chip-h); font-size: 8px; }
.ci-as.teal  { background: var(--as-teal); }
.ci-as.rose  { background: var(--as-rose); }
.ci-as.amber { background: var(--as-amber); }
.ci-as.lilac { background: var(--as-lilac); }
.ci-as.sky   { background: var(--as-sky); }
.ci-as.sage  { background: var(--as-sage); }
.ci-as.clay  { background: var(--as-clay); }
.ci-as.ss-av-outline { background: transparent; border: 1px solid currentColor; font-weight: 700; }
.ci-as.ss-av-outline.teal  { color: var(--as-teal); }
.ci-as.ss-av-outline.rose  { color: var(--as-rose); }
.ci-as.ss-av-outline.amber { color: var(--as-amber); }
.ci-as.ss-av-outline.lilac { color: var(--as-lilac); }
.ci-as.ss-av-outline.sky   { color: var(--as-sky); }
.ci-as.ss-av-outline.sage  { color: var(--as-sage); }
.ci-as.ss-av-outline.clay  { color: var(--as-clay); }

/* #6040/#6050 — the only browser delete control. The visible square is now
   compact and neutral; a transparent 44px pseudo hit area preserves the safe
   pointer target. The outer conic ring remains determinate and neutral. */
.ss-hold-delete {
  position: relative; width: 30px; height: 30px; min-width: 30px; min-height: 30px;
  padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--bg-sub); color: var(--fg-mute); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; flex: 0 0 30px; isolation: isolate;
}
.ss-hold-delete.labeled {
  width: auto; min-width: 30px; padding: 0 var(--ep-gap); gap: var(--ep-gap-sm); flex: 0 0 auto;
}
.ss-hold-delete-lab {
  font: 600 var(--ep-fs)/1 var(--ui); color: var(--st-danger); letter-spacing: 0;
  text-transform: none; white-space: nowrap;
}
.ss-hold-delete::before {
  content: ''; position: absolute; inset: -4px; border-radius: calc(var(--r-2) + 4px);
  background: conic-gradient(var(--st-danger) calc(var(--hold, 0) * 1turn), var(--line) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  pointer-events: none;
}
.ss-hold-delete::after { content: ''; position: absolute; inset: -7px; }
.ci-oor {
  margin-left: var(--ep-gap-sm); padding: 1px var(--ep-gap-sm);
  border: 1px solid var(--line); border-radius: 999px;
  font: 600 var(--ep-fs-kbd)/1.4 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-mute); white-space: nowrap;
}
.ss-hold-delete:hover:not(:disabled) { background: var(--bg-row-hover); color: var(--fg); }
.ss-hold-delete:focus-visible { outline: 2px solid var(--fg-mute); outline-offset: 5px; }
.ss-hold-delete:disabled { opacity: .45; cursor: default; }

/* ============================================================================
   Shared HOLD primitive  (Interaction Grammar / AM-10 — one 400ms spec)
   Thin 2px determinate teal fill on the pressed target + a hint chip naming the
   action. Early release / slide-off = clean cancel. Every hold has a click path.
   ============================================================================ */
.ss-hold {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: var(--ep-gap-md);
  height: var(--ep-btn-h); padding: 0 12px; background: var(--bg-sub); border: 1px solid var(--line);
  border-radius: var(--r-2); color: var(--fg); cursor: pointer; font-family: var(--mono);
  font-size: var(--ep-fs-sub); letter-spacing: .04em; user-select: none; -webkit-user-select: none;
}
.ss-hold:hover { border-color: var(--line-strong); }
.ss-hold.danger { color: var(--st-danger); }
.ss-hold[disabled] { opacity: .4; cursor: not-allowed; }
.ss-hold.pending { opacity: .85; }
.ss-hold-kbd { font-size: var(--ep-fs-kbd); border: 1px solid var(--line-strong); border-radius: var(--r-1); padding: 0 4px; color: var(--fg-dim); }
.ss-hold-fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ss-accent); pointer-events: none; }
.ss-hold.arming .ss-hold-fill { width: 100%; transition: width .4s linear; }
.ss-hold-hint {
  position: absolute; bottom: calc(100% + 6px); left: 0; white-space: nowrap; z-index: 5; display: none;
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--fg);
  background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: var(--r-1); padding: 3px var(--ep-gap-md);
}
.ss-hold.arming .ss-hold-hint { display: block; }

/* #4682 — scoped cue-pack chip (canonical has a bound+INDEXED pack) — same family as .ci-canon */
.ci-pack {
  font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 2px var(--ep-gap-sm); border-radius: var(--r-1);
  color: var(--ss-accent); background: var(--ss-accent-bg); border: 1px solid var(--ss-accent-line);
}
.ci-pack .d { width: 4px; height: 4px; border-radius: 2px; background: var(--ss-accent); }