/* ucs-correct.css — UCS Chip Correction (DH #459). Chip interactive states +
   anchored popover. Tokens fall back to the app's teal/dark values. */

/* chip states */
.ucs-chip.ssucs-act { cursor: pointer; border-radius: 3px; }
.ucs-chip.ssucs-act:hover .ssucs-badge { box-shadow: 0 0 0 3px var(--teal-glow, rgba(53,197,199,.18)); }
.ucs-chip.ssucs-act:hover .ssucs-badge.med { box-shadow: inset 0 0 0 1px var(--teal, #35c5c7), 0 0 0 3px var(--teal-glow, rgba(53,197,199,.18)); }
.ssucs-open .ssucs-badge { box-shadow: 0 0 0 3px var(--teal-glow, rgba(53,197,199,.18)), 0 0 0 1px var(--teal, #35c5c7) !important; }
.ssucs-badge { display: inline-flex; align-items: center; height: 15px; padding: 0 5px; border-radius: 2px;
  background: var(--teal, #35c5c7); color: #08211f; font-family: var(--mono, monospace);
  font-size: 8.5px; font-weight: 700; letter-spacing: .16em; flex-shrink: 0; }
.ssucs-badge.med { background: transparent; color: var(--teal, #35c5c7); box-shadow: inset 0 0 0 1px var(--teal-line, rgba(53,197,199,.34)); }
.ssucs-path { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; font-size: 10.5px; font-family: var(--mono, monospace); margin-left: 7px; }
.ssucs-cat { color: var(--fg-strong, #e6e9f0); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; flex-shrink: 0; }
.ssucs-sep { color: var(--teal, #35c5c7); font-weight: 600; flex-shrink: 0; opacity: .9; }
.ssucs-sub { color: var(--fg-mute, #9aa3b2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssucs-path.med .ssucs-cat { color: var(--fg-mute, #9aa3b2); }
.ssucs-path.med .ssucs-sub { color: var(--fg-dim, #6b7280); }
.ssucs-path.med .ssucs-sep { opacity: .6; }
.ssucs-path.low .ssucs-cat, .ssucs-path.partial .ssucs-cat { color: var(--fg-mute, #9aa3b2); }
.ssucs-path.low .ssucs-sub, .ssucs-path.partial .ssucs-sub { color: var(--fg-dim, #6b7280); }
.ucs-chip.ssucs-low, .ucs-chip.ssucs-partial { border-style: dashed !important; opacity: .72; }
.ucs-chip.ssucs-low:hover, .ucs-chip.ssucs-partial:hover { opacity: 1; }
.ssucs-ck { width: 11px; height: 11px; border-radius: 50%; background: var(--teal, #35c5c7); color: #08211f;
  display: inline-flex; align-items: center; justify-content: center; align-self: center; margin-left: 6px;
  font-size: 8px; font-weight: 700; flex-shrink: 0; line-height: 1; }
@keyframes ssucs-pulse { 0% { box-shadow: 0 0 0 0 var(--teal-glow, rgba(53,197,199,.28)); } 70% { box-shadow: 0 0 0 6px rgba(53,197,199,0); } 100% { box-shadow: 0 0 0 0 rgba(53,197,199,0); } }
.ssucs-saving .ssucs-badge, .ucs-chip.ssucs-saving { animation: ssucs-pulse .9s ease-out infinite; border-radius: 3px; }

/* ghost add / cleared marker — quiet at rest */
.ssucs-add { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono, monospace); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim, #6b7280); cursor: pointer;
  border: 1px dashed var(--line-strong, rgba(255,255,255,.14)); border-radius: 3px; height: 17px; padding: 0 7px;
  flex-shrink: 0; user-select: none; opacity: .25; vertical-align: middle; }
.ssucs-add:hover { color: var(--teal, #35c5c7); border-color: var(--teal-line, rgba(53,197,199,.34)); opacity: 1; }
.ssucs-add.none { border-style: solid; opacity: .4; }
tr:hover .ssucs-add, [class*="row"]:hover .ssucs-add, [class*="Row"]:hover .ssucs-add { opacity: .8; }

/* retry pill (write failed) */
.ssucs-retry { font-family: var(--mono, monospace); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--st-flagged, #e5a53a); border: 1px solid currentColor; border-radius: 3px; padding: 1px 6px;
  cursor: pointer; margin-left: 8px; vertical-align: middle; }

/* popover */
.ssucs-pop { width: 336px; background: var(--bg-panel, #14171c); border: 1px solid var(--line-strong, rgba(255,255,255,.14));
  border-radius: 6px; box-shadow: var(--float, 0 18px 48px rgba(0,0,0,.55)); overflow: hidden; text-align: left;
  font-family: var(--ui, system-ui, sans-serif); }
.ssucs-head { padding: 10px 13px 9px; border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.06)); }
.ssucs-eyrow { display: flex; align-items: center; gap: 8px; }
.ssucs-ey { font-family: var(--mono, monospace); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim, #6b7280); }
.ssucs-conf { margin-left: auto; font-family: var(--mono, monospace); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim, #6b7280); }
.ssucs-conf.hi { color: var(--teal, #35c5c7); }
.ssucs-cur { display: flex; align-items: baseline; gap: 6px; margin-top: 7px; font-family: var(--mono, monospace); font-size: 11.5px; }
.ssucs-cur-c { color: var(--fg-strong, #e6e9f0); font-weight: 600; letter-spacing: .06em; }
.ssucs-cur-s { color: var(--teal, #35c5c7); font-weight: 600; }
.ssucs-cur-u { color: var(--fg-mute, #9aa3b2); }
.ssucs-cur-id { margin-left: auto; font-size: 9.5px; color: var(--fg-dim, #6b7280); letter-spacing: .04em; }
.ssucs-body { max-height: 254px; overflow-y: auto; padding-bottom: 4px; }
.ssucs-lbl { font-family: var(--mono, monospace); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim, #6b7280); padding: 9px 13px 5px; }
.ssucs-rg { font-family: var(--mono, monospace); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim, #6b7280); padding: 8px 13px 3px; display: flex; align-items: baseline; gap: 7px; }
.ssucs-rg-n { color: var(--fg-faint, #4b5563); letter-spacing: .04em; }
.ssucs-rr { display: flex; align-items: center; gap: 8px; padding: 5px 9px; margin: 0 4px; border-radius: 4px; cursor: pointer; }
.ssucs-rr:hover, .ssucs-rr.on { background: var(--bg-row-hover, rgba(255,255,255,.045)); }
.ssucs-rr.on { box-shadow: inset 2px 0 0 var(--teal, #35c5c7); }
.ssucs-rr-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssucs-rr-sub { font-family: var(--mono, monospace); font-size: 11px; color: var(--fg, #c7cdd8); }
.ssucs-rr-sub b { color: var(--fg-strong, #e6e9f0); font-weight: 600; letter-spacing: .04em; }
.ssucs-rr-sc { font-family: var(--mono, monospace); font-size: 8.5px; color: var(--fg-faint, #4b5563); }
.ssucs-rr-id { margin-left: auto; font-family: var(--mono, monospace); font-size: 9px; color: var(--fg-dim, #6b7280); letter-spacing: .03em; flex-shrink: 0; }
.ssucs-rr.on .ssucs-rr-id { color: var(--teal, #35c5c7); }
.ssucs-empty { font-family: var(--ui, system-ui, sans-serif); font-size: 11px; color: var(--fg-dim, #6b7280); padding: 10px 13px; }
.ssucs-search { margin: 8px 12px 4px; display: flex; align-items: center; background: var(--bg-deep, #0a0b0d);
  border: 1px solid var(--line, rgba(255,255,255,.09)); border-radius: 5px; padding: 0 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }
.ssucs-search:focus-within { border-color: var(--teal-line, rgba(53,197,199,.34)); box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 0 0 3px var(--teal-glow, rgba(53,197,199,.18)); }
.ssucs-q { flex: 1; background: transparent; border: 0; outline: 0; font-family: var(--mono, monospace); font-size: 11.5px; color: var(--fg, #c7cdd8); padding: 7px 0; }
.ssucs-q::placeholder { color: var(--fg-dim, #6b7280); }
.ssucs-foot { padding: 8px 13px; border-top: 1px solid var(--line-soft, rgba(255,255,255,.06)); display: flex; align-items: center; gap: 8px; }
.ssucs-notag { font-family: var(--ui, system-ui, sans-serif); font-size: 11px; color: var(--fg-mute, #9aa3b2); cursor: pointer; padding: 3px 7px; margin-left: -7px; border-radius: 4px; }
.ssucs-notag:hover { color: var(--st-danger, #e0566b); background: var(--st-danger-bg, rgba(224,86,107,.09)); }
.ssucs-keys { margin-left: auto; font-family: var(--ui, system-ui, sans-serif); font-size: 9.5px; color: var(--fg-dim, #6b7280); }

/* ═══ WAVE 1 · the SOUND FAMILY (UCS) chip on the note row is a BOXED GREY
   CHIP ══════════════════════════════════════════════════════════════════════
   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 — that density is the Notes row and nothing else
   (Cue Room + SFX render density=compact), so the drawer chip, the hero and
   every other surface keep the bare treatment declared above.

   `display:inline-flex; align-items:center` are not in the design's quoted
   final cascade, but they ARE on the same atom already living in this tree
   (v1c.css line 367, `.r-ucs`) and a fixed height + padding cannot lay out
   without them. Nothing here is invented. */
.ci-row.full .ucs-chip.ssucs-act {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .01em;
  display: inline-flex; align-items: center; justify-content: flex-start;
  flex-shrink: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer; height: 14px; padding: 0 5px;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--bg-deep); box-shadow: inset 0 1px 1px rgba(0,0,0,.28);
  color: var(--fg-mute);
}
.ci-row.full .ucs-chip.ssucs-act:hover {
  color: var(--fg); border-color: var(--line-strong); background: var(--bg-sub);
}
/* the design's pressed/active state, values verbatim. Founder disposition 3
   (2026-07-29) binds it to the existing `.ssucs-open` class while the UCS
   editor/popover is open. Keep `.on` as the design-system alias. */
.ci-row.full .ucs-chip.ssucs-act.on,
.ci-row.full .ucs-chip.ssucs-act.ssucs-open {
  color: var(--teal); border-color: var(--teal-line); background: var(--teal-bg);
  box-shadow: none;
}
/* the chip is now ONE grey run: colour, size and tracking are declared on the
   chip itself, so the path spans inherit instead of re-colouring. The 7px left
   margin on .ssucs-path is a leftover gutter for a .ssucs-badge that chip()
   never renders — inside a boxed chip it reads as broken padding. baseline ->
   center because the chip now has a fixed 14px height. */
.ci-row.full .ucs-chip.ssucs-act .ssucs-path {
  margin-left: 0; align-items: center; gap: 4px; min-width: 0; overflow: hidden;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
}
.ci-row.full .ucs-chip.ssucs-act .ssucs-cat,
.ci-row.full .ucs-chip.ssucs-act .ssucs-sep,
.ci-row.full .ucs-chip.ssucs-act .ssucs-sub { color: inherit; letter-spacing: inherit; }
.ci-row.full .ucs-chip.ssucs-act .ssucs-sep { opacity: .55; }