/* cuesys-intent.css — CUESYS Intent Tier (#4519 P3). Rides tokens.css + sspt-b.css +
   sfxsel.css. .cin-* namespace. PT-native: hairlines, 0-2px radii, mono numerics,
   teal = meaning (active world / director intent / primary act), amber + DASHED =
   proposal-not-yet-real (staged candidate · raw statement · unminted element).
   NO glow, NO gradient wash, NO emoji, NO cards-with-accent-bar slop. */

/* ═══════════════════════════════════════════════════════════════════════
   BROWSER-APP SHELL (the Intent room lives here — a NEW top-level room)
   ═══════════════════════════════════════════════════════════════════════ */
.cin-app { display: flex; flex-direction: column; background: var(--bg-app); border: 1px solid var(--line-strong); border-radius: var(--r-window); overflow: hidden; box-shadow: var(--float); }
.cin-appbar { display: flex; align-items: center; gap: 12px; height: var(--d-toolbar); padding: 0 14px; background: var(--titlebar-grad); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.cin-appbar .mk { width: 22px; height: 22px; border-radius: var(--r-2); background: var(--mark-grad); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--fg-strong); flex-shrink: 0; }
.cin-appbar .proj { font-size: 12px; color: var(--fg-strong); font-weight: 500; }
.cin-appbar .proj .rr { font-family: var(--mono); font-size: 8px; color: var(--fg-dim); margin-left: 6px; letter-spacing: .1em; }
.cin-nav { display: flex; align-items: stretch; gap: 2px; margin-left: 8px; }
.cin-nav .t { display: inline-flex; align-items: center; gap: 6px; height: var(--d-toolbar); padding: 0 11px; font-size: 12px; color: var(--fg-mute); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; user-select: none; }
.cin-nav .t:hover { color: var(--fg); }
.cin-nav .t.on { color: var(--fg-strong); border-bottom-color: var(--teal); }
.cin-nav .t .nw { font-family: var(--mono); font-size: 7px; letter-spacing: .14em; color: var(--teal); border: 1px solid var(--teal-line); border-radius: 2px; padding: 0 3px; }
.cin-appbar .sp { flex: 1; }
.cin-appbar .who { width: 22px; height: 22px; border-radius: 50%; background: var(--as-teal); color: rgba(0,0,0,.65); display: inline-flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 600; }

/* room header — title + the honest count line (no marketing) */
.cin-roomh { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.cin-roomh .h { flex: 1; min-width: 0; }
.cin-roomh .crumb { font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); }
.cin-roomh h1 { font-size: 17px; font-weight: 500; color: var(--fg-strong); letter-spacing: -.01em; margin: 5px 0 0; }
.cin-roomh .sub { font-size: 11.5px; color: var(--fg-mute); line-height: 1.55; margin-top: 6px; max-width: 620px; }
.cin-roomh .sub b { color: var(--fg); font-weight: 500; }
.cin-stat { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cin-statpill { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-panel); }
.cin-statpill .n { font-family: var(--mono); font-size: 15px; color: var(--fg-strong); font-feature-settings: "tnum" 1; }
.cin-statpill .n.teal { color: var(--teal); }
.cin-statpill .n.amber { color: var(--cue-amber); }
.cin-statpill .l { font-family: var(--mono); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }

/* room body — two columns: worlds (main) + queue/library (rail) */
.cin-roombody { display: flex; min-height: 0; flex: 1; }
.cin-worlds { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 18px 40px; }
.cin-rail { width: 320px; flex-shrink: 0; border-left: 1px solid var(--line); background: var(--bg-panel); overflow-y: auto; }
.cin-sech { display: flex; align-items: center; gap: 8px; padding: 4px 2px 10px; }
.cin-sech .l { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); }
.cin-sech .c { font-family: var(--mono); font-size: 9px; color: var(--fg-mute); }
.cin-sech .sp { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   WORLD CARD — one intent cue. The verbatim STATEMENT is sacred + always on top.
   ═══════════════════════════════════════════════════════════════════════ */
.cin-world { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-panel); margin-bottom: 12px; overflow: hidden; }
.cin-world.active { border-color: var(--teal-line); }
.cin-world.active::before { content: ''; display: block; height: 2px; background: var(--teal); opacity: .55; }
.cin-world.muted { opacity: .72; }
.cin-world.decomposed { border-left: 2px solid var(--line-strong); }
.cin-wh { display: flex; align-items: center; gap: 9px; padding: 9px 12px 8px; border-bottom: 1px solid var(--line-soft); }
.cin-wh .sp { flex: 1; }
.cin-wbody { padding: 11px 12px 12px; }

/* the sacred statement — quoted, verbatim, never truncated to a tooltip (§0.3) */
.cin-stmt { display: block; font-size: 13px; line-height: 1.5; color: var(--fg-strong); border-left: 2px solid var(--teal-deep); padding: 2px 0 2px 11px; text-wrap: pretty; }
.cin-stmt.raw { border-left-color: var(--cue-amber); }
.cin-stmt .qm { color: var(--fg-dim); }
.cin-prov { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-family: var(--mono); font-size: 8px; letter-spacing: .03em; color: var(--fg-dim); flex-wrap: wrap; }
.cin-prov .src { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-mute); border: 1px solid var(--line); border-radius: 2px; padding: 1px 5px; }
.cin-prov .src svg { color: var(--fg-dim); }
.cin-prov .src.session { color: var(--tc-green); border-color: color-mix(in srgb, var(--tc-green) 40%, transparent); }
.cin-prov .lnk { color: var(--teal); cursor: pointer; }
.cin-prov .lnk:hover { text-decoration: underline; }

/* scope tag — film / location / scene + optional TC-range constraint */
.cin-scope { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--bg-sub); font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em; color: var(--fg-mute); flex-shrink: 0; }
.cin-scope .k { font-size: 7px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.cin-scope .nm { color: var(--fg); }
.cin-scope.film .k { color: var(--teal); }
.cin-scope .rng { color: var(--tc-green); border-left: 1px solid var(--line); padding-left: 5px; margin-left: 1px; }

/* status pill — raw → decomposed → active + muted */
.cin-status { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px; border-radius: var(--r-1); font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; flex-shrink: 0; }
.cin-status .d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cin-status.raw { color: var(--cue-amber); }
.cin-status.raw .d { border-radius: 1px; background: transparent; border: 1px solid currentColor; }
.cin-status.decomposed { color: var(--fg-mute); }
.cin-status.active { color: var(--teal); }
.cin-status.muted { color: var(--fg-dim); }
.cin-status.muted .d { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* dimension badge (era/weather/setting…) */
.cin-dim { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px; border-radius: var(--r-1); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; color: var(--fg-mute); border: 1px solid var(--line); background: var(--bg-deep); flex-shrink: 0; }
.cin-dim .v { color: var(--fg-strong); }
.cin-dim.fact { border-color: color-mix(in srgb, var(--teal) 30%, transparent); }
.cin-dim.feel { border-style: dashed; }

/* ═══════════════════════════════════════════════════════════════════════
   ELEMENT CHIP — the proto-cue: family · role · density dial · trigger predicate.
   minted (solid) vs raw-text TODO (dashed) is READABLE — unminted never injects.
   ═══════════════════════════════════════════════════════════════════════ */
.cin-els { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.cin-el { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-deep); padding: 7px 9px; }
.cin-el.todo { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.cin-el-h { display: flex; align-items: center; gap: 8px; }
.cin-el-h .fam { font-family: var(--mono); font-size: 9.5px; color: var(--fg-strong); }
.cin-el.todo .cin-el-h .fam { color: var(--fg-mute); }
.cin-el-h .lbl { font-size: 11px; color: var(--fg); }
.cin-el-h .sp { flex: 1; }
.cin-role { font-family: var(--mono); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); border: 1px solid var(--line); border-radius: 2px; padding: 1px 4px; flex-shrink: 0; }
.cin-role.bg { color: var(--cat-bg); border-color: color-mix(in srgb, var(--cat-bg) 45%, transparent); }
.cin-role.fx { color: var(--cat-fx); border-color: color-mix(in srgb, var(--cat-fx) 45%, transparent); }
.cin-role.lens, .cin-role.bias { color: var(--teal); border-color: var(--teal-deep); }
.cin-todo-tag { font-family: var(--mono); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; color: var(--cue-amber); border: 1px dashed color-mix(in srgb, var(--cue-amber) 45%, transparent); border-radius: 2px; padding: 1px 5px; flex-shrink: 0; }
.cin-el-b { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }

/* density dial — a creative dial that reads as one (bed → recurring → occasional → rare) */
.cin-dial { display: inline-flex; flex-direction: column; gap: 3px; }
.cin-dial .dl { font-family: var(--mono); font-size: 6.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.cin-dial-seg { display: inline-flex; height: 20px; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: var(--bg-app); }
.cin-dial-seg button { border: 0; background: transparent; cursor: pointer; padding: 0 8px; color: var(--fg-dim); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; position: relative; }
.cin-dial-seg button + button { border-left: 1px solid var(--line); }
.cin-dial-seg button:hover { color: var(--fg-mute); }
.cin-dial-seg button.on { background: var(--teal-bg); color: var(--teal); }
.cin-dial-budget { font-family: var(--mono); font-size: 7.5px; color: var(--fg-dim); letter-spacing: .02em; }

/* trigger predicate — "fires when: EXT · street · night" as legible chips */
.cin-pred { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cin-pred .k { font-family: var(--mono); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }
.cin-pchip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--bg-sub); font-family: var(--mono); font-size: 8.5px; color: var(--fg); letter-spacing: .03em; }
.cin-pchip.any { color: var(--fg-dim); border-style: dashed; }
.cin-pchip .sep { color: var(--fg-dim); margin: 0 1px; }
.cin-el .cov { font-family: var(--mono); font-size: 7.5px; color: var(--fg-dim); }
.cin-el .cov b { color: var(--fg-mute); font-weight: 500; }

/* per-element keep-rate readout (later — honest, small) */
.cin-keep { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 7.5px; color: var(--fg-dim); }
.cin-keep .bar { width: 30px; height: 3px; background: var(--bg-app); border: 1px solid var(--line-soft); position: relative; }
.cin-keep .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--st-resolved); }
.cin-keep b { color: var(--fg-mute); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════
   DECOMPOSITION QUEUE — raw statements draining (the ~76% backlog as work)
   ═══════════════════════════════════════════════════════════════════════ */
.cin-rail-sec { padding: 12px 12px 6px; }
.cin-qrow { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-2); background: var(--bg-deep); margin-bottom: 8px; }
.cin-qrow .st { font-size: 11.5px; line-height: 1.45; color: var(--fg); text-wrap: pretty; }
.cin-qrow .m { display: flex; align-items: center; gap: 7px; }
.cin-qrow .src { font-family: var(--mono); font-size: 7.5px; color: var(--fg-dim); }
.cin-qrow .hint { font-family: var(--mono); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); border: 1px solid var(--line); border-radius: 2px; padding: 1px 5px; }
.cin-qrow .sp { flex: 1; }

/* palette library (templates) */
.cin-plib { display: flex; flex-direction: column; gap: 6px; }
.cin-prow { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-deep); cursor: pointer; }
.cin-prow:hover { border-color: var(--line-strong); background: var(--bg-sub); }
.cin-prow .nm { font-size: 12px; color: var(--fg-strong); }
.cin-prow .note { font-family: var(--mono); font-size: 8px; color: var(--fg-dim); margin-top: 2px; }
.cin-prow .cnt { margin-left: auto; font-family: var(--mono); font-size: 8px; color: var(--fg-mute); flex-shrink: 0; }
.cin-prow .cnt b { color: var(--fg); font-weight: 600; }

/* room empty state (day-1 — most projects). sells the feature with STRUCTURE, no slop. */
.cin-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px 22px; max-width: 560px; }
.cin-empty .t1 { font-size: 15px; color: var(--fg-strong); font-weight: 500; }
.cin-empty .t2 { font-size: 12px; color: var(--fg-mute); line-height: 1.6; }
.cin-empty .t2 b { color: var(--fg); font-weight: 500; }
.cin-empty .flow { display: flex; align-items: stretch; gap: 0; width: 100%; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.cin-empty .fstep { flex: 1; padding: 11px 12px; border-right: 1px solid var(--line-soft); }
.cin-empty .fstep:last-child { border-right: 0; }
.cin-empty .fstep .n { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; color: var(--teal); }
.cin-empty .fstep .d { font-size: 11px; color: var(--fg-mute); line-height: 1.45; margin-top: 5px; }

/* ═══════════════════════════════════════════════════════════════════════
   WHY-CHIP (§5) — the world biasing the pool, VISIBLY, with a hand on the switch.
   teal = active lens · mute restores · honest sparsity, no fake confidence.
   ═══════════════════════════════════════════════════════════════════════ */
.cin-why { display: inline-flex; align-items: stretch; border: 1px solid var(--teal-line); border-radius: var(--r-2); background: var(--teal-bg); overflow: hidden; }
.cin-why .body { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 26px; cursor: pointer; }
.cin-why .lens { font-family: var(--mono); font-size: 7px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-deep); }
.cin-why .dv { width: 1px; align-self: stretch; background: var(--teal-line); margin: 5px 0; }
.cin-why .val { font-family: var(--mono); font-size: 10px; color: var(--teal); font-weight: 600; letter-spacing: .02em; }
.cin-why .attr { font-size: 10.5px; color: var(--fg-mute); }
.cin-why .cv { font-family: var(--mono); font-size: 8px; color: var(--fg-dim); }
.cin-why .chev { color: var(--teal-deep); display: inline-flex; }
.cin-why .mute { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 0; border-left: 1px solid var(--teal-line); background: transparent; color: var(--teal); cursor: pointer; font-family: var(--ui); font-size: 10.5px; }
.cin-why .mute:hover { background: color-mix(in srgb, var(--teal) 14%, transparent); }
/* muted state — the lens is off; a quiet restore affordance */
.cin-why.muted { border-color: var(--line); background: var(--bg-sub); }
.cin-why.muted .lens { color: var(--fg-dim); }
.cin-why.muted .val { color: var(--fg-mute); text-decoration: line-through; }
.cin-why.muted .dv { background: var(--line); }
.cin-why.muted .mute { color: var(--fg-mute); border-left-color: var(--line); }
.cin-why.muted .chev { color: var(--fg-dim); }

/* the chip's expand — WHAT MOVED (honest counts) + sparsity + palette-mute path */
.cin-whypop { position: absolute; z-index: 40; margin-top: 6px; width: 320px; background: var(--bg-panel); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: var(--float); overflow: hidden; }
.cin-whypop .ph { display: flex; align-items: center; gap: 7px; padding: 9px 11px 8px; border-bottom: 1px solid var(--line-soft); }
.cin-whypop .ph .t { font-size: 11.5px; color: var(--fg-strong); }
.cin-whypop .ph .x { margin-left: auto; width: 18px; height: 18px; border: 0; background: transparent; color: var(--fg-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-1); }
.cin-whypop .ph .x:hover { background: var(--bg-sub); color: var(--fg); }
.cin-whypop .pb { padding: 10px 11px; display: flex; flex-direction: column; gap: 9px; }
.cin-moved { display: flex; gap: 7px; }
.cin-movecol { flex: 1; border: 1px solid var(--line); border-radius: var(--r-2); padding: 7px 8px; text-align: center; background: var(--bg-deep); }
.cin-movecol .n { font-family: var(--mono); font-size: 15px; font-feature-settings: "tnum" 1; }
.cin-movecol .l { font-family: var(--mono); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); margin-top: 2px; }
.cin-movecol.boost .n { color: var(--teal); }
.cin-movecol.demote .n { color: var(--cue-amber); }
.cin-movecol.neutral .n { color: var(--fg-mute); }
.cin-whynote { font-size: 10.5px; line-height: 1.5; color: var(--fg-mute); }
.cin-whynote b { color: var(--fg); font-weight: 500; }
.cin-sparse { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 8px; color: var(--fg-dim); border: 1px dashed var(--line-strong); border-radius: var(--r-1); padding: 6px 8px; line-height: 1.45; }
.cin-sparse b { color: var(--fg-mute); font-weight: 500; }
.cin-whyacts { display: flex; align-items: center; gap: 7px; }

/* moved-row honest marker — a subtle per-row read of WHY it moved (period / modern) */
.cin-movemk { display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 0 5px; border-radius: 2px; font-family: var(--mono); font-size: 7px; letter-spacing: .06em; flex-shrink: 0; }
.cin-movemk.period { color: var(--teal); border: 1px solid var(--teal-deep); }
.cin-movemk.modern { color: var(--cue-amber); border: 1px solid color-mix(in srgb, var(--cue-amber) 45%, transparent); }

/* stacking — multiple simultaneous lenses without chip-soup */
.cin-whystack { display: inline-flex; align-items: center; gap: 6px; }
.cin-whystack .cin-why { border-radius: var(--r-1); }
.cin-whystack .plus { font-family: var(--mono); font-size: 9px; color: var(--fg-dim); }

/* ═══════════════════════════════════════════════════════════════════════
   STAGED CANDIDATE (§4) — NEVER mistakable for a real cue. DASHED + hatch +
   "PROPOSED" tag = the honest not-real grammar. accept mints a real note.
   ═══════════════════════════════════════════════════════════════════════ */
.cin-candwrap { border: 1px dashed var(--line-strong); border-radius: var(--r-2); background: var(--bg-deep); overflow: hidden; }
.cin-candwrap.intent { border-left: 2px dashed var(--teal-deep); }
.cin-candwrap.cut { border-left: 2px dashed var(--line-strong); }
.cin-candhead { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 9px; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.014) 6px 7px); border-bottom: 1px dashed var(--line-soft); }
.cin-candhead .l { font-family: var(--mono); font-size: 7px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.cin-candhead .c { font-family: var(--mono); font-size: 7.5px; color: var(--fg-mute); }
.cin-candhead .sp { flex: 1; }
.cin-candhead .snz { border: 0; background: transparent; color: var(--fg-dim); cursor: pointer; font-family: var(--ui); font-size: 10px; padding: 0; }
.cin-candhead .snz:hover { color: var(--fg-mute); text-decoration: underline; }
.cin-cand { display: flex; align-items: center; gap: 9px; padding: 8px 9px; position: relative; }
.cin-cand + .cin-cand { border-top: 1px dashed var(--line-soft); }
.cin-cand .tc { font-family: var(--mono); font-size: 9px; color: var(--tc-green); flex-shrink: 0; font-feature-settings: "tnum" 1; }
.cin-cand .tc.span { color: var(--fg-mute); }
.cin-cand .stg { font-family: var(--mono); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-mute); border: 1px dashed var(--line-strong); border-radius: 2px; padding: 1px 5px; flex-shrink: 0; }
.cin-cand .place { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 7.5px; color: var(--fg-dim); flex-shrink: 0; }
.cin-cand .txt { flex: 1; min-width: 0; }
.cin-cand .txt .p { font-size: 11.5px; color: var(--fg-strong); text-wrap: pretty; }
.cin-cand .txt .w { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-family: var(--mono); font-size: 8px; color: var(--fg-dim); }
.cin-cand .txt .w .fam { color: var(--fg-mute); }
.cin-cand .txt .w .whyq { color: var(--teal); cursor: pointer; }
.cin-cand .txt .w .whyq:hover { text-decoration: underline; }
.cin-cand .src { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); flex-shrink: 0; }
.cin-cand .src .d { width: 5px; height: 5px; border-radius: 50%; }
.cin-cand .src.intent .d { background: var(--teal); }
.cin-cand .src.cut .d { background: var(--fg-dim); }
.cin-cand .acts { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.cin-acc { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border: 1px solid var(--teal-deep); border-radius: var(--r-1); background: var(--btn-grad); color: var(--teal); cursor: pointer; font-family: var(--ui); font-size: 11px; white-space: nowrap; box-shadow: var(--inset-panel); }
.cin-acc:hover { border-color: var(--teal); }
.cin-dis { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: var(--r-1); background: transparent; color: var(--fg-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cin-dis:hover { color: var(--st-danger); border-color: rgba(180,104,104,.4); background: var(--st-danger-bg); }
.cin-edit { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: var(--r-1); background: transparent; color: var(--fg-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cin-edit:hover { color: var(--fg); border-color: var(--line-strong); }
/* accepted → becomes a real cue (solid, teal-confirmed, drops the dashed) */
.cin-cand.accepted { border-top-color: var(--line-soft); }
.cin-cand.accepted .txt .p { color: var(--fg); }
.cin-acc.done { border-color: var(--st-resolved); color: var(--st-resolved); cursor: default; }
/* dismissed — persists, quiet, struck (never re-proposed for this scene) */
.cin-cand.dismissed { opacity: .5; }
.cin-cand.dismissed .txt .p { text-decoration: line-through; color: var(--fg-mute); }
/* #4554 — optional removal-reason affordance (one-tap "why removed?"). */
.cin-cand.dismissed { opacity: .72; }
.cin-rmv { gap: 8px !important; flex-wrap: wrap; }
.cin-rmvd { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--fg-mute); font-family: var(--ui); white-space: nowrap; }
.cin-rzn { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cin-rzn .q { font-size: 10px; color: var(--fg-dim); font-family: var(--ui); }
.cin-rzn.done { font-size: 10px; color: var(--teal); font-family: var(--ui); white-space: nowrap; }
.cin-rzn .rz { height: 20px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-1); background: transparent; color: var(--fg-dim); cursor: pointer; font-family: var(--ui); font-size: 10px; white-space: nowrap; }
.cin-rzn .rz:hover { color: var(--fg); border-color: var(--fg-dim); background: rgba(255,255,255,.04); }

/* the "why is this here" hold-panel (verbatim statement one tap away) */
.cin-whyhere { position: absolute; z-index: 42; right: 8px; top: 34px; width: 288px; background: var(--bg-panel); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: var(--float); overflow: hidden; }
.cin-whyhere .hh { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.cin-whyhere .hh .x { margin-left: auto; width: 16px; height: 16px; border: 0; background: transparent; color: var(--fg-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cin-whyhere .hb { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cin-whyhere .fired { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 8.5px; color: var(--fg-mute); }
.cin-whyhere .fired .mk { color: var(--teal); }

/* ═══════════════════════════════════════════════════════════════════════
   SCENE-CONTEXT chips (§4.5) — env · time · location; wrong INT one tap from fixed,
   fixing it visibly re-runs the world.
   ═══════════════════════════════════════════════════════════════════════ */
.cin-scene { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-app); }
.cin-scene .slug { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--fg-mute); }
.cin-scene .slug b { color: var(--fg-strong); font-weight: 600; }
.cin-scene .sp { flex: 1; }
.cin-ctx { display: inline-flex; align-items: center; gap: 4px; }
.cin-ctxchip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--bg-panel); cursor: pointer; font-family: var(--mono); font-size: 8.5px; color: var(--fg); letter-spacing: .04em; }
.cin-ctxchip:hover { border-color: var(--line-strong); }
.cin-ctxchip .k { font-size: 6.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.cin-ctxchip.on { border-color: var(--teal-deep); color: var(--teal); background: var(--teal-bg); }
.cin-ctxchip.warn { border-color: color-mix(in srgb, var(--cue-amber) 55%, transparent); color: var(--cue-amber); }

/* ═══════════════════════════════════════════════════════════════════════
   DECOMPOSITION CONFIRM (§6) — statement top; proposed elements editable;
   a clear commit moment; the un-decomposable remainder honest.
   ═══════════════════════════════════════════════════════════════════════ */
.cin-confirm { width: 560px; max-width: 100%; background: var(--bg-panel); border: 1px solid var(--line-strong); border-radius: var(--r-sheet); box-shadow: var(--float); overflow: hidden; display: flex; flex-direction: column; }
.cin-confirm-h { display: flex; align-items: center; gap: 9px; padding: 12px 14px 11px; border-bottom: 1px solid var(--line-soft); }
.cin-confirm-h .t { font-size: 13.5px; color: var(--fg-strong); font-weight: 500; }
.cin-confirm-h .g { font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); border: 1px solid var(--line); border-radius: 2px; padding: 1px 5px; }
.cin-confirm-h .x { margin-left: auto; width: 20px; height: 20px; border: 0; background: transparent; color: var(--fg-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-1); }
.cin-confirm-h .x:hover { background: var(--bg-sub); color: var(--fg); }
.cin-confirm-b { padding: 14px; overflow-y: auto; max-height: 62vh; display: flex; flex-direction: column; gap: 12px; }
.cin-derived { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; color: var(--fg-dim); }
.cin-derived .ar { color: var(--teal-deep); }
.cin-propose-h { display: flex; align-items: center; gap: 8px; }
.cin-propose-h .l { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.cin-propose-h .sp { flex: 1; }
/* proposed element — accept / edit / remove per element */
.cin-pel { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-deep); padding: 9px 10px; }
.cin-pel.removed { opacity: .45; }
.cin-pel.removed .cin-el-h .fam { text-decoration: line-through; }
.cin-pel-acts { display: flex; align-items: center; gap: 5px; }
.cin-pel-btn { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-1); background: transparent; color: var(--fg-mute); cursor: pointer; font-family: var(--ui); font-size: 10.5px; }
.cin-pel-btn:hover { color: var(--fg); border-color: var(--line-strong); }
.cin-pel-btn.rm:hover { color: var(--st-danger); border-color: rgba(180,104,104,.4); }
/* scope proposal — same treatment */
.cin-scopeprop { display: flex; align-items: center; gap: 8px; }
.cin-scopeprop .cin-dial-seg button.on { color: var(--teal); }
/* the un-decomposable remainder (honest debt) */
.cin-remain { display: flex; flex-direction: column; gap: 6px; border: 1px dashed color-mix(in srgb, var(--cue-amber) 40%, transparent); border-radius: var(--r-2); padding: 9px 10px; background: var(--st-flagged-bg); }
.cin-remain .rh { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--cue-amber); }
.cin-remain .rt { font-size: 10.5px; color: var(--fg-mute); line-height: 1.45; }
.cin-remain .rt b { color: var(--fg); font-weight: 500; }
/* commit moment */
.cin-confirm-f { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-top: 1px solid var(--line-soft); background: var(--bg-deep); }
.cin-confirm-f .note { font-family: var(--mono); font-size: 8px; letter-spacing: .02em; color: var(--fg-dim); line-height: 1.4; flex: 1; }
.cin-confirm-f .note b { color: var(--fg-mute); font-weight: 500; }

/* the gate badge at capture — a note quietly routed to intent (I0), non-blocking */
.cin-gate { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border: 1px solid var(--teal-line); border-radius: var(--r-1); background: var(--teal-bg); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.cin-gate .d { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }

/* ═══════════════════════════════════════════════════════════════════════
   TRUE PROGRESS (§6.5 · feedback_true_progress_rule) — real progress, elegantly.
   never a bare "thinking…", never a fake spinner. rides the .sxb-boot family.
   ═══════════════════════════════════════════════════════════════════════ */
.cin-progress { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-deep); }
.cin-progress .ph { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9px; color: var(--fg-mute); }
.cin-progress .ph b { color: var(--fg-strong); }
.cin-progress .ph .el { margin-left: auto; font-family: var(--mono); font-size: 8px; color: var(--fg-dim); }
.cin-progress .ph .el b { color: var(--fg-mute); }
.cin-progress .segs { display: flex; gap: 3px; }
.cin-progress .segs i { flex: 1; height: 3px; background: var(--bg-app); border: 1px solid var(--line-soft); }
.cin-progress .segs i.done { background: var(--teal); border-color: var(--teal-deep); }
.cin-progress .segs i.run { background: linear-gradient(90deg, var(--teal) 55%, var(--bg-app) 55%); border-color: var(--teal-deep); }
.cin-progress .skrow { display: flex; align-items: center; gap: 8px; }
.cin-progress .skrow .c { width: 9px; height: 9px; border-radius: 2px; background: var(--bg-app); border: 1px solid var(--line-soft); flex-shrink: 0; }
.cin-progress .skrow .n { height: 8px; border-radius: 2px; background: var(--bg-app); border: 1px solid var(--line-soft); }
.cin-progress .hint { font-family: var(--mono); font-size: 7.5px; color: var(--fg-dim); line-height: 1.5; }

/* the coverage / enrichment read — a live, improving quantity (natural true-progress) */
.cin-cov { display: flex; flex-direction: column; gap: 8px; }
.cin-covrow { display: flex; align-items: center; gap: 9px; }
.cin-covrow .k { font-family: var(--mono); font-size: 8.5px; color: var(--fg-mute); width: 120px; flex-shrink: 0; }
.cin-covrow .bar { flex: 1; height: 4px; background: var(--bg-app); border: 1px solid var(--line-soft); position: relative; }
.cin-covrow .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--wave-fill); }
.cin-covrow .bar i.era { background: var(--teal); }
.cin-covrow .n { font-family: var(--mono); font-size: 8.5px; color: var(--fg); width: 66px; text-align: right; flex-shrink: 0; font-feature-settings: "tnum" 1; }
.cin-covnote { font-family: var(--mono); font-size: 7.5px; color: var(--fg-dim); line-height: 1.5; border-top: 1px dashed var(--line-soft); padding-top: 7px; }
.cin-covnote b { color: var(--fg-mute); font-weight: 500; }

/* generic section label + hairline used across surfaces */
.cin-lbl { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.cin-hr { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }

/* ═══ overlay stage layout — a browser SfxRoom frame carrying the why-chip ═══ */
.cin-poolwrap { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cin-poolhead { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-app); flex-wrap: wrap; }
.cin-poolhead .cuen { font-size: 12px; color: var(--fg-strong); }
.cin-poolhead .cuen .tc { font-family: var(--mono); font-size: 9px; color: var(--tc-green); margin-right: 7px; }
.cin-poolhead .sp { flex: 1; }
/* the filter-bar sibling row — proves the chip does NOT fork the bar (Q3) */
.cin-filterghost { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-bottom: 1px solid var(--line-soft); background: var(--bg-panel); }
.cin-filterghost .fg { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--r-2); font-size: 10.5px; color: var(--fg-mute); }
.cin-filterghost .fg svg { color: var(--fg-dim); }
.cin-filterghost .lock { margin-left: auto; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); border: 1px dashed var(--line-strong); border-radius: 2px; padding: 1px 5px; }

/* placement-compare tiles (Q3 exploration) */
.cin-compare { display: flex; flex-direction: column; gap: 12px; }
.cin-ctile { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-panel); overflow: hidden; }
.cin-ctile.rec { border-color: var(--teal-line); }
.cin-ctileh { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line-soft); background: var(--bg-app); }
.cin-ctileh .t { font-size: 11.5px; color: var(--fg-strong); }
.cin-ctileh .rectag { margin-left: auto; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; color: var(--teal); border: 1px solid var(--teal-deep); border-radius: 2px; padding: 1px 5px; }
.cin-ctileh .con { margin-left: auto; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; color: var(--cue-amber); border: 1px dashed color-mix(in srgb, var(--cue-amber) 45%, transparent); border-radius: 2px; padding: 1px 5px; }
.cin-ctile .cap { padding: 7px 11px 9px; border-top: 1px dashed var(--line-soft); font-size: 10px; color: var(--fg-dim); line-height: 1.5; }
.cin-ctile .cap b { color: var(--fg-mute); font-weight: 500; }
.cin-ctile .demo { padding: 12px; background: var(--bg-deep); }

/* ═══════════════════════════════════════════════════════════════════════
   PORT ADDITIONS (#4519 P3 / DH #561, 2026-07-17) — live-app mount surfaces
   the CD cook expressed inside demo shells. .cin-* namespace kept; CD absorbs
   on the next reconcile (#4495 discipline).
   ═══════════════════════════════════════════════════════════════════════ */
/* the Cue Room staged strip (rail mount) — collapsed, dashed = proposal-not-real */
.cin-stagedrail { margin: 0 10px 8px; }
.cin-stagedhead { display: flex; align-items: center; gap: 7px; width: 100%; height: 24px; padding: 0 8px;
  border: 1px dashed var(--line-strong); border-left: 2px dashed var(--teal-deep); border-radius: var(--r-2);
  background: var(--bg-deep); cursor: pointer; color: var(--fg-mute); }
.cin-stagedhead:hover { border-color: var(--line-strong); color: var(--fg); }
.cin-stagedhead .d { width: 5px; height: 5px; border-radius: 1px; background: var(--cue-amber); opacity: .7; flex-shrink: 0; }
.cin-stagedhead .l { font-family: var(--mono); font-size: 7px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.cin-stagedhead .c { font-family: var(--mono); font-size: 7.5px; color: var(--fg-mute); }
.cin-stagedhead .c b { color: var(--cue-amber); }
.cin-stagedhead .sp { flex: 1; }
.cin-stagedbody { margin-top: 6px; }
.cin-stagedbody .cin-cand { padding: 5px 8px; }
.cin-stagedmore { padding: 6px 9px; border-top: 1px dashed var(--line-soft); font-family: var(--mono); font-size: 7.5px; color: var(--fg-dim); }
.cin-stagedmore b { color: var(--fg-mute); }
.cin-stagedfoot { padding: 7px 9px; border-top: 1px dashed var(--line-soft); font-family: var(--mono); font-size: 7.5px; color: var(--fg-dim); line-height: 1.55; }
.cin-stagedfoot b { color: var(--fg-mute); }
/* Intent room as a live app tab (no CD demo chrome) */
.cin-livewrap .cin-roomh { border-bottom: 1px solid var(--line); }