/* =========================================================================
   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.
   ========================================================================= */

/* ============================ 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: 8px; 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: 11px; 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: 12px; 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(--teal); background: var(--teal-bg); border: 1px solid var(--teal-line);
  border-radius: var(--r-1); padding: 2px 5px; 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: 5px; flex-shrink: 0;
  padding: 2px 6px 2px 5px; 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: 8.5px; letter-spacing: .04em;
  padding: 1px 5px; border-radius: var(--r-1);
  border: 1px solid var(--line); background: var(--bg-deep); color: var(--fg-mute);
}
.ci-ucs .b { font-size: 7px; 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: 5px; font-size: 9.5px; 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: 9.5px; text-transform: uppercase; letter-spacing: .1em;
  padding: 2px 7px; 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 · Pre-selected · Spotted ("Spotted" is the brand term). */
.ci-cov {
  font-family: var(--ui); font-size: 10px; color: var(--fg-mute);
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 2px 7px 2px 6px; 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); }
.ci-cov.preselected .bar { background: var(--teal); }
.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 6px; border-radius: var(--r-1);
  color: var(--teal); background: var(--teal-bg); border: 1px solid var(--teal-line);
}
.ci-canon .d { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }
.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;
}
.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(--bg-row-sel); }
.ci-row.sel .ci-rail { opacity: 1; }
.ci-row.multi { background: var(--bg-row-multi); }
/* cued/active — teal inset marker at the left edge (playhead) */
.ci-row.cued { background: var(--bg-row-sel); box-shadow: inset 3px 0 0 var(--teal); }
.ci-row.cued .ci-rail { opacity: 0; }

/* leading slot — multi-select check + done toggle */
.ci-lead { display: inline-flex; align-items: center; gap: 6px; 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(--teal-bg); border-color: var(--teal-line); color: var(--teal); }
.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: 11px;
  min-height: 38px; padding: 0 14px 0 15px;
}
.ci-row.full:hover { background: var(--bg-row-hover); }
.ci-row.full.sel:hover { background: var(--bg-row-sel); }
.ci-row.full .ci-tc { font-size: 11px; cursor: pointer; }
.ci-row.full .ci-tc.click:hover { color: var(--fg-strong); }
.ci-row.full .ci-catcell { width: 64px; 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: 8px; flex-shrink: 0; }
.ci-row.full .ci-people { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ci-row.full .ci-trailing {
  display: inline-flex; align-items: center; gap: 6px; 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: 10.5px; color: var(--st-flagged);
  border: 1px solid rgba(193,147,85,.4); background: var(--st-flagged-bg);
  border-radius: var(--r-1); height: 20px; padding: 0 7px; 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: 9.5px; letter-spacing: .04em;
  color: var(--cat-fx); flex-shrink: 0; cursor: pointer;
}
.ci-sfxlink:hover { text-decoration: underline; }

/* FULL · resolved — SOFT (rail .4, text softens, NO strikethrough) */
.ci-row.full.resolved .ci-rail { opacity: .4; }
.ci-row.full.resolved .ci-body { color: var(--fg-mute); }
.ci-row.full.resolved .ci-tc { color: var(--fg-dim); }
/* FULL · flagged — quiet accent on rail */
.ci-row.full.flagged .ci-rail { box-shadow: 0 0 6px rgba(193,147,85,.4); }

/* =========================== 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: 8px; align-items: center;
}
.ci-row.compact { padding: 6px 9px 6px 11px; }
.ci-row.mini    { padding: 9px 11px 9px 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: 7px; min-width: 0; }
.ci-l2 { display: flex; align-items: center; gap: 7px; 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: 11px; }
.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: 7.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 1px 5px; border-radius: var(--r-1); flex-shrink: 0;
}
.ci-rel.latest { color: var(--teal); background: var(--teal-bg); border: 1px solid var(--teal-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(--teal); }

/* mini trailing action buttons (DONE/UNDO + FLAG on companion) */
.ci-mact {
  font-family: var(--ui); font-size: 11px; 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: 5px; 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: 8.5px; color: var(--fg-dim); flex-shrink: 0; white-space: nowrap; }
.ci-seek, .ci-chev {
  width: 22px; height: 22px; 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: 8px;
  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: 22px; height: 22px; 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: 18px; height: 18px; 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); }

/* ============================================================================
   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: 7px;
  height: 26px; 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: 10.5px; 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: 8.5px; 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(--teal); 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 7px;
}
.ss-hold.arming .ss-hold-hint { display: block; }